mirror of
https://github.com/youwen5/site.git
synced 2024-11-24 17:33:51 -08:00
feat: add blog landing page
This commit is contained in:
parent
64e1ff17af
commit
bf8ff9026b
GPG key ID:
865658ED1FE61EC3
10 changed files with 120 additions and 45 deletions
|
|
@ -3,7 +3,8 @@
|
|||
|
||||
export let height = '192';
|
||||
export let width = 'auto';
|
||||
export let href: string;
|
||||
export let href: string = '/blog';
|
||||
export let transition: 'vertical' | 'horizontal' = 'horizontal';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
|
|
@ -17,7 +18,9 @@
|
|||
fill="currentColor"
|
||||
{height}
|
||||
{width}
|
||||
in:fly={{ x: -100, duration: 300, delay: 320 }}
|
||||
in:fly={transition === 'horizontal'
|
||||
? { x: -100, duration: 300, delay: 320 }
|
||||
: { y: -100, duration: 300 }}
|
||||
out:fly={{ x: 100, duration: 300 }}
|
||||
>
|
||||
<a {href}>
|
||||
|
|
|
|||
BIN
src/lib/assets/img/galaxy.jpg
Normal file
BIN
src/lib/assets/img/galaxy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 518 KiB |
29
src/lib/components/Blog/PostCard.svelte
Normal file
29
src/lib/components/Blog/PostCard.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script lang="ts">
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import Placeholder from '$lib/assets/img/galaxy.jpg';
|
||||
import Button from '../ui/button/button.svelte';
|
||||
|
||||
export let title: string;
|
||||
export let blurb: string;
|
||||
export let description: string;
|
||||
</script>
|
||||
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<h3 class="text-4xl font-serif font-bold mb-4">{title}</h3>
|
||||
<p class="text-muted-foreground text-xl">{blurb}</p>
|
||||
</Card.Header>
|
||||
<Card.Content class="grid grid-cols-3 gap-6">
|
||||
<img
|
||||
src={Placeholder}
|
||||
alt="Placeholder"
|
||||
class="col-span-3 md:col-span-1 rounded-2xl shadow-md"
|
||||
/>
|
||||
<div class="flex flex-col justify-around col-span-3 md:col-span-2 gap-4">
|
||||
<p class="text-primary/95 font-serif">{description}</p>
|
||||
<Button variant="outline" href="/blog/2024/test-post" class="text-xl flex-grow sm:flex-grow-0"
|
||||
>Read More</Button
|
||||
>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
0
src/lib/components/Blog/PostMetadata.svelte
Normal file
0
src/lib/components/Blog/PostMetadata.svelte
Normal file
|
|
@ -4,7 +4,7 @@
|
|||
import { Code } from 'svelte-radix';
|
||||
</script>
|
||||
|
||||
<footer class="h-24 px-2 mb-12 text-sm md:text-md xl:text-lg">
|
||||
<footer class="h-24 px-4 mb-12 text-sm md:text-md xl:text-lg">
|
||||
<Separator class="mb-4" />
|
||||
<div class="flex justify-center flex-col gap-4">
|
||||
<Socials center />
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@
|
|||
};
|
||||
|
||||
onMount(() => {
|
||||
console.log('test');
|
||||
return navigating.subscribe(updateCurrent);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
|
||||
import { setMode } from 'mode-watcher';
|
||||
|
||||
export let hideLabel: boolean = true;
|
||||
export let hideLabel: boolean = false;
|
||||
export let wide: boolean = false;
|
||||
|
||||
let modes = [
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<slot {builder} />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class={wide ? 'w-[80%]' : ''}>
|
||||
{#if hideLabel}
|
||||
{#if !hideLabel}
|
||||
<DropdownMenu.Label>Color Theme</DropdownMenu.Label>
|
||||
{/if}
|
||||
<DropdownMenu.Group>
|
||||
|
|
|
|||
|
|
@ -8,11 +8,6 @@
|
|||
import '@fontsource/merriweather/latin.css';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import { Toaster } from '$lib/components/ui/sonner';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(() => {
|
||||
console.log('Hello from the layout!');
|
||||
});
|
||||
</script>
|
||||
|
||||
<Toaster />
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@
|
|||
<h2>a hacker.</h2>
|
||||
</Typewriter>
|
||||
<br />
|
||||
<Typewriter mode="scramble" scrambleDuration={1000}>
|
||||
<p>I'm interested in systems programming, web design, data science, and statistics.</p>
|
||||
<Typewriter>
|
||||
<p>I'm building and designing software, for humans.</p>
|
||||
</Typewriter>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-4 justify-center my-8">
|
||||
|
|
|
|||
|
|
@ -6,48 +6,97 @@
|
|||
// import { config } from '$lib/stores/index.js';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import Separator from '$lib/components/ui/separator/separator.svelte';
|
||||
import Coredump from '$lib/assets/Coredump.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { onMount } from 'svelte';
|
||||
import PostCard from '$lib/components/Blog/PostCard.svelte';
|
||||
import { faker } from '@faker-js/faker';
|
||||
|
||||
let loaded = false;
|
||||
|
||||
onMount(() => {
|
||||
loaded = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Youwen Wu | The Coredump</title>
|
||||
<meta name="description" content="My blog on computer science, math, and more." />
|
||||
<meta name="description" content="My blog on computer science, math, games, art, and more." />
|
||||
<meta name="author" content="Youwen Wu" />
|
||||
</svelte:head>
|
||||
|
||||
<main class="dots-background">
|
||||
<div class="container max-w-5xl md:mx-auto mx-4 py-8 my-1">
|
||||
<h1 class="text-5xl md:text-6xl font-serif font-bold mt-14 sm:mt-18">The Coredump</h1>
|
||||
<p class="text-xl sm:text-2xl text-muted-foreground mt-6">
|
||||
My blog on computer science, math, and more.
|
||||
</p>
|
||||
<div class="grid grid-cols-3 mt-20 gap-2 sm:gap-4">
|
||||
<div class="col-span-2">
|
||||
<h2 class="text-3xl font-serif font-bold">Latest Posts</h2>
|
||||
<div class="grid grid-cols-1 gap-4 mt-4"></div>
|
||||
</div>
|
||||
<Card.Root class="col-span-1 bg-secondary border-primary/10 bg-opacity-75 backdrop-blur-sm">
|
||||
<Card.Header>
|
||||
<h2 class="text-3xl font-serif font-bold mb-8">Archive</h2>
|
||||
<h3 class="text-3xl font-serif font-medium text-muted-foreground">2024</h3>
|
||||
<Separator class="mt-2 mb-4" />
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<div class="max-w-5xl md:mx-auto py-8 my-1 container px-4">
|
||||
<!-- <h1 class="text-5xl md:text-6xl font-serif font-bold mt-14 sm:mt-18">The Coredump</h1> -->
|
||||
{#if loaded}
|
||||
<Coredump width="100%" height="auto" transition="vertical" />
|
||||
<p
|
||||
class="text-xl sm:text-2xl text-muted-foreground font-mono"
|
||||
in:fly={{ duration: 300, y: -50, delay: 200 }}
|
||||
>
|
||||
my blog on computer science, math, games, art, and more.
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-3 mt-20 gap-8">
|
||||
<div class="col-span-3 md:col-span-2">
|
||||
<h2 class="text-4xl font-serif font-bold" in:fly|global={{ y: -50, delay: 300 }}>
|
||||
Latest Posts
|
||||
</h2>
|
||||
{#each Array(5) as _, i}
|
||||
<div class="grid grid-cols-1 gap-2 mt-8">
|
||||
<h3 class="text-2xl font-serif font-bold">Post Title</h3>
|
||||
<p class="text-lg text-muted-foreground">
|
||||
An insightful and succinct blurb about the post.
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
|
||||
>Read more</a
|
||||
>
|
||||
<ChevronRight class="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 gap-4 mt-8"
|
||||
in:fly|global={{ x: -50, delay: 350 + i * 100 }}
|
||||
>
|
||||
<PostCard
|
||||
title={faker.hacker.noun() +
|
||||
' ' +
|
||||
faker.hacker.verb() +
|
||||
' ' +
|
||||
faker.hacker.adjective() +
|
||||
' ' +
|
||||
faker.hacker.noun()}
|
||||
blurb={faker.hacker.phrase()}
|
||||
description={faker.lorem.paragraphs(2)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
<div in:fly={{ y: -50, delay: 300 }} class="col-span-3 md:col-span-1">
|
||||
<Card.Root class="bg-primary-foreground backdrop-blur-sm border-primary/10">
|
||||
<Card.Header>
|
||||
<h2 class="text-3xl font-serif font-bold mb-6">Archive</h2>
|
||||
<h3 class="text-3xl font-serif font-medium text-muted-foreground">2024</h3>
|
||||
<Separator class="mt-4 bg-primary/10 h-1" />
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
{#each Array(5) as _, i}
|
||||
<div class="grid grid-cols-1 gap-2 mb-8">
|
||||
<h3 class="text-2xl font-serif font-bold">
|
||||
{faker.hacker.noun() +
|
||||
' ' +
|
||||
faker.hacker.verb() +
|
||||
' ' +
|
||||
faker.hacker.adjective() +
|
||||
' ' +
|
||||
faker.hacker.noun()}
|
||||
</h3>
|
||||
<p class="text-lg text-muted-foreground">
|
||||
{faker.hacker.phrase()}
|
||||
</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<a href="/blog/2021/01" class="text-primary hover:underline text-lg font-serif"
|
||||
>Read more</a
|
||||
>
|
||||
<ChevronRight class="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="h-screen"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue