BLOOOOOG
This commit is contained in:
parent
02b7c819b0
commit
698e4bca67
5 changed files with 74 additions and 20 deletions
|
@ -1,5 +1,22 @@
|
|||
[
|
||||
{ "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": 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" }
|
||||
]
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
</script>
|
||||
|
||||
<a
|
||||
in:fade={{ delay: 50 * index }}
|
||||
in:fade|global={{ delay: 50 * index }}
|
||||
href="/blog/{post.id}"
|
||||
class="shadow-lg transition-all focus:-translate-y-1 hover:-translate-y-1"
|
||||
>
|
||||
|
@ -18,7 +18,6 @@
|
|||
background-size: cover;"
|
||||
>
|
||||
<div class="flex w-full h-full bg-gradient-to-t from-black to-transparent rounded-lg">
|
||||
<!-- <Image style="bg-black rounded-xl" src={post.image} alt="Blog post cover" /> -->
|
||||
<p class="z-10 pb-2 mt-auto ml-2 text-2xl">
|
||||
{post.title}
|
||||
</p>
|
||||
|
|
|
@ -1,3 +1,9 @@
|
|||
<div class="p-4 rounded-2xl bg-gray-500/10">
|
||||
<div class="mb-3 w-full h-full rounded-xl animate-pulse bg-neutral-200/20"></div>
|
||||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let index = 0;
|
||||
</script>
|
||||
|
||||
<div in:fade|global={{ delay: 50 * index }} class="shadow-lg">
|
||||
<div class="w-full rounded-lg aspect-video bg-gray-500/10"></div>
|
||||
</div>
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
<div class="hero w-full h-[calc(100vh-5.125rem)] rounded-lg mx-auto my-auto">
|
||||
<div class="flex p-4 h-full rounded-lg">
|
||||
<div class="my-auto md:w-fit md:mx-auto min-h-max">
|
||||
<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg">
|
||||
<div class="flex md:w-[42rem] p-2 bg-black/75 rounded-lg shadow-lg">
|
||||
<Image
|
||||
style="mr-2 h-20 w-20 rounded-full md:h-24 md:w-24"
|
||||
src="https://cdn.discordapp.com/avatars/{$page.data.discord.id}/{$page.data.discord
|
||||
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1"
|
||||
class="md:w-[42rem] flex place-content-center space-x-2 text-xl p-2 bg-black/75 rounded-lg mt-1 shadow-lg"
|
||||
>
|
||||
<a class="flex group" href="https://www.last.fm/user/{config.LASTFM}">
|
||||
<div
|
||||
|
@ -79,7 +79,7 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1">
|
||||
<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 shadow-lg">
|
||||
<div class="flex space-x-2.5">
|
||||
<Image
|
||||
style="w-24 h-24"
|
||||
|
@ -99,7 +99,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-2">
|
||||
<div
|
||||
class="md:w-[42rem] p-2 bg-black/75 rounded-lg mt-1 flex justify-center flex-wrap gap-2 shadow-lg"
|
||||
>
|
||||
<ImgButton href="https://cirroskais.xyz" src="/buttons/cirro.png"></ImgButton>
|
||||
<ImgButton href="https://twitter.com/Porpss1" src="/buttons/rovin.png"></ImgButton>
|
||||
<ImgButton href="https://split.pet" src="/buttons/split.png"></ImgButton>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import { page } from '$app/stores';
|
||||
import blog from '$lib/blog.json';
|
||||
|
@ -10,15 +9,30 @@
|
|||
import ScaffoldListedPost from '$lib/components/Blog/ScaffoldListedPost.svelte';
|
||||
|
||||
/** @type {any[]} */
|
||||
let posts = [];
|
||||
let posts = loadPosts(0);
|
||||
let pages = Math.ceil(blog.length / 12);
|
||||
let selectedPage = writable(0);
|
||||
|
||||
/** @param {number} index */
|
||||
async function loadPosts(index) {
|
||||
posts = blog;
|
||||
function loadPosts(index) {
|
||||
let page = Array.from(blog);
|
||||
page.reverse();
|
||||
page = page.slice(index * 12, (index + 1) * 12);
|
||||
|
||||
while (page.length < 12) {
|
||||
page.push({
|
||||
id: -1,
|
||||
title: '',
|
||||
image: ''
|
||||
});
|
||||
}
|
||||
|
||||
onMount(() => loadPosts(0));
|
||||
return page;
|
||||
}
|
||||
|
||||
selectedPage.subscribe((i) => {
|
||||
posts = loadPosts(i);
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
@ -29,12 +43,28 @@
|
|||
<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}
|
||||
<ListedPost {post} index={i}></ListedPost>
|
||||
{#if post.id === -1}
|
||||
<ScaffoldListedPost index={i}></ScaffoldListedPost>
|
||||
{:else}
|
||||
{#each Array(12).fill('') as _}
|
||||
<ScaffoldListedPost></ScaffoldListedPost>
|
||||
{/each}
|
||||
<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>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue