Fluffy/WebsiteFluffy
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/website.git synced 2025-06-26 20:06:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

KaTeX support

Browse source 
Source button
This commit is contained in:
Michał Gdula 2024-05-27 20:16:48 +01:00
parent 8fc0bd849e
commit 745ac58045
6 changed files with 99 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/layouts/Layout.astro
View file

@ -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>

51
src/layouts/Markdown.astro
View file

@ -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;