# HTML Includes System

This system allows for separating headers and footers into external HTML files that can be included in all individual pages, making maintenance easier and ensuring consistency across the site.

## Files

- `header.html`: Contains the common header elements for all pages
- `footer.html`: Contains the common footer elements for all pages
- `includes.js`: JavaScript file that handles the inclusion of header and footer files and applies the correct active states to navigation items

## How to Use

### 1. Include the JavaScript

Add the `includes.js` script to your HTML file:

```html
<script src="../includes.js"></script>
```

(Adjust the path as needed based on the location of your HTML file)

### 2. Add Include Placeholders

Add placeholder divs where you want the header and footer to be included:

```html
<!-- Header Include -->
<div id="header-include"></div>

<!-- Your page content here -->

<!-- Footer Include -->
<div id="footer-include"></div>
```

### 3. Example Structure

Here's a basic template for a page using includes:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Your description here">
    <title>Your Title - Colin Knapp</title>
    <link rel="stylesheet" href="../styles.css">
    <!-- Additional CSS files as needed -->
    <script src="../theme.js"></script>
    <script src="../includes.js"></script>
    <!-- Additional JS files as needed -->
</head>
<body>
    <!-- Header Include -->
    <div id="header-include"></div>
    
    <!-- Main Content -->
    <h1>Your Page Title</h1>
    <p>Your page content...</p>
    
    <!-- Footer Include -->
    <div id="footer-include"></div>
</body>
</html>
```

## Navigation Active States

The `includes.js` file automatically sets the active state for navigation items based on the current page. The navigation items in `header.html` have IDs that are used to identify which item should be active.

## Example Files

See the following example files that demonstrate how to use the includes system:

- `/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 