Upgrade to Vitepress 1.x

LastOliveGames · Sep 18, 2024 · ca985bb · ca985bb
1 parent 23a04b8
commit ca985bb
Show file tree

Hide file tree

Showing 7 changed files with 1,097 additions and 366 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ node_modules/
 /benchmarks/current_results.json
 /examples/dist/
 /docs/.vitepress/dist/
+/docs/.vitepress/cache/
 
 /.gitconfig
 /.vscode/

diff --git a/docs/.vitepress/components/LanguageSwitcher.vue b/docs/.vitepress/components/LanguageSwitcher.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="float: right; background-color: rgba(27, 31, 35, 0.05); padding: 5px 10px; border-radius: 6px; font-size: 0.9rem;">
+  <div class="switcher">
     Code:
     <input type="radio" id="ts" value="ts" v-model="language" style="margin-left: 1em;">
     <label for="ts">TypeScript</label>
@@ -35,3 +35,21 @@ function update() {
   localStorage.setItem('language', language.value);
 }
 </script>
+
+<style scoped>
+
+.switcher {
+  float: right;
+  background-color: var(--vp-c-bg-alt);
+  padding: 5px 10px;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  position: relative;
+  z-index: 1;
+}
+
+input, label {
+  cursor: pointer;
+}
+
+</style>
diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs
@@ -1,11 +1,13 @@
 import {defineConfig} from 'vitepress';
 import container from 'markdown-it-container';
+import {readFileSync} from 'fs';
 
 export default defineConfig({
   base: '/becsy/',
-  lang: 'en-US',
   title: 'Becsy',
+  titleTemplate: 'Becsy — :title',
   description: 'Multi-threaded Entity Component System framework for TS and JS.',
+  cleanUrls: true,
   lastUpdated: true,
 
   markdown: {
@@ -17,11 +19,18 @@ export default defineConfig({
   themeConfig: {
     logo: '/logo_small.png',
     repo: 'lastolivegames/becsy',
-    docsDir: 'docs',
-    docsBranch: 'main',
-    editLinks: true,
-    editLinkText: 'Edit this page on GitHub',
-    lastUpdated: 'Last updated',
+    editLink: {
+      pattern: 'https://github.com/lastolivegames/becsy/edit/main/docs/:path',
+      text: 'Edit this page on GitHub'
+    },
+    outline: false,
+    footer: {
+      message: 'MIT Licensed',
+      copyright: 'Copyright © 2021-present Piotr Kaminski'
+    },
+    search: {
+      provider: 'local'
+    },
 
     nav: [
       {text: 'Guide', link: '/guide/introduction', activeMatch: '^/guide/'},
@@ -31,51 +40,65 @@ export default defineConfig({
         {text: 'Discord', link: 'https://discord.gg/X72ct6hZSr'},
         {text: 'Issues', link: 'https://github.com/lastolivegames/becsy/issues'}
       ]},
-      {text: 'Release Notes', link: 'https://github.com/LastOliveGames/becsy/blob/main/CHANGELOG.md'}
+      {text: 'Release Notes', link: 'https://github.com/LastOliveGames/becsy/blob/main/CHANGELOG.md'},
+      {text: 'GitHub', link: 'https://github.com/lastolivegames/becsy'}
     ],
 
-    sidebar: {
-      '/guide/': getGuideSidebar(),
-      '/': getGuideSidebar()
-    },
-
-    // algolia: {
-    //   appId: '4K8CJKMVMJ',
-    //   apiKey: 'f59a14a50a6e068c1f6e556d76f14861',
-    //   indexName: 'Becsy'
-    // },
+    sidebar: [
+      {
+        text: 'Introduction',
+        items: [
+          page('guide/introduction'),
+          page('guide/getting-started'),
+          page('guide/deploying')
+        ]
+      },
+      {
+        text: 'Architecture',
+        items: [
+          page('guide/architecture/overview'),
+          page('guide/architecture/world'),
+          page('guide/architecture/components'),
+          page('guide/architecture/entities'),
+          page('guide/architecture/systems'),
+          page('guide/architecture/queries'),
+          page('guide/architecture/threading')
+        ]
+      },
+      {
+        text: 'Examples',
+        items: [
+          page('guide/examples/overview'),
+          page('guide/examples/simple')
+        ]
+      }
+    ],
   }
 });
 
-
-function getGuideSidebar() {
-  return [
-    {
-      text: 'Introduction',
-      children: [
-        {text: 'What is Becsy?', link: '/guide/introduction'},
-        {text: 'Getting Started', link: '/guide/getting-started'},
-        {text: 'Deploying', link: '/guide/deploying'}
-      ]
-    },
-    {
-      text: 'Architecture',
-      children: [
-        {text: 'Overview', link: '/guide/architecture/overview'},
-        {text: 'World', link: '/guide/architecture/world'},
-        {text: 'Components', link: '/guide/architecture/components'},
-        {text: 'Entities', link: '/guide/architecture/entities'},
-        {text: 'Systems', link: '/guide/architecture/systems'},
-        {text: 'Queries', link: '/guide/architecture/queries'},
-        {text: 'Multi-threading', link: '/guide/architecture/threading'}
-      ]
-    },
-    {
-      text: 'Examples',
-      children: [
-        {text: 'Overview', link: '/guide/examples/overview'},
-        {text: 'Simple moving box', link: '/guide/examples/simple'}
-      ]
+function page(path) {
+  const markdown = readFileSync(`docs/${path}.md`).toString();
+  let currentLevel = 0, itemStack = [];
+  for (const match of markdown.matchAll(/^(#+) (.*?)(?: +\{(?:#|id=)(.*?)\})?$/gm)) {
+    const level = match[1].length, title = match[2];
+    const slug =
+      match[3] ||
+      title.toLowerCase().replace(/[^a-z0-9\-]/gi, '-').replace(/-+/g, '-').replace(/^-|-$/, '');
+    const item = {text: title, link: `/${path}#${slug}`};
+    if (level === currentLevel) {
+      itemStack.pop();
+    } else if (level < currentLevel) {
+      itemStack.pop();
+      itemStack.pop();
     }
-  ]
+    const lastItem = itemStack.length ? itemStack[itemStack.length - 1] : null;
+    if (lastItem) {
+      lastItem.collapsed = true;
+      lastItem.items = lastItem.items || [];
+      lastItem.items.push(item);
+    }
+    itemStack.push(item);
+    currentLevel = level;
+  }
+  return itemStack[0];
 }
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
@@ -1,3 +1,96 @@
+:root {
+  --vp-nav-logo-height: 1.8rem;
+  --vp-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  --vp-font-family-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+  --vp-sidebar-bg-color: var(--vp-c-bg-alt);
+  --vp-code-bg: var(--vp-code-block-bg);
+  --vp-code-color: var(--vp-c-text-2);
+  --vp-c-brand-1: #5e58e8;
+  --vp-c-brand-2: #7e77f4;
+  --vp-c-brand-3: #5e58e8;
+  --vp-custom-block-font-size: 0.9rem;
+  --c-info: #322ba8;
+  --c-tip: #008b15;
+  --c-warning: #c7a500;
+  --c-danger: #c80425;
+}
+
+header .title {
+  font-size: 1.3rem !important;
+}
+
+.VPNavBarMenuLink {
+  line-height: 1.2em !important;
+}
+
+.VPNavBarMenuLink.active {
+  color: var(--vp-c-text-1) !important;
+  text-decoration: underline;
+  text-decoration-color: var(--vp-c-brand-1);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 6px;
+}
+
+.VPLocalNav .menu-text {
+  display: none;
+}
+
+.VPLocalNav .menu::after {
+  content: "Table of contents";
+}
+
+.VPSidebarItem .text {
+  line-height: 1.4em;
+}
+
+.VPSidebarItem.is-link > .item > .link:hover .text,
+.VPSidebarItem.is-active > .item > .link > .text,
+.VPSidebarItem.has-active > .item > .link > .text {
+  color: var(--vp-c-brand-1) !important;
+}
+
+.VPSidebarItem.level-0 .text {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+.VPSidebarItem.level-1 .text,
+.VPSidebarItem.level-2 .text,
+.VPSidebarItem.level-3 .text,
+.VPSidebarItem.level-4 .text,
+.VPSidebarItem.level-5 .text {
+  font-size: 0.9rem;
+  font-weight: normal !important;
+  color: var(--vp-c-text-1) !important;
+}
+
+.vp-doc a {
+  text-decoration: none;
+  font-weight: normal;
+}
+
+.vp-doc a:hover {
+  text-decoration: underline;
+}
+
+.pager-link {
+  border: none !important;
+  padding: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  transition: none !important;
+}
+
+.pager-link:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.vp-doc div[class*='language-']+div[class*='language-'],
+.vp-doc div[class$='-api']+div[class*='language-'],
+.vp-doc div[class*='language-']+div[class$='-api']>div[class*='language-'] {
+  margin-top: 0;
+}
+
 .custom-block-title {
   display: none;
 }
@@ -6,17 +99,34 @@
   background-color: hsl(197, 37%, 96%) !important;
   color: var(--c-text) !important;
   position: relative;
+  border: none;
+  border-radius: 0;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
-  border-width: 4px !important;
+  border-left: 4px black solid;
+  padding: 8px 16px;
   overflow-x: visible !important;
 }
 
+.dark .custom-block {
+  background-color: hsl(197, 37%, 8%) !important;
+}
+
 .custom-block a {
-  color: var(--c-brand) !important;
+  color: var(--vp-c-brand-1) !important;
+}
+
+.custom-block a:hover {
+  color: var(--vp-c-brand-2) !important;
+  text-decoration: underline;
 }
 
-.custom-block.info::before, .custom-block.tip::before, .custom-block.warning::before, .custom-block.danger::before {
+.custom-block code {
+  color: var(--vp-code-color) !important;
+  background-color: var(--vp-code-bg) !important;
+}
+
+.custom-block::before {
   border-radius: 100%;
   color: #fff;
   font-size: 14px;
@@ -67,20 +177,3 @@
   content: "!";
   font-weight: 700;
 }
-
-.nav-bar-title .logo {
-  height: 1.8rem !important;
-}
-
-.dialog-item .icon.outbound {
-  margin-left: 0.25em;
-}
-
-:root {
-  --c-brand: #5e58e8;
-  --c-brand-light: #7e77f4;
-  --c-info: #322ba8;
-  --c-tip: #008b15;
-  --c-warning: #c7a500;
-  --c-danger: #c80425;
-}
diff --git a/docs/index.md b/docs/index.md
@@ -1,16 +1,21 @@
 ---
-home: true
-heroImage: /logo.png
-heroText: Becsy
-tagline: Multi-threaded ECS for TypeScript and JavaScript
-actionText: Get Started
-actionLink: /guide/introduction
+layout: home
+hero:
+  text: Becsy
+  tagline: Multi-threaded ECS for TypeScript and JavaScript
+  image:
+    src: /logo.png
+    alt: Becsy octopus
+  actions:
+    - theme: brand
+      text: Get Started
+      link: /guide/introduction
+
 features:
   - title: Multi-threaded
     details: Effortless lock-free multi-threaded framework to make your apps fly.
   - title: Ergonomic
     details: High level, expressive and safe API for a top-notch developer experience.
   - title: Performant
     details: Special performance build pours on the gas for production deployments.
-footer: MIT Licensed | Copyright © 2021-present Piotr Kaminski
 ---
diff --git a/package.json b/package.json
@@ -48,6 +48,6 @@
     "ts-jest": "^29.1.1",
     "tsc-watch": "^6.0.4",
     "typescript": "^5.2.2",
-    "vitepress": "^0.22.4"
+    "vitepress": "1.x"
   }
 }