youwen5/blog
1
0
Fork 0
mirror of https://github.com/youwen5/blog.git synced 2024-11-24 18:03:50 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Deploy to GitHub pages

Browse source
This commit is contained in:
github-actions[bot] 2024-09-29 02:31:48 +00:00 committed by GitHub
commit 3d8d64f161
16 changed files with 742 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CNAME Normal file
View file

@ -0,0 +1 @@
blog.youwen.dev

122
atom.xml Normal file
View file

@ -0,0 +1,122 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>gradient ascent</title>
<link href="https://blog.youwen.dev/atom.xml" rel="self" />
<link href="https://blog.youwen.dev" />
<id>https://blog.youwen.dev/atom.xml</id>
<author>
<name>Youwen Wu</name>
<email>youwenw@gmail.com</email>
</author>
<updated>2024-05-25T12:00:00Z</updated>
<entry>
<title>why I made my blog in haskell</title>
<link href="https://blog.youwen.dev/why-i-made-my-blog-in-haskell.html" />
<id>https://blog.youwen.dev/why-i-made-my-blog-in-haskell.html</id>
<published>2024-05-25T00:00:00Z</published>
<updated>2024-05-25T12:00:00Z</updated>
<summary type="html"><![CDATA[<article>
<header>
<h1 class="text-4xl">
<a href="./why-i-made-my-blog-in-haskell.html">why I made my blog in haskell</a>
</h1>
<p
class="mb-1 mt-2 italic font-light text-lg text-accent-light dark:text-accent-dark"
>
a purely functional...blog?
</p>
<div class="mt-2">2024-05-25</div>
<div class="mt-1 text-sm">
(last updated: 2024-05-25T12:00:00Z)
</div>
</header>
<main class="post mt-4"><p>Welcome! This is the first post on <em>gradient ascent</em> and also one that tests all
of the features.</p>
<p><img
alt="gradient ascent"
src="./images/gradient-ascent.jpg"
style="height: 200px; width: 100%; object-fit: cover"
/></p>
<p>I’ll be writing about computers, code, math, video games, and whatever else
here.</p>
<blockquote>
<p>A monad is just a monoid in the category of endofunctors, what’s the problem?</p>
</blockquote>
<h2 id="haskell">haskell?</h2>
<p>This entire blog is generated with <a href="https://jaspervdj.be/hakyll/">hakyll</a>. It’s
a library for generating static sites for Haskell, a purely functional
programming language. It’s a <em>library</em> because it doesn’t come with as many
batteries included as tools like Hugo or Astro. You set up most of the site
yourself by calling the library from Haskell.</p>
<p>Here’s a brief excerpt:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode haskell"><code class="sourceCode haskell"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ot">main ::</span> <span class="dt">IO</span> ()</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>main <span class="ot">=</span> hakyllWith config <span class="op">$</span> <span class="kw">do</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> forM_</span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> [ <span class="st">&quot;CNAME&quot;</span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;favicon.ico&quot;</span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;robots.txt&quot;</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;_config.yml&quot;</span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;images/*&quot;</span></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;out/*&quot;</span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;fonts/*&quot;</span></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a> ]</span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a> <span class="op">$</span> \f <span class="ot">-&gt;</span> match f <span class="op">$</span> <span class="kw">do</span></span>
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a> route idRoute</span>
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a> compile copyFileCompiler</span></code></pre></div>
<p>The code highlighting is also generated by hakyll.</p>
<hr />
<h2 id="why">why?</h2>
<p>Haskell is a purely functional language with no mutable state. Its syntax
actually makes it pretty elegant for declaring routes and “rendering” pipelines.</p>
<p>I originally wanted to build this entire blog myself. I had a working version
with the Svelte framework, complete with GFM rendering, table of contents, KaTeX
math, code highlighting, static generation, and other goodies. However, it
seemed like a little too much work to maintain. I switched to hakyll because</p>
<ol>
<li>Haskell is cool.</li>
<li>It comes with enough features that I don’t feel like I have to build
everything from scratch.</li>
<li>It comes with Pandoc, a Haskell library for converting between markdown
formats. It’s probably more powerful than anything you could do in <code>nodejs</code>.
It renders all of the markdown to HTML as well as the math.
<ol>
<li>It supports KaTeX as well as MathML. I’m a little disappointed with the
KaTeX though. It doesn’t directly render it, but simply injects the KaTeX
files and renders it client-side.</li>
</ol></li>
</ol>
<h3 id="speaking-of-math">speaking of math</h3>
<p>We can have math inline, like so:
<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msubsup><mo>∫</mo><mi>∞</mi><mi>∞</mi></msubsup><mspace width="0.167em"></mspace><msup><mi>e</mi><mrow><mo>−</mo><msup><mi>x</mi><mn>2</mn></msup></mrow></msup><mspace width="0.167em"></mspace><mi>d</mi><mi>x</mi><mo>=</mo><msqrt><mi>π</mi></msqrt></mrow><annotation encoding="application/x-tex">\int_\infty^\infty \, e^{-x^2}\,dx = \sqrt{\pi}</annotation></semantics></math>. This site ships semantic
MathML math with its HTML, and the MathJax script to the client.</p>
<p>It’d be nice if MathML could just be used and supported across all browsers, but
unfortunately we still aren’t quite there yet. Firefox is the only one where
everything looks 80% of the way to LaTeX. On Safari and Chrome, even simple
equations like <math display="inline" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><msqrt><mi>π</mi></msqrt><annotation encoding="application/x-tex">\sqrt{\pi}</annotation></semantics></math> render improperly.</p>
<p>Pros of MathML:</p>
<ul>
<li>A little more accessible</li>
<li>Can be rendered without additional stylesheets. I just installed the Latin
Modern font, but this isn’t even really necessary</li>
<li>Built-in to most browsers (#UseThePlatform)</li>
</ul>
<p>Cons:</p>
<ul>
<li>Isn’t fully standardized. Might look different on different browsers</li>
<li>Rendering quality isn’t as good as KaTeX</li>
</ul>
<p>This site has MathJax render all of the math so it looks nice and standardized
across browsers, but the math still displays regardless (like say if MathJax
couldn’t load due to slow network) because of MathML. Best of both worlds.</p>
<p>Let’s try it now. Here’s a simple theorem:</p>
<p><math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>a</mi><mi>n</mi></msup><mo>+</mo><msup><mi>b</mi><mi>n</mi></msup><mo>≠</mo><msup><mi>c</mi><mi>n</mi></msup><mspace width="0.167em"></mspace><mo>∀</mo><mspace width="0.167em"></mspace><mrow><mo stretchy="true" form="prefix">{</mo><mi>a</mi><mo>,</mo><mspace width="0.167em"></mspace><mi>b</mi><mo>,</mo><mspace width="0.167em"></mspace><mi>c</mi><mo stretchy="true" form="postfix">}</mo></mrow><mo>∈</mo><mstyle mathvariant="double-struck"><mi>ℤ</mi></mstyle><mo>∧</mo><mi>n</mi><mo>≥</mo><mn>3</mn></mrow><annotation encoding="application/x-tex">
a^n + b^n \ne c^n \, \forall\,\left\{ a,\,b,\,c \right\} \in \mathbb{Z} \land n \ge 3
</annotation></semantics></math></p>
<p>The proof is trivial and will be left as an exercise to the reader.</p>
<h2 id="seems-a-little-overengineered">seems a little overengineered</h2>
<p>Probably is. Not as much as the old one, though.</p></main>
</article>
]]></summary>
</entry>
</feed>

1
css/code.css Normal file
View file

@ -0,0 +1 @@
pre>code.sourceCode{white-space:pre;position:relative}pre>code.sourceCode>span{line-height:1.25}pre>code.sourceCode>span:empty{height:1.2em}.sourceCode{overflow:visible}code.sourceCode>span{color:inherit;text-decoration:inherit}div.sourceCode{margin:1em 0}pre.sourceCode{margin:0}@media screen{div.sourceCode{overflow:auto}}@media print{pre>code.sourceCode{white-space:pre-wrap}pre>code.sourceCode>span{text-indent:-5em;padding-left:5em}}pre.numberSource code{counter-reset:source-line 0}pre.numberSource code>span{position:relative;left:-4em;counter-increment:source-line}pre.numberSource code>span>a:first-child::before{content:counter(source-line);position:relative;left:-1em;text-align:right;vertical-align:baseline;border:none;display:inline-block;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 4px;width:4em;background-color:#232629;color:#7a7c7d}pre.numberSource{margin-left:3em;border-left:1px solid #7a7c7d;padding-left:4px}div.sourceCode{color:#cfcfc2;background-color:#232629}@media screen{pre>code.sourceCode>span>a:first-child::before{text-decoration:underline}}code span{color:#cfcfc2}code span.al{color:#95da4c;background-color:#4d1f24;font-weight:bold}code span.an{color:#3f8058}code span.at{color:#2980b9}code span.bn{color:#f67400}code span.bu{color:#7f8c8d}code span.cf{color:#fdbc4b;font-weight:bold}code span.ch{color:#3daee9}code span.cn{color:#27aeae;font-weight:bold}code span.co{color:#7a7c7d}code span.cv{color:#7f8c8d}code span.do{color:#a43340}code span.dt{color:#2980b9}code span.dv{color:#f67400}code span.er{color:#da4453;text-decoration:underline}code span.ex{color:#0099ff;font-weight:bold}code span.fl{color:#f67400}code span.fu{color:#8e44ad}code span.im{color:#27ae60}code span.in{color:#c45b00}code span.kw{color:#cfcfc2;font-weight:bold}code span.op{color:#cfcfc2}code span.ot{color:#27ae60}code span.pp{color:#27ae60}code span.re{color:#2980b9;background-color:#153042}code span.sc{color:#3daee9}code span.ss{color:#da4453}code span.st{color:#f44f4f}code span.va{color:#27aeae}code span.vs{color:#da4453}code span.wa{color:#da4453}

BIN
favicon.ico Normal file
View file

Binary file not shown.

BIN
images/finally-over-balcony2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1 MiB

BIN
images/finally-over-itte.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
images/gradient-ascent.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
images/robert-pearce-UwHN0jU_YqQ-unsplash-800w.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
images/waiheke-stony-batter.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 256 KiB

200
index.html Normal file
View file

@ -0,0 +1,200 @@
<!doctype html>
<html lang="en">
<head>
<title>youwen wu | gradient ascent</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="a weblog about computers, math, hacks, games, and life" />
<meta property="og:site_name" content="gradient ascent" />
<meta property="og:title" content="youwen wu" />
<meta property="og:url" content="https://blog.youwen.dev/index.html" />
<meta property="og:description" content="a weblog about computers, math, hacks, games, and life" />
<meta property="og:image" content="https://blog.youwen.dev./images/gradient-ascent.jpg" />
<meta property="og:type" content="website" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://blog.youwen.dev./images/gradient-ascent.jpg" />
<meta property="twitter:site" content="gradient ascent" />
<meta property="twitter:title" content="youwen wu" />
<meta property="twitter:description" content="a weblog about computers, math, hacks, games, and life" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="canonical" href="https://blog.youwen.dev/index.html" />
<link
rel="alternate"
href="./atom.xml"
title="gradient ascent"
type="application/atom+xml"
/>
<link
rel="alternate"
href="./rss.xml"
title="gradient ascent"
type="application/rss+xml"
/>
<link rel="stylesheet" href="./out/bundle.css" />
<link rel="stylesheet" href="./css/code.css" />
<script
defer
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"
></script>
<script>
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark")
} else {
document.documentElement.classList.remove("dark")
}
window.onload = () => {
var themeButton = document.getElementById("theme-toggle")
const theme = localStorage.getItem("theme")
if (theme === "light") {
themeButton.innerText = "theme: light"
} else if (theme === "dark") {
themeButton.innerText = "theme: dark"
} else {
themeButton.innerText = "theme: system"
}
var fontButton = document.getElementById("font-toggle")
const font = localStorage.getItem("font")
if (font && font === "serif") {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
document.body.classList.add("font-serif")
fontButton.innerText = "serif"
}
if (font && font === "sans") {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
document.body.classList.add("font-sans")
fontButton.innerText = "sans"
}
if (!font) {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
fontButton.innerText = "serif"
}
}
MathJax = {
startup: {
ready: function () {
MathJax.startup.defaultReady()
MathJax.startup.promise.then(function () {
MathJax.mathml2svgPromise(document.body)
})
},
},
}
</script>
</head>
<body
class="container max-w-2xl mx-auto px-4 transition-colors duration-[2s]"
>
<header class="mt-14 md:mt-24 mb-14">
<div class="inline-flex items-center w-full">
<h1 class="text-4xl md:text-5xl font-serif font-medium">
<a
href="/"
class="dark:hover:text-muted-dark hover:text-muted-light transition-all duration-500 text-nowrap tracking-wide hover:tracking-wider"
>Gradient Ascent</a
>
</h1>
<div
class="w-full flex-grow flex-shrink rounded-lg h-1 bg-muted-light dark:bg-muted-dark mx-4"
></div>
</div>
<p class="mt-8 mb-3 px-1 italic font-light">
a web-log about computers, math, hacks, games, and life.
</p>
<a class="text-sm external-link" href="https://youwen.dev"
><em>by </em>Youwen Wu</a
>
<span class="ml-2 font-serif">|</span>
<button
id="theme-toggle"
class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
></button>
<span class="ml-2 font-serif">|</span>
<button
id="font-toggle"
class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
></button>
</header>
<main>
<section>
<h2 class="text-3xl">Latest</h2>
<hr
class="sm:mr-2 max-w-sm border-0 h-0.5 dark:bg-muted-dark bg-muted-light rounded-md mt-2"
/>
<ul class="mt-6 space-y-4 md:space-y-8">
<li class="group">
<div class="rounded-md p-2">
<a
href="./why-i-made-my-blog-in-haskell.html"
class="w-fit dark:group-hover:text-muted-dark group-hover:text-muted-light transition-colors"
>
<h3 class="text-2xl">why I made my blog in haskell</h3>
<p
class="italic text-accent-light dark:text-accent-dark my-1 group-hover:dark:text-muted-dark group-hover:text-muted-light transition-colors"
>
a purely functional...blog?
</p>
<p class="text-sm">2024-05-25</p>
</a>
</div>
<hr
class="max-w-[200px] border-0 h-1 dark:bg-accent-dark bg-accent-light rounded-lg px-2 group-hover:max-w-[250px] dark:group-hover:bg-secondary-dark group-hover:bg-secondary-light transition-all duration-400"
/>
</li>
</ul>
</section>
</main>
<footer class="mt-14 md:mt-24 pb-12 font-light">
<hr
class="border-0 dark:bg-muted-dark bg-muted-light rounded-xl h-0.5 mb-4"
/>
<p class="text-sm leading-relaxed">
&copy; 2024 Youwen Wu. Generated by
<a
href="https://jaspervdj.be/hakyll/"
class="external-link"
target="__blank"
>Hakyll.</a
>
View the source
<a
href="https://github.com/couscousdude/blog"
class="external-link"
target="__blank"
>on GitHub.</a
>
</p>
<p class="text-sm leading-relaxed mt-2">
Content freely available under
<a
class="external-link"
target="__blank"
href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en"
><span class="smallcaps">CC BY-NC-SA</span> 4.0</a
>
unless otherwise noted.
</p>
</footer>
<script defer src="./out/bundle.js"></script>
</body>
</html>

1
out/bundle.css Normal file
View file

File diff suppressed because one or more lines are too long

1
out/bundle.js Normal file
View file

@ -0,0 +1 @@
const e=window.matchMedia("(prefers-color-scheme: dark)").matches,t=()=>{document.documentElement.classList.remove("dark")},s=()=>{document.documentElement.classList.add("dark")};let o="dark"===localStorage.getItem("theme")?2:"light"===localStorage.getItem("theme")?1:0;const a=document.getElementById("theme-toggle");a.addEventListener("click",(()=>{switch(o=(o+1)%3,o){case 0:localStorage.removeItem("theme"),e?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),a.innerText="theme: system";break;case 1:e?(localStorage.setItem("theme","light"),t(),a.innerText="theme: light"):(localStorage.setItem("theme","dark"),s(),a.innerText="theme: dark");break;case 2:e?(localStorage.setItem("theme","dark"),s(),a.innerText="theme: dark"):(localStorage.setItem("theme","light"),t(),a.innerText="theme: light")}}));const n=()=>{document.body.classList.remove("font-sans"),document.body.classList.remove("font-serif")},m=e=>{e&&"serif"===e&&(n(),document.body.classList.add("font-serif")),e&&"sans"===e&&(n(),document.body.classList.add("font-sans")),e||n()};let c=localStorage.getItem("font");m();const l=document.getElementById("font-toggle");l.addEventListener("click",(()=>{c=localStorage.getItem("font"),"sans"===c?(c="serif",l.innerText="serif",localStorage.setItem("font","serif")):(c="sans",l.innerText="sans",localStorage.setItem("font","sans")),m(c)}));

2
robots.txt Normal file
View file

@ -0,0 +1,2 @@
User-agent: *
Disallow:

122
rss.xml Normal file
View file

@ -0,0 +1,122 @@
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<channel>
<title>gradient ascent</title>
<link>https://blog.youwen.dev</link>
<description><![CDATA[on computers, hacks, math, and life]]></description>
<atom:link href="https://blog.youwen.dev/rss.xml" rel="self"
type="application/rss+xml" />
<lastBuildDate>2024-05-25T12:00:00Z</lastBuildDate>
<item>
<title>why I made my blog in haskell</title>
<link>https://blog.youwen.dev/why-i-made-my-blog-in-haskell.html</link>
<description><![CDATA[<article>
<header>
<h1 class="text-4xl">
<a href="./why-i-made-my-blog-in-haskell.html">why I made my blog in haskell</a>
</h1>
<p
class="mb-1 mt-2 italic font-light text-lg text-accent-light dark:text-accent-dark"
>
a purely functional...blog?
</p>
<div class="mt-2">2024-05-25</div>
<div class="mt-1 text-sm">
(last updated: 2024-05-25T12:00:00Z)
</div>
</header>
<main class="post mt-4"><p>Welcome! This is the first post on <em>gradient ascent</em> and also one that tests all
of the features.</p>
<p><img
alt="gradient ascent"
src="./images/gradient-ascent.jpg"
style="height: 200px; width: 100%; object-fit: cover"
/></p>
<p>I’ll be writing about computers, code, math, video games, and whatever else
here.</p>
<blockquote>
<p>A monad is just a monoid in the category of endofunctors, what’s the problem?</p>
</blockquote>
<h2 id="haskell">haskell?</h2>
<p>This entire blog is generated with <a href="https://jaspervdj.be/hakyll/">hakyll</a>. It’s
a library for generating static sites for Haskell, a purely functional
programming language. It’s a <em>library</em> because it doesn’t come with as many
batteries included as tools like Hugo or Astro. You set up most of the site
yourself by calling the library from Haskell.</p>
<p>Here’s a brief excerpt:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode haskell"><code class="sourceCode haskell"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ot">main ::</span> <span class="dt">IO</span> ()</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>main <span class="ot">=</span> hakyllWith config <span class="op">$</span> <span class="kw">do</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> forM_</span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> [ <span class="st">&quot;CNAME&quot;</span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;favicon.ico&quot;</span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;robots.txt&quot;</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;_config.yml&quot;</span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;images/*&quot;</span></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;out/*&quot;</span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;fonts/*&quot;</span></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a> ]</span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a> <span class="op">$</span> \f <span class="ot">-&gt;</span> match f <span class="op">$</span> <span class="kw">do</span></span>
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a> route idRoute</span>
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a> compile copyFileCompiler</span></code></pre></div>
<p>The code highlighting is also generated by hakyll.</p>
<hr />
<h2 id="why">why?</h2>
<p>Haskell is a purely functional language with no mutable state. Its syntax
actually makes it pretty elegant for declaring routes and “rendering” pipelines.</p>
<p>I originally wanted to build this entire blog myself. I had a working version
with the Svelte framework, complete with GFM rendering, table of contents, KaTeX
math, code highlighting, static generation, and other goodies. However, it
seemed like a little too much work to maintain. I switched to hakyll because</p>
<ol>
<li>Haskell is cool.</li>
<li>It comes with enough features that I don’t feel like I have to build
everything from scratch.</li>
<li>It comes with Pandoc, a Haskell library for converting between markdown
formats. It’s probably more powerful than anything you could do in <code>nodejs</code>.
It renders all of the markdown to HTML as well as the math.
<ol>
<li>It supports KaTeX as well as MathML. I’m a little disappointed with the
KaTeX though. It doesn’t directly render it, but simply injects the KaTeX
files and renders it client-side.</li>
</ol></li>
</ol>
<h3 id="speaking-of-math">speaking of math</h3>
<p>We can have math inline, like so:
<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msubsup><mo>∫</mo><mi>∞</mi><mi>∞</mi></msubsup><mspace width="0.167em"></mspace><msup><mi>e</mi><mrow><mo>−</mo><msup><mi>x</mi><mn>2</mn></msup></mrow></msup><mspace width="0.167em"></mspace><mi>d</mi><mi>x</mi><mo>=</mo><msqrt><mi>π</mi></msqrt></mrow><annotation encoding="application/x-tex">\int_\infty^\infty \, e^{-x^2}\,dx = \sqrt{\pi}</annotation></semantics></math>. This site ships semantic
MathML math with its HTML, and the MathJax script to the client.</p>
<p>It’d be nice if MathML could just be used and supported across all browsers, but
unfortunately we still aren’t quite there yet. Firefox is the only one where
everything looks 80% of the way to LaTeX. On Safari and Chrome, even simple
equations like <math display="inline" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><msqrt><mi>π</mi></msqrt><annotation encoding="application/x-tex">\sqrt{\pi}</annotation></semantics></math> render improperly.</p>
<p>Pros of MathML:</p>
<ul>
<li>A little more accessible</li>
<li>Can be rendered without additional stylesheets. I just installed the Latin
Modern font, but this isn’t even really necessary</li>
<li>Built-in to most browsers (#UseThePlatform)</li>
</ul>
<p>Cons:</p>
<ul>
<li>Isn’t fully standardized. Might look different on different browsers</li>
<li>Rendering quality isn’t as good as KaTeX</li>
</ul>
<p>This site has MathJax render all of the math so it looks nice and standardized
across browsers, but the math still displays regardless (like say if MathJax
couldn’t load due to slow network) because of MathML. Best of both worlds.</p>
<p>Let’s try it now. Here’s a simple theorem:</p>
<p><math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>a</mi><mi>n</mi></msup><mo>+</mo><msup><mi>b</mi><mi>n</mi></msup><mo>≠</mo><msup><mi>c</mi><mi>n</mi></msup><mspace width="0.167em"></mspace><mo>∀</mo><mspace width="0.167em"></mspace><mrow><mo stretchy="true" form="prefix">{</mo><mi>a</mi><mo>,</mo><mspace width="0.167em"></mspace><mi>b</mi><mo>,</mo><mspace width="0.167em"></mspace><mi>c</mi><mo stretchy="true" form="postfix">}</mo></mrow><mo>∈</mo><mstyle mathvariant="double-struck"><mi>ℤ</mi></mstyle><mo>∧</mo><mi>n</mi><mo>≥</mo><mn>3</mn></mrow><annotation encoding="application/x-tex">
a^n + b^n \ne c^n \, \forall\,\left\{ a,\,b,\,c \right\} \in \mathbb{Z} \land n \ge 3
</annotation></semantics></math></p>
<p>The proof is trivial and will be left as an exercise to the reader.</p>
<h2 id="seems-a-little-overengineered">seems a little overengineered</h2>
<p>Probably is. Not as much as the old one, though.</p></main>
</article>
]]></description>
<pubDate>Sat, 25 May 2024 00:00:00 UT</pubDate>
<guid>https://blog.youwen.dev/why-i-made-my-blog-in-haskell.html</guid>
<dc:creator>Youwen Wu</dc:creator>
</item>
</channel>
</rss>

16
sitemap.xml Normal file
View file

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://blog.youwen.dev</loc>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://blog.youwen.dev/why-i-made-my-blog-in-haskell.html</loc>
<lastmod>2024-05-25T12:00:00Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
</urlset>

276
why-i-made-my-blog-in-haskell.html Normal file
View file

@ -0,0 +1,276 @@
<!doctype html>
<html lang="en">
<head>
<title>why I made my blog in haskell | gradient ascent</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="a purely functional...blog?" />
<meta name="author" content="Youwen Wu" />
<meta name="keywords" content="haskell, blog, functional programming" />
<meta property="og:site_name" content="gradient ascent" />
<meta property="og:title" content="why I made my blog in haskell" />
<meta property="og:url" content="https://blog.youwen.dev/why-i-made-my-blog-in-haskell.html" />
<meta property="og:description" content="a purely functional...blog?" />
<meta property="og:image" content="https://blog.youwen.dev./images/gradient-ascent.jpg" />
<meta property="og:type" content="article" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://blog.youwen.dev./images/gradient-ascent.jpg" />
<meta property="twitter:site" content="gradient ascent" />
<meta property="twitter:title" content="why I made my blog in haskell" />
<meta property="twitter:description" content="a purely functional...blog?" />
<meta property="twitter:creator" content="@youwen" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="canonical" href="https://blog.youwen.dev/why-i-made-my-blog-in-haskell.html" />
<link
rel="alternate"
href="./atom.xml"
title="gradient ascent"
type="application/atom+xml"
/>
<link
rel="alternate"
href="./rss.xml"
title="gradient ascent"
type="application/rss+xml"
/>
<link rel="stylesheet" href="./out/bundle.css" />
<link rel="stylesheet" href="./css/code.css" />
<script
defer
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/mml-chtml.js"
></script>
<script>
if (
localStorage.theme === "dark" ||
(!("theme" in localStorage) &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
) {
document.documentElement.classList.add("dark")
} else {
document.documentElement.classList.remove("dark")
}
window.onload = () => {
var themeButton = document.getElementById("theme-toggle")
const theme = localStorage.getItem("theme")
if (theme === "light") {
themeButton.innerText = "theme: light"
} else if (theme === "dark") {
themeButton.innerText = "theme: dark"
} else {
themeButton.innerText = "theme: system"
}
var fontButton = document.getElementById("font-toggle")
const font = localStorage.getItem("font")
if (font && font === "serif") {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
document.body.classList.add("font-serif")
fontButton.innerText = "serif"
}
if (font && font === "sans") {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
document.body.classList.add("font-sans")
fontButton.innerText = "sans"
}
if (!font) {
document.body.classList.remove("font-sans")
document.body.classList.remove("font-serif")
fontButton.innerText = "serif"
}
}
MathJax = {
startup: {
ready: function () {
MathJax.startup.defaultReady()
MathJax.startup.promise.then(function () {
MathJax.mathml2svgPromise(document.body)
})
},
},
}
</script>
</head>
<body
class="container max-w-2xl mx-auto px-4 transition-colors duration-[2s]"
>
<header class="mt-14 md:mt-24 mb-14">
<div class="inline-flex items-center w-full">
<h1 class="text-4xl md:text-5xl font-serif font-medium">
<a
href="/"
class="dark:hover:text-muted-dark hover:text-muted-light transition-all duration-500 text-nowrap tracking-wide hover:tracking-wider"
>Gradient Ascent</a
>
</h1>
<div
class="w-full flex-grow flex-shrink rounded-lg h-1 bg-muted-light dark:bg-muted-dark mx-4"
></div>
</div>
<p class="mt-8 mb-3 px-1 italic font-light">
a web-log about computers, math, hacks, games, and life.
</p>
<a class="text-sm external-link" href="https://youwen.dev"
><em>by </em>Youwen Wu</a
>
<span class="ml-2 font-serif">|</span>
<button
id="theme-toggle"
class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
></button>
<span class="ml-2 font-serif">|</span>
<button
id="font-toggle"
class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
></button>
</header>
<article>
<header>
<h1 class="text-4xl">
<a href="./why-i-made-my-blog-in-haskell.html">why I made my blog in haskell</a>
</h1>
<p
class="mb-1 mt-2 italic font-light text-lg text-accent-light dark:text-accent-dark"
>
a purely functional...blog?
</p>
<div class="mt-2">2024-05-25</div>
<div class="mt-1 text-sm">
(last updated: 2024-05-25T12:00:00Z)
</div>
</header>
<main class="post mt-4"><p>Welcome! This is the first post on <em>gradient ascent</em> and also one that tests all
of the features.</p>
<p><img
alt="gradient ascent"
src="./images/gradient-ascent.jpg"
style="height: 200px; width: 100%; object-fit: cover"
/></p>
<p>I’ll be writing about computers, code, math, video games, and whatever else
here.</p>
<blockquote>
<p>A monad is just a monoid in the category of endofunctors, what’s the problem?</p>
</blockquote>
<h2 id="haskell">haskell?</h2>
<p>This entire blog is generated with <a href="https://jaspervdj.be/hakyll/">hakyll</a>. It’s
a library for generating static sites for Haskell, a purely functional
programming language. It’s a <em>library</em> because it doesn’t come with as many
batteries included as tools like Hugo or Astro. You set up most of the site
yourself by calling the library from Haskell.</p>
<p>Here’s a brief excerpt:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode haskell"><code class="sourceCode haskell"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ot">main ::</span> <span class="dt">IO</span> ()</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a>main <span class="ot">=</span> hakyllWith config <span class="op">$</span> <span class="kw">do</span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> forM_</span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> [ <span class="st">&quot;CNAME&quot;</span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;favicon.ico&quot;</span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;robots.txt&quot;</span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;_config.yml&quot;</span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;images/*&quot;</span></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;out/*&quot;</span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> , <span class="st">&quot;fonts/*&quot;</span></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a> ]</span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a> <span class="op">$</span> \f <span class="ot">-&gt;</span> match f <span class="op">$</span> <span class="kw">do</span></span>
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a> route idRoute</span>
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a> compile copyFileCompiler</span></code></pre></div>
<p>The code highlighting is also generated by hakyll.</p>
<hr />
<h2 id="why">why?</h2>
<p>Haskell is a purely functional language with no mutable state. Its syntax
actually makes it pretty elegant for declaring routes and “rendering” pipelines.</p>
<p>I originally wanted to build this entire blog myself. I had a working version
with the Svelte framework, complete with GFM rendering, table of contents, KaTeX
math, code highlighting, static generation, and other goodies. However, it
seemed like a little too much work to maintain. I switched to hakyll because</p>
<ol>
<li>Haskell is cool.</li>
<li>It comes with enough features that I don’t feel like I have to build
everything from scratch.</li>
<li>It comes with Pandoc, a Haskell library for converting between markdown
formats. It’s probably more powerful than anything you could do in <code>nodejs</code>.
It renders all of the markdown to HTML as well as the math.
<ol>
<li>It supports KaTeX as well as MathML. I’m a little disappointed with the
KaTeX though. It doesn’t directly render it, but simply injects the KaTeX
files and renders it client-side.</li>
</ol></li>
</ol>
<h3 id="speaking-of-math">speaking of math</h3>
<p>We can have math inline, like so:
<math display="inline" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msubsup><mo>∫</mo><mi>∞</mi><mi>∞</mi></msubsup><mspace width="0.167em"></mspace><msup><mi>e</mi><mrow><mo>−</mo><msup><mi>x</mi><mn>2</mn></msup></mrow></msup><mspace width="0.167em"></mspace><mi>d</mi><mi>x</mi><mo>=</mo><msqrt><mi>π</mi></msqrt></mrow><annotation encoding="application/x-tex">\int_\infty^\infty \, e^{-x^2}\,dx = \sqrt{\pi}</annotation></semantics></math>. This site ships semantic
MathML math with its HTML, and the MathJax script to the client.</p>
<p>It’d be nice if MathML could just be used and supported across all browsers, but
unfortunately we still aren’t quite there yet. Firefox is the only one where
everything looks 80% of the way to LaTeX. On Safari and Chrome, even simple
equations like <math display="inline" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><msqrt><mi>π</mi></msqrt><annotation encoding="application/x-tex">\sqrt{\pi}</annotation></semantics></math> render improperly.</p>
<p>Pros of MathML:</p>
<ul>
<li>A little more accessible</li>
<li>Can be rendered without additional stylesheets. I just installed the Latin
Modern font, but this isn’t even really necessary</li>
<li>Built-in to most browsers (#UseThePlatform)</li>
</ul>
<p>Cons:</p>
<ul>
<li>Isn’t fully standardized. Might look different on different browsers</li>
<li>Rendering quality isn’t as good as KaTeX</li>
</ul>
<p>This site has MathJax render all of the math so it looks nice and standardized
across browsers, but the math still displays regardless (like say if MathJax
couldn’t load due to slow network) because of MathML. Best of both worlds.</p>
<p>Let’s try it now. Here’s a simple theorem:</p>
<p><math display="block" xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><msup><mi>a</mi><mi>n</mi></msup><mo>+</mo><msup><mi>b</mi><mi>n</mi></msup><mo>≠</mo><msup><mi>c</mi><mi>n</mi></msup><mspace width="0.167em"></mspace><mo>∀</mo><mspace width="0.167em"></mspace><mrow><mo stretchy="true" form="prefix">{</mo><mi>a</mi><mo>,</mo><mspace width="0.167em"></mspace><mi>b</mi><mo>,</mo><mspace width="0.167em"></mspace><mi>c</mi><mo stretchy="true" form="postfix">}</mo></mrow><mo>∈</mo><mstyle mathvariant="double-struck"><mi>ℤ</mi></mstyle><mo>∧</mo><mi>n</mi><mo>≥</mo><mn>3</mn></mrow><annotation encoding="application/x-tex">
a^n + b^n \ne c^n \, \forall\,\left\{ a,\,b,\,c \right\} \in \mathbb{Z} \land n \ge 3
</annotation></semantics></math></p>
<p>The proof is trivial and will be left as an exercise to the reader.</p>
<h2 id="seems-a-little-overengineered">seems a little overengineered</h2>
<p>Probably is. Not as much as the old one, though.</p></main>
</article>
<footer class="mt-14 md:mt-24 pb-12 font-light">
<hr
class="border-0 dark:bg-muted-dark bg-muted-light rounded-xl h-0.5 mb-4"
/>
<p class="text-sm leading-relaxed">
&copy; 2024 Youwen Wu. Generated by
<a
href="https://jaspervdj.be/hakyll/"
class="external-link"
target="__blank"
>Hakyll.</a
>
View the source
<a
href="https://github.com/couscousdude/blog"
class="external-link"
target="__blank"
>on GitHub.</a
>
</p>
<p class="text-sm leading-relaxed mt-2">
Content freely available under
<a
class="external-link"
target="__blank"
href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en"
><span class="smallcaps">CC BY-NC-SA</span> 4.0</a
>
unless otherwise noted.
</p>
</footer>
<script defer src="./out/bundle.js"></script>
</body>
</html>