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

BLOOOOOG

Browse source
This commit is contained in:
cirroskais 2024-04-21 06:48:39 -04:00
parent 02b7c819b0
commit 698e4bca67
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
5 changed files with 74 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/lib/blog.json
View file

@ -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" }
]

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

@ -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>

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

@ -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>

10
src/routes/+page.svelte
View file

@ -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>

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

@ -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>