Add progress bar and fix cheatsheets regression

Author: josevalim

assets/css/content/cheatsheet.css

@@ -29,7 +29,7 @@
   font-weight: 500;
 }
 
-.page-cheatmd.dark .content-inner h2 {
+.dark .page-cheatmd .content-inner h2 {
   color: var(--gray200);
 }
 
@@ -82,7 +82,7 @@
   border: solid 1px 1px 0 1px var(--gray100);
 }
 
-.page-cheatmd.dark .content-inner h4 {
+.dark .page-cheatmd .content-inner h4 {
   background: #192f50;
   color: var(--textBody);
   border: 1px solid #192f50;
@@ -98,7 +98,7 @@
   padding: var(--vertical-space) var(--horizontal-space);
 }
 
-.page-cheatmd.dark .content-inner .h2 p {
+.dark .page-cheatmd .content-inner .h2 p {
   background: var(--gray700);
 }
 
@@ -176,7 +176,7 @@
   background-color: var(--gray50);
 }
 
-.page-cheatmd.dark .content-inner .h2 thead {
+.dark .page-cheatmd .content-inner .h2 thead {
   background-color: var(--gray700);
 }
 

assets/css/custom-props/theme-dark.css

@@ -20,20 +20,20 @@ body.dark {
   --tableHeadBorder:             var(--gray600);
   --tableBodyBorder:             var(--gray700);
 
-  --warningBackground:          hsla( 33,  30%,  60%,  10%);
-  --warningHeadingBackground:   hsla( 33,  66%,  35%,  80%);
+  --warningBackground:           hsla( 33,  30%,  60%,  10%);
+  --warningHeadingBackground:    hsla( 33,  66%,  35%,  80%);
   --warningHeading:              var(--white);
-  --errorBackground:            hsla(  7,  30%,  60%,  10%);
-  --errorHeadingBackground:     hsla(  6,  70%,  40%,  80%);
+  --errorBackground:             hsla(  7,  30%,  60%,  10%);
+  --errorHeadingBackground:      hsla(  6,  70%,  40%,  80%);
   --errorHeading:                var(--white);
-  --infoBackground:             hsla(206,  30%,  60%,  10%);
-  --infoHeadingBackground:      hsla(213,  55%,  35%,  80%);
+  --infoBackground:              hsla(206,  30%,  60%,  10%);
+  --infoHeadingBackground:       hsla(213,  55%,  35%,  80%);
   --infoHeading:                 var(--white);
   --neutralBackground:           hsl(210,  30%,  60%,  10%);
   --neutralHeadingBackground:    var(--gray600);
   --neutralHeading:              var(--white);
-  --tipBackground:              hsla(142,  30%,  60%,  10%);
-  --tipHeadingBackground:       hsla(134,  45%,  30%,  80%);
+  --tipBackground:               hsla(142,  30%,  60%,  10%);
+  --tipHeadingBackground:        hsla(134,  45%,  30%,  80%);
   --tipHeading:                  var(--white);
 
   --fnSpecAttr:                  var(--gray400);
@@ -71,6 +71,7 @@ body.dark {
   --quickSwitchContour:          var(--gray500);
 
   --success:                     var(--green-lightened-10);
+  --progressBarColor:            var(--gray400);
 
   --sidebarAccentMain:           var(--gray50);
   --sidebarBackground:           var(--gray800);

assets/css/custom-props/theme-light.css

@@ -71,6 +71,7 @@
   --quickSwitchContour:          var(--coldGray);
 
   --success:                     var(--green);
+  --progressBarColor:            var(--gray400);
 
   --sidebarAccentMain:           var(--black);
   --sidebarBackground:           var(--gray50);

assets/css/layout.css

@@ -131,3 +131,8 @@ body.sidebar-closed .content {
     position: absolute;
   }
 }
+
+.swup-progress-bar {
+  height: 2px;
+  background-color: var(--progressBarColor);
+}

assets/js/entry/html.js

@@ -23,6 +23,7 @@ import { initialize as initPreview} from '../preview'
 
 import Swup from 'swup'
 import SwupA11yPlugin from '@swup/a11y-plugin'
+import SwupProgressPlugin from '@swup/progress-plugin'
 
 onDocumentReady(() => {
   const params = new URLSearchParams(window.location.search)
@@ -57,7 +58,7 @@ onDocumentReady(() => {
           }
         },
         linkSelector: 'a[href]:not([href^="/"]):not([href^="http"])',
-        plugins: [new SwupA11yPlugin()]
+        plugins: [new SwupA11yPlugin(), new SwupProgressPlugin()]
       })
     }
 

assets/package.json

@@ -30,6 +30,7 @@
     "@fontsource/inconsolata": "^4.5.9",
     "@fontsource/lato": "^4.5.10",
     "@swup/a11y-plugin": "^5.0.0",
+    "@swup/progress-plugin": "^3.2.0",
     "esbuild": "^0.16.16",
     "eslint": "^8.31.0",
     "eslint-config-standard": "^17.0.0",