Add a submenu / index on levels (#22)

- Fix #20

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tikuidoc-tikui",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Tikui documentation",
   "main": "tikuidoc.json",
   "scripts": {

part/component-render.pug

@@ -1 +1 @@
-iframe.doc-iframe(src=src, height=height)
+iframe.doc-iframe(src=src, height=height, title='Component rendering')

src/documentation/atom/_atom.scss

@@ -3,6 +3,7 @@
 @import 'image/image';
 @import 'link/link';
 @import 'logo/logo';
+@import 'nav-item/nav-item';
 @import 'paragraph/paragraph';
 @import 'quote/quote';
 @import 'title/title';

src/documentation/atom/nav-item/_nav-item.scss

@@ -0,0 +1,25 @@
+$tikui-nav-item-color-text: $tikui-color-text-dark !default;
+$tikui-nav-item-font-family: $tikui-font-family-main !default;
+$tikui-nav-item-font-size: 16px !default;
+$tikui-nav-item-main-font-size: 24px !default;
+
+.tikui-nav-item {
+  display: inline-block;
+  text-decoration: none;
+  color: $tikui-nav-item-color-text;
+  font-family: $tikui-nav-item-font-family;
+  font-size: $tikui-nav-item-font-size;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &.-selected {
+    font-weight: bold;
+  }
+
+  &.-main {
+    font-size: $tikui-nav-item-main-font-size;
+  }
+
+}

src/documentation/layout-atomic.pug

@@ -3,9 +3,9 @@ extends layout
 block title
   title Tikui
 block body
-  .tikui-template-page--header.doc-header
+  .tikui-template-page--header
     .tikui-template-page--container
       block header
-  .tikui-template-page--body.doc-content
+  .tikui-template-page--body(data-navigable)
     .tikui-template-page--container
       block content

src/documentation/layout.pug

@@ -1,9 +1,11 @@
 doctype html
-html
+html(lang='en')
   head
     meta(charset='utf-8')
     block title
       title Tikui
+    meta(name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no')
+    meta(name='description' content='Tikui is a Pattern Library generator.')
     link(rel='stylesheet', href='[[TIKUI_BASEPATH]]documentation/style.css')
     link(rel='stylesheet', href='[[TIKUI_BASEPATH]]lib/@fontsource/montserrat/index.css')
     link(rel='stylesheet', href='[[TIKUI_BASEPATH]]lib/@fontsource/montserrat/700.css')
@@ -14,3 +16,4 @@ html
     :reload
     script(src='[[TIKUI_BASEPATH]]lib/prismjs/prism.js')
     script(src='[[TIKUI_BASEPATH]]lib/prismjs/prism-pug.js')
+    script(src='[[TIKUI_BASEPATH]]documentation/scripts/tikui.js')

src/documentation/molecule/_molecule.scss

@@ -2,3 +2,4 @@
 @import 'component/component';
 @import 'header-navigation/header-navigation';
 @import 'list/list';
+@import 'nav-vertical/nav-vertical';

src/documentation/molecule/nav-vertical/_nav-vertical.scss

@@ -0,0 +1,35 @@
+$tikui-nav-vertical-padding: 32px !default;
+$tikui-nav-vertical-color-background: $tikui-color-background-secondary !default;
+$tikui-nav-vertical--item-spacing: 16px !default;
+$tikui-nav-vertical--item-level-1-spacing: 24px !default;
+$tikui-nav-vertical--item-indent-space: 16px !default;
+
+$levels: 1, 2, 3, 4, 5, 6;
+
+.tikui-nav-vertical {
+  display: block;
+  position: sticky;
+  margin: 0;
+  background-color: $tikui-nav-vertical-color-background;
+  padding: $tikui-nav-vertical-padding;
+  list-style: none;
+
+  &--item {
+    padding-bottom: $tikui-nav-vertical--item-spacing;
+    list-style: none;
+
+    &:last-child {
+      padding-bottom: 0;
+    }
+
+    &.-level-1 {
+      padding-bottom: $tikui-nav-vertical--item-level-1-spacing;
+    }
+
+    @each $level in $levels {
+      &.-level-#{$level} {
+        padding-left: ($level - 1) * $tikui-nav-vertical--item-indent-space;
+      }
+    }
+  }
+}

src/documentation/scripts/tikui.js

@@ -0,0 +1,63 @@
+const tikuiScripts = () => {
+  const titleSelectors = (content) => [...content?.querySelectorAll('h1, h2, h3, h4, h5, h6')].filter(title => title.id) || [];
+
+  const initNav = () => {
+    const content = document.querySelector('[data-navigable]');
+    const titles = titleSelectors(content);
+
+    if (titles.length === 0) {
+      return;
+    }
+
+    const nav = document.createElement('div');
+    nav.classList.add('tikui-template-page--nav')
+    const navVertical = document.createElement('ul');
+    navVertical.classList.add('tikui-nav-vertical');
+
+    titles.forEach((title, index) => {
+      const level = title.tagName.slice(1);
+      const item = document.createElement('a');
+      item.setAttribute('href', `#${title.id}`);
+      item.innerText = title.innerText;
+      item.classList.add('tikui-nav-item');
+      item.classList.add(level === '1' ? '-main' : '-child');
+      const slot = document.createElement('li');
+      slot.appendChild(item);
+      slot.classList.add('tikui-nav-vertical--item');
+      slot.classList.add(`-level-${level}`);
+
+      navVertical.appendChild(slot);
+    });
+
+    nav.appendChild(navVertical);
+
+    content.prepend(nav);
+  };
+
+  const launchOnHash = launch => {
+    const hash = location.hash;
+
+    if (hash) {
+      launch(hash.slice(1));
+    }
+  }
+
+  const launchOnAnchor = launch => (hash) => {
+    const element = document.getElementById(hash);
+
+    if (element) {
+      launch(element);
+    }
+  }
+
+  const scrollToAnchor = () => launchOnHash(launchOnAnchor((anchor) => anchor.scrollIntoView()))
+
+  const init = () => {
+    initNav();
+    scrollToAnchor();
+  }
+
+  init();
+}
+
+document.addEventListener('DOMContentLoaded', tikuiScripts, false);

src/documentation/template/template-page/_template-page.scss

@@ -4,7 +4,9 @@ $tikui-template-page-small-spacing: 2vw !default;
 $tikui-template-page-container-width: 1232px !default;
 $tikui-template-page-atomized-x: calc(50vw - 260px) !default;
 $tikui-template-page-atomized-y: -1260px !default;
-$tikui-template-page-atomized-image: url('documentation/assets/atom-background.svg') !default;
+$tikui-template-page-atomized-image: url('assets/atom-background.svg') !default;
+$tikui-template-page-nav-padding: 32px !default;
+$tikui-template-page--nav-width: 340px !default;
 
 .tikui-template-page {
   display: flex;
@@ -25,21 +27,35 @@ $tikui-template-page-atomized-image: url('documentation/assets/atom-background.s
 
   &--container {
     box-sizing: content-box;
+    flex-basis: 0;
+    flex-grow: 1;
     margin: auto;
     padding: 0 $tikui-template-page-spacing;
-    width: $tikui-template-page-container-width;
-  }
-
-  &--header {
-    background-color: $tikui-color-shade-100;
+    width: auto;
+    min-width: 0;
+    max-width: $tikui-template-page-container-width;
   }
 
   &--body {
+    display: flex;
     flex-grow: 1;
     background-color: $tikui-color-background;
     padding: $tikui-template-page-spacing 0;
     overflow: auto;
   }
+
+  &--nav {
+    box-sizing: content-box;
+    position: sticky;
+    top: 0;
+    padding: 0 $tikui-template-page-nav-padding;
+    width: $tikui-template-page--nav-width;
+    overflow: auto;
+  }
+
+  &--header {
+    background-color: $tikui-color-shade-100;
+  }
 }
 
 @media screen and (max-width: $tikui-template-page-large-breakpoint) {
@@ -52,8 +68,14 @@ $tikui-template-page-atomized-image: url('documentation/assets/atom-background.s
     }
 
     &--body {
+      display: block;
       padding: $tikui-template-page-small-spacing 0;
       overflow: visible;
     }
+
+    &--nav {
+      position: static;
+      width: auto;
+    }
   }
 }

src/documentation/token/color/_color.scss

@@ -1,6 +1,7 @@
 $tikui-color-primary: #310ca3 !default;
 $tikui-color-secondary: #fa9fb8 !default;
 $tikui-color-tertiary: #ffab82 !default;
+$tikui-color-gray: #808080 !default;
 $tikui-color-background: #fff7f3 !default;
 $tikui-color-background-secondary: #ffd5c1 !default;
 $tikui-color-shade-100: #fff !default;

src/documentation/token/font-family/_font-family.scss

@@ -1 +1 @@
-$tikui-font-family-main: 'Montserrat', sans-serif !default;;
+$tikui-font-family-main: 'Montserrat', sans-serif !default;

tikuidoc.json

@@ -5,6 +5,11 @@
       "type": "scss",
       "to": "documentation/style.css"
     },
+    {
+      "from": "documentation/scripts",
+      "type": "copy",
+      "to": "documentation/scripts"
+    },
     {
       "from": "documentation/assets",
       "type": "copy",