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

blog stuff, footer, mobile accessibility?

Browse source
This commit is contained in:
cirroskais 2024-04-21 05:30:50 -04:00
parent e6e35b0289
commit f47a49a06c
No known key found for this signature in database
GPG key ID: 5FC73EBF2678E33D
12 changed files with 38 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/lib/blog.json Normal file
View file

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

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

@ -1,18 +1,27 @@
<script>
import { fade } from 'svelte/transition';
import Image from '../Image.svelte';
export let post = { id: 0, title: '', author: '', image: '' },
export let post = { id: 0, title: '', image: '' },
index = 0;
</script>
<a in:fade={{ delay: 50 * index }} href="/blog/{post.id}">
<div class="p-4 rounded-2xl bg-gray-500/10">
<enhanced:img
class="mb-2 bg-black rounded-xl aspect-video"
src={post.image}
alt="Blog post cover"
/>
<p class="text-2xl">{post.title}</p>
<p class="text-white/50">By {post.author}</p>
</div>
</a>
<a
in:fade={{ delay: 50 * index }}
href="/blog/{post.id}"
class="shadow-lg transition-all hover:-translate-y-1"
>
<div
class="w-full rounded-lg aspect-video bg-gray-500/10"
style="background-image: url({post.image});
background-repeat: repeat;
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>
</div>
</div></a
>

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

@ -1,5 +1,3 @@
<div class="p-4 rounded-2xl bg-gray-500/10">
<div class="bg-neutral-200/20 h-[10.5rem] w-full rounded-xl animate-pulse mb-3"></div>
<div class="my-1 w-52 h-7 rounded-xl animate-pulse bg-neutral-200/20"></div>
<div class="w-20 h-5 rounded-lg animate-pulse bg-neutral-200/20"></div>
<div class="mb-3 w-full h-full rounded-xl animate-pulse bg-neutral-200/20"></div>
</div>

6
src/lib/components/Footer.svelte
View file

@ -10,7 +10,7 @@
<div class="flex py-2 w-full h-full shadow-lg bg-gray-500/10">
<div class="container flex">
<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
<div class="hidden flex-col flex-1 my-auto text-sm md:flex text-neutral-500">
<p class="font-bold">cirroskais.xyz ― cirro's website</p>
<div class="flex space-x-0.5">
<div class="my-auto w-5 h-5 font-bold">
@ -32,12 +32,12 @@
</p>
</div>
</div>
<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
<div class="hidden flex-col flex-1 my-auto text-sm xl:flex text-neutral-500">
<div class="mx-auto w-5 h-5 transition-colors hover:text-cirro">
<Heart></Heart>
</div>
</div>
<div class="flex flex-col flex-1 my-auto text-sm text-neutral-500">
<div class="hidden flex-col flex-1 my-auto text-sm md:flex text-neutral-500">
<div class="flex ml-auto space-x-1.5">
<p>Built with</p>
<a

6
src/routes/+layout.svelte
View file

@ -27,16 +27,16 @@
<meta name="theme-color" content="#c4bef3" />
</svelte:head>
<div class="w-screen h-[3.125rem] mb-2">
<div class="w-screen h-[3.125rem] mb-4">
<Header></Header>
</div>
{#key $page.url}
<div in:fade class="container mx-auto min-h-[calc(100vh-4.125rem)]">
<div in:fade class="container mx-auto min-h-[calc(100vh-5.125rem)]">
<slot />
</div>
{/key}
<div class="mt-2 w-screen">
<div class="hidden mt-4 w-screen md:block">
<Footer></Footer>
</div>

5
src/routes/+page.svelte
View file

@ -17,8 +17,8 @@
<title>{$page.data.discord?.username}/home</title>
</svelte:head>
<div class="hero w-full h-[calc(100vh-4.125rem)] rounded-lg mx-auto my-auto">
<div class="p-4 h-full rounded-lg md:flex">
<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">
<Image
@ -94,6 +94,7 @@
<ImgButton href="https://www.mozilla.org/en-US/firefox/new/" src="/buttons/firefox.gif"
></ImgButton>
<ImgButton src="/buttons/lol.gif"></ImgButton>
<ImgButton src="/buttons/twopaws.png"></ImgButton>
</div>
</div>
</div>

165
src/routes/api/blog/+server.js
View file

@ -1,165 +0,0 @@
import { error, json } from '@sveltejs/kit';
const posts = [
{
id: 1,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 1,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 2,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
},
{
id: 3,
title: 'ima cat',
author: 'meow',
image:
'https://media.discordapp.net/attachments/1151305170559434935/1160665206356197446/3.gif?ex=66256db5&is=6612f8b5&hm=03352e3de5d102f4f98a058f3a8ebba2056520770ac9001fc2ecc424abbd6953&'
}
];
const pages = Math.ceil(posts.length / 12);
/** @type { import("./$types").RequestHandler } */
export async function GET({ url }) {
const index = Number(url.searchParams.get('index'));
if (isNaN(index)) error(400, 'Invalid Index');
return json({
index,
pages,
posts: posts.slice(0, 0)
});
}

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

@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import { page } from '$app/stores';
import blog from '$lib/blog.json';
import ListedPost from '$lib/components/Blog/ListedPost.svelte';
import First from '$lib/components/Icons/First.svelte';
@ -14,10 +15,7 @@
/** @param {number} index */
async function loadPosts(index) {
const response = await fetch(`/api/blog?index=${index}`);
const body = await response.json();
posts = body.posts;
posts = blog;
}
onMount(() => loadPosts(0));

BIN
static/buttons/twopaws.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
static/img/blogtest1.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.2 MiB

BIN
static/img/blogtest2.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
static/img/blogtest3.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 MiB