Further improvements

assets/css/_html.css

@@ -37,6 +37,7 @@
 @import "print-cheatsheet.css";
 @import "makeup.css";
 @import "tabset.css";
+@import "preview.css";
 
 body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
 body.dark .content-inner img[src*="#gh-light-mode-only"] {

assets/css/content/functions.css

@@ -9,19 +9,15 @@
 }
 
 .content-inner .detail:target .detail-header {
-  animation-duration: .55s;
+  animation-duration: 0.55s;
   animation-name: blink-background;
   animation-iteration-count: 1;
   animation-timing-function: ease-in-out;
 }
 
-.content-inner .detail-header:not(.detail-header-preview) {
-  margin: 2.0 0 1.0em;
-}
-
 .content-inner .detail-header {
-  margin: 0 0 1.0em;
-  padding: .5em 1em;
+  margin: 2 0 1em;
+  padding: 0.5em 1em;
   background-color: var(--textDetailBackground);
   border-left: 3px solid var(--textDetailAccent);
   font-size: 1em;
@@ -47,13 +43,13 @@
 }
 
 .content-inner .detail-header a.detail-link {
-  transition: opacity .3s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   opacity: 0;
-  padding: .6em;
+  padding: 0.6em;
   line-height: 1.5em;
   margin-left: -2.5em;
   text-decoration: none;
@@ -68,7 +64,7 @@
 
 .content-inner .specs pre {
   font-family: var(--monoFontFamily);
-  font-size: .9em;
+  font-size: 0.9em;
   font-style: normal;
   line-height: 24px;
   white-space: pre-wrap;
@@ -99,19 +95,19 @@
 }
 
 .content-inner .docstring h3 {
-  font-size: 1.0em;
+  font-size: 1em;
 }
 
 .content-inner .docstring h4 {
-  font-size: .95em;
+  font-size: 0.95em;
 }
 
 .content-inner .docstring h5 {
-  font-size: .9em;
+  font-size: 0.9em;
 }
 
 .content-inner div.deprecated {
   display: block;
   padding: 9px 15px;
   background-color: var(--fnDeprecated);
-}
+}

assets/css/content/general.css

@@ -17,7 +17,7 @@
 
 .content-inner h1 {
   font-size: 2em;
-  margin: 0.8em 0 0.5em;
+  margin: 0.5em 0;
 }
 
 .content-inner h1.signature {

assets/css/layout.css

@@ -22,7 +22,7 @@ body {
   box-sizing: inherit;
 }
 
-.main {
+.body-wrapper {
   display: flex;
   height: 100%;
 }
@@ -54,23 +54,13 @@ body {
 }
 
 .content {
-  height: 100%;
-  width: 100%;
-}
-
-.content:not(.content-preview) {
   width: calc(100% - var(--sidebarWidth));
   left: var(--sidebarWidth);
+  height: 100%;
   position: absolute;
 }
 
-.content.content-preview {
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-bottom: 16px;
-}
-
-.content:not(.content-preview) .content-inner {
+.content .content-inner {
   max-width: var(--content-width);
   min-height: 100%;
   margin: 0 auto;
@@ -131,7 +121,6 @@ body.sidebar-closed .content {
 }
 
 @media screen and (max-width: 768px) {
-
   .content,
   body.sidebar-opening .content {
     left: 0;

assets/css/preview.css

@@ -0,0 +1,23 @@
+body.preview {
+  --sidebarWidth: 0px;
+}
+
+body.preview .content {
+  height: auto;
+}
+
+body.preview .content-inner {
+  padding: 0;
+}
+
+body.preview .sidebar, body.preview #sidebar-menu {
+  display: none;
+}
+
+body.preview .hover-link, body.preview .detail-link {
+  display: none;
+}
+
+body.preview :is(h1, h2, h3):first-of-type {
+  margin-top: 0;
+}

assets/css/print.css

@@ -1,5 +1,5 @@
 @media print {
-  .main {
+  .body-wrapper {
     display: block;
   }
 

assets/js/autocomplete/autocomplete-list.js

@@ -91,18 +91,19 @@ export function moveAutocompleteSelection (offset) {
   if (elementToSelect) {
     elementToSelect.classList.add('selected')
     showPreview(elementToSelect)
-    
+
     elementToSelect.scrollIntoView({ block: 'nearest' })
   } else {
-    qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR).scrollTop = 0
+    const list = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
+    if (list) { list.scrollTop = 0 }
   }
 }
 
 /**
  * Toggles the preview state of the autocomplete list
  */
 export function togglePreview () {
-  state.previewOpen = !state.previewOpen;
+  state.previewOpen = !state.previewOpen
   const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
   if (state.previewOpen) {
     suggestionList.classList.add('previewing')
@@ -118,7 +119,7 @@ export function togglePreview () {
   }
 }
 
-function showPreview(elementToSelect) {
+function showPreview (elementToSelect) {
   const container = previewContainer()
 
   if (container) {
@@ -127,7 +128,7 @@ function showPreview(elementToSelect) {
 
   const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
 
-  if(state.previewOpen && elementToSelect) {
+  if (state.previewOpen && elementToSelect) {
     suggestionList.classList.add('previewing')
     const newContainer = document.createElement('div')
     newContainer.classList.add('autocomplete-preview')
@@ -137,13 +138,13 @@ function showPreview(elementToSelect) {
     iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups allow-forms')
     iframe.setAttribute('src', previewHref)
     newContainer.replaceChildren(iframe)
-    elementToSelect.parentNode.insertBefore(newContainer, elementToSelect.nextSibling);
+    elementToSelect.parentNode.insertBefore(newContainer, elementToSelect.nextSibling)
   } else {
     suggestionList.classList.remove('previewing')
   }
 }
 
-function previewContainer() {
+function previewContainer () {
   return qs('.autocomplete-preview')
 }
 

assets/js/entry/html.js

@@ -22,23 +22,29 @@ import { initialize as initTabsets } from '../tabsets'
 import { initialize as initPreview} from '../preview'
 
 onDocumentReady(() => {
+  const params = new URLSearchParams(window.location.search)
+
   initTheme()
-  initSidebarDrawer()
-  initSidebarContent()
-  initSidebarSearch()
-  initVersions()
   initContent()
   initMakeup()
-  initModal()
-  initKeyboardShortcuts()
-  initQuickSwitch()
-  initToast()
   initTooltips()
   initHintsPage()
-  initSearchPage()
   initCopyButton()
-  initSettings()
   initOs()
   initTabsets()
-  initPreview()
+
+  if (params.has('preview')) {
+    initPreview()
+  } else {
+    initVersions()
+    initSidebarDrawer()
+    initSidebarContent()
+    initSidebarSearch()
+    initModal()
+    initKeyboardShortcuts()
+    initQuickSwitch()
+    initToast()
+    initSearchPage()
+    initSettings()
+  }
 })

assets/js/helpers.js

@@ -76,43 +76,37 @@ export function findSidebarCategory (nodes, anchor) {
  * @returns {HTMLElement|null} The relevant element.
  */
 export function descriptionElementFromHash (hash, anything = false) {
-  if (!hash) { 
+  if (!hash) {
     if (!anything) {
-      return null 
+      return null
     } else {
-      const h1 = document.querySelector('h1');
-      if (!h1) { return null }
-      return toNextHeader(h1)
+      return document.getElementById('top-content')
     }
   }
 
   const element = document.getElementById(hash)
-
   if (!element) { return null }
 
   // See `detail_template.eex` for the reference.
   if (element.matches('.detail')) {
     return element
   }
 
-  if (element.matches('span')) {
-    return element.parentElement
-  }
-
+  // Matches a subheader in particular
   if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(element.tagName.toLowerCase())) {
     return toNextHeader(element)
-  } 
+  }
 
   return null
 }
 
-function toNextHeader(element) {
+function toNextHeader (element) {
   const elements = [element]
   let nextElement = element.nextElementSibling
   const tagName = element.tagName.toLowerCase()
 
   while (nextElement) {
-    const nextElementTagName = nextElement.tagName.toLowerCase();
+    const nextElementTagName = nextElement.tagName.toLowerCase()
     if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(nextElementTagName) && nextElementTagName <= tagName) {
       nextElement = null
     } else {

assets/js/preview.js

@@ -1,65 +1,35 @@
 import { getLocationHash, descriptionElementFromHash } from './helpers'
 
-
 export function initialize () {
-  const previewing = getPreviewing()
+  const previewing = descriptionElementFromHash(getLocationHash(), true)
+
   if (previewing) {
     preview(previewing)
   }
 }
 
 function preview (previewing) {
-  cleanUpPreviewing(previewing)
   replaceContents(previewing)
-  removeNonPreviewContents()
   makeLinksOpenInParent()
   scrollToTop()
 }
 
 function makeLinksOpenInParent () {
   const links = document.getElementsByTagName('a')
-  for (let element of links) {
+  for (const element of links) {
     console.log(element)
-    if(element.getAttribute('target') !== '_blank') {
+    if (element.getAttribute('target') !== '_blank') {
       element.setAttribute('target', '_parent')
     }
   }
 }
 
-function cleanUpPreviewing(previewing) {
-  const detailHeader = previewing.querySelector('.detail-header')
-  if (detailHeader) {
-    detailHeader.classList.add('detail-header-preview')
-  }
-}
-
-function scrollToTop() {
+function scrollToTop () {
   window.scrollTo(0, 0)
 }
 
-function removeNonPreviewContents () {
-  document.getElementById('sidebar').remove()
-  document.getElementById('sidebar-menu').remove()
-  document.getElementById('background-layer').remove()
-  const bottomActions = document.getElementById('bottom-actions')
-  bottomActions && bottomActions.remove()
-  const footer = document.getElementById('footer')
-  footer && footer.remove()
-  Array.from(document.getElementsByTagName('a'))
-    .filter((element) => element.getAttribute('href').startsWith('#'))
-    .forEach(element => element.remove())
-}
-
 function replaceContents (previewing) {
-  const contentContainer = document.getElementById('main')
-  contentContainer.classList.add("content-preview")
+  document.body.classList.add('preview')
   const content = document.getElementById('content')
   content.innerHTML = previewing.innerHTML
 }
-
-function getPreviewing () {
-  const params = new URLSearchParams(window.location.search)
-  if (params.has('preview')) {
-    return descriptionElementFromHash(getLocationHash(), true)
-  }
-}