BLOOOOOG 2
This commit is contained in:
parent
698e4bca67
commit
d78d1b8c29
8 changed files with 68 additions and 85 deletions
|
@ -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" }
|
||||
]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
12
src/lib/components/Icons/Back.svelte
Normal 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
|
||||
>
|
After Width: | Height: | Size: 269 B |
|
@ -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>
|
Before Width: | Height: | Size: 261 B |
|
@ -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>
|
Before Width: | Height: | Size: 259 B |
10
src/lib/components/Icons/Next.svelte
Normal file
10
src/lib/components/Icons/Next.svelte
Normal 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
|
||||
>
|
After Width: | Height: | Size: 244 B |
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue