feat: add "Examples" navigation link

Add the top navigation link "Examples" and a new page that explains how
to acquire Fiddle and run the examples available in the sidebar.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Close #26
Partial work on #2

Co-authored-by: Erick Zhao <[email protected]>

docusaurus.config.js

@@ -31,6 +31,12 @@ module.exports = {
           docId: 'api/app',
           position: 'left',
         },
+        {
+          label: 'Examples',
+          type: 'doc',
+          docId: 'how-to/examples',
+          position: 'left',
+        },
         {
           href: 'https://github.com/electron/electron',
           label: 'GitHub',

scripts/pre-build.js

@@ -15,6 +15,7 @@ const { copy, download } = require('./tasks/download-docs');
 const { addFrontmatter } = require('./tasks/add-frontmatter');
 const { createSidebar } = require('./tasks/create-sidebar');
 const { fixContent } = require('./tasks/md-fixers');
+const { copyNewContent } = require('./tasks/copy-new-content');
 
 const DOCS_FOLDER = 'docs';
 // const BLOG_FOLDER = 'blog';
@@ -63,6 +64,9 @@ const start = async (localElectron) => {
   //   downloadMatch: 'data/blog',
   // });
 
+  console.log('Copying new content');
+  await copyNewContent(DOCS_FOLDER);
+
   console.log('Fixing markdown');
   await fixContent(DOCS_FOLDER);
 

scripts/tasks/copy-new-content.js

@@ -0,0 +1,21 @@
+const fs = require('fs').promises;
+const path = require('path');
+
+const newContent = new Map([['how-to-examples.md', 'how-to/examples.md']]);
+
+/**
+ * Copies the new content files to the destination
+ * @param {string} destination
+ */
+const copyNewContent = async (destination) => {
+  for (const [source, target] of newContent) {
+    await fs.copyFile(
+      path.join(__dirname, source),
+      path.join(destination, target)
+    );
+  }
+};
+
+module.exports = {
+  copyNewContent,
+};

scripts/tasks/how-to-examples.md

@@ -0,0 +1,38 @@
+---
+title: 'Examples overview'
+description: 'A set of examples for common Electron features'
+slug: examples
+hide_title: false
+---
+
+# Examples overview
+
+In this section, we have collected a set of guides for common features
+that you may want to implement in your Electron application. Each guide
+contains a practical example in a minimal, self-contained example app.
+The easiest way to run these examples is by downloading [Electron Fiddle][fiddle].
+
+Once Fiddle is installed, you can press on the "Open in Fiddle" button that you
+will find below code samples like the following one:
+
+```fiddle docs/fiddles/quick-start
+window.addEventListener('DOMContentLoaded', () => {
+  const replaceText = (selector, text) => {
+    const element = document.getElementById(selector)
+    if (element) element.innerText = text
+  }
+
+  for (const type of ['chrome', 'node', 'electron']) {
+    replaceText(`${type}-version`, process.versions[type])
+  }
+})
+```
+
+## How to...?
+
+You can find the full list of "How to?" in the sidebar. If there is
+something that you would like to do that is not documented, please join
+our [Discord server][] and let us know!
+
+[discord server]: https://discord.com/invite/electron
+[fiddle]: https://www.electronjs.org/fiddle

sidebars.js

@@ -61,6 +61,7 @@ module.exports = {
       type: 'category',
       label: 'How To',
       items: [
+        'how-to/examples',
         'how-to/dark-mode',
         'how-to/desktop-environment-integration',
         'how-to/fuses',