mirror of
https://github.com/youwen5/blog.git
synced 2024-11-24 18:03:50 -08:00
Deploy to GitHub pages
This commit is contained in:
commit
95f5b5bdb8
12 changed files with 721 additions and 0 deletions
1
CNAME
Normal file
1
CNAME
Normal file
|
@ -0,0 +1 @@
|
||||||
|
blog.youwen.dev
|
269
a-haskellian-blog.html
Normal file
269
a-haskellian-blog.html
Normal file
|
@ -0,0 +1,269 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>a haskellian blog | conditional finality</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="conditional finality" />
|
||||||
|
<meta property="og:title" content="a haskellian blog" />
|
||||||
|
<meta property="og:url" content="https://blog.youwen.dev/a-haskellian-blog.html" />
|
||||||
|
<meta property="og:description" content="a purely functional...blog?" />
|
||||||
|
|
||||||
|
<meta property="og:image" content="https://blog.youwen.dev./images/conditional-finality.png" />
|
||||||
|
|
||||||
|
<meta property="og:type" content="article" />
|
||||||
|
|
||||||
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
|
<meta property="twitter:image" content="https://blog.youwen.dev./images/conditional-finality.png" />
|
||||||
|
|
||||||
|
<meta property="twitter:site" content="conditional finality" />
|
||||||
|
<meta property="twitter:title" content="a haskellian blog" />
|
||||||
|
<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/a-haskellian-blog.html" />
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="alternate"
|
||||||
|
href="./atom.xml"
|
||||||
|
title="conditional finality"
|
||||||
|
type="application/atom+xml"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="alternate"
|
||||||
|
href="./rss.xml"
|
||||||
|
title="conditional finality"
|
||||||
|
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"
|
||||||
|
><em>Conditional Finality.</em></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, and all the rest.
|
||||||
|
</p>
|
||||||
|
<a class="text-sm text-iris-light dark:text-iris-dark hover:text-love-light dark:hover:text-love-dark" 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:text-accent-light dark:hover:text-muted-dark"
|
||||||
|
></button>
|
||||||
|
<span class="ml-2 font-serif">|</span>
|
||||||
|
<button
|
||||||
|
id="font-toggle"
|
||||||
|
class="ml-2 text-sm hover:text-accent-light dark:hover:text-muted-dark"
|
||||||
|
></button>
|
||||||
|
</header>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1 class="text-4xl">
|
||||||
|
<a href="./a-haskellian-blog.html">a haskellian blog</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>conditional finality</em> and also one that tests all
|
||||||
|
of the features.</p>
|
||||||
|
<p><img
|
||||||
|
alt="conditional finality"
|
||||||
|
src="./images/conditional-finality.png"
|
||||||
|
/></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">"CNAME"</span></span>
|
||||||
|
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> , <span class="st">"favicon.ico"</span></span>
|
||||||
|
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> , <span class="st">"robots.txt"</span></span>
|
||||||
|
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> , <span class="st">"_config.yml"</span></span>
|
||||||
|
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> , <span class="st">"images/*"</span></span>
|
||||||
|
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> , <span class="st">"out/*"</span></span>
|
||||||
|
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> , <span class="st">"fonts/*"</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">-></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>
|
||||||
|
<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><mrow><mo>−</mo><mi>∞</mi></mrow><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">
|
||||||
|
© 2024 Youwen Wu. Generated by
|
||||||
|
<a
|
||||||
|
href="https://jaspervdj.be/hakyll/"
|
||||||
|
class="external-link-muted"
|
||||||
|
target="__blank"
|
||||||
|
>Hakyll.</a
|
||||||
|
>
|
||||||
|
View the source
|
||||||
|
<a
|
||||||
|
href="https://github.com/couscousdude/blog"
|
||||||
|
class="external-link-muted"
|
||||||
|
target="__blank"
|
||||||
|
>on GitHub.</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p class="text-sm leading-relaxed mt-2">
|
||||||
|
Content freely available under
|
||||||
|
<a
|
||||||
|
class="external-link-muted"
|
||||||
|
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>
|
115
atom.xml
Normal file
115
atom.xml
Normal file
|
@ -0,0 +1,115 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<feed xmlns="http://www.w3.org/2005/Atom">
|
||||||
|
<title>conditional finality</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>a haskellian blog</title>
|
||||||
|
<link href="https://blog.youwen.dev/a-haskellian-blog.html" />
|
||||||
|
<id>https://blog.youwen.dev/a-haskellian-blog.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="./a-haskellian-blog.html">a haskellian blog</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>conditional finality</em> and also one that tests all
|
||||||
|
of the features.</p>
|
||||||
|
<p><img
|
||||||
|
alt="conditional finality"
|
||||||
|
src="./images/conditional-finality.png"
|
||||||
|
/></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">"CNAME"</span></span>
|
||||||
|
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> , <span class="st">"favicon.ico"</span></span>
|
||||||
|
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> , <span class="st">"robots.txt"</span></span>
|
||||||
|
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> , <span class="st">"_config.yml"</span></span>
|
||||||
|
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> , <span class="st">"images/*"</span></span>
|
||||||
|
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> , <span class="st">"out/*"</span></span>
|
||||||
|
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> , <span class="st">"fonts/*"</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">-></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>
|
||||||
|
<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><mrow><mo>−</mo><mi>∞</mi></mrow><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
1
css/code.css
Normal 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
BIN
favicon.ico
Normal file
Binary file not shown.
BIN
images/conditional-finality.png
Normal file
BIN
images/conditional-finality.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 43 KiB |
200
index.html
Normal file
200
index.html
Normal file
|
@ -0,0 +1,200 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>youwen wu | conditional finality</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="conditional finality" />
|
||||||
|
<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="conditional finality" />
|
||||||
|
<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="conditional finality"
|
||||||
|
type="application/atom+xml"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="alternate"
|
||||||
|
href="./rss.xml"
|
||||||
|
title="conditional finality"
|
||||||
|
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"
|
||||||
|
><em>Conditional Finality.</em></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, and all the rest.
|
||||||
|
</p>
|
||||||
|
<a class="text-sm text-iris-light dark:text-iris-dark hover:text-love-light dark:hover:text-love-dark" 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:text-accent-light dark:hover:text-muted-dark"
|
||||||
|
></button>
|
||||||
|
<span class="ml-2 font-serif">|</span>
|
||||||
|
<button
|
||||||
|
id="font-toggle"
|
||||||
|
class="ml-2 text-sm hover:text-accent-light dark:hover:text-muted-dark"
|
||||||
|
></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="./a-haskellian-blog.html"
|
||||||
|
class="w-fit dark:group-hover:text-muted-dark group-hover:text-muted-light transition-colors"
|
||||||
|
>
|
||||||
|
<h3 class="text-2xl">a haskellian blog</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">
|
||||||
|
© 2024 Youwen Wu. Generated by
|
||||||
|
<a
|
||||||
|
href="https://jaspervdj.be/hakyll/"
|
||||||
|
class="external-link-muted"
|
||||||
|
target="__blank"
|
||||||
|
>Hakyll.</a
|
||||||
|
>
|
||||||
|
View the source
|
||||||
|
<a
|
||||||
|
href="https://github.com/couscousdude/blog"
|
||||||
|
class="external-link-muted"
|
||||||
|
target="__blank"
|
||||||
|
>on GitHub.</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p class="text-sm leading-relaxed mt-2">
|
||||||
|
Content freely available under
|
||||||
|
<a
|
||||||
|
class="external-link-muted"
|
||||||
|
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
1
out/bundle.css
Normal file
File diff suppressed because one or more lines are too long
1
out/bundle.js
Normal file
1
out/bundle.js
Normal 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
2
robots.txt
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
115
rss.xml
Normal file
115
rss.xml
Normal file
|
@ -0,0 +1,115 @@
|
||||||
|
<?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>conditional finality</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>a haskellian blog</title>
|
||||||
|
<link>https://blog.youwen.dev/a-haskellian-blog.html</link>
|
||||||
|
<description><![CDATA[<article>
|
||||||
|
<header>
|
||||||
|
<h1 class="text-4xl">
|
||||||
|
<a href="./a-haskellian-blog.html">a haskellian blog</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>conditional finality</em> and also one that tests all
|
||||||
|
of the features.</p>
|
||||||
|
<p><img
|
||||||
|
alt="conditional finality"
|
||||||
|
src="./images/conditional-finality.png"
|
||||||
|
/></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">"CNAME"</span></span>
|
||||||
|
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> , <span class="st">"favicon.ico"</span></span>
|
||||||
|
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> , <span class="st">"robots.txt"</span></span>
|
||||||
|
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> , <span class="st">"_config.yml"</span></span>
|
||||||
|
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> , <span class="st">"images/*"</span></span>
|
||||||
|
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> , <span class="st">"out/*"</span></span>
|
||||||
|
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> , <span class="st">"fonts/*"</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">-></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>
|
||||||
|
<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><mrow><mo>−</mo><mi>∞</mi></mrow><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/a-haskellian-blog.html</guid>
|
||||||
|
<dc:creator>Youwen Wu</dc:creator>
|
||||||
|
</item>
|
||||||
|
|
||||||
|
</channel>
|
||||||
|
</rss>
|
16
sitemap.xml
Normal file
16
sitemap.xml
Normal 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/a-haskellian-blog.html</loc>
|
||||||
|
<lastmod>2024-05-25T12:00:00Z</lastmod>
|
||||||
|
<changefreq>weekly</changefreq>
|
||||||
|
<priority>0.8</priority>
|
||||||
|
</url>
|
||||||
|
|
||||||
|
</urlset>
|
Loading…
Reference in a new issue