wip

docs-svelte-kit/eslint.config.mjs

@@ -41,12 +41,20 @@ const config = [
  'jsdoc/require-jsdoc': 'off',
  '@typescript-eslint/no-shadow': 'off',
  'no-shadow': 'off',
+ // SvelteKit's docs usually use const instead of function.
+ 'func-style': 'off',
+ // SvelteKit sometimes needs to use @sveltejs/kit package's `error` instead of return.
+ 'consistent-return': 'off',
  '@typescript-eslint/naming-convention': 'off',
  'new-cap': 'off',
  complexity: 'off',
  'n/no-missing-import': 'off',
  'n/file-extension-in-import': 'off',
- 'n/no-extraneous-import': 'off'
+ 'n/no-extraneous-import': 'off',
+ // We need to use {@html} for markdown rendering.
+ 'svelte/no-at-html-tags': 'off',
+ // Delegate it to Svelte compiler's check.
+ 'svelte/valid-compile': 'off'
  }
  },
  {

docs-svelte-kit/package.json

@@ -28,7 +28,7 @@
  "@types/markdown-it": "^14.1.1",
  "@types/markdown-it-container": "^2.0.10",
  "@types/markdown-it-emoji": "^3.0.1",
- "@types/node": "^20.12.12",
+ "@types/node": "^20.14.11",
  "@types/prismjs": "^1.26.4",
  "@types/stylus": "^0.48.42",
  "@typescript/vfs": "^1.5.0",
@@ -55,9 +55,14 @@
  "stylus": "^0.63.0",
  "svelte": "^5.0.0-next.112",
  "svelte-adapter-ghpages": "0.2.2",
+ "svelte-preprocess": "^6.0.2",
  "util": "^0.12.5",
  "vite": "^5.2.11",
  "vite-plugin-eslint4b": "^0.4.2",
  "vite-plugin-svelte-md": "^0.1.7"
+ },
+ "dependencies": {
+ "@shikijs/markdown-it": "^1.10.3",
+ "markdown-it": "^14.1.0"
  }
 }

docs-svelte-kit/src/app.css

@@ -1,105 +1,110 @@
-@import "@fontsource/fira-mono";
+@import '@fontsource/fira-mono';
 
 :root {
- font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
- --font-mono: "Fira Mono", monospace;
- --pure-white: #ffffff;
- --primary-color: #b9c6d2;
- --secondary-color: #676778;
- --tertiary-color: #edf0f8;
- --accent-color: #ff3e00;
- --heading-color: rgba(0, 0, 0, 0.7);
- --text-color: #444444;
- --background-without-opacity: rgba(255, 255, 255, 0.7);
- --column-width: 42rem;
- --column-margin-top: 4rem;
+ font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+ 'Segoe UI Symbol', 'Noto Color Emoji';
+ --font-mono: 'Fira Mono', monospace;
+ --pure-white: #ffffff;
+ --primary-color: #b9c6d2;
+ --secondary-color: #676778;
+ --tertiary-color: #edf0f8;
+ --accent-color: #ff3e00;
+ --heading-color: rgba(0, 0, 0, 0.7);
+ --text-color: #444444;
+ --background-without-opacity: rgba(255, 255, 255, 0.7);
+ --column-width: 42rem;
+ --column-margin-top: 4rem;
 }
 
 body {
- min-height: 100vh;
- margin: 0;
- background-color: var(--primary-color);
+ min-height: 100vh;
+ margin: 0;
+ background-color: var(--primary-color);
+ line-height: 1.5;
 }
 
 body::before {
- content: "";
- width: 80vw;
- height: 100vh;
- position: absolute;
- top: 0;
- left: 10vw;
- z-index: -1;
- background: radial-gradient(
- 50% 50% at 50% 50%,
- var(--pure-white) 0%,
- rgba(255, 255, 255, 0) 100%
- );
- opacity: 0.05;
+ content: '';
+ width: 80vw;
+ height: 100vh;
+ position: absolute;
+ top: 0;
+ left: 10vw;
+ z-index: -1;
+ background: radial-gradient(
+ 50% 50% at 50% 50%,
+ var(--pure-white) 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
+ opacity: 0.05;
 }
 
 #svelte {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
 }
 
 h1,
 h2,
 p {
- font-weight: 400;
- color: var(--heading-color);
+ font-weight: 400;
+ color: var(--heading-color);
 }
 
 p {
- line-height: 1.5;
+ line-height: 1.5;
 }
 
 a {
- color: var(--accent-color);
- text-decoration: none;
+ color: var(--accent-color);
+ text-decoration: none;
 }
 
 a:hover {
- text-decoration: underline;
+ text-decoration: underline;
 }
 
 h1 {
- font-size: 2rem;
- text-align: center;
+ font-size: 2rem;
+ text-align: center;
 }
 
 h2 {
- font-size: 1rem;
+ font-size: 1rem;
 }
 
 pre {
- font-size: 16px;
- font-family: var(--font-mono);
- background-color: rgba(255, 255, 255, 0.45);
- border-radius: 3px;
- box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
- padding: 0.5em;
- overflow-x: auto;
- color: var(--text-color);
+ font-size: 16px;
+ background-color: rgba(255, 255, 255, 0.45);
+ border-radius: 3px;
+ box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+ padding: 0.5em;
+ overflow-x: auto;
+ color: var(--text-color);
+}
+
+code {
+ font-family: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+ 'Segoe UI Symbol', 'Noto Color Emoji' !important;
 }
 
 input,
 button {
- font-size: inherit;
- font-family: inherit;
+ font-size: inherit;
+ font-family: inherit;
 }
 
 button:focus:not(:focus-visible) {
- outline: none;
+ outline: none;
 }
 
 @media (min-width: 720px) {
- h1 {
- font-size: 2.4rem;
- }
+ h1 {
+ font-size: 2.4rem;
+ }
 }
 
 :target {
- scroll-margin-top: 80px;
+ scroll-margin-top: 80px;
 }

docs-svelte-kit/src/lib/server/markdown.ts

@@ -0,0 +1,82 @@
+import { readFile } from 'node:fs/promises';
+import MarkdownIt from 'markdown-it';
+import Shiki from '@shikijs/markdown-it';
+
+function headingRenderer(md: MarkdownIt) {
+ const buildId = (text: string) => {
+ return text
+ .replace(/[^ \-0-9a-z]/gi, '')
+ .trim()
+ .replace(/\s+/g, '-')
+ .toLowerCase();
+ };
+
+ md.renderer.rules.heading_open = function (tokens, idx) {
+ const tag = tokens[idx].tag;
+ const text = tokens[idx + 1].content;
+ const id = buildId(text);
+ return `<${tag} id=${id} tabindex="-1"><a href="#${id}">#</a>`;
+ };
+}
+
+function noteRenderer(md: MarkdownIt) {
+ md.renderer.rules.text = function (tokens, idx) {
+ const text = tokens[idx].content;
+ const match = /^::: (\S+)(\s.*)?$/.exec(text);
+ if (match) {
+ const type = match[1]?.trim();
+ const title = (match[2] ?? type)?.trim();
+ return `<div class="custom-block ${type}"><p class="custom-block-title">${title}</p>`;
+ }
+ if (text.startsWith(':::')) {
+ return '</div>';
+ }
+ return text;
+ };
+}
+
+const md = MarkdownIt();
+md.use(headingRenderer);
+md.use(noteRenderer);
+md.use(
+ await Shiki({
+ themes: {
+ light: 'vitesse-dark',
+ dark: 'vitesse-dark'
+ }
+ })
+);
+
+function removeQuotes(str: string) {
+ return str.replace(/^["']|["']$/g, '');
+}
+
+function extractFrontmatter(markdown: string) {
+ const match = /---\r?\n([\s\S]+?)\r?\n---/.exec(markdown);
+ if (!match) return { metadata: {}, body: markdown };
+
+ const frontmatter = match[1];
+ const body = markdown.slice(match[0].length);
+
+ const metadata: Record<string, string> = {};
+ frontmatter.split('\n').forEach((pair) => {
+ const i = pair.indexOf(':');
+ metadata[pair.slice(0, i).trim()] = removeQuotes(pair.slice(i + 1).trim());
+ });
+
+ return { metadata, body };
+}
+
+function removeComments(markdown: string) {
+ return markdown.replace(/<!--[\s\S]*?-->/g, '');
+}
+
+export async function getParsedMarkdown(
+ path: string
+): Promise<{ metadata: Record<string, string | number>; html: string }> {
+ const markdown = await readFile(path, 'utf-8');
+ const { metadata, body } = extractFrontmatter(markdown);
+ const bodyWithoutComment = removeComments(body);
+ const html = md.render(bodyWithoutComment);
+ return { metadata, html };
+}

docs-svelte-kit/src/routes/+layout.svelte

@@ -31,11 +31,11 @@
 
 <Header on:toggleSidebarOpen={handleToggleSidebar} />
 
-<SideMenu {sidebarOpen} hiddenMenu={frontmatter.hiddenMenu} />
+<SideMenu {sidebarOpen} hiddenMenu={false} />
 
 <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <main
- class:hidden-menu={frontmatter.hiddenMenu}
+ class:hidden-menu={false}
  on:click={sidebarOpen ? resetSidebarOpen : null}
  on:keydown={sidebarOpen ? resetSidebarOpen : null}
 >

docs-svelte-kit/src/routes/[slug]/+page.server.ts

@@ -0,0 +1,13 @@
+import { getParsedMarkdown } from '$lib/server/markdown.js';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+ const content = await getParsedMarkdown(`${process.cwd()}/../docs/${params.slug}.md`);
+
+ if (content) {
+ return { content };
+ }
+
+ error(404, 'Not found');
+};

docs-svelte-kit/src/routes/[slug]/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+ import type { PageData } from './$types';
+ export let data: PageData;
+</script>
+
+<section data-rule-page>
+ {@html data.content.html}
+</section>
+
+<style global>
+ section[data-rule-page] > h1 {
+ display: flex;
+ justify-content: center;
+ }
+
+ section[data-rule-page] > h1 > a,
+ h2 > a,
+ h3 > a,
+ h4 > a,
+ h5 > a,
+ h6 > a {
+ content: '#';
+ color: var(--accent-color);
+ margin-right: 8px;
+ }
+
+ section[data-rule-page] td:nth-child(3) {
+ width: 42px;
+ text-align: right;
+ }
+</style>

docs-svelte-kit/src/routes/[slug]/[slug]/+page.server.ts

@@ -0,0 +1,13 @@
+import { getParsedMarkdown } from '$lib/server/markdown.js';
+import { error } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+ const content = await getParsedMarkdown(`${process.cwd()}/../docs/rules/${params.slug}.md`);
+
+ if (content) {
+ return { content };
+ }
+
+ error(404, 'Not found');
+};

docs-svelte-kit/src/routes/[slug]/[slug]/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+ import type { PageData } from './$types';
+ export let data: PageData;
+</script>
+
+<section data-rule-page>
+ {@html data.content.html}
+</section>
+
+<style global>
+ section[data-rule-page] > h1 {
+ display: flex;
+ justify-content: center;
+ }
+
+ section[data-rule-page] > h1 > a,
+ h2 > a,
+ h3 > a,
+ h4 > a,
+ h5 > a,
+ h6 > a {
+ content: '#';
+ color: var(--accent-color);
+ margin-right: 8px;
+ }
+</style>