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 (`
`, `