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 components;
|
||||
@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
|
||||
// for information about these interfaces
|
||||
interface PostsObject {
|
||||
id: number;
|
||||
title: string;
|
||||
author: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
interface PageData {
|
||||
posts?: Array<PostsObject>;
|
||||
}
|
||||
// interface PageState {}
|
||||
// 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>
|
||||
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>
|
||||
|
||||
<div class="h-screen grid grid-cols-16 grid-rows-12">
|
||||
<div class="col-span-8 bg-red-100"></div>
|
||||
<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 class="w-screen h-[3rem]">
|
||||
<Header></Header>
|
||||
</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 {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
extend: {
|
||||
container: {
|
||||
center: true
|
||||
}
|
||||
},
|
||||
container: {
|
||||
padding: {
|
||||
DEFAULT: '1rem',
|
||||
sm: '2rem',
|
||||
lg: '4rem',
|
||||
xl: '5rem',
|
||||
'2xl': '6rem'
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue