From 7fabd50b3ae90c61241cac0be1dd10e88b5e1b91 Mon Sep 17 00:00:00 2001 From: Leni Aniva Date: Tue, 17 Sep 2024 11:40:19 -0500 Subject: [PATCH] feat: Refactor out header, blockquote remark --- package-lock.json | 169 ++++++++++++++++++++++++++-- package.json | 4 + src/app.css | 11 +- src/content/post/placeholder1.md | 15 ++- src/routes/+layout.svelte | 14 ++- src/routes/+page.svelte | 7 +- src/routes/Footer.svelte | 10 +- src/routes/Navbar.svelte | 7 +- src/routes/post/+page.svelte | 33 ++---- src/routes/post/Heading.svelte | 41 +++++++ src/routes/post/[slug]/+page.svelte | 13 ++- src/routes/post/[slug]/+page.ts | 8 +- svelte.config.js | 13 ++- tailwind.config.ts | 22 ++++ 14 files changed, 305 insertions(+), 62 deletions(-) create mode 100644 src/routes/post/Heading.svelte diff --git a/package-lock.json b/package-lock.json index a22eb81..a1df8d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { diff --git a/package.json b/package.json index 9d52d05..c99aa5c 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/src/app.css b/src/app.css index f0d14f3..0d90f55 100644 --- a/src/app.css +++ b/src/app.css @@ -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; +} diff --git a/src/content/post/placeholder1.md b/src/content/post/placeholder1.md index f97a59e..c36adb1 100644 --- a/src/content/post/placeholder1.md +++ b/src/content/post/placeholder1.md @@ -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 diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 3401cab..74b588d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,6 +10,7 @@
@@ -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; /* diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e23f9d5..5b7ca7b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -66,7 +66,7 @@
-
+
@@ -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); } diff --git a/src/routes/Footer.svelte b/src/routes/Footer.svelte index a03a8f8..d8433cb 100644 --- a/src/routes/Footer.svelte +++ b/src/routes/Footer.svelte @@ -1,13 +1,11 @@ - +
+ Created and Designed by Leni Aniva based on Tokiwa +
+
diff --git a/src/routes/post/Heading.svelte b/src/routes/post/Heading.svelte new file mode 100644 index 0000000..af47b5c --- /dev/null +++ b/src/routes/post/Heading.svelte @@ -0,0 +1,41 @@ + + +
+

+ {#if link} + {metadata.title} + {:else} +

{metadata.title}

+ {/if} +

+
+

{metadata.description}

+
+
+

+ {#each (metadata.tags ?? []) as tag, i} + {#if i > 0} +

+ +
+ {/if} + {tag} + {/each} +

+

{metadata.date}

+
+
+ + diff --git a/src/routes/post/[slug]/+page.svelte b/src/routes/post/[slug]/+page.svelte index f7173d2..80f44ee 100644 --- a/src/routes/post/[slug]/+page.svelte +++ b/src/routes/post/[slug]/+page.svelte @@ -1,16 +1,19 @@ - {title} | {metadata.blogName} + {metadata.title} | {siteMetadata.blogName} + + +
-

{title}

-

Published: {date}

+
diff --git a/src/routes/post/[slug]/+page.ts b/src/routes/post/[slug]/+page.ts index e32a93a..228c903 100644 --- a/src/routes/post/[slug]/+page.ts +++ b/src/routes/post/[slug]/+page.ts @@ -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}`) } } diff --git a/svelte.config.js b/svelte.config.js index ee37299..475f8e9 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -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"], diff --git a/tailwind.config.ts b/tailwind.config.ts index 3269743..514354c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -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)",