brandan/personal-website
1
0
Fork 0
Code Pull requests Activity

BLOOOOOG 2

Browse source
This commit is contained in:
cirroskais 2024-04-21 07:22:26 -04:00
parent 698e4bca67
commit d78d1b8c29
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
8 changed files with 68 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/lib/blog.json
View file

@ -1,22 +1,5 @@
[
{ "id": 1, "title": "Hello, World!", "image": "/img/blogtest1.gif" },
{ "id": 2, "title": "Hardware", "image": "/img/blogtest2.gif" },
{ "id": 3, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 4, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 5, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 6, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 7, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 8, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 9, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 10, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 11, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 12, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 13, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 14, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 15, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 16, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 17, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 18, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 19, "title": "Test Post", "image": "/img/blogtest3.gif" },
{ "id": 20, "title": "Test Post", "image": "/img/blogtest3.gif" }
{ "id": 1, "slug": "hello-world", "title": "Hello, World!", "image": "/img/blogtest1.gif" },
{ "id": 2, "slug": "hardware", "title": "Hardware", "image": "/img/blogtest2.gif" },
{ "id": 3, "slug": "test-post", "title": "Test Post", "image": "/img/blogtest3.gif" }
]

5
src/lib/components/Blog/ListedPost.svelte
View file

@ -1,14 +1,13 @@
<script>
import { fade } from 'svelte/transition';
import Image from '../Image.svelte';
export let post = { id: 0, title: '', image: '' },
export let post = { id: 0, title: '', image: '', slug: '' },
index = 0;
</script>
<a
in:fade|global={{ delay: 50 * index }}
href="/blog/{post.id}"
href="/blog/{post.slug}"
class="shadow-lg transition-all focus:-translate-y-1 hover:-translate-y-1"
>
<div

2
src/lib/components/Blog/ScaffoldListedPost.svelte
View file

@ -4,6 +4,6 @@
export let index = 0;
</script>
<div in:fade|global={{ delay: 50 * index }} class="shadow-lg">
<div in:fade|global={{ delay: 50 * index }} class="hidden shadow-lg md:block">
<div class="w-full rounded-lg aspect-video bg-gray-500/10"></div>
</div>

12
src/lib/components/Icons/Back.svelte Normal file
View file

@ -0,0 +1,12 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-6 h-6 lucide lucide-chevron-left"><path d="m15 18-6-6 6-6" /></svg
>
Side by side

After

Width:  |  Height:  |  Size: 269 B

14
src/lib/components/Icons/First.svelte
View file

@ -1,14 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 261 B

14
src/lib/components/Icons/Last.svelte
View file

@ -1,14 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
/>
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 259 B

10
src/lib/components/Icons/Next.svelte Normal file
View file

@ -0,0 +1,10 @@
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-6 h-6 lucide lucide-chevron-right"><path d="m9 18 6-6-6-6" /></svg
>
Side by side

After

Width:  |  Height:  |  Size: 244 B

73
src/routes/blog/+page.svelte
View file

@ -4,26 +4,27 @@
import blog from '$lib/blog.json';
import ListedPost from '$lib/components/Blog/ListedPost.svelte';
import First from '$lib/components/Icons/First.svelte';
import Last from '$lib/components/Icons/Last.svelte';
import Back from '$lib/components/Icons/Back.svelte';
import Next from '$lib/components/Icons/Next.svelte';
import ScaffoldListedPost from '$lib/components/Blog/ScaffoldListedPost.svelte';
/** @type {any[]} */
let posts = loadPosts(0);
let pages = Math.ceil(blog.length / 12);
let pages = Math.ceil(blog.length / 16);
let selectedPage = writable(0);
/** @param {number} index */
function loadPosts(index) {
let page = Array.from(blog);
page.reverse();
page = page.slice(index * 12, (index + 1) * 12);
page = page.slice(index * 16, (index + 1) * 16);
while (page.length < 12) {
while (page.length < 16) {
page.push({
id: -1,
title: '',
image: ''
image: '',
slug: ''
});
}
@ -39,32 +40,38 @@
<title>{$page.data.discord?.username}/blog</title>
</svelte:head>
<div class="">
<div
class="grid gap-2 md:grid-cols-2 md:grid-rows-5 lg:grid-cols-3 lg:grid-rows-4 xl:grid-cols-4 xl:grid-rows-3"
>
{#key posts}
{#each posts as post, i}
{#if post.id === -1}
<ScaffoldListedPost index={i}></ScaffoldListedPost>
{:else}
<ListedPost {post} index={i}></ListedPost>
{/if}
{/each}
{/key}
</div>
<div>
<p>{pages} pages</p>
<p>page {$selectedPage + 1}</p>
<button
on:click={() => {
$selectedPage -= 1;
}}>back</button
>
<button
on:click={() => {
$selectedPage += 1;
}}>forward</button
>
<div class="flex flex-col w-full">
<div class="flex flex-col my-auto space-y-7">
<div class="grid gap-2 md:grid-rows-8 md:grid-cols-2 2xl:grid-cols-4 2xl:grid-rows-4">
{#key posts}
{#each posts as post, i}
{#if post.id === -1}
<ScaffoldListedPost index={i}></ScaffoldListedPost>
{:else}
<ListedPost {post} index={i}></ListedPost>
{/if}
{/each}
{/key}
</div>
<div class="flex mx-auto space-x-1 rounded-md bg-gray-500/10">
<button
class="p-2 my-auto transition-colors hover:text-cirro"
on:click={() => {
if ($selectedPage <= 0) return;
$selectedPage -= 1;
}}
>
<Back></Back>
</button>
<p class="p-2 my-auto">{$selectedPage + 1} / {pages}</p>
<button
class="p-2 my-auto transition-colors hover:text-cirro"
on:click={() => {
if ($selectedPage >= pages - 1) return;
$selectedPage += 1;
}}
><Next></Next>
</button>
</div>
</div>
</div>