Refactor Header and Footer into Shared Components

_footer.html

@@ -0,0 +1,18 @@
+<div class="container">
+  <p>
+    &copy; 2024 Getting Interactive with GitHub Pages. All rights reserved. |
+    <a
+      href="https://github.com/attogram/static-magic"
+      target="_blank"
+      rel="noopener noreferrer"
+      >View on GitHub</a
+    >
+  </p>
+  <p>
+    <a href="/index.html">Home</a>
+    |
+    <a href="/guides/best-practices.html">Best Practices</a>
+    |
+    <a href="/LICENSE">License</a>
+  </p>
+</div>

_header.html

@@ -0,0 +1,8 @@
+<div class="container">
+  <h1>
+    <a href="/index.html" style="text-decoration: none; color: inherit"
+      >Getting Interactive with GitHub Pages</a
+    >
+  </h1>
+  <p>Frontend magic for GitHub Pages - zero backend, pure fun!</p>
+</div>

_nav.html

@@ -0,0 +1,26 @@
+<div class="container">
+  <button id="nav-toggle" class="nav-toggle" aria-label="toggle navigation">
+    <span class="hamburger"></span>
+  </button>
+  <ul class="nav-links">
+    <li><a href="/index.html">Home</a></li>
+    <li><a href="/features/forms.html">Forms</a></li>
+    <li><a href="/features/live-js-runner.html">JS Runner</a></li>
+    <li><a href="/features/theme-switcher.html">Theme Switcher</a></li>
+    <li><a href="/features/notes-app.html">Notes App</a></li>
+    <li><a href="/features/filter-search.html">Filter & Search</a></li>
+    <li><a href="/features/markdown-converter.html">Markdown Converter</a></li>
+    <li><a href="/features/json-viewer.html">JSON Viewer</a></li>
+    <li><a href="/features/mermaid-diagrams.html">Mermaid Diagrams</a></li>
+    <li><a href="/features/clipboard.html">Clipboard API</a></li>
+    <li><a href="/features/drag-drop.html">Drag & Drop</a></li>
+    <li><a href="/features/spa-routing.html">SPA Routing</a></li>
+    <li><a href="/features/page-state.html">Page State</a></li>
+    <li><a href="/features/browser-apis.html">Browser APIs</a></li>
+    <li><a href="/tools/tech-tools.html">Tech Tools</a></li>
+    <li><a href="/games/index.html">Games</a></li>
+    <li><a href="/guides/best-practices.html">Best Practices</a></li>
+    <li><a href="/guides/resources.html">Resources</a></li>
+    <li><a href="/guides/markdown-usage.html">Markdown Usage</a></li>
+  </ul>
+</div>

docs/README.md

@@ -14,4 +14,5 @@ This directory contains the documentation for the `base` project.
 - **[Standard Repository Files](./standard-files.md)**: An explanation of the standard configuration files like `.gitignore`, `.editorconfig`, and `.gitattributes`.
 - **[Using Prettier](./prettier.md)**: A guide to installing and using Prettier for code formatting.
 - **[Repository Badges](./badges.md)**: An explanation of how to use and create repository badges.
+- **[Frontend Architecture](./frontend-architecture.md)**: An overview of the frontend architecture, including the shared component system.
 - **[Maintaining `base` as a Template Repository](./template-repo.md)**: A guide for maintainers of this template, outlining best practices and administrative steps.

docs/frontend-architecture.md

@@ -0,0 +1,17 @@
+# Frontend Architecture
+
+The frontend of this website is built with vanilla HTML, CSS, and JavaScript, with a focus on simplicity and maintainability.
+
+## Shared Components
+
+To avoid code duplication and make site-wide updates easier, the website uses a shared component system for the header, navigation, and footer.
+
+- **`/_header.html`**: The main site header.
+- **`/_nav.html`**: The main site navigation.
+- **`/_footer.html`**: The main site footer.
+
+These HTML "fragments" are dynamically loaded into each page by the main JavaScript file, `script.js`. The script fetches the content of these files and injects them into placeholder elements (`<header id="main-header">`, `<nav id="main-nav">`, and `<footer id="main-footer">`) in the main HTML files.
+
+## Mobile Navigation
+
+The navigation includes a mobile-friendly "hamburger" menu. The CSS in `style.css` handles the layout changes for mobile devices, and the JavaScript in `script.js` handles the toggle functionality.

features/browser-apis.html

@@ -4,41 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Browser API Demos - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
-    <header>
-      <div class="container">
-        <h1>Getting Interactive with GitHub Pages</h1>
-        <p>Frontend magic for GitHub Pages - zero backend, pure fun!</p>
-      </div>
-    </header>
+    <header id="main-header"></header>
 
-    <nav>
-      <div class="container">
-        <ul>
-          <li><a href="../index.html">Home</a></li>
-          <li><a href="forms.html">Forms</a></li>
-          <li><a href="live-js-runner.html">JS Runner</a></li>
-          <li><a href="theme-switcher.html">Theme Switcher</a></li>
-          <li><a href="notes-app.html">Notes App</a></li>
-          <li><a href="filter-search.html">Filter & Search</a></li>
-          <li><a href="markdown-converter.html">Markdown Converter</a></li>
-          <li><a href="json-viewer.html">JSON Viewer</a></li>
-          <li><a href="mermaid-diagrams.html">Mermaid Diagrams</a></li>
-          <li><a href="clipboard.html">Clipboard API</a></li>
-          <li><a href="drag-drop.html">Drag & Drop</a></li>
-          <li><a href="spa-routing.html">SPA Routing</a></li>
-          <li><a href="page-state.html">Page State</a></li>
-          <li><a href="browser-apis.html">Browser APIs</a></li>
-          <li><a href="../tools/tech-tools.html">Tech Tools</a></li>
-          <li><a href="../games/index.html">Games</a></li>
-          <li><a href="../guides/best-practices.html">Best Practices</a></li>
-          <li><a href="../guides/resources.html">Resources</a></li>
-          <li><a href="../guides/markdown-usage.html">Markdown Usage</a></li>
-        </ul>
-      </div>
-    </nav>
+    <nav id="main-nav"></nav>
 
     <main>
       <div class="container">
@@ -136,20 +107,11 @@ <h4>Code</h4>
       </div>
     </main>
 
-    <footer>
-      <div class="container">
-        <p>
-          Created with ❤️ and vanilla JS. Fork this project on
-          <a href="https://github.com/attogram/static-magic" target="_blank"
-            >GitHub</a
-          >.
-        </p>
-      </div>
-    </footer>
+    <footer id="main-footer"></footer>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       // Geolocation
       const geoBtn = document.getElementById("geo-btn");

features/clipboard.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Clipboard Interaction - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       #copy-text {
         width: 100%;
@@ -18,38 +18,9 @@
     </style>
   </head>
   <body>
-    <header>
-      <div class="container">
-        <h1>Getting Interactive with GitHub Pages</h1>
-        <p>Frontend magic for GitHub Pages - zero backend, pure fun!</p>
-      </div>
-    </header>
+    <header id="main-header"></header>
 
-    <nav>
-      <div class="container">
-        <ul>
-          <li><a href="../index.html">Home</a></li>
-          <li><a href="forms.html">Forms</a></li>
-          <li><a href="live-js-runner.html">JS Runner</a></li>
-          <li><a href="theme-switcher.html">Theme Switcher</a></li>
-          <li><a href="notes-app.html">Notes App</a></li>
-          <li><a href="filter-search.html">Filter & Search</a></li>
-          <li><a href="markdown-converter.html">Markdown Converter</a></li>
-          <li><a href="json-viewer.html">JSON Viewer</a></li>
-          <li><a href="mermaid-diagrams.html">Mermaid Diagrams</a></li>
-          <li><a href="clipboard.html">Clipboard API</a></li>
-          <li><a href="drag-drop.html">Drag & Drop</a></li>
-          <li><a href="spa-routing.html">SPA Routing</a></li>
-          <li><a href="page-state.html">Page State</a></li>
-          <li><a href="browser-apis.html">Browser APIs</a></li>
-          <li><a href="../tools/tech-tools.html">Tech Tools</a></li>
-          <li><a href="../games/index.html">Games</a></li>
-          <li><a href="../guides/best-practices.html">Best Practices</a></li>
-          <li><a href="../guides/resources.html">Resources</a></li>
-          <li><a href="../guides/markdown-usage.html">Markdown Usage</a></li>
-        </ul>
-      </div>
-    </nav>
+    <nav id="main-nav"></nav>
 
     <main>
       <div class="container">
@@ -124,20 +95,11 @@ <h4>JavaScript</h4>
       </div>
     </main>
 
-    <footer>
-      <div class="container">
-        <p>
-          Created with ❤️ and vanilla JS. Fork this project on
-          <a href="https://github.com/attogram/static-magic" target="_blank"
-            >GitHub</a
-          >.
-        </p>
-      </div>
-    </footer>
+    <footer id="main-footer"></footer>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const copyText = document.getElementById("copy-text");
       const copyBtn = document.getElementById("copy-btn");

features/drag-drop.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Drag and Drop UI - Getting Interactive with GitHub Pages</title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       .drop-lanes {
         display: flex;
@@ -36,38 +36,9 @@
     </style>
   </head>
   <body>
-    <header>
-      <div class="container">
-        <h1>Getting Interactive with GitHub Pages</h1>
-        <p>Frontend magic for GitHub Pages - zero backend, pure fun!</p>
-      </div>
-    </header>
+    <header id="main-header"></header>
 
-    <nav>
-      <div class="container">
-        <ul>
-          <li><a href="../index.html">Home</a></li>
-          <li><a href="forms.html">Forms</a></li>
-          <li><a href="live-js-runner.html">JS Runner</a></li>
-          <li><a href="theme-switcher.html">Theme Switcher</a></li>
-          <li><a href="notes-app.html">Notes App</a></li>
-          <li><a href="filter-search.html">Filter & Search</a></li>
-          <li><a href="markdown-converter.html">Markdown Converter</a></li>
-          <li><a href="json-viewer.html">JSON Viewer</a></li>
-          <li><a href="mermaid-diagrams.html">Mermaid Diagrams</a></li>
-          <li><a href="clipboard.html">Clipboard API</a></li>
-          <li><a href="drag-drop.html">Drag & Drop</a></li>
-          <li><a href="spa-routing.html">SPA Routing</a></li>
-          <li><a href="page-state.html">Page State</a></li>
-          <li><a href="browser-apis.html">Browser APIs</a></li>
-          <li><a href="../tools/tech-tools.html">Tech Tools</a></li>
-          <li><a href="../games/index.html">Games</a></li>
-          <li><a href="../guides/best-practices.html">Best Practices</a></li>
-          <li><a href="../guides/resources.html">Resources</a></li>
-          <li><a href="../guides/markdown-usage.html">Markdown Usage</a></li>
-        </ul>
-      </div>
-    </nav>
+    <nav id="main-nav"></nav>
 
     <main>
       <div class="container">
@@ -167,20 +138,11 @@ <h4>JavaScript</h4>
       </div>
     </main>
 
-    <footer>
-      <div class="container">
-        <p>
-          Created with ❤️ and vanilla JS. Fork this project on
-          <a href="https://github.com/attogram/static-magic" target="_blank"
-            >GitHub</a
-          >.
-        </p>
-      </div>
-    </footer>
+    <footer id="main-footer"></footer>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const draggables = document.querySelectorAll(".draggable");
       const lanes = document.querySelectorAll(".lane");

features/filter-search.html

@@ -6,7 +6,7 @@
     <title>
       Filterable Lists & Search - Getting Interactive with GitHub Pages
     </title>
-    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <style>
       #search-input {
         width: 100%;
@@ -21,38 +21,9 @@
     </style>
   </head>
   <body>
-    <header>
-      <div class="container">
-        <h1>Getting Interactive with GitHub Pages</h1>
-        <p>Frontend magic for GitHub Pages - zero backend, pure fun!</p>
-      </div>
-    </header>
+    <header id="main-header"></header>
 
-    <nav>
-      <div class="container">
-        <ul>
-          <li><a href="../index.html">Home</a></li>
-          <li><a href="forms.html">Forms</a></li>
-          <li><a href="live-js-runner.html">JS Runner</a></li>
-          <li><a href="theme-switcher.html">Theme Switcher</a></li>
-          <li><a href="notes-app.html">Notes App</a></li>
-          <li><a href="filter-search.html">Filter & Search</a></li>
-          <li><a href="markdown-converter.html">Markdown Converter</a></li>
-          <li><a href="json-viewer.html">JSON Viewer</a></li>
-          <li><a href="mermaid-diagrams.html">Mermaid Diagrams</a></li>
-          <li><a href="clipboard.html">Clipboard API</a></li>
-          <li><a href="drag-drop.html">Drag & Drop</a></li>
-          <li><a href="spa-routing.html">SPA Routing</a></li>
-          <li><a href="page-state.html">Page State</a></li>
-          <li><a href="browser-apis.html">Browser APIs</a></li>
-          <li><a href="../tools/tech-tools.html">Tech Tools</a></li>
-          <li><a href="../games/index.html">Games</a></li>
-          <li><a href="../guides/best-practices.html">Best Practices</a></li>
-          <li><a href="../guides/resources.html">Resources</a></li>
-          <li><a href="../guides/markdown-usage.html">Markdown Usage</a></li>
-        </ul>
-      </div>
-    </nav>
+    <nav id="main-nav"></nav>
 
     <main>
       <div class="container">
@@ -134,20 +105,11 @@ <h4>JavaScript</h4>
       </div>
     </main>
 
-    <footer>
-      <div class="container">
-        <p>
-          Created with ❤️ and vanilla JS. Fork this project on
-          <a href="https://github.com/attogram/static-magic" target="_blank"
-            >GitHub</a
-          >.
-        </p>
-      </div>
-    </footer>
+    <footer id="main-footer"></footer>
 
     <button id="theme-switcher" class="btn">Dark Mode</button>
 
-    <script src="../script.js"></script>
+    <script src="/script.js"></script>
     <script>
       const searchInput = document.getElementById("search-input");
       const itemList = document.getElementById("item-list");