From ebfec4be987ddb96056d41bbad89e936abf02ae3 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sun, 31 Aug 2025 09:08:47 +0000 Subject: [PATCH] This commit refactors the site's header, navigation, and footer into shared HTML components that are dynamically loaded on each page. This improves maintainability and ensures consistency across the site. Key changes include: - A new mobile-friendly hamburger menu to fix the oversized header on small screens. - A standardized, shared footer with links to the homepage and GitHub repository. - A JavaScript-based component loading system to inject the shared header, nav, and footer. - Updated all HTML pages to use the new component system. - Added documentation for the new frontend architecture. --- _footer.html | 18 +++++++ _header.html | 8 +++ _nav.html | 26 ++++++++++ docs/README.md | 1 + docs/frontend-architecture.md | 17 +++++++ features/browser-apis.html | 48 ++---------------- features/clipboard.html | 48 ++---------------- features/drag-drop.html | 48 ++---------------- features/filter-search.html | 48 ++---------------- features/forms.html | 48 ++---------------- features/json-viewer.html | 48 ++---------------- features/live-js-runner.html | 48 ++---------------- features/markdown-converter.html | 48 ++---------------- features/mermaid-diagrams.html | 48 ++---------------- features/notes-app.html | 48 +----------------- features/page-state.html | 48 ++---------------- features/spa-routing.html | 48 ++---------------- features/theme-switcher.html | 48 ++---------------- games/clicker.html | 30 ++--------- games/drag-drop-puzzle.html | 30 ++--------- games/index.html | 48 ++---------------- games/maze.html | 30 ++--------- games/memory-match.html | 30 ++--------- games/number-guessing.html | 30 ++--------- games/rock-paper-scissors.html | 30 ++--------- games/simon-says.html | 30 ++--------- games/tic-tac-toe.html | 30 ++--------- games/typing-speed.html | 30 ++--------- games/wordle.html | 30 ++--------- guides/best-practices.html | 51 ++----------------- guides/markdown-usage.html | 53 +++----------------- guides/resources.html | 51 ++----------------- index.html | 47 ++---------------- script.js | 45 +++++++++++++++++ style.css | 85 ++++++++++++++++++++++++++++++-- tools/tech-tools.html | 52 ++----------------- 36 files changed, 338 insertions(+), 1088 deletions(-) create mode 100644 _footer.html create mode 100644 _header.html create mode 100644 _nav.html create mode 100644 docs/frontend-architecture.md diff --git a/_footer.html b/_footer.html new file mode 100644 index 0000000..664868f --- /dev/null +++ b/_footer.html @@ -0,0 +1,18 @@ +
+

+ © 2024 Getting Interactive with GitHub Pages. All rights reserved. | + View on GitHub +

+

+ Home + | + Best Practices + | + License +

+
diff --git a/_header.html b/_header.html new file mode 100644 index 0000000..ff888cd --- /dev/null +++ b/_header.html @@ -0,0 +1,8 @@ +
+

+ Getting Interactive with GitHub Pages +

+

Frontend magic for GitHub Pages - zero backend, pure fun!

+
diff --git a/_nav.html b/_nav.html new file mode 100644 index 0000000..5f80245 --- /dev/null +++ b/_nav.html @@ -0,0 +1,26 @@ +
+ + +
diff --git a/docs/README.md b/docs/README.md index 29f5a80..9030fa8 100644 --- a/docs/README.md +++ b/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. diff --git a/docs/frontend-architecture.md b/docs/frontend-architecture.md new file mode 100644 index 0000000..f2bf2a0 --- /dev/null +++ b/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 (`
`, `