feat: Refactor out header, blockquote remark

This commit is contained in:
Leni Aniva 2024-09-17 11:40:19 -05:00
parent f3f7890962
commit 7fabd50b3a
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
14 changed files with 305 additions and 62 deletions

169
package-lock.json generated
View File

@ -11,6 +11,10 @@
"@fortawesome/fontawesome-free": "^6.6.0",
"bits-ui": "^0.21.13",
"clsx": "^2.1.1",
"rehype-slug": "^6.0.0",
"remark-github-blockquote-alert": "^1.2.1",
"remark-toc": "^9.0.0",
"svelte-radix": "^1.1.1",
"tailwind-merge": "^2.5.2",
"tailwind-variants": "^0.2.1"
},
@ -1127,17 +1131,31 @@
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
},
"node_modules/@types/hast": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
"integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
"license": "MIT",
"dependencies": {
"@types/unist": "*"
}
},
"node_modules/@types/json-schema": {
"version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"dev": true
},
"node_modules/@types/ungap__structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@types/ungap__structured-clone/-/ungap__structured-clone-1.2.0.tgz",
"integrity": "sha512-ZoaihZNLeZSxESbk9PUAPZOlSpcKx81I1+4emtULDVmBLkYutTcMlCj2K9VNlf9EWODxdO6gkAqEaLorXwZQVA==",
"license": "MIT"
},
"node_modules/@types/unist": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
"integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
"dev": true,
"license": "MIT"
},
"node_modules/@typescript-eslint/eslint-plugin": {
@ -1358,6 +1376,12 @@
"url": "https://opencollective.com/eslint"
}
},
"node_modules/@ungap/structured-clone": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
"license": "ISC"
},
"node_modules/@vitest/expect": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
@ -2499,6 +2523,12 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/github-slugger": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
"integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==",
"license": "ISC"
},
"node_modules/glob": {
"version": "10.4.5",
"resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@ -2601,6 +2631,32 @@
"node": ">= 0.4"
}
},
"node_modules/hast-util-heading-rank": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
"integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
"license": "MIT",
"dependencies": {
"@types/hast": "^3.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-to-string": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.0.tgz",
"integrity": "sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==",
"license": "MIT",
"dependencies": {
"@types/hast": "^3.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/human-signals": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
@ -2910,6 +2966,47 @@
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
"node_modules/mdast-util-toc": {
"version": "7.1.0",
"resolved": "https://registry.npmjs.org/mdast-util-toc/-/mdast-util-toc-7.1.0.tgz",
"integrity": "sha512-2TVKotOQzqdY7THOdn2gGzS9d1Sdd66bvxUyw3aNpWfcPXCLYSJCCgfPy30sEtuzkDraJgqF35dzgmz6xlvH/w==",
"license": "MIT",
"dependencies": {
"@types/mdast": "^4.0.0",
"@types/ungap__structured-clone": "^1.0.0",
"@ungap/structured-clone": "^1.0.0",
"github-slugger": "^2.0.0",
"mdast-util-to-string": "^4.0.0",
"unist-util-is": "^6.0.0",
"unist-util-visit": "^5.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/mdast-util-toc/node_modules/@types/mdast": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
"license": "MIT",
"dependencies": {
"@types/unist": "*"
}
},
"node_modules/mdast-util-toc/node_modules/mdast-util-to-string": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
"integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
"license": "MIT",
"dependencies": {
"@types/mdast": "^4.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@ -3704,6 +3801,61 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/rehype-slug": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
"integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
"license": "MIT",
"dependencies": {
"@types/hast": "^3.0.0",
"github-slugger": "^2.0.0",
"hast-util-heading-rank": "^3.0.0",
"hast-util-to-string": "^3.0.0",
"unist-util-visit": "^5.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-github-blockquote-alert": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/remark-github-blockquote-alert/-/remark-github-blockquote-alert-1.2.1.tgz",
"integrity": "sha512-qNf2mSAoZgh3Cl23/9Y1L7S4Kbf9NsdHvYK398ab/52yEsDPDU5I4cuTcgDRrdIX7Ltc6RK+KCLRtWkbFnL6Dg==",
"license": "MIT",
"dependencies": {
"unist-util-visit": "^5.0.0"
},
"engines": {
"node": ">=16"
},
"funding": {
"url": "https://jaywcjlove.github.io/#/sponsor"
}
},
"node_modules/remark-toc": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/remark-toc/-/remark-toc-9.0.0.tgz",
"integrity": "sha512-KJ9txbo33GjDAV1baHFze7ij4G8c7SGYoY8Kzsm2gzFpbhL/bSoVpMMzGa3vrNDSWASNd/3ppAqL7cP2zD6JIA==",
"license": "MIT",
"dependencies": {
"@types/mdast": "^4.0.0",
"mdast-util-toc": "^7.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/unified"
}
},
"node_modules/remark-toc/node_modules/@types/mdast": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
"integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
"license": "MIT",
"dependencies": {
"@types/unist": "*"
}
},
"node_modules/resolve": {
"version": "1.22.8",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@ -4171,6 +4323,15 @@
"svelte": "^3.19.0 || ^4.0.0"
}
},
"node_modules/svelte-radix": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/svelte-radix/-/svelte-radix-1.1.1.tgz",
"integrity": "sha512-TCbV7fzlJ2aEUB0nu2EodVA+r1eYj526IYpmGUTV32Z0bIrCUvx3K8xX3tcxR5dDFA5ZBU1Hxr4RYC4TDFEQ4A==",
"license": "MIT",
"peerDependencies": {
"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.1"
}
},
"node_modules/tabbable": {
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@ -4466,7 +4627,6 @@
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
"integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "^3.0.0"
@ -4480,7 +4640,6 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
"dev": true,
"license": "MIT"
},
"node_modules/unist-util-stringify-position": {
@ -4501,7 +4660,6 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
"integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "^3.0.0",
@ -4517,7 +4675,6 @@
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
"integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/unist": "^3.0.0",
@ -4532,14 +4689,12 @@
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
"dev": true,
"license": "MIT"
},
"node_modules/unist-util-visit/node_modules/@types/unist": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
"dev": true,
"license": "MIT"
},
"node_modules/update-browserslist-db": {

View File

@ -45,6 +45,10 @@
"@fortawesome/fontawesome-free": "^6.6.0",
"bits-ui": "^0.21.13",
"clsx": "^2.1.1",
"rehype-slug": "^6.0.0",
"remark-github-blockquote-alert": "^1.2.1",
"remark-toc": "^9.0.0",
"svelte-radix": "^1.1.1",
"tailwind-merge": "^2.5.2",
"tailwind-variants": "^0.2.1"
}

View File

@ -7,7 +7,7 @@
@layer base {
:root {
--background: 0 0% 100%;
--background: 0 0% 90%;
--foreground: 20 14.3% 4.1%;
--muted: 60 4.8% 95.9%;
@ -81,6 +81,13 @@
}
html {
scroll-behavior: smooth;
overscroll-behavior: none;
/*overscroll-behavior: none;*/
}
.separator {
color: rgb(170,170,170);
border-color: rgb(170,170,170);
}
hr {
@apply separator;
}

View File

@ -2,15 +2,16 @@
title: Placeholder 1
date: '2024-09-01'
description: "This is a placeholder description"
tags: ["a123", "ボースト"]
---
# Placeholder Post 1
# 1st Level Heading
Here is some placeholder text
## 2nd level heading
## 2nd Level Heading
### 3rd level heading
#### 4th level heading
### 3rd Level Heading
#### 4th Level Heading
Markdown `inline code`
@ -20,3 +21,9 @@ Markdown `inline code`
for i in range(9):
print("this is python")
```
> [!note Danger]
> This is a note quote
> [!NOTE]
> This is a note quote

View File

@ -10,6 +10,7 @@
<div id="layout">
<div id="navbar">
<Navbar />
<slot name="header" />
</div>
<div id="content">
<slot />
@ -62,12 +63,23 @@
}
}
}
:global(a.active-link) {
color: theme('colors.magenta.500');
&::after {
background-color: theme('colors.magenta.500');
}
&:hover,
&:focus {
color: theme('colors.magenta.500');
}
}
#layout {
max-width: max(80vw, 100vh);
margin-left: auto;
margin-right: auto;
margin-top: 50px;
gap: 20px;
gap: 100px;
display: flex;
justify-content: center;
/*

View File

@ -66,7 +66,7 @@
</div>
<div id="main">
<div id="bio" class="bg-white dark:bg-gray-900" style="">
<div id="bio" class="bg-background">
<div class="p-1">
<div class="flex">
<div id="info flex-col">
@ -100,14 +100,16 @@
background-size: 100%;
background-position: center;
z-index: -10;
position: absolute;
position: fixed;
min-width: 100vw;
min-height: 100vh;
overscroll-behaviour: none;
}
#front {
height: 100vh;
display: flex;
flex-direction: column;
overscroll-behavior: none;
}
#floater {
display: flex;
@ -123,6 +125,7 @@
}
#main {
width: 100%;
@apply bg-background;
box-shadow:
0px -5px 10px 10px rgba(200,200,200,0.4);
}

View File

@ -1,13 +1,11 @@
<div id="footer">
<p>Created and Designed by Leni Aniva based on <a href="https://github.com/heyeshuang/hugo-theme-tokiwa">Tokiwa</a></p>
</div>
<footer>
Created and Designed by Leni Aniva based on <a href="https://github.com/heyeshuang/hugo-theme-tokiwa">Tokiwa</a>
</footer>
<style>
#footer {
footer {
text-align: center;
bottom: 10px;
}
#footer p {
font-size: 12px;
color: #888;
}

View File

@ -1,17 +1,20 @@
<script lang="ts">
import { page } from '$app/stores';
import { routes } from "$lib/sitemap.ts"
function isActiveLink(pathname, route) {
return route != "/" && pathname.startsWith(route);
}
</script>
<div id="navbar" class="h-5 space-x-4 justify-between">
{#each routes as item}
{#if item.inactive ?? false}
<p class="navbar-link"
class:active-link={item.route === $page.url.pathname}
>{item.name}</p>
{:else}
<a class="navbar-link"
class:active-link={item.route === $page.url.pathname}
class:active-link={isActiveLink($page.url.pathname, item.route)}
href={item.route}>{item.name}</a>
{/if}
{/each}

View File

@ -2,39 +2,20 @@
import type { PageData } from './$types';
export let data: PageData;
const { allPosts } = data;
import metadata from '$content/metadata.json';
import siteMetadata from '$content/metadata.json';
import Heading from './Heading.svelte';
</script>
<svelte:head>
<title>{metadata.blogName}</title>
<title>{siteMetadata.blogName}</title>
</svelte:head>
<hr class="separator" />
<ul id="catalog" class="content">
{#each allPosts as post}
<li id="post-item">
<h2>
<a id="post-title" href={post.path}>{post.meta.title}</a>
</h2>
<div>
<p class="text-gray-500">{post.meta.description}</p>
</div>
<div class="flex flex-row justify-between">
<p>
{#each (post.meta.tags ?? []) as tag}
<a href="/">{tag}</a>
{/each}
</p>
<p class="text-l text-gray-500">{post.meta.date}</p>
</div>
<li>
<Heading metadata={post.meta} link={post.path} />
</li>
{/each}
</ul>
<style>
#post-item {
@apply flex flex-col;
}
#post-title {
@apply text-3xl;
}
</style>
<hr class="separator" />

View File

@ -0,0 +1,41 @@
<script lang="ts">
import DividerVertical from "svelte-radix/DividerVertical.svelte";
export let metadata : { title: string, description: string, tags: [string], date: Date };
export let link: Option<string> = null;
</script>
<div id="post-heading">
<h2>
{#if link}
<a id="post-title" href={link}>{metadata.title}</a>
{:else}
<p id="post-title">{metadata.title}</p>
{/if}
</h2>
<div>
<p class="text-gray-500">{metadata.description}</p>
</div>
<div class="flex flex-row justify-between">
<p class="text-gray-200 flex justify-center">
{#each (metadata.tags ?? []) as tag, i}
{#if i > 0}
<div class="separator text-sm">
<DividerVertical />
</div>
{/if}
<a href="/">{tag}</a>
{/each}
</p>
<p class="text-l text-gray-500">{metadata.date}</p>
</div>
</div>
<style>
#post-heading {
@apply flex flex-col;
}
#post-title {
@apply text-3xl;
}
</style>

View File

@ -1,16 +1,19 @@
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
const { title, date, Content } = data;
import metadata from '$content/metadata.json';
const { metadata, Content } = data;
import siteMetadata from '$content/metadata.json';
import Heading from '../Heading.svelte';
</script>
<svelte:head>
<title>{title} | {metadata.blogName}</title>
<title>{metadata.title} | {siteMetadata.blogName}</title>
</svelte:head>
<Heading metadata={metadata}/>
<hr />
<article class="prose lg:prose-xl dark:prose-invert p-4">
<h1>{title}</h1>
<p>Published: {date}</p>
<Content />
</article>
<hr />

View File

@ -5,16 +5,14 @@ export const load: PageLoad = async ({ params }) => {
try {
const post = await import(`$content/post/${params.slug}.md`);
if (!post) throw error(404);
const { title, date } = post.metadata;
const Content = post.default;
return {
metadata: post.metadata,
Content,
title,
date
};
}
catch(_e) {
throw error(404)
catch(e) {
error(404, `Could not find post ${params.slug}`)
}
}

View File

@ -1,6 +1,9 @@
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { mdsvex } from 'mdsvex';
import { remarkAlert } from 'remark-github-blockquote-alert'
import remarkToc from 'remark-toc'
import rehypeSlug from 'rehype-slug'
const contentDir = import.meta.env?.CHRYSOBLOG_CONTENT ?? "src/content";
@ -12,8 +15,14 @@ const config = {
vitePreprocess(),
mdsvex({
extensions: ['.md'],
remarkPlugins: [],
})
remarkPlugins: [
remarkAlert,
[remarkToc, {tight: true}],
],
rehypePlugins: [
rehypeSlug,
]
}),
],
extensions: [".svelte", ".md"],

View File

@ -70,6 +70,28 @@ const config: Config = {
800: '#215652',
900: '#163937',
},
sunglow: {
100: '#FFFAEF',
200: '#FEF3D6',
300: '#FDECBD',
400: '#FCDD8C',
500: '#FACF5A',
600: '#E1BA51',
700: '#967C36',
800: '#715D29',
900: '#4B3E1B',
},
magenta: {
100: '#F9ECF4',
200: '#F1D0E4',
300: '#E8B3D3',
400: '#D77AB2',
500: '#C64191',
600: '#B23B83',
700: '#772757',
800: '#591D41',
900: '#3B142C',
},
},
borderRadius: {
lg: "var(--radius)",