Push killall -9 firefox
This commit is contained in:
parent
abcc3401a5
commit
3551afcb9d
10 changed files with 210 additions and 105 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
14
src/lib/components/Blog/ListedPost.svelte
Normal file
14
src/lib/components/Blog/ListedPost.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
export let post = { id: 0, title: '', author: '', image: '' },
|
||||
index = 0;
|
||||
</script>
|
||||
|
||||
<a in:fade={{ delay: 50 * index }} href="/blog/{post.id}">
|
||||
<div class="bg-gray-500/10 p-4 rounded-2xl">
|
||||
<img class="aspect-video bg-black rounded-xl mb-2" 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>
|
||||
5
src/lib/components/Blog/ScaffoldListedPost.svelte
Normal file
5
src/lib/components/Blog/ScaffoldListedPost.svelte
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<div class="bg-gray-500/10 p-4 rounded-2xl">
|
||||
<div class="bg-neutral-200/20 h-[10.5rem] w-full rounded-xl animate-pulse mb-3"></div>
|
||||
<div class="bg-neutral-200/20 h-7 w-52 rounded-xl animate-pulse my-1"></div>
|
||||
<div class="bg-neutral-200/20 h-5 w-20 rounded-lg animate-pulse"></div>
|
||||
</div>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<div class="shadow-lg bg-gray-500/10 h-full">
|
||||
<div class="container flex h-full w-full">
|
||||
<a href="/" class="font-bold text-xl my-auto tracking-wider">site name</a>
|
||||
<a href="/" class="font-bold text-2xl my-auto tracking-wider"> cirroskais </a>
|
||||
<div class="ml-auto flex space-x-4">
|
||||
<HeaderLink href="/">Home</HeaderLink>
|
||||
<HeaderLink href="/projects">Projects</HeaderLink>
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
<script>
|
||||
export let post = { id: 0, title: '', author: '', image: '' };
|
||||
</script>
|
||||
|
||||
<a href="/blog/{post.id}">
|
||||
<div class="bg-gray-500/10 p-4 rounded-2xl">
|
||||
<img
|
||||
class="aspect-video h-48 bg-black mx-auto rounded-xl mb-2"
|
||||
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>
|
||||
165
src/routes/api/blog/+server.js
Normal file
165
src/routes/api/blog/+server.js
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
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, 12)
|
||||
});
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
const posts = [
|
||||
{ id: 1, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 2, title: 'Some blog post', author: 'some author', image: '/blogpost.png' },
|
||||
{ id: 3, title: 'Some blog post', author: 'some author', image: '/blogpost.png' }
|
||||
];
|
||||
|
||||
const totalPages = 66; //Math.ceil(posts.length / 9);
|
||||
|
||||
/** @type {import('./$types').PageServerLoad} */
|
||||
export async function load({}) {
|
||||
return {
|
||||
posts: posts.slice(0, 9),
|
||||
totalPages
|
||||
};
|
||||
}
|
||||
|
|
@ -1,78 +1,37 @@
|
|||
<script>
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
/** @type {import("./$types").PageData} */
|
||||
export let data;
|
||||
|
||||
import { page } from '$app/stores';
|
||||
import ListedPost from '$lib/components/blog/ListedPost.svelte';
|
||||
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 ScaffoldListedPost from '$lib/components/Blog/ScaffoldListedPost.svelte';
|
||||
|
||||
let currentPage = Number($page.url.hash.slice(1) || '1');
|
||||
if (isNaN(currentPage)) currentPage = 1;
|
||||
if (currentPage > data.totalPages) currentPage = data.totalPages;
|
||||
/** @type {any[]} */
|
||||
let posts = [];
|
||||
let selectedPage = writable(0);
|
||||
|
||||
console.log(currentPage);
|
||||
/** @param {number} index */
|
||||
async function loadPosts(index) {
|
||||
const response = await fetch(`/api/blog?index=${index}`);
|
||||
const body = await response.json();
|
||||
|
||||
posts = body.posts;
|
||||
}
|
||||
|
||||
onMount(() => loadPosts(0));
|
||||
</script>
|
||||
|
||||
<div class="">
|
||||
<div class="grid grid-cols-3 grid-rows-3 gap-2">
|
||||
{#each data.posts as post}
|
||||
<ListedPost {post}></ListedPost>
|
||||
<div
|
||||
class="grid md:grid-cols-2 md:grid-rows-5 lg:grid-cols-3 lg:grid-rows-4 xl:grid-cols-4 xl:grid-rows-3 gap-2"
|
||||
>
|
||||
{#each posts as post, i}
|
||||
<ListedPost {post} index={i}></ListedPost>
|
||||
{:else}
|
||||
{#each Array(12).fill('') as _}
|
||||
<ScaffoldListedPost></ScaffoldListedPost>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex mt-2">
|
||||
<div class="flex mx-auto space-x-2">
|
||||
<button
|
||||
class="py-2 px-3 bg-gray-500/10 rounded-lg"
|
||||
on:click={() => {
|
||||
goto('#1');
|
||||
}}><First></First></button
|
||||
>
|
||||
<div class="bg-gray-500/10 rounded-lg">
|
||||
{#if data.totalPages === 1}
|
||||
<button class="py-2 px-4 bg-gray-500/30 rounded-lg">1</button>
|
||||
{:else if data.totalPages === 2}
|
||||
<button class="py-2 px-4 {currentPage === 1 && 'bg-gray-500/30 rounded-s-lg'}">1</button>
|
||||
<button class="py-2 px-4 {currentPage === 2 && 'bg-gray-500/30 rounded-e-lg'}">2</button>
|
||||
{:else if data.totalPages > 3}
|
||||
<button class="py-2 px-4 {currentPage === 1 && 'bg-gray-500/30 rounded-s-lg'}">
|
||||
{#if currentPage >= data.totalPages}
|
||||
{currentPage - 2}
|
||||
{:else}
|
||||
{Math.max(1, currentPage - 1)}
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
class="py-2 px-4 {currentPage !== 1 &&
|
||||
currentPage !== data.totalPages &&
|
||||
'bg-gray-500/30'}"
|
||||
>
|
||||
{#if currentPage >= data.totalPages}
|
||||
{currentPage - 1}
|
||||
{:else}
|
||||
{Math.max(2, currentPage)}
|
||||
{/if}
|
||||
</button>
|
||||
<button
|
||||
class="py-2 px-4 {currentPage === data.totalPages && 'bg-gray-500/30 rounded-e-lg'}"
|
||||
>
|
||||
{#if currentPage >= data.totalPages}
|
||||
{currentPage}
|
||||
{:else}
|
||||
{Math.max(3, currentPage + 1)}
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
class="py-2 px-3 bg-gray-500/10 rounded-lg"
|
||||
on:click={() => {
|
||||
goto('/blog#' + data.totalPages);
|
||||
}}><Last></Last></button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 222 KiB |
BIN
static/blogtest.jpg
Normal file
BIN
static/blogtest.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Loading…
Reference in a new issue