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": 1, "slug": "hello-world", "title": "Hello, World!", "image": "/img/blogtest1.gif" },
{ "id": 2, "title": "Hardware", "image": "/img/blogtest2.gif" }, { "id": 2, "slug": "hardware", "title": "Hardware", "image": "/img/blogtest2.gif" },
{ "id": 3, "title": "Test Post", "image": "/img/blogtest3.gif" }, { "id": 3, "slug": "test-post", "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" }
] ]

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

@ -1,14 +1,13 @@
<script> <script>
import { fade } from 'svelte/transition'; 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; index = 0;
</script> </script>
<a <a
in:fade|global={{ delay: 50 * index }} 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" class="shadow-lg transition-all focus:-translate-y-1 hover:-translate-y-1"
> >
<div <div

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

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