blog stuff, footer, mobile accessibility?
This commit is contained in:
parent
e6e35b0289
commit
f47a49a06c
12 changed files with 38 additions and 192 deletions
5
src/lib/blog.json
Normal file
5
src/lib/blog.json
Normal 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" }
|
||||
]
|
|
@ -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>
|
||||
<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>
|
||||
</a>
|
||||
</div></a
|
||||
>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
});
|
||||
}
|
|
@ -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
BIN
static/buttons/twopaws.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 KiB |
BIN
static/img/blogtest1.gif
Normal file
BIN
static/img/blogtest1.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 MiB |
BIN
static/img/blogtest2.gif
Normal file
BIN
static/img/blogtest2.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.5 MiB |
BIN
static/img/blogtest3.gif
Normal file
BIN
static/img/blogtest3.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.7 MiB |
Loading…
Reference in a new issue