KaTeX support

Source button

src/components/Music.astro

@@ -4,7 +4,7 @@ import leg from "../assets/leg.webp";
 
 <a class="button" id="music" href="https://www.last.fm/user/Fluffy_Bean_" target="_blank">
     <img
-        src={leg}
+        src={leg.src}
         width="64"
         height="64"
         loading="eager"

src/content/posts/math-examples.md

@@ -0,0 +1,23 @@
+---
+title: "Math Examples"
+description: "REEEEEE"
+pubDate: 2024-06-08
+tags:
+    - "Gaybo"
+---
+
+Some simple mathematical expressions:
+
+$$ \sqrt{3x-1}+(1+x)^2 $$
+
+$$\frac{ax^2+bx+c}{(a+b)^2}=0$$
+
+$$f(x) = \pm A \sin\left(\frac{2\pi}{4} + \theta\right)$$
+
+More complicated examples (from [KateX home page](https://katex.org)):
+
+$$\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$
+
+$$\displaystyle \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$
+
+$$\displaystyle {1 +  \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots }= \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1.$$

src/layouts/Layout.astro

@@ -17,8 +17,37 @@ const { title} = Astro.props;
         <meta name="viewport" content="width=device-width" />
         <meta name="generator" content={Astro.generator} />
 
-        <link rel="icon" type="image/webp" href="/src/assets/leg.webp" />
+        <link
-        <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=jet-brains-mono@400&f[]=general-sans@1&display=swap">
+            rel="icon"
+            type="image/webp"
+            href="/src/assets/leg.webp"
+        />
+        <link
+            rel="stylesheet"
+            href="https://api.fontshare.com/v2/css?f[]=jet-brains-mono@400&f[]=general-sans@1&display=swap"
+        />
+
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css"
+            integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww"
+            crossorigin="anonymous"
+        />
+        <script
+            is:inline
+            defer
+            src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"
+            integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd"
+            crossorigin="anonymous"
+        ></script>
+        <script
+            is:inline
+            defer
+            src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"
+            integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk"
+            crossorigin="anonymous"
+            onload="renderMathInElement(document.body);"
+        ></script>
 
         <title>{title}</title>
     </head>

src/layouts/Markdown.astro

@@ -16,6 +16,12 @@ const date = new Date(post.data.pubDate);
 
 <HomeButton />
 
+<!-- If I ever move anything around, this will fucking break -->
+<a href=`https://github.com/Fluffy-Bean/website/tree/main/src/content/${base}/${post.id}` id="source" class="button">
+    Source
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"></path></svg>
+</a>
+
 <div class="header">
     <h1>{post.data.title}</h1>
     {post.data.pubDate ? (
@@ -36,34 +42,61 @@ const date = new Date(post.data.pubDate);
     <div style="margin-top: 32px" />
 </div>
 
-<hr>
+{(prev || next) && ( <hr> )}
 
 <ul id="controls" role="list">
     <li>
         {prev && (
-            <a class="button" href=`${base}/${prev.slug}` id="prev">
+            <a class="button" href=`/${base}/${prev.slug}` id="prev">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
-                    <path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path>
-                </svg>
                 Newer
             </a>
         )}
     </li>
     <li>
         {next && (
-            <a class="button" href=`${base}/${next.slug}` id="next">
+            <a class="button" href=`/${base}/${next.slug}` id="next">
                 Older
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
-                    <path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path>
-                </svg>
             </a>
         )}
     </li>
 </ul>
 
+
 <style is:global lang="scss">
     @import "../styles/vars";
 
+    #source {
+        padding: 0 20px;
+
+        position: absolute;
+        top: 8px;
+        right: 0;
+
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        &:before {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+
+    /*#source {*/
+    /*    position: absolute;*/
+    /*    top: 16px;*/
+    /*    right: 16px;*/
+
+    /*    text-decoration: none;*/
+
+    /*    color: $accent;*/
+
+    /*    &:hover, &:focus-visible {*/
+    /*        text-decoration: underline;*/
+    /*    }*/
+    /*}*/
+
     #controls {
         display: flex;
         flex-direction: row;

src/pages/posts/[...slug].astro

@@ -22,7 +22,7 @@ const { Content } = await post.render();
 ---
 
 <Layout title=`Leggy Land - ${post.data.title}`>
-    <Markdown post={post} prev={prev} next={next} base="/posts">
+    <Markdown post={post} prev={prev} next={next} base="posts">
         <Content />
     </Markdown>
 </Layout>

src/pages/projects/[...slug].astro

@@ -22,7 +22,7 @@ const { Content } = await post.render();
 ---
 
 <Layout title=`Leggy Land - ${post.data.title}`>
-    <Markdown post={post} prev={prev} next={next} base="/posts">
+    <Markdown post={post} prev={prev} next={next} base="projects">
         <Content />
     </Markdown>
 </Layout>