site optimization

Author: ota-meshi

docs-svelte-kit/src/lib/components/ESLintPlayground.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { onDestroy, onMount } from "svelte"
   import ESLintEditor from "../eslint/ESLintEditor.svelte"
   import RulesSettings from "../eslint/RulesSettings.svelte"
   import { deserializeState, serializeState } from "../eslint/scripts/state"
@@ -87,16 +86,6 @@
       window.location.replace(`#${serializedString}`)
     }
   }
-  onMount(() => {
-    if (typeof window !== "undefined") {
-      window.addEventListener("hashchange", onUrlHashChange)
-    }
-  })
-  onDestroy(() => {
-    if (typeof window !== "undefined") {
-      window.removeEventListener("hashchange", onUrlHashChange)
-    }
-  })
   function onLintedResult(evt) {
     messages = evt.detail.messages
     time = `${evt.detail.time}ms`
@@ -128,6 +117,8 @@
   }
 </script>
 
+<svelte:window on:hashchange={onUrlHashChange} />
+
 <div class="playground-root">
   <div class="playground-tools">
     <span style="margin-left: 16px">{time}</span>

docs-svelte-kit/src/lib/footer/Footer.svelte

@@ -1,12 +1,11 @@
 <script>
   import { page } from "$app/stores"
-  import { normalizePath, menuItems, isActive } from "../utils.js"
+  import { markdownPath, menuItems, isActive } from "../utils.js"
   import { base as baseUrl } from "$app/paths"
   export let fileInfo = {}
   export let frontmatter = {}
 
   let prev, next
-  $: markdownPath = normalizePath($page.path).replace(/^\/|\/$/g, "")
   $: {
     let prevItem, currItem
     for (const item of iterateMenuItem($menuItems)) {
@@ -42,7 +41,9 @@
   <div class="footer-tools">
     <div class="edit-link">
       <a
-        href="https://github.com/ota-meshi/eslint-plugin-svelte/edit/main/docs/{markdownPath}.md"
+        href="https://github.com/ota-meshi/eslint-plugin-svelte/edit/main/docs/{markdownPath(
+          $page.path,
+        )}"
         target="_blank"
         rel="noopener noreferrer">Edit this page</a
       >

docs-svelte-kit/src/lib/markdown/Markdown.svelte

@@ -53,18 +53,15 @@ const SIDE_MENU = {
 }
 
 export function isActive(path, $page) {
-  return normalizePath($page.path) === normalizePath(path)
+  return markdownPath($page.path) === markdownPath(path)
 }
 
-export function normalizePath(path) {
-  let normalized = path === "/" ? "/README/" : path
-  if (!normalized.endsWith("/")) {
-    normalized += "/"
-  }
-  return normalized
+export function markdownPath(path) {
+  let normalized = path === "/" ? "README" : path.replace(/^\/|\/$/g, "")
+  return `${normalized}.md`
 }
 
-export const tocStore = writable([])
+export const tocStore = writable({ children: [] })
 
 export const menuItems = readable([], function start(set) {
   let pageData = {}

docs-svelte-kit/src/lib/utils.js

@@ -34,13 +34,10 @@ class TOCRenderer {
 export default (md) => {
   md.core.ruler.push("custom_markdown", (state) => {
     const tokens = state.tokens
-    tokens.unshift(new state.Token("custom_markdown_open"))
-    tokens.push(new state.Token("custom_markdown_close"))
+    tokens.unshift(new state.Token("custom_markdown_data"))
   })
   // eslint-disable-next-line camelcase -- ignore
-  md.renderer.rules.custom_markdown_close = () => `</Markdown>`
-  // eslint-disable-next-line camelcase -- ignore
-  md.renderer.rules.custom_markdown_open = (
+  md.renderer.rules.custom_markdown_data = (
     tokens,
     _idx,
     _options,
@@ -79,13 +76,10 @@ export default (md) => {
       fileInfo.timestamp = timestamp
       fileInfo.lastUpdated = new Date(timestamp).toLocaleString()
     }
-    return `<script>
-  import Markdown from "$lib/markdown/Markdown.svelte"
-  const toc = ${JSON.stringify(renderer.toc())}
-  const fileInfo = ${JSON.stringify(fileInfo)}
+    return `<script context="module">
+  export const toc = ${JSON.stringify(renderer.toc())}
+  export const fileInfo = ${JSON.stringify(fileInfo)}
 </script>
-
-<Markdown {toc} {frontmatter} {fileInfo} >
   `
   }
 }

docs-svelte-kit/tools/markdown-it-markdown.mjs

@@ -1,8 +1,5 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair -- ignore
 /* eslint-disable camelcase -- ignore */
-// markdown-it plugin for:
-// 1. adding target="_blank" to external links
-// 2. converting internal links to remove .md
 import path from "path"
 
 export default (md, options = {}) => {

docs-svelte-kit/tools/markdown-it-replace-link.mjs

@@ -5,5 +5,6 @@ module.exports = {
   rules: {
     "eslint-comments/require-description": "off",
     "prettier/prettier": "off",
+    "require-jsdoc": "off",
   },
 }

docs/.eslintrc.js

@@ -1,6 +1,86 @@
+<script context="module">
+  import { markdownPath } from "$lib/utils.js"
+  const docs = import.meta.glob("./**/*.md")
+
+  /** @type {import('@sveltejs/kit').Load} */
+  export async function load({ page }) {
+    return {
+      props: {
+        moduleData: await docs[`./${markdownPath(page.path)}`](),
+      },
+    }
+  }
+</script>
+
 <script>
+  import Header from "$lib/header/Header.svelte"
+  import SideMenu from "$lib/sidemenu/SideMenu.svelte"
+  import Footer from "$lib/footer/Footer.svelte"
+
   import "../docs-svelte-kit/src/app.css"
   import "../docs-svelte-kit/src/site.css"
+  import { tocStore } from "$lib/utils"
+
+  export let moduleData
+
+  $: frontmatter = moduleData.frontmatter
+  $: fileInfo = moduleData.fileInfo
+  $: {
+    const toc = moduleData.toc
+    tocStore.update(() => toc)
+  }
+
+  let sidebarOpen = false
+
+  function handleToggleSidebar() {
+    sidebarOpen = !sidebarOpen
+  }
+  function resetSidebarOpen() {
+    sidebarOpen = false
+  }
 </script>
 
-<slot />
+<svelte:window on:resize={sidebarOpen ? resetSidebarOpen : null} />
+
+<Header on:toggle-sidebar-open={handleToggleSidebar} />
+
+<SideMenu {sidebarOpen} hiddenMenu={frontmatter.hiddenMenu} />
+
+<main
+  class:hidden-menu={frontmatter.hiddenMenu}
+  on:click={sidebarOpen ? resetSidebarOpen : null}
+>
+  <div class="main-content">
+    <slot />
+  </div>
+</main>
+
+<Footer {frontmatter} {fileInfo} />
+
+<style>
+  main:not(.hidden-menu) {
+    padding-left: 20rem;
+  }
+
+  @media (max-width: 959px) {
+    main:not(.hidden-menu) {
+      padding-left: 16.4rem;
+    }
+  }
+  @media (max-width: 719px) {
+    main:not(.hidden-menu) {
+      padding-left: 0;
+    }
+  }
+
+  main .main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    width: 100%;
+    max-width: 1024px;
+    margin: 0 auto;
+    box-sizing: border-box;
+  }
+</style>