@brillout/docpress 0.0.45

package/src/icons/github.svg

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="svg370"
+   xml:space="preserve"
+   width="250.81488"
+   height="244.62376"
+   viewBox="0 0 250.81488 244.62376"
+   sodipodi:docname="github.svg"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"><metadata
+     id="metadata376"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs374" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1366"
+     inkscape:window-height="731"
+     id="namedview372"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.2365918"
+     inkscape:cx="288.55216"
+     inkscape:cy="872.45836"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g378" /><g
+     id="g378"
+     inkscape:groupmode="layer"
+     inkscape:label="ink_ext_XXXXXX"
+     transform="matrix(1.3333333,0,0,-1.3333333,224.39255,1704.88)"><g
+       id="g663"
+       transform="translate(-524.0424,525.41914)"><path
+         d="m 449.80434,753.24092 c -51.93909,0 -94.05636,-42.10949 -94.05636,-94.05636 0,-41.55656 26.95001,-76.8129 64.32148,-89.24981 4.70064,-0.87066 6.42638,2.04037 6.42638,4.52463 0,2.24285 -0.0872,9.65204 -0.12771,17.51136 -26.16657,-5.68967 -31.68803,11.09743 -31.68803,11.09743 -4.27855,10.87159 -10.44327,13.76237 -10.44327,13.76237 -8.53373,5.83764 0.64326,5.71771 0.64326,5.71771 9.44489,-0.66196 14.4181,-9.6941 14.4181,-9.6941 8.38887,-14.37759 22.00328,-10.22053 27.37054,-7.81726 0.84418,6.07906 3.28173,10.22988 5.97159,12.57709 -20.89121,2.37835 -42.85244,10.44326 -42.85244,46.48304 0,10.26882 3.67423,18.65926 9.69098,25.24607 -0.97657,2.37057 -4.196,11.93538 0.91116,24.89095 0,0 7.89825,2.52788 25.87219,-9.64113 7.50265,2.08398 15.54887,3.12908 23.54213,3.16491 7.99327,-0.0358 16.04572,-1.08093 23.56238,-3.16491 17.95213,12.16901 25.83948,9.64113 25.83948,9.64113 5.11962,-12.95557 1.89864,-22.52038 0.92206,-24.89095 6.03078,-6.58681 9.68008,-14.97725 9.68008,-25.24607 0,-36.12544 -22.00328,-44.07977 -42.94744,-46.40828 3.37361,-2.91882 6.37966,-8.64276 6.37966,-17.4179 0,-12.58488 -0.10903,-22.71352 -0.10903,-25.81146 0,-2.50295 1.69304,-5.43579 6.46065,-4.51217 37.35122,12.45092 64.26697,47.6948 64.26697,89.23735 0,51.94687 -42.11105,94.05636 -94.05481,94.05636"
+         style="fill:#1b1817;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.155753"
+         id="path386" /><path
+         d="m 391.3719,618.1965 c -0.20716,-0.46882 -0.94231,-0.60744 -1.61205,-0.28659 -0.6822,0.30683 -1.06536,0.94386 -0.84419,1.41268 0.20248,0.47972 0.9392,0.61367 1.61984,0.29438 0.68376,-0.3084 1.07314,-0.95166 0.8364,-1.42047 v 0"
+         style="fill:#1b1817;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.155753"
+         id="path388" /><path
+         d="m 395.18162,613.94754 c -0.44857,-0.41586 -1.32546,-0.22272 -1.92044,0.43455 -0.61522,0.65573 -0.73048,1.53262 -0.27568,1.95471 0.46259,0.4143 1.313,0.21961 1.92979,-0.43455 0.61522,-0.66351 0.73515,-1.53417 0.26633,-1.95471 v 0"
+         style="fill:#1b1817;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.155753"
+         id="path390" /><path
+         d="m 398.89011,608.53044 c -0.57629,-0.40029 -1.51859,-0.0249 -2.10111,0.81147 -0.57629,0.8364 -0.57629,1.83945 0.0125,2.2413 0.58407,0.40184 1.51236,0.0389 2.10267,-0.78967 0.57473,-0.85042 0.57473,-1.85347 -0.014,-2.2631 v 0"
+         style="fill:#1b1817;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.155753"
+         id="path392" /><path
+         d="m 403.97079,603.29713 c -0.51555,-0.5685 -1.61361,-0.41587 -2.41729,0.35979 -0.82238,0.75851 -1.05134,1.83477 -0.53424,2.40327 0.52178,0.57006 1.62607,0.40963 2.43598,-0.35979 0.81615,-0.75696 1.06536,-1.84101 0.51555,-2.40327 v 0"
+         style="fill:#1b1817;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.155753"
+         id="path394" /><path
+         d="m 410.97969,600.25838 c -0.2274,-0.73672 -1.28496,-1.07159 -2.35032,-0.75852 -1.06379,0.32241 -1.76001,1.18528 -1.54507,1.92978 0.22117,0.74139 1.28341,1.09028 2.35655,0.75541 1.06224,-0.32086 1.76001,-1.1775 1.53884,-1.92667 v 0"
+         style="fill:#1b1817;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.155753"
+         id="path396" /><path
+         d="m 418.67702,599.69455 c 0.0265,-0.77565 -0.87689,-1.41891 -1.9952,-1.43293 -1.12454,-0.0249 -2.03414,0.60276 -2.0466,1.36596 0,0.78343 0.88313,1.42047 2.00766,1.43916 1.11831,0.0218 2.03414,-0.60121 2.03414,-1.37219 v 0"
+         style="fill:#1b1817;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.155753"
+         id="path398" /><path
+         d="m 425.84012,600.9141 c 0.13395,-0.75696 -0.64326,-1.53417 -1.75378,-1.74132 -1.09183,-0.19937 -2.10267,0.26789 -2.24129,1.01862 -0.13551,0.77565 0.65572,1.55286 1.74599,1.75379 1.11208,0.19313 2.10735,-0.26167 2.24908,-1.03109 v 0"
+         style="fill:#1b1817;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.155753"
+         id="path400" /></g></g></svg>

package/src/icons/heart.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon" stroke="rgb(248, 113, 113)" fill="rgb(248, 113, 113)"><path d="M12,22.2c-0.3,0-0.5-0.1-0.7-0.3l-8.8-8.8c-2.5-2.5-2.5-6.7,0-9.2c2.5-2.5,6.7-2.5,9.2,0L12,4.3l0.4-0.4c0,0,0,0,0,0C13.6,2.7,15.2,2,16.9,2c0,0,0,0,0,0c1.7,0,3.4,0.7,4.6,1.9l0,0c1.2,1.2,1.9,2.9,1.9,4.6c0,1.7-0.7,3.4-1.9,4.6l-8.8,8.8C12.5,22.1,12.3,22.2,12,22.2zM7,4C5.9,4,4.7,4.4,3.9,5.3c-1.8,1.8-1.8,4.6,0,6.4l8.1,8.1l8.1-8.1c0.9-0.9,1.3-2,1.3-3.2c0-1.2-0.5-2.3-1.3-3.2l0,0C19.3,4.5,18.2,4,17,4c0,0,0,0,0,0c-1.2,0-2.3,0.5-3.2,1.3c0,0,0,0,0,0l-1.1,1.1c-0.4,0.4-1,0.4-1.4,0l-1.1-1.1C9.4,4.4,8.2,4,7,4z"></path></svg>

package/src/icons/twitter.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 248 204" style="enable-background:new 0 0 248 204;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1D9BF0;}
+</style>
+<g id="Logo_1_">
+	<path id="white_background" class="st0" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04
+		C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66
+		c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64
+		c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76
+		c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26
+		c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z"/>
+</g>
+</svg>

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components'
+export * from './utils'
+export * from './types'

package/src/installSectionUrlHashs.ts

@@ -0,0 +1,50 @@
+import { assert } from './utils'
+
+installSectionUrlHashs()
+/* Let browser restore previous scroll
+jumpToSection()
+*/
+
+function installSectionUrlHashs() {
+  const pageContainer = document.querySelector('.doc-page #page-container')
+  if (!pageContainer) {
+    assert(window.location.pathname === '/')
+    return
+  }
+  const navigationEl = document.getElementById('navigation-content')
+  assert(navigationEl)
+  const docSections = Array.from(document.querySelectorAll('h2'))
+  docSections.forEach((docSection) => {
+    const docTitle = docSection.textContent
+    assert(docTitle)
+    assert(docSection.id, { docSection })
+    const urlHash = '#' + docSection.id
+    assertNavLink(navigationEl, urlHash)
+    docSection.onclick = () => {
+      window.location.hash = urlHash
+      // The browser doesn't jump if hash doesn't change
+      jumpToSection()
+    }
+  })
+}
+
+function assertNavLink(navigationEl: HTMLElement, urlHash: string) {
+  const parentNavLinkMatch = Array.from(navigationEl.querySelectorAll(`a[href="${window.location.pathname}"]`))
+  assert(parentNavLinkMatch.length <= 1)
+  if (parentNavLinkMatch.length === 0) return
+  const navLinks: HTMLElement[] = Array.from(navigationEl.querySelectorAll(`a[href="${urlHash}"]`))
+  assert(navLinks.length === 1, { urlHash })
+}
+
+function jumpToSection() {
+  const { hash } = window.location
+  if (hash === '' || hash === '#') {
+    return
+  }
+  assert(hash.startsWith('#'))
+  const target = document.getElementById(hash.slice(1))
+  if (!target) {
+    return
+  }
+  target.scrollIntoView()
+}

package/src/navigation/Navigation-highlight.css

@@ -0,0 +1,41 @@
+/*
+.nav-item {
+  border-top: 1px solid transparent;
+}
+.nav-item.is-active {
+  border-color: #eaeaea;
+}
+.nav-item[is-active] {
+  background-color: attr(is-active)
+}
+*/
+
+/*
+#navigation-container:not(:hover) ::-webkit-scrollbar {
+  display: none;
+}
+#navigation-container ::-webkit-scrollbar-thumb {
+  opacity: 0;
+}
+#navigation-container ::-webkit-scrollbar-track {
+  opacity: 0;
+}
+*/
+
+/*
+.nav-tree:not(.expanded) > .nav-tree {
+  edisplay: none;
+  background:red;
+}
+  */
+/*
+.nav-tree.expanded,
+.nav-tree.expanded > .nav-tree {
+  display: inherit;
+}
+.nav-tree.expanded,
+.nav-tree.expanded > .nav-tree {
+  display: inherit;
+  background:red;
+}
+*/

package/src/navigation/Navigation-items.css

@@ -0,0 +1,122 @@
+.nav-item {
+  display: block;
+  white-space: nowrap;
+  overflow-x: hidden;
+  --padding-left-global: 9px;
+  --padding-left-additional: 0px;
+}
+.nav-item code {
+  font-size: 0.9em;
+}
+.nav-item-h1 + .nav-item-h4 {
+  margin-top: -2px;
+}
+.nav-item-h4 {
+  margin-top: 14px;
+  margin-bottom: -1px;
+  color: #999;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.15ch;
+  padding-left: var(--padding-left-global);
+  padding-right: 4px;
+  text-decoration: none;
+}
+.nav-column:first-of-type > .nav-h1-group:first-of-type > .nav-item-h1:first-of-type {
+  margin-top: 20px;
+}
+.nav-item-h1 {
+  margin-top: 30px;
+  font-size: 15.4px;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.15ch;
+  color: var(--color-text);
+  padding: 12px 0;
+  padding-left: calc(var(--padding-left-global) - 2px);
+  padding-right: 4px;
+  text-decoration: none;
+}
+.nav-item-h2 {
+  text-decoration: none;
+  font-size: 14.4px;
+  font-weight: 400;
+  letter-spacing: 0.15ch;
+  color: var(--color-text);
+  padding-left: var(--padding-left-global);
+  padding-right: 0;
+  --padding: 4px;
+  padding-top: var(--padding);
+  padding-bottom: var(--padding);
+}
+.nav-item-h3 {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.15ch;
+  color: var(--color-text);
+  text-decoration: none;
+  --padding: 5px;
+
+  background-color: #f9f9f9;
+  padding: var(--padding) 0;
+  padding-left: calc(var(--padding-left-global) + var(--padding-left-additional));
+}
+html.navigation-fullscreen .nav-item-h3 {
+  border-right: 4px solid #eee;
+}
+.nav-item-h3.nav-item-first-of-its-kind {
+  padding-top: calc(var(--padding) * 1.6);
+}
+.nav-item-h3.nav-item-last-of-its-kind {
+  padding-bottom: calc(var(--padding) * 2);
+}
+.nav-item-h2,
+.nav-item-h3 {
+  position: relative;
+}
+/*
+.nav-item-h2.is-active .nav-item-text{
+  background-color: var(--background-color);
+}
+*/
+.nav-item-h2.is-active {
+  background-color: var(--background-color);
+}
+.nav-item-h3.is-active:before {
+  display: block;
+  content: '';
+  position: absolute;
+  width: 4px;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background-color: var(--background-color);
+  z-index: 10;
+}
+.nav-item-h3.is-active-last:after {
+  display: block;
+  content: '';
+  position: absolute;
+  height: 4px;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: var(--background-color);
+  z-index: 10;
+  border-bottom-left-radius: 5px;
+}
+html.navigation-fullscreen .nav-item {
+  --expend-border-radius: 5px;
+}
+.nav-item.is-active-first {
+  border-top-left-radius: 5px;
+  border-top-right-radius: var(--expend-border-radius);
+}
+.nav-item.is-active-last,
+.nav-item.is-active-last:before {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: var(--expend-border-radius);
+}
+.nav-item-h3.nav-item-parent-is-list-heading {
+  --padding-left-additional: 21px;
+}

package/src/navigation/Navigation-layout.css

@@ -0,0 +1,119 @@
+:root {
+  --mobile-header-height: 60px;
+  --navigation-min-height: 300px;
+  --navigation-max-height: 350px;
+}
+#navigation-wrapper {
+  min-width: var(--navigation-min-height);
+  flex-grow: 1;
+}
+.doc-page #navigation-wrapper {
+  max-width: var(--navigation-max-height);
+}
+.landing-page #navigation-wrapper {
+  /* prettier-ignore */
+  max-width: min(var(--navigation-max-height), max(var(--navigation-min-height), calc(var(--navigation-min-height) + 100vw - 1240px)));
+}
+#navigation-container {
+  /* `position: fixed` doesn't inherit the parent's width */
+  position: sticky;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-right: 1px solid #eee;
+}
+#navigation-mask {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+/* `1140px` is the breaking point that preserves the width of code blocks. */
+/* BEFORE EDITING THIS: also change the `1139px` value below */
+@media screen and (min-width: 1140px) {
+  #mobile-header {
+    display: none !important;
+  }
+  #navigation-container {
+    height: 100vh;
+    top: 0;
+  }
+  #navigation-mask {
+    display: none;
+  }
+}
+#navigation-container {
+  transition: transform 0.25s ease;
+  background: white;
+  z-index: 3;
+}
+#page-wrapper {
+  margin-left: calc(-1 * var(--navigation-fullscreen-button-width));
+}
+@media screen and (max-width: 1139px) {
+  #navigation-header-logo,
+  #docsearch {
+    display: none !important;
+  }
+  #navigation-wrapper {
+    min-width: 0px !important;
+    max-width: 0px !important;
+  }
+  #navigation-fullscreen-button {
+    display: none;
+  }
+  #page-wrapper {
+    margin-left: 0!important;
+  }
+  #navigation-container {
+    --width: min(100vw, 350px);
+    width: var(--width);
+    left: 0;
+    height: calc(100vh - var(--mobile-header-height));
+    top: var(--mobile-header-height);
+    padding-top: 20px;
+    /* `position: sticky` doesn't seem to work on mobile */
+    position: fixed;
+  }
+  body:not(.show-menu) #navigation-container {
+    transform: translateX(calc(-1 * var(--width)));
+  }
+  body:not(.show-menu) #navigation-mask {
+    display: none;
+  }
+  #mobile-header {
+    display: inherit;
+  }
+  .doc-page h2 {
+    --padding-top: calc(var(--mobile-header-height) + 12px) !important;
+  }
+}
+
+html.navigation-fullscreen #navigation-container {
+  width: 100vw;
+  height: 100vh;
+  overflow-y: scroll;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: white;
+}
+html.navigation-fullscreen #navigation-header {
+  display: none !important;
+}
+html.navigation-fullscreen #navigation-content {
+  display: flex;
+  margin: auto; /* A `max-width` is set by src/navigation/navigation-fullscreen/initNavigationFullscreen.ts */
+}
+html.navigation-fullscreen #navigation-content > .nav-column {
+  flex-grow: 1;
+  max-width: 350px;
+}
+html.navigation-fullscreen .nav-column > .nav-h1-group:first-child > .nav-item-h1:first-child {
+  margin-top: 0px;
+}
+html.navigation-fullscreen {
+  /* disable scroll of main view */
+  overflow: hidden !important;
+}