Implementation Guide: Converting to the Includes System

This guide explains how to convert the existing portfolio website to use the includes system for headers and footers.

What We've Created

Header and Footer Templates
- includes/header.html: Contains the common header elements
- includes/footer.html: Contains the common footer elements
JavaScript for Includes
- includes.js: Handles the inclusion of header and footer files and applies the correct active states to navigation items
Example Files
- template-with-includes.html: Basic template
- stories/story-with-includes.html: Example of a story page
- one-pager-tools/tool-with-includes.html: Example of a tool page

Implementation Steps

1. Update the CSP in Caddyfile and Caddyfile.local

Add the includes.js script hash to the Content-Security-Policy:

Content-Security-Policy "default-src 'none'; script-src 'self' 'sha256-HASH_FOR_INCLUDES_JS' 'sha256-anTkUs/oFZJulKUMaMjZlwaALEmPOP8op0psAo5Bhh8=' 'sha256-ryQsJ+aghKKD/CeXgx8jtsnZT3Epp3EjIw8RyHIq544='; ...

2. Convert Existing Pages

For each HTML page:

Add the includes.js script to the head section:
```
<script src="../includes.js"></script>
```
(Adjust the path as needed based on the location of the HTML file)
Replace the header content (everything from the opening <body> tag to the opening <div class="container-fluid"> tag) with:
```

<div id="header-include"></div>
```
Replace the footer content (everything from the closing </div> of the main container to the closing </body> tag) with:
```

<div id="footer-include"></div>
```

Once you've created your includes, you can add them to your HTML files as shown above.

3. Testing

After converting each page:

Test the page in a browser to ensure it loads correctly
Verify that the navigation active states work as expected
Check that all CSS and JavaScript files are loaded correctly

Benefits

Easier Maintenance: Changes to the header or footer only need to be made in one place
Consistency: All pages will have the same header and footer structure
Reduced File Size: Each HTML file will be smaller since the common elements are externalized
Improved Developer Experience: Easier to focus on the unique content of each page

Future Enhancements

Dynamic Meta Tags: Enhance the includes system to support dynamic meta tags and titles
Page-Specific CSS/JS: Add support for page-specific CSS and JavaScript files
Breadcrumbs: Implement a breadcrumb system that works with the includes system

2.7 KiB Raw Blame History