Page load improvements (#2007)

Author: liamcmitchell

assets/build/build.js

@@ -71,6 +71,22 @@ Promise.all(formatters.map(async ({formatter, ...options}) => {
           }
         })
 
+        // Load html templates.
+        build.onLoad({
+          filter: /\.html$/
+        }, async ({ path: filename }) => {
+          try {
+            const source = await fs.readFile(filename, 'utf-8')
+            // Remove newlines and leading whitespace.
+            // Shouldn't have any effect on content.
+            const compressed = source.replace(/\n\s*/g, '')
+            const contents = `export default ${JSON.stringify(compressed)}`
+            return { contents }
+          } catch (error) {
+            return { errors: [{ text: error.message }] }
+          }
+        })
+
         // Generate docs with new assets (watch mode only).
         if (watchMode) {
           build.onEnd(async result => {

assets/css/sidebar.css

@@ -127,7 +127,7 @@
   padding: 0;
 }
 
-.sidebar .sidebar-list-nav li button {
+.sidebar .sidebar-list-nav button {
   background: none;
   border: 0;
   border-radius: 0;
@@ -142,29 +142,30 @@
   transition: all 150ms;
 }
 
-.sidebar .sidebar-list-nav li:is(.selected) button {
-  background-color: var(--sidebarBackground);
-  border-top: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
-}
-
-.sidebar .sidebar-list-nav li:not(.selected) button {
+.sidebar .sidebar-list-nav button {
   border-top: var(--navTabBorderWidth) solid var(--sidebarHeader);
 }
 
-.sidebar .sidebar-list-nav li:is(:hover):not(.selected) button {
+.sidebar .sidebar-list-nav button:not([aria-selected]):hover {
   background-color: var(--sidebarInactiveItemMarker);
   border-top: var(--navTabBorderWidth) solid var(--sidebarInactiveItemBorder);
   color: var(--sidebarAccentMain);
   transition: all 150ms;
 }
 
+.sidebar .sidebar-list-nav button[aria-selected] {
+  background-color: var(--sidebarBackground);
+  border-top: var(--navTabBorderWidth) solid var(--sidebarLanguageAccentBar);
+}
+
 .sidebar .sidebar-tabpanel {
   flex: 1 1 0.01%;
   overflow-y: auto;
   overscroll-behavior: contain;
   position: relative;
   -webkit-overflow-scrolling: touch;
-  margin-top: 12px;
+  padding-top: 12px;
+  scroll-padding-top: 40px;
 }
 
 .sidebar .full-list {
@@ -174,127 +175,106 @@
 }
 
 .sidebar .full-list :is(li, a) {
+  display: block;
   overflow: hidden;
+  white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .sidebar .full-list li {
   padding: 0;
-  margin-right: 30px;
   line-height: 27px;
-  white-space: nowrap;
 }
 
-.sidebar .full-list li.docs {
-  margin-right: 0;
+.sidebar .full-list li.group {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.8em;
+  margin: 1.5em 0 0;
+  line-height: 1.8em;
+  color: var(--sidebarSubheadings);
+  padding-left: 15px;
 }
 
-.sidebar .full-list li.open > ul {
-  display: block;
-  margin-left: 10px;
+.sidebar .full-list li.nesting-context {
+  font-weight: bold;
+  font-size: 0.9em;
+  line-height: 1.8em;
+  color: var(--sidebarSubheadings);
+  margin-top: 10px;
+  padding-left: 15px;
+}
+
+.sidebar .full-list a {
+  margin-right: 30px;
+  padding: 3px 0 3px 15px;
+  color: var(--sidebarItem);
+}
+
+.sidebar .full-list a[aria-selected] {
+  color: var(--sidebarActiveItem);
 }
 
-.sidebar .full-list li a.expand + button.icon-expand {
+.sidebar .full-list button {
   appearance: none;
   background-color: transparent;
   border: 0;
   padding: 0;
   cursor: pointer;
   color: inherit;
-  margin-right: 10px;
+  width: 20px;
+  text-align: center;
   font-size: calc(1.2 * var(--sidebarFontSize));
   line-height: var(--sidebarLineHeight);
   position: absolute;
-  display: flex;
-  right: 0;
-  transform: translateY(calc(-100% - 4px));
+  display: block;
+  right: 10px;
+  transform: translateY(-100%);
+}
+
+.sidebar .full-list a[aria-selected] + button {
+  color: var(--sidebarActiveItem);
 }
 
-.sidebar .full-list li a + button.icon-expand:after {
+.sidebar .full-list button:after {
   font-family: remixicon;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-
-.sidebar .full-list li a.expand + button.icon-expand:after {
   content: var(--icon-arrow-down-s);
 }
 
-.sidebar .full-list li.open > a.expand + button.icon-expand:after {
+.sidebar .full-list button[aria-expanded=true]:after {
   content: var(--icon-arrow-up-s);
 }
 
-.sidebar .full-list li.docs > a + button.icon-expand {
-  margin-right: 12px;
-  font-size: var(--sidebarFontSize);
-  line-height: var(--sidebarFontSize);
-  transform: translateY(calc(-100% - 5px));
-}
-
-.sidebar .full-list li.docs > a + button.icon-expand:after {
-  content: var(--icon-add);
-}
-
-.sidebar .full-list li.docs.open > a + button.icon-expand:after {
-  content: var(--icon-subtract);
-}
-
-.sidebar .full-list li.nesting-context {
-  font-weight: bold;
-  font-size: 0.9em;
-  line-height: 1.8em;
-  color: var(--sidebarSubheadings);
-  margin-top: 10px;
-  padding-left: 15px;
+.sidebar .full-list ul {
+  display: none;
+  margin: 10px 0 10px 10px;
+  padding: 0;
 }
 
-.sidebar .full-list li.group {
-  text-transform: uppercase;
-  font-weight: bold;
-  font-size: 0.8em;
-  margin: 1.5em 0 0;
-  line-height: 1.8em;
-  color: var(--sidebarSubheadings);
-  padding-left: 15px;
+.sidebar .full-list button[aria-expanded=true] + ul {
+  display: block;
 }
 
-.sidebar .full-list li a {
-  padding: 3px 0 3px 15px;
-  color: var(--sidebarItem);
-}
+/* Level 1 */
 
 .sidebar .full-list > li > a {
-  display: block;
-  width: 100%;
   height: 27px;
   line-height: var(--sidebarLineHeight);
 }
 
-.sidebar .full-list li .current-section > a {
-  color: var(--sidebarActiveItem);
-}
-
-.sidebar .full-list li .current-section > a + button.icon-expand {
-  color: var(--sidebarActiveItem);
-}
-
 .sidebar .full-list > li > a:hover {
   border-left: 3px solid var(--sidebarLanguageAccentBar);
   padding-left: 12px;
 }
 
-.sidebar .full-list > li.current-page > a {
-  color: var(--sidebarActiveItem);
+.sidebar .full-list > li > a[aria-selected] {
   border-left: 3px solid var(--sidebarLanguageAccentBar);
   padding-left: 12px;
 }
 
-.sidebar .full-list > li.current-page > a:after,
-.sidebar .full-list > li.current-page {
-  color: var(--sidebarActiveItem);
-}
-
 .sidebar .full-list > li:last-child {
   margin-bottom: 30px;
 }
@@ -303,84 +283,65 @@
   margin-top: 0;
 }
 
-.sidebar .full-list ul {
-  display: none;
-  margin: 10px 15px;
-  margin-right: 0;
-  padding: 0;
+/* Level 2 */
+
+.sidebar .full-list > li > ul > li > a:hover:before {
+  content: "\2022";
+  position: absolute;
+  margin-left: -15px;
+  color: var(--sidebarActiveItem);
 }
 
+/* Level 2+ */
+
 .sidebar .full-list ul li {
-  font-weight: 300;
   line-height: var(--sidebarFontSize);
   padding: 0 8px;
-  margin-right: 0;
-  color: var(--sidebarAccentMain);
 }
 
-:root:not(.apple-os) .sidebar .full-list ul li {
-  font-weight: 400; /* Non-Apple OSes render small light type too thinly */
+.sidebar .full-list ul a {
+  padding-left: 15px;
+  height: 24px;
 }
 
-.sidebar .full-list ul li.current-hash {
-  color: var(--sidebarActiveItem);
+.sidebar .full-list ul button {
+  font-size: var(--sidebarFontSize);
 }
 
-.sidebar .full-list ul li.current-hash > a {
-  color: var(--sidebarActiveItem);
+.sidebar .full-list ul button:after {
+  content: var(--icon-add);
 }
 
-.sidebar .full-list ul li.current-hash > a:before,
-.sidebar .full-list > li > ul > li > a:hover:before {
-  content: "\2022";
-  position: absolute;
-  margin-left: -15px;
-  color: var(--sidebarActiveItem);
+.sidebar .full-list ul button[aria-expanded=true]:after {
+  content: var(--icon-subtract);
 }
 
-.sidebar .full-list ul li a {
-  padding-left: 15px;
-  display: block;
-  width: 100%;
-  height: 24px;
-}
+/* Level 3+ */
 
-.sidebar .full-list ul li ul {
-  display: none;
-  margin: 9px 20px;
-  margin-right: 0;
+.sidebar .full-list ul ul {
+  margin: 9px 0 9px 10px;
 }
 
-.sidebar .full-list ul li ul li {
-  margin-right: 0;
+.sidebar .full-list ul ul li {
   height: 20px;
   color: var(--sidebarAccentMain);
 }
 
-.sidebar .full-list ul li ul li a {
+.sidebar .full-list ul ul a {
   border-left: 1px solid var(--sidebarInactiveItemMarker);
   padding: 0 10px;
   height: 20px;
 }
 
-.sidebar .full-list ul li ul li.current-hash > a:before {
-  content: none;
-}
-
-.sidebar .full-list ul li ul li > a:hover {
+.sidebar .full-list ul ul a:hover {
   border-color: var(--sidebarLanguageAccentBar);
 }
 
-.sidebar .full-list ul li ul li.current-hash > a {
+.sidebar .full-list ul ul a[aria-selected] {
   color: var(--sidebarActiveItem);
   border-color: var(--sidebarLanguageAccentBar);
 }
 
-.sidebar .full-list ul li ul li.current-hash > a {
-  color: var(--sidebarActiveItem);
-  margin-left: 0;
-}
-
 .sidebar ::-webkit-scrollbar {
   width: 14px;
 }

assets/js/copy-button.js

@@ -1,23 +1,22 @@
 import { qsAll } from './helpers'
+import buttonHtml from './handlebars/templates/copy-button.html'
 
-const template = document.createElement('div')
-template.innerHTML = '<button class="copy-button"><svg role="img" aria-label="copy" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg><span aria-live="polite"></span></button>'
-const buttonTemplate = template.firstChild
+/** @type {HTMLButtonElement} */
+let buttonTemplate
 
 /**
  * Initializes copy buttons.
  */
 export function initialize () {
-  if ('clipboard' in navigator) {
-    addCopyButtons()
-  }
-}
+  if (!('clipboard' in navigator)) return
 
-/**
- * Find pre tags, add copy buttons, copy <code> content on click.
- */
-function addCopyButtons () {
   qsAll('pre:has(> code:first-child):not(:has(.copy-button))').forEach(pre => {
+    if (!buttonTemplate) {
+      const div = document.createElement('div')
+      div.innerHTML = buttonHtml
+      buttonTemplate = div.firstChild
+    }
+
     const button = buttonTemplate.cloneNode(true)
     pre.appendChild(button)