mirror of
https://github.com/Fluffy-Bean/website.git
synced 2024-12-26 17:36:12 +00:00
KaTeX support
Source button
This commit is contained in:
parent
8fc0bd849e
commit
745ac58045
|
|
@ -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"
|
||||
|
|
|
|||
23
src/content/posts/math-examples.md
Normal file
23
src/content/posts/math-examples.md
Normal file
|
|
@ -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.$$
|
||||
|
|
@ -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 rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=jet-brains-mono@400&f[]=general-sans@1&display=swap">
|
||||
<link
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
<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"><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">
|
||||
<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>
|
||||
<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>
|
||||
</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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue