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

- 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

BIN
bun.lockb

Binary file not shown.

View file

@ -48,11 +48,14 @@
"bits-ui": "^0.21.2",
"clsx": "^2.1.0",
"marked": "^12.0.1",
"marked-alert": "^2.0.1",
"marked-katex-extension": "^5.0.1",
"mode-watcher": "^0.3.0",
"svelte-radix": "^1.1.0",
"svelte-sonner": "^0.3.21",
"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"
}

View file

@ -2,7 +2,16 @@
<html lang="en">
<head>
<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" />
%sveltekit.head%
</head>

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

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>

After

Width:  |  Height:  |  Size: 2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

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>

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>

View file

@ -7,6 +7,8 @@
import { navigating } from '$app/stores';
import Coredump from '$lib/assets/Coredump.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;
@ -25,14 +27,15 @@
});
</script>
<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full z-50 font-display">
<div class="container mx-auto flex justify-between items-center h-full gap-4 overflow-x-auto">
<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-6 overflow-x-auto">
<Drawer />
{#if current === 'blog'}
<Coredump height="95%" href="/blog" />
{:else}
<Name height="100%" href="/" />
{/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
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"
@ -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:selected={current === 'blog'}>Blog</a
>
<Button on:click={toggleMode} variant="outline" size="icon" class="my-1">
<Sun class="dark:hidden" />
<Moon class="hidden dark:block" />
<span class="sr-only">Toggle theme</span>
</Button>
<Tooltip.Root openDelay={500}>
<Tooltip.Trigger asChild let:builder>
<Button
builders={[builder]}
on:click={toggleMode}
variant="outline"
size="icon"
class="my-1"
>
<Sun class="dark:hidden" />
<Moon class="hidden dark:block" />
<span class="sr-only">Toggle theme</span>
</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>
<Separator />

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,
};

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;
}
}

View file

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

View file

@ -4,6 +4,7 @@
import type { PageData } from './$types.js';
// import { config } from '$lib/stores/index.js';
import { cn } from '$lib/utils.js';
import Article from '$lib/components/Blog/Article.svelte';
let doc = {
title: 'Test Post',
@ -22,33 +23,6 @@
<meta name="author" content="Youwen Wu" />
</svelte:head>
<main class="max-w-4xl my-8 mx-4 md:mx-auto">
<div class="w-full min-w-0 mb-4">
<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 class="max-w-4xl md:mx-auto mx-4 mt-8 mb-14">
<Article title={doc.title} description={doc.description} content={markdown} />
</main>

View file

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

BIN
static/favicon-dark.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/favicon-light.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -9,6 +9,18 @@ We can approximate some non-polynomial functions by constructing a polynomial wi
> [!NOTE]
> 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$.
$$