From 70b0031c1079c09dc5ba67b290f2e68d2ac3ebe9 Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Sat, 13 Apr 2024 00:41:12 -0700 Subject: [PATCH] feat: add .blogignore and more formatting --- blog/2024/taylor-series/.blogignore | 0 blog/2024/taylor-series/content.md | 6 ++ blog/2024/test-post/content.md | 126 +++++++++++++++++++++++++++- blog/2024/test-post/post.toml | 18 ++-- src/lib/styles/markdown.pcss | 19 ++--- src/lib/utils/crawl.ts | 6 ++ 6 files changed, 154 insertions(+), 21 deletions(-) create mode 100644 blog/2024/taylor-series/.blogignore diff --git a/blog/2024/taylor-series/.blogignore b/blog/2024/taylor-series/.blogignore new file mode 100644 index 0000000..e69de29 diff --git a/blog/2024/taylor-series/content.md b/blog/2024/taylor-series/content.md index a395026..cf56305 100644 --- a/blog/2024/taylor-series/content.md +++ b/blog/2024/taylor-series/content.md @@ -144,10 +144,16 @@ $$ The worst case scenario is $z=1$. If $\displaystyle\frac{e}{(n+1)!} \le \frac{1}{1000000}$, we're all set. +![Test image](https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png) + Assume that $e \le 3$, which implies that if $\displaystyle\frac{3}{(n+1)!} \le \frac{1}{1000000}$, we're all set. After trying terms, we find that $n=9$ works. So $P_9(1) = 1 + 1 + \frac{1}{2!} + \frac{1}{3!} + \dots + \frac{1}{9!}$ is within $\frac{1}{1000000}$ of $e$. ```rust let mut var: u32 = 10030; + +fn takes_var(var: &mut u32) { + var += 1; +} ``` diff --git a/blog/2024/test-post/content.md b/blog/2024/test-post/content.md index 7927937..2234dbe 100644 --- a/blog/2024/test-post/content.md +++ b/blog/2024/test-post/content.md @@ -1,3 +1,125 @@ -## This is some test content +## Introduction -Whatever gets written here will be rendered statically! +Welcome! This blog is powered by a custom static site generator I made using SvelteKit. I'm working on upgrades ([see: lorelei](https://github.com/couscousdude/lorelei)), but in the meantime, check this out: + +> [!NOTE] +> GitHub-style notifications! + +> [!TIP] +> The full Commonmark spec is supported, and it's extended by the GFM spec + +## Tables! + +| First Header | Second Header | +| ------------ | ------------- | +| Content Cell | Content Cell | +| Content Cell | Content Cell | + +## More stuff! + +Notice the table of contents generated on the right (on desktop) or under the navbar (on mobile). It's auto-populated at build time from the content on the page. + +### Math + +Math is powered by $\KaTeX$, either inline, or in display mode: + +$$ +\int^\infty_{-\infty} e^{-x^2}\, dx = \sqrt{\tau / 2} +$$ + +## Post metadata + +Additional metadata is attached to each post via a `TOML` file, the Rustacean way. Here's a sample: + +```toml +#:schema ../../../post.schema.json +title = "Test Post" + +[manifest] +date = 2024-04-12T20:48:40.799Z +authors = ["Youwen Wu"] +blurb = "A display of all the blog's rendering capabilities!" +description = "A blog post to test all of the rendering capabilities, with remarks on the side." +type = "article" +highlight = true + +[manifest.tags] +primary = ["test", "first post", "formatting"] +secondary = ["blog", "placeholder"] + +[cover] +src = "https://images.unsplash.com/photo-1712230879699-e8a0a389da63?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" +alt = "A beautiful landscape" +caption = "This is the first post!" +``` + +Code highlighting is also supported, via `highlight.js`. + +The `unified` plugin ecosystem is used to transform markdown into the HTML in this document. Check out the parser [here](https://github.com/couscousdude/coredump/blob/main/src/lib/utils/parseMarkdown.ts). It handles all the parsing server-side at build time, so these posts are a collection of mostly static HTML. The formatting is done mostly with a [custom stylesheet](https://github.com/couscousdude/coredump/blob/main/src/lib/styles/markdown.pcss). + +## Raw source code of this post + +````markdown +## Introduction + +Welcome! This blog is powered by a custom static site generator I made using SvelteKit. I'm working on upgrades ([see: lorelei](https://github.com/couscousdude/lorelei)), but in the meantime, check this out: + +> [!NOTE] +> GitHub-style notifications! + +> [!TIP] +> The full Commonmark spec is supported, and it's extended by the GFM spec + +## Tables! + +| First Header | Second Header | +| ------------ | ------------- | +| Content Cell | Content Cell | +| Content Cell | Content Cell | + +## More stuff! + +Notice the table of contents generated on the right (on desktop) or under the navbar (on mobile). It's auto-populated at build time from the content on the page. + +### Math + +Math is powered by $\KaTeX$, either inline, or in display mode: + +$$ +\int^\infty_{-\infty} e^{-x^2}\, dx = \sqrt{\frac{\tau}{2}} +$$ + +## Post metadata + +Additional metadata is attached to each post via a `TOML` file, the Rustacean way. Here's a sample: + +```toml +#:schema ../../../post.schema.json +title = "Test Post" + +[manifest] +date = 2024-04-12T20:48:40.799Z +authors = ["Youwen Wu"] +blurb = "A display of all the blog's rendering capabilities!" +description = "A blog post to test all of the rendering capabilities, with remarks on the side." +type = "article" +highlight = true + +[manifest.tags] +primary = ["test", "first post", "formatting"] +secondary = ["blog", "placeholder"] + +[cover] +src = "https://images.unsplash.com/photo-1712230879699-e8a0a389da63?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" +alt = "A beautiful landscape" +caption = "This is the first post!" +``` +```` + +Code highlighting is also supported, via `highlight.js`. + +The `unified` plugin ecosystem is used to transform markdown into the HTML in this document. Check out the parser [here](https://github.com/couscousdude/coredump/blob/main/src/lib/utils/parseMarkdown.ts). It handles all the parsing server-side at build time, so these posts are a collection of mostly static HTML. The formatting is done mostly with a [custom stylesheet](https://github.com/couscousdude/coredump/blob/main/src/lib/styles/markdown.pcss). + +``` + +``` diff --git a/blog/2024/test-post/post.toml b/blog/2024/test-post/post.toml index 0fd352e..21d3833 100644 --- a/blog/2024/test-post/post.toml +++ b/blog/2024/test-post/post.toml @@ -1,19 +1,19 @@ #:schema ../../../post.schema.json -title = "My Awesome Blog Post" +title = "Test Post" [manifest] date = 2024-04-12T20:48:40.799Z authors = ["Youwen Wu"] -blurb = "A blog post about Rust and WebAssembly" -description = "A blog post about Rust and WebAssembly, and how to use it in web development. This post will cover the basics of Rust and WebAssembly, and how to use it in web development. We will also discuss the benefits of using Rust and WebAssembly, and how it can help you build faster and more efficient web applications." +blurb = "A display of all the blog's rendering capabilities!" +description = "A blog post to test all of the rendering capabilities, with remarks on the side." type = "article" -highlight = false +highlight = true [manifest.tags] -primary = ["Rust", "WebAssembly"] -secondary = ["Web Development", "Frontend"] +primary = ["test", "first post", "formatting"] +secondary = ["blog", "placeholder"] [cover] -src = "https://machinelearningmastery.com/wp-content/uploads/2021/07/tayloreq6.png" -alt = "A Rust and WebAssembly logo" -caption = "Rust and WebAssembly" +src = "https://images.unsplash.com/photo-1712230879699-e8a0a389da63?q=80&w=3132&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" +alt = "A beautiful landscape" +caption = "This is the first post! (image courtesy of unsplash)" diff --git a/src/lib/styles/markdown.pcss b/src/lib/styles/markdown.pcss index a040999..0b19699 100644 --- a/src/lib/styles/markdown.pcss +++ b/src/lib/styles/markdown.pcss @@ -30,6 +30,10 @@ margin: 0; } + a { + @apply text-blue-500 dark:text-blue-600 hover:underline; + } + dl { font-family: monospace; } @@ -41,14 +45,11 @@ } img { - max-width: 100%; - display: block; - margin: 0 auto; - padding: 0.5em; + @apply max-w-[80%] mx-auto my-8 rounded-xl shadow-lg; } blockquote:not(.markdown-alert) { - @apply border-l-2 border-l-muted-foreground my-4 pl-4 italic; + @apply border-l-4 border-l-muted-foreground my-4 pl-4 italic mx-4; } table { @@ -82,13 +83,11 @@ table, .highlight > pre, pre.example { + @apply p-4 border-2 border-primary/10 font-sans; max-height: 70vh; margin: 1em 0; - padding: 1em; overflow: auto; font-size: 0.85rem; - font-family: monospace; - border: 1px dashed rgba(250, 100, 50, 0.5); } figure { @@ -103,7 +102,7 @@ /* KaTeX formatting */ .katex-display { - @apply max-w-4xl overflow-x-auto overflow-y-hidden; + @apply max-w-3xl overflow-x-auto overflow-y-hidden; } /* Markdown Alert formatting */ @@ -162,6 +161,6 @@ height: 1em; } .hljs { - @apply mx-2 my-4 rounded-xl shadow-lg; + @apply my-4 rounded-xl shadow-lg max-w-3xl overflow-x-auto; } } diff --git a/src/lib/utils/crawl.ts b/src/lib/utils/crawl.ts index 6d0d29b..0108281 100644 --- a/src/lib/utils/crawl.ts +++ b/src/lib/utils/crawl.ts @@ -19,6 +19,12 @@ const crawl = async () => { for (const directory of directories) { const postPath = join(yearPath, directory); + try { + await readFile(join(postPath, '.blogignore'), 'utf-8'); + continue; + } catch (error) { + // If the file doesn't exist, continue with the rest of the code + } const postTomlPath = join(postPath, 'post.toml'); const contentPath = join(postPath, 'content.md');