blog: A Faster Electron

docusaurus.config.ts

@@ -264,9 +264,22 @@ const config: Config = {
       indexName: 'electronjs',
       contextualSearch: true,
     },
+    // Lightbox (click-to-zoom) for blog post images.
+    // Images wrapped in links are excluded so they navigate instead of zooming.
+    zoom: {
+      selector: '.blog-wrapper .markdown :not(a) > img',
+      background: {
+        light: 'rgba(255, 255, 255, 0.95)',
+        dark: 'rgba(27, 28, 38, 0.95)',
+      },
+      config: {
+        margin: 24,
+      },
+    },
   } satisfies Preset.ThemeConfig,
   plugins: [
     'docusaurus-plugin-sass',
+    'docusaurus-plugin-image-zoom',
     path.resolve(__dirname, './src/plugins/apps/index.ts'),
     path.resolve(__dirname, './src/plugins/releases/index.ts'),
     path.resolve(__dirname, './src/plugins/fiddle/index.ts'),

package.json

@@ -40,6 +40,7 @@
     "adm-zip": "^0.5.14",
     "ajv": "^8.18.0",
     "clsx": "^1.1.1",
+    "docusaurus-plugin-image-zoom": "^3.0.1",
     "docusaurus-plugin-sass": "^0.2.1",
     "lucide-react": "^0.511.0",
     "prism-react-renderer": "^2.3.1",

src/css/custom.scss

@@ -330,3 +330,18 @@ html {
     }
   }
 }
+
+// Give the blog post table of contents a bit more room. By default it's a
+// `col--2` (~190px in the 1140px container), which wraps almost every
+// heading; widen it to 20% and take the difference from the post column.
+// Scoped by structure: only the blog layout has a `main.col--7` followed by
+// a `.col--2` TOC in the same row (docs use different column classes).
+.main-wrapper .row {
+  main.col.col--7 {
+    --ifm-col-width: 55%;
+  }
+
+  main.col.col--7 ~ .col.col--2 {
+    --ifm-col-width: 20%;
+  }
+}