Nixius

History

Colin 5b422a67b2 Add UTM URL Generator tool with live preview and pre-generated PDFs - Add utm-tool.html and utm-tool.js for UTM URL generation - Live URL generation as user types (no button required) - Support for all standard UTM parameters plus custom parameters - Add UTM Builder to nav dropdown and index.html tools section - Pre-generate all PDFs for faster Docker builds - Update git hooks for PDF generation		2025-12-02 11:18:49 -05:00
..
IMPLEMENTATION_GUIDE.md	Remove unused development utility scripts	2025-10-19 16:27:05 -04:00
README.md	Simplify favicon: use only SVG, remove ICO/PNG files and hardcoded links	2025-12-01 13:42:10 -05:00
footer.html	Add PDF generation for static site pages	2025-11-30 15:46:21 -05:00
header.html	Add UTM URL Generator tool with live preview and pre-generated PDFs	2025-12-02 11:18:49 -05:00

README.md

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:

<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:

<!-- 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:

<!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>

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