Page load improvements

Author: liamcmitchell

assets/css/layout.css

@@ -27,15 +27,17 @@ body {
   height: 100%;
 }
 
+/* Sidebar is closed by default and opened with body.sidebar-opened. */
 .sidebar {
-  display: flex;
+  display: none;
   flex-direction: column;
   width: var(--sidebarWidth);
   min-width: var(--sidebarMinWidth);
+  max-width: 50vw;
   height: 100%;
   position: fixed;
   top: 0;
-  left: 0;
+  left: calc(-1 * var(--sidebarWidth));
   z-index: 100;
   resize: horizontal;
 }
@@ -47,15 +49,12 @@ body {
   top: 0;
   left: 0;
   will-change: transform;
-}
-
-.sidebar-toggle--animated.sidebar-button {
-  transition: transform var(--sidebarTransitionDuration) ease-in-out;
+  transform: translateX(0);
 }
 
 .content {
-  width: calc(100% - var(--sidebarWidth));
-  left: var(--sidebarWidth);
+  left: 0;
+  width: 100%;
   height: 100%;
   position: absolute;
 }
@@ -71,63 +70,41 @@ body {
   outline: none;
 }
 
-body:is(.sidebar-opening, .sidebar-opened) .sidebar-button {
-  transform: translateX(calc(var(--sidebarWidth) - 100%));
+.sidebar-transition .sidebar,
+.sidebar-transition .sidebar-button,
+.sidebar-transition .content {
+  transition: all var(--sidebarTransitionDuration) ease-in-out allow-discrete;
 }
 
-body.sidebar-opening-start .sidebar {
-  left: calc(-1 * var(--sidebarWidth));
+.sidebar-open .sidebar,
+.sidebar-transition .sidebar {
+  display: flex;
 }
 
-body.sidebar-opening-start .content {
-  width: 100%;
+.sidebar-open .sidebar {
   left: 0;
 }
 
-body.sidebar-opening .sidebar {
-  left: 0;
-  transition: left var(--sidebarTransitionDuration) ease-in-out;
+.sidebar-open .sidebar-button {
+  transform: translateX(calc(var(--sidebarWidth) - 100%));
 }
 
-body.sidebar-opening .content {
+.sidebar-open .content {
   width: calc(100% - var(--sidebarWidth));
   left: var(--sidebarWidth);
-  transition: all var(--sidebarTransitionDuration) ease-in-out;
-}
-
-body.sidebar-closing .sidebar-button {
-  transform: translateX(0);
-}
-
-body.sidebar-closing .sidebar {
-  left: calc(-1 * var(--sidebarWidth));
-  transition: left var(--sidebarTransitionDuration) ease-in-out;
-}
-
-body.sidebar-closing .content {
-  width: 100%;
-  left: 0;
-  transition: all var(--sidebarTransitionDuration) ease-in-out;
-}
-
-body.sidebar-closed .sidebar {
-  left: calc(-1 * var(--sidebarWidth));
-  display: none;
-}
-
-body.sidebar-closed .content {
-  width: 100%;
-  left: 0;
 }
 
 @media screen and (max-width: 768px) {
-  .content,
-  body.sidebar-opening .content {
+  .sidebar-open .content {
     left: 0;
     width: 100%;
   }
 
-  body.sidebar-closed .sidebar-button {
+  .sidebar {
+    max-width: 90vw;
+  }
+
+  .sidebar-button {
     position: absolute;
   }
 }

assets/js/constants.js

@@ -1,3 +1,7 @@
 // Constants separated to allow importing into inline_html.js without
 // bringing in other code.
 export const SETTINGS_KEY = 'ex_doc:settings'
+export const DARK_MODE_CLASS = 'dark'
+export const THEME_SYSTEM = 'system'
+export const THEME_DARK = 'dark'
+export const THEME_LIGHT = 'light'

assets/js/entry/html.js

@@ -1,5 +1,3 @@
-import '../handlebars/helpers'
-
 import { onDocumentReady } from '../helpers'
 import { initialize as initTabsets } from '../tabsets'
 import { initialize as initContent } from '../content'
@@ -31,7 +29,7 @@ onDocumentReady(() => {
   const isPreview = params.has('preview')
   const isHint = params.has('hint')
 
-  initTheme(params.get('theme'))
+  initTheme()
   initStyling()
 
   initTabsets()

assets/js/entry/inline_html.js

@@ -3,16 +3,28 @@
 // Only code that must be executed ASAP belongs here.
 // Imports should only bring in inlinable constants.
 // Check compiled output to make sure no unnecessary code is imported.
-import { SETTINGS_KEY } from '../constants'
+import { DARK_MODE_CLASS, SETTINGS_KEY, THEME_DARK, THEME_LIGHT } from '../constants'
+import { SIDEBAR_CLASS_OPEN, SIDEBAR_PREF_CLOSED, SIDEBAR_STATE_KEY, SIDEBAR_WIDTH_KEY, SMALL_SCREEN_BREAKPOINT } from '../sidebar/constants'
 
-// Immediately apply night mode preference to avoid a flash effect
-try {
-  const {theme} = JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}')
+const params = new URLSearchParams(window.location.search)
 
-  if (theme === 'dark' ||
-     ((theme === 'system' || theme == null) &&
+// Immediately apply night mode preference to avoid a flash effect.
+// Should match logic in theme.js.
+const theme = params.get('theme') || JSON.parse(localStorage.getItem(SETTINGS_KEY) || '{}').theme
+if (theme === THEME_DARK ||
+     (theme !== THEME_LIGHT &&
        window.matchMedia('(prefers-color-scheme: dark)').matches)
-  ) {
-    document.body.classList.add('dark')
-  }
-} catch (error) { }
+) {
+  document.body.classList.add(DARK_MODE_CLASS)
+}
+
+// Set sidebar state and width.
+// Should match logic in sidebar-drawer.js.
+const sidebarPref = sessionStorage.getItem(SIDEBAR_STATE_KEY)
+const open = sidebarPref !== SIDEBAR_PREF_CLOSED && !window.matchMedia(`screen and (max-width: ${SMALL_SCREEN_BREAKPOINT}px)`).matches
+document.body.classList.toggle(SIDEBAR_CLASS_OPEN, open)
+
+const sidebarWidth = sessionStorage.getItem(SIDEBAR_WIDTH_KEY)
+if (sidebarWidth) {
+  document.body.style.setProperty('--sidebarWidth', `${sidebarWidth}px`)
+}

assets/js/sidebar/constants.js

@@ -0,0 +1,7 @@
+export const SIDEBAR_STATE_KEY = 'sidebar_state'
+export const SIDEBAR_PREF_CLOSED = 'closed'
+export const SIDEBAR_PREF_OPEN = 'open'
+export const SIDEBAR_WIDTH_KEY = 'sidebar_width'
+export const SMALL_SCREEN_BREAKPOINT = 768
+export const SIDEBAR_CLASS_OPEN = 'sidebar-open'
+export const SIDEBAR_CLASS_TRANSITION = 'sidebar-transition'