Merge pull request #40 from gethinode/develop

Color mode
gethinode · Apr 8, 2023 · 29ecf65 · 29ecf65
2 parents 6b2d728 + 2ce5f41
commit 29ecf65
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 25 deletions.
diff --git a/content/en/docs/0.9/advanced-settings/scripts.md b/content/en/docs/0.9/advanced-settings/scripts.md
@@ -1,7 +1,7 @@
 ---
 title: Scripts
 description: Automatically bundle local and external JavaScript files into a single file.
-date: 2023-04-03
+date: 2023-04-08
 layout: docs
 ---
 
@@ -27,6 +27,33 @@ Hinodes uses npm and mounted folders to create a flexibile virtual file system t
 
    Hinode's base layout `layouts/_default/baseof.html` imports the bundled JavaScript file in the footer. The file is cached to improve performance.
 
+## Critical files
+
+Hinode considers all files placed in the `assets/js/critical` folder as critical during page load. These files are bundled into the file `js/critical.bundle.js` and are included at the top of the page (right below the `<body>` tag). This ensures the browser processes these critical resources before rendering the initial site. By default, Hinode defines the JavaScript to toggle the site's [color mode]({{< relref "color-modes" >}}) as a critical resource to reduce screen flickering. The snippet below illustrates the page skeleton to include critical scripts as defined in `layouts/_default/baseof.html`.
+
+```go-html-template
+[...]
+
+<!doctype html>
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
+    <head>
+        {{ block "head" . }}{{ end -}}
+    </head>
+
+    <body>
+        {{- if site.Params.main.enableDarkMode -}}
+            {{- partial "footer/scripts.html" (dict 
+               "filename" "js/critical.bundle.js" 
+               "match" "js/critical/**.js" 
+               "page" .) 
+            -}}
+        {{- end -}}
+
+        [...]
+    </body>
+</html>
+```
+
 ## Example
 
 Mount the external JavaScript files to Hugo's virtual file system within the file `config/_default/config.toml`. The current configuration imports the relevant files of [Bootstrap]({{< param "links.bootstrap" >}}) and [FlexSearch]({{< param "links.flexsearch" >}}).

diff --git a/content/en/guides/optimization.md b/content/en/guides/optimization.md
@@ -2,6 +2,7 @@
 title: Optimizing the user experience
 description: Guide on how to optimize the user experience of your site.
 date: 2023-04-03
+lastmod: 2023-04-08
 # tags: ["optimization"]
 weight: 30
 thumbnail: img/watch.jpg
@@ -84,7 +85,7 @@ Scroll below in the Lighthouse evaluation report to study several opportunities
 
 2. **Eliminate render-blocking resources**
 
-   Hinode includes the `main.bundle.js` file in the page body instead of the header by default, thus keeping this file from the critical rendering path. However, the `main.css` file is render-blocking by default - no matter where included. Reducing the size of this file will improve the page loading performance.
+   Hinode includes the `main.bundle.js` file in the page body instead of the header by default, thus keeping this file from the critical rendering path. However, the `main.css` file is render-blocking by default - no matter where included. Reducing the size of this file will improve the page loading performance. One notable exception is the [script to control the site's color mode]({{< relref "scripts#critical-files" >}}), which is considered to be a critical resource.
 
 3. **Reduce unused CSS and JavaScript**
 

diff --git a/hugo_stats.json b/hugo_stats.json
@@ -316,14 +316,14 @@
       "multi-docs-collapse-12",
       "multi-docs-collapse-13",
       "multi-docs-collapse-15",
-      "multi-docs-collapse-17",
       "multi-docs-collapse-18",
       "multi-docs-collapse-2",
-      "multi-docs-collapse-20",
+      "multi-docs-collapse-21",
       "multi-docs-collapse-22",
       "multi-docs-collapse-32",
       "multi-docs-collapse-4",
       "multi-docs-collapse-5",
+      "multi-docs-collapse-6",
       "multi-docs-collapse-8",
       "multi-docs-collapse-9",
       "mx-auto",
@@ -560,14 +560,14 @@
       "body-docs-collapse-12",
       "body-docs-collapse-13",
       "body-docs-collapse-15",
-      "body-docs-collapse-17",
       "body-docs-collapse-18",
       "body-docs-collapse-2",
-      "body-docs-collapse-20",
+      "body-docs-collapse-21",
       "body-docs-collapse-22",
       "body-docs-collapse-32",
       "body-docs-collapse-4",
       "body-docs-collapse-5",
+      "body-docs-collapse-6",
       "body-docs-collapse-8",
       "body-docs-collapse-9",
       "bootstrap-icons",
@@ -582,6 +582,7 @@
       "carousel-18",
       "carousel-21",
       "carousel-23",
+      "carousel-24",
       "carousel-33",
       "carousel-9",
       "code-blocks",
@@ -603,6 +604,7 @@
       "content-translation",
       "core-components",
       "creating-a-new-git-repository",
+      "critical-files",
       "cross-references",
       "css",
       "customization",
@@ -639,14 +641,14 @@
       "footer-docs-collapse-12",
       "footer-docs-collapse-13",
       "footer-docs-collapse-15",
-      "footer-docs-collapse-17",
       "footer-docs-collapse-18",
       "footer-docs-collapse-2",
-      "footer-docs-collapse-20",
+      "footer-docs-collapse-21",
       "footer-docs-collapse-22",
       "footer-docs-collapse-32",
       "footer-docs-collapse-4",
       "footer-docs-collapse-5",
+      "footer-docs-collapse-6",
       "footer-docs-collapse-8",
       "footer-docs-collapse-9",
       "front-matter",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/docs",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "The source for https://gethinode.com",
   "main": "index.js",
   "scripts": {
@@ -38,12 +38,12 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
-    "@gethinode/hinode": "^0.11.4",
+    "@gethinode/hinode": "^0.11.5",
     "autoprefixer": "^10.4.14",
     "bootstrap": "^5.3.0-alpha3",
     "cssnano": "^6.0.0",
     "cssnano-preset-advanced": "^6.0.0",
-    "eslint": "^8.37.0",
+    "eslint": "^8.38.0",
     "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.7.0",