yas
This commit is contained in:
parent
48b55f423d
commit
abcc3401a5
16 changed files with 233 additions and 12 deletions
|
@ -1,3 +1,9 @@
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background-color: #171717;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
11
src/app.d.ts
vendored
11
src/app.d.ts
vendored
|
@ -1,10 +1,19 @@
|
||||||
// See https://kit.svelte.dev/docs/types#app
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
// for information about these interfaces
|
// for information about these interfaces
|
||||||
|
interface PostsObject {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
author: string;
|
||||||
|
image: string;
|
||||||
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
namespace App {
|
namespace App {
|
||||||
// interface Error {}
|
// interface Error {}
|
||||||
// interface Locals {}
|
// interface Locals {}
|
||||||
// interface PageData {}
|
interface PageData {
|
||||||
|
posts?: Array<PostsObject>;
|
||||||
|
}
|
||||||
// interface PageState {}
|
// interface PageState {}
|
||||||
// interface Platform {}
|
// interface Platform {}
|
||||||
}
|
}
|
||||||
|
|
3
src/lib/components/Footer.svelte
Normal file
3
src/lib/components/Footer.svelte
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<div class="shadow-lg bg-gray-500/10 h-full w-full">
|
||||||
|
<p class="text-center py-5 text-white/50">Made with SvelteKit & Tailwind CSS</p>
|
||||||
|
</div>
|
14
src/lib/components/HeaderComponents/Header.svelte
Normal file
14
src/lib/components/HeaderComponents/Header.svelte
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<script>
|
||||||
|
import HeaderLink from './HeaderLink.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<div class="ml-auto flex space-x-4">
|
||||||
|
<HeaderLink href="/">Home</HeaderLink>
|
||||||
|
<HeaderLink href="/projects">Projects</HeaderLink>
|
||||||
|
<HeaderLink href="/blog">Blog</HeaderLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
17
src/lib/components/HeaderComponents/HeaderLink.svelte
Normal file
17
src/lib/components/HeaderComponents/HeaderLink.svelte
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
|
/** @type {string} */
|
||||||
|
export let href;
|
||||||
|
|
||||||
|
/** @type {boolean} */
|
||||||
|
let selected = false;
|
||||||
|
|
||||||
|
page.subscribe((pg) => {
|
||||||
|
selected = pg.url.pathname === href;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a {href} class="my-auto text-lg transition-all {selected && 'font-bold tracking-wider'}">
|
||||||
|
<slot />
|
||||||
|
</a>
|
15
src/lib/components/blog/ListedPost.svelte
Normal file
15
src/lib/components/blog/ListedPost.svelte
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
<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>
|
14
src/lib/components/icons/First.svelte
Normal file
14
src/lib/components/icons/First.svelte
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-6 h-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 261 B |
14
src/lib/components/icons/Last.svelte
Normal file
14
src/lib/components/icons/Last.svelte
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
class="w-6 h-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 259 B |
8
src/lib/config.js
Normal file
8
src/lib/config.js
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
export default {
|
||||||
|
DISCORD: '000000000000000000',
|
||||||
|
LASTFM: 'lastfm',
|
||||||
|
BLUESKY: 'n',
|
||||||
|
TWITTER: 'dope',
|
||||||
|
FEDIVERSE: 'idfk',
|
||||||
|
NOSTR: 'forgot how that worked'
|
||||||
|
};
|
|
@ -1,14 +1,23 @@
|
||||||
<script>
|
<script>
|
||||||
import '../app.css';
|
import '../app.css';
|
||||||
|
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
import Header from '$lib/components/HeaderComponents/Header.svelte';
|
||||||
|
import Footer from '$lib/components/Footer.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="h-screen grid grid-cols-16 grid-rows-12">
|
<div class="w-screen h-[3rem]">
|
||||||
<div class="col-span-8 bg-red-100"></div>
|
<Header></Header>
|
||||||
<div class="row-span-12 col-span-2 bg-black/50"></div>
|
|
||||||
<div class="col-span-4">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<div class="row-span-12 col-span-2 bg-black/50"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-screen bg-blue-100">footer shit</div>
|
{#key $page.url}
|
||||||
|
<div in:fade class="container mx-auto py-2 min-h-[calc(100vh-7rem)]">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
{/key}
|
||||||
|
|
||||||
|
<div class="w-screen h-[4rem]">
|
||||||
|
<Footer></Footer>
|
||||||
|
</div>
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
<h1 class="text-3xl font-bold underline">example page</h1>
|
<h1 class="">hello world</h1>
|
||||||
|
|
23
src/routes/blog/+page.server.js
Normal file
23
src/routes/blog/+page.server.js
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
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
|
||||||
|
};
|
||||||
|
}
|
78
src/routes/blog/+page.svelte
Normal file
78
src/routes/blog/+page.svelte
Normal file
|
@ -0,0 +1,78 @@
|
||||||
|
<script>
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
/** @type {import("./$types").PageData} */
|
||||||
|
export let data;
|
||||||
|
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import ListedPost from '$lib/components/blog/ListedPost.svelte';
|
||||||
|
import First from '$lib/components/icons/First.svelte';
|
||||||
|
import Last from '$lib/components/icons/Last.svelte';
|
||||||
|
|
||||||
|
let currentPage = Number($page.url.hash.slice(1) || '1');
|
||||||
|
if (isNaN(currentPage)) currentPage = 1;
|
||||||
|
if (currentPage > data.totalPages) currentPage = data.totalPages;
|
||||||
|
|
||||||
|
console.log(currentPage);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="">
|
||||||
|
<div class="grid grid-cols-3 grid-rows-3 gap-2">
|
||||||
|
{#each data.posts as post}
|
||||||
|
<ListedPost {post}></ListedPost>
|
||||||
|
{/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>
|
1
src/routes/projects/+page.svelte
Normal file
1
src/routes/projects/+page.svelte
Normal file
|
@ -0,0 +1 @@
|
||||||
|
<p>projects</p>
|
BIN
static/blogpost.png
Normal file
BIN
static/blogpost.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 222 KiB |
|
@ -2,10 +2,20 @@
|
||||||
export default {
|
export default {
|
||||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
container: {
|
container: {
|
||||||
center: true
|
center: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
container: {
|
||||||
|
padding: {
|
||||||
|
DEFAULT: '1rem',
|
||||||
|
sm: '2rem',
|
||||||
|
lg: '4rem',
|
||||||
|
xl: '5rem',
|
||||||
|
'2xl': '6rem'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
plugins: []
|
plugins: []
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue