youwen5/site
1
0
Fork 0
mirror of https://github.com/youwen5/site.git synced 2024-11-24 17:33:51 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

added a bunch of stuff, forgot to commit, check description

Browse source 
- add unfinished mobile drawer
- massive blog formatting updates
- small style updates to main page, etc
This commit is contained in:
Youwen Wu 2024-04-03 20:25:56 -07:00
parent 448d8b3615
commit 34aff92c42
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
20 changed files with 388 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

7
package.json
View file

@ -48,11 +48,14 @@
"bits-ui": "^0.21.2", "bits-ui": "^0.21.2",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"marked": "^12.0.1", "marked": "^12.0.1",
"marked-alert": "^2.0.1",
"marked-katex-extension": "^5.0.1", "marked-katex-extension": "^5.0.1",
"mode-watcher": "^0.3.0", "mode-watcher": "^0.3.0",
"svelte-radix": "^1.1.0", "svelte-radix": "^1.1.0",
"svelte-sonner": "^0.3.21", "svelte-sonner": "^0.3.21",
"tailwind-merge": "^2.2.2", "tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1" "tailwind-variants": "^0.2.1",
} "vaul-svelte": "^0.3.0"
},
"packageManager": "pnpm@8.15.5+sha1.a58c038faac410c947dbdb93eb30994037d0fce2"
} }

11
src/app.html
View file

@ -2,7 +2,16 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link
rel="icon"
href="%sveltekit.assets%/favicon-light.ico"
media="(prefers-color-scheme: light)"
/>
<link
rel="icon"
href="%sveltekit.assets%/favicon-dark.ico"
media="(prefers-color-scheme: dark)"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
</head> </head>

2
src/lib/app.css
View file

@ -82,7 +82,7 @@
@layer components { @layer components {
.dots-background { .dots-background {
--dot-bg: theme('colors.background'); --dot-bg: theme('colors.background');
--dot-color: theme('colors.foreground'); --dot-color: theme('colors.muted.foreground');
--dot-size: 1px; --dot-size: 1px;
--dot-space: 22px; --dot-space: 22px;
background: background:

BIN
src/lib/assets/coredump-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

48
src/lib/assets/coredump-icon.svg Normal file
View file

@ -0,0 +1,48 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="272" width="392" viewBox="0 0 392 272" class="diagram" text-anchor="middle" font-family="monospace" font-size="13px" stroke-linecap="round">
<path d="M 112,256 L 232,16" fill="none" stroke="black"/>
<path d="M 160,256 L 280,16" fill="none" stroke="black"/>
<g class="text">
<text x="256" y="20">/////</text>
<text x="80" y="36">&lt;&lt;&lt;&lt;&lt;&lt;&lt;</text>
<text x="248" y="36">:::::</text>
<text x="312" y="36">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</text>
<text x="72" y="52">&lt;:::::&lt;</text>
<text x="240" y="52">:::::</text>
<text x="320" y="52">&gt;:::::&gt;</text>
<text x="64" y="68">&lt;:::::&lt;</text>
<text x="232" y="68">:::::</text>
<text x="328" y="68">&gt;:::::&gt;</text>
<text x="56" y="84">&lt;:::::&lt;</text>
<text x="224" y="84">:::::</text>
<text x="336" y="84">&gt;:::::&gt;</text>
<text x="48" y="100">&lt;:::::&lt;</text>
<text x="216" y="100">:::::</text>
<text x="344" y="100">&gt;:::::&gt;</text>
<text x="40" y="116">&lt;:::::&lt;</text>
<text x="208" y="116">:::::</text>
<text x="352" y="116">&gt;:::::&gt;</text>
<text x="32" y="132">&lt;:::::&lt;</text>
<text x="200" y="132">:::::</text>
<text x="360" y="132">&gt;:::::&gt;</text>
<text x="40" y="148">&lt;:::::&lt;</text>
<text x="192" y="148">:::::</text>
<text x="352" y="148">&gt;:::::&gt;</text>
<text x="48" y="164">&lt;:::::&lt;</text>
<text x="184" y="164">:::::</text>
<text x="344" y="164">&gt;:::::&gt;</text>
<text x="56" y="180">&lt;:::::&lt;</text>
<text x="176" y="180">:::::</text>
<text x="336" y="180">&gt;:::::&gt;</text>
<text x="64" y="196">&lt;:::::&lt;</text>
<text x="168" y="196">:::::</text>
<text x="328" y="196">&gt;:::::&gt;</text>
<text x="72" y="212">&lt;:::::&lt;</text>
<text x="160" y="212">:::::</text>
<text x="320" y="212">&gt;:::::&gt;</text>
<text x="80" y="228">&lt;&lt;&lt;&lt;&lt;&lt;&lt;</text>
<text x="152" y="228">:::::</text>
<text x="312" y="228">&gt;&gt;&gt;&gt;&gt;&gt;&gt;</text>
<text x="144" y="244">:::::</text>
<text x="136" y="260">/////</text>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

BIN
src/lib/assets/coredump-white.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.8 KiB

29
src/lib/components/Blog/Article.svelte Normal file
View file

@ -0,0 +1,29 @@
<script lang="ts">
import { ChevronRight } from 'svelte-radix';
export let content: string;
export let title: string;
export let description: string;
</script>
<article>
<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
<div class="overflow-hidden text-ellipsis whitespace-nowrap">The Coredump</div>
<ChevronRight class="h-4 w-4" />
<div class="font-medium text-foreground">{title}</div>
</div>
<div class="space-y-2">
<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
{title}
</h1>
{#if description}
<p class="text-balance text-lg text-muted-foreground">
{description}
</p>
{/if}
</div>
<div class="markdown-body mt-8">
{@html content}
</div>
</article>

49
src/lib/components/Navbar/Drawer.svelte
View file

@ -0,0 +1,49 @@
<script>
import Name from '$lib/assets/Name.svelte';
import { HamburgerMenu } from 'svelte-radix';
import { Drawer } from 'vaul-svelte';
import Separator from '../ui/separator/separator.svelte';
</script>
<Drawer.Root shouldScaleBackground direction="top">
<Drawer.Trigger class="md:hidden">
<HamburgerMenu class="icon border-1 border-primary" />
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay class="fixed inset-0 bg-black/40" />
<Drawer.Content
class="fixed top-0 left-0 right-0 mb-24 flex flex-col rounded-b-2xl z-50 bg-accent"
>
<div class="flex-1 rounded-b-2xl bg-accent p-4 shadow-xl dark:shadow-none">
<div class="mx-auto max-w-md">
<Drawer.Title class="mb-4 font-medium">
<span class="px-2 flex justify-center">
<Name href="/" width="80vw" height="auto" />
</span>
<Separator class="h-1 rounded-3xl mt-1" />
</Drawer.Title>
<p class="mb-2 text-zinc-600"></p>
<p class="mb-8 text-zinc-600">
It uses
<a
href="https://www.bits-ui.com/docs/components/dialog"
class="underline"
target="_blank"
>
Bits' Dialog primitive
</a>
under the hood and is inspired by
<a
href="https://twitter.com/devongovett/status/1674470185783402496"
class="underline"
target="_blank"
>
this tweet.
</a>
</p>
</div>
<div class="mx-auto mb-8 h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300" />
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>

26
src/lib/components/Navbar/Navbar.svelte
View file

@ -7,6 +7,8 @@
import { navigating } from '$app/stores'; import { navigating } from '$app/stores';
import Coredump from '$lib/assets/Coredump.svelte'; import Coredump from '$lib/assets/Coredump.svelte';
import Separator from '../ui/separator/separator.svelte'; import Separator from '../ui/separator/separator.svelte';
import * as Tooltip from '$lib/components/ui/tooltip';
import Drawer from './Drawer.svelte';
let current: 'blog' | 'about' | 'home' | 'portfolio' | string; let current: 'blog' | 'about' | 'home' | 'portfolio' | string;
@ -25,14 +27,15 @@
}); });
</script> </script>
<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-50 font-display"> <nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-40 font-display">
<div class="container mx-auto flex justify-between items-center h-full gap-4 overflow-x-auto"> <div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
<Drawer />
{#if current === 'blog'} {#if current === 'blog'}
<Coredump height="95%" href="/blog" /> <Coredump height="95%" href="/blog" />
{:else} {:else}
<Name height="100%" href="/" /> <Name height="100%" href="/" />
{/if} {/if}
<div class="flex gap-4 lg:gap-14 justify-around align-middle"> <div class="gap-4 lg:gap-14 justify-around align-middle hidden md:flex">
<a <a
href="/" href="/"
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-colors duration-200" class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-colors duration-200"
@ -53,12 +56,25 @@
class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200" class="text-lg sm:text-xl md:text-2xl font-medium text-primary px-4 py-1 rounded-3xl hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors duration-200"
class:selected={current === 'blog'}>Blog</a class:selected={current === 'blog'}>Blog</a
> >
<Tooltip.Root openDelay={500}>
<Button on:click={toggleMode} variant="outline" size="icon" class="my-1"> <Tooltip.Trigger asChild let:builder>
<Button
builders={[builder]}
on:click={toggleMode}
variant="outline"
size="icon"
class="my-1"
>
<Sun class="dark:hidden" /> <Sun class="dark:hidden" />
<Moon class="hidden dark:block" /> <Moon class="hidden dark:block" />
<span class="sr-only">Toggle theme</span> <span class="sr-only">Toggle theme</span>
</Button> </Button>
</Tooltip.Trigger>
<Tooltip.Content>
<p class="dark:hidden">Too bright? Switch to dark mode</p>
<p class="hidden dark:block">Too dark? Turn on the lights</p>
</Tooltip.Content>
</Tooltip.Root>
</div> </div>
</div> </div>
<Separator /> <Separator />

15
src/lib/components/ui/tooltip/index.ts Normal file
View file

@ -0,0 +1,15 @@
import { Tooltip as TooltipPrimitive } from "bits-ui";
import Content from "./tooltip-content.svelte";
const Root = TooltipPrimitive.Root;
const Trigger = TooltipPrimitive.Trigger;
export {
Root,
Trigger,
Content,
//
Root as Tooltip,
Content as TooltipContent,
Trigger as TooltipTrigger,
};

28
src/lib/components/ui/tooltip/tooltip-content.svelte Normal file
View file

@ -0,0 +1,28 @@
<script lang="ts">
import { Tooltip as TooltipPrimitive } from "bits-ui";
import { cn, flyAndScale } from "$lib/utils.js";
type $$Props = TooltipPrimitive.ContentProps;
let className: $$Props["class"] = undefined;
export let sideOffset: $$Props["sideOffset"] = 4;
export let transition: $$Props["transition"] = flyAndScale;
export let transitionConfig: $$Props["transitionConfig"] = {
y: 8,
duration: 150,
};
export { className as class };
</script>
<TooltipPrimitive.Content
{transition}
{transitionConfig}
{sideOffset}
class={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
className
)}
{...$$restProps}
>
<slot />
</TooltipPrimitive.Content>

149
src/lib/styles/markdown.css Normal file
View file

@ -0,0 +1,149 @@
.markdown-body {
h1,
h2 {
@apply text-3xl font-serif mb-5 mt-16;
}
h3,
h4 {
@apply text-2xl mb-5 mt-12 text-muted-foreground;
}
p {
@apply leading-relaxed my-2;
}
ol,
ul {
margin: 1em;
}
ol li ol,
ol li ul,
ul li ol,
ul li ul {
margin: 0 2em;
}
ol li p,
ul li p {
margin: 0;
}
dl {
font-family: monospace, monospace;
}
dl dt {
font-weight: bold;
}
dl dd {
margin: -1em 0 1em 1em;
}
img {
max-width: 100%;
display: block;
margin: 0 auto;
padding: 0.5em;
}
blockquote {
padding-left: 1em;
font-style: italic;
border-left: solid 1px #fa6432;
}
table {
font-size: 1rem;
text-align: left;
caption-side: bottom;
margin-bottom: 2em;
}
table * {
border: none;
}
table thead,
table tr {
display: table;
table-layout: fixed;
width: 100%;
}
table tr:nth-child(even) {
background-color: rgba(200, 200, 200, 0.2);
}
table tbody {
display: block;
max-height: 70vh;
overflow-y: auto;
}
table td,
table th {
padding: 0.25em;
}
table,
.highlight > pre,
pre.example {
max-height: 70vh;
margin: 1em 0;
padding: 1em;
overflow: auto;
font-size: 0.85rem;
font-family: monospace, monospace;
border: 1px dashed rgba(250, 100, 50, 0.5);
}
figure {
margin: 1em 0;
}
figure figcaption {
font-family: monospace, monospace;
font-size: 0.75em;
text-align: center;
color: grey;
}
/* KaTeX formatting */
.katex-display {
@apply max-w-4xl overflow-x-auto overflow-y-hidden;
}
/* Markdown Alert formatting */
.markdown-alert {
@apply border-l-4 rounded-xl px-4 py-1 my-4 shadow-md dark:shadow-none;
}
.markdown-alert.markdown-alert-caution {
@apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100;
}
.markdown-alert-title {
@apply flex items-center font-medium text-xl;
}
.markdown-alert-caution > .markdown-alert-title {
@apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100;
}
.markdown-alert.markdown-alert-tip {
@apply border-l-green-600 bg-green-100 dark:bg-green-900 dark:text-green-100;
}
.markdown-alert-tip > .markdown-alert-title {
@apply text-green-600 fill-green-600 dark:text-green-100 dark:fill-green-100;
}
.markdown-alert.markdown-alert-important {
@apply border-l-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-100;
}
.markdown-alert-important > .markdown-alert-title {
@apply text-purple-600 fill-purple-600 dark:text-purple-100 dark:fill-purple-100;
}
.markdown-alert.markdown-alert-note {
@apply border-l-blue-600 bg-blue-100 dark:bg-blue-900 dark:text-blue-100;
}
.markdown-alert-note > .markdown-alert-title {
@apply text-blue-600 fill-blue-600 dark:text-blue-100 dark:fill-blue-100;
}
.markdown-alert.markdown-alert-warning {
@apply border-l-yellow-600 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-100;
}
.markdown-alert-warning > .markdown-alert-title {
@apply text-yellow-600 fill-yellow-600 dark:text-yellow-100 dark:fill-yellow-100;
}
}

1
src/routes/blog/+layout.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import '$lib/styles/katex.min.css'; import '$lib/styles/katex.min.css';
import '$lib/styles/markdown.css';
</script> </script>
<slot /> <slot />

32
src/routes/blog/+page.svelte
View file

@ -4,6 +4,7 @@
import type { PageData } from './$types.js'; import type { PageData } from './$types.js';
// import { config } from '$lib/stores/index.js'; // import { config } from '$lib/stores/index.js';
import { cn } from '$lib/utils.js'; import { cn } from '$lib/utils.js';
import Article from '$lib/components/Blog/Article.svelte';
let doc = { let doc = {
title: 'Test Post', title: 'Test Post',
@ -22,33 +23,6 @@
<meta name="author" content="Youwen Wu" /> <meta name="author" content="Youwen Wu" />
</svelte:head> </svelte:head>
<main class="max-w-4xl my-8 mx-4 md:mx-auto"> <main class="max-w-4xl md:mx-auto mx-4 mt-8 mb-14">
<div class="w-full min-w-0 mb-4"> <Article title={doc.title} description={doc.description} content={markdown} />
<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
<div class="overflow-hidden text-ellipsis whitespace-nowrap">The Coredump</div>
<ChevronRight class="h-4 w-4" />
<div class="font-medium text-foreground">{doc.title}</div>
</div>
<div class="space-y-2">
<h1 class={cn('scroll-m-20 text-5xl font-bold font-serif tracking-tight')}>
{doc.title}
</h1>
{#if doc.description}
<p class="text-balance text-lg text-muted-foreground">
{doc.description}
</p>
{/if}
</div>
<!-- <div class="pb-12 pt-8 mx-auto"> -->
<!-- </div> -->
<!-- <div class="hidden text-sm xl:block">
<div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-4">
{#key $page.url.pathname}
<TableOfContents />
{/key}
</div>
</div> -->
</div>
{@html markdown}
</main> </main>

8
src/routes/blog/+page.ts
View file

@ -1,17 +1,25 @@
import type { PageLoad } from './$types.js'; import type { PageLoad } from './$types.js';
import { marked } from 'marked'; import { marked } from 'marked';
import markedKatex from 'marked-katex-extension'; import markedKatex from 'marked-katex-extension';
import markedAlert from 'marked-alert';
const options = { const options = {
throwOnError: false throwOnError: false
}; };
marked.use(markedKatex(options)); marked.use(markedKatex(options));
marked.use(markedAlert());
export const load: PageLoad = async ({ fetch }) => { export const load: PageLoad = async ({ fetch }) => {
try {
const data = await fetch('/test.md'); const data = await fetch('/test.md');
const markdown = await marked.parse(await data.text()); const markdown = await marked.parse(await data.text());
return { return {
markdown markdown
}; };
} catch (e) {
return {
markdown: `Error: ${e}`
};
}
}; };

BIN
static/favicon-dark.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/favicon-light.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/favicon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.5 KiB

12
static/test.md
View file

@ -9,6 +9,18 @@ We can approximate some non-polynomial functions by constructing a polynomial wi
> [!NOTE] > [!NOTE]
> In general, if $c \neq 0$, it's called a Taylor Polynomial. If $c = 0$, then it's a Maclaurin Polynomial. > In general, if $c \neq 0$, it's called a Taylor Polynomial. If $c = 0$, then it's a Maclaurin Polynomial.
> [!CAUTION]
> test lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> [!WARNING]
> test lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> [!TIP]
> test lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> [!IMPORTANT]
> test lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Consider $f(x) = e^x$. Let's find the best cubic approximation $P_3(x)$ for $f(x)$ at $c=0$. Consider $f(x) = e^x$. Let's find the best cubic approximation $P_3(x)$ for $f(x)$ at $c=0$.
$$ $$