71 lines
2.4 KiB
JavaScript
71 lines
2.4 KiB
JavaScript
/**
|
|
* Script to help convert existing HTML files to use the includes system
|
|
*
|
|
* Usage:
|
|
* 1. Include this script in your HTML file temporarily
|
|
* 2. Open the page in a browser
|
|
* 3. Open the browser console
|
|
* 4. The script will output the modified HTML content that uses includes
|
|
*/
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Extract the head content
|
|
const headContent = document.head.innerHTML;
|
|
|
|
// Extract the navigation content
|
|
const navContent = document.querySelector('.main-nav')?.outerHTML || '';
|
|
|
|
// Extract the theme switcher content
|
|
const themeSwitcherContent = document.querySelector('.theme-switch')?.outerHTML || '';
|
|
|
|
// Extract the footer content (accessibility notice)
|
|
const footerContent = document.querySelector('.accessibility-notice')?.parentElement?.innerHTML || '';
|
|
|
|
// Extract the main content
|
|
const mainContentElement = document.querySelector('.container-fluid');
|
|
let mainContent = '';
|
|
|
|
if (mainContentElement) {
|
|
// Clone the main content to avoid modifying the original
|
|
const mainContentClone = mainContentElement.cloneNode(true);
|
|
|
|
// Remove the accessibility notice from the clone if it exists
|
|
const accessibilityNotice = mainContentClone.querySelector('.accessibility-notice');
|
|
if (accessibilityNotice && accessibilityNotice.parentElement) {
|
|
accessibilityNotice.parentElement.removeChild(accessibilityNotice);
|
|
}
|
|
|
|
mainContent = mainContentClone.innerHTML;
|
|
}
|
|
|
|
// Create the modified HTML content
|
|
const modifiedHTML = `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
${headContent}
|
|
<script src="${getRelativePath()}includes.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Header Include -->
|
|
<div id="header-include"></div>
|
|
|
|
<!-- Main Content -->
|
|
${mainContent}
|
|
|
|
<!-- Footer Include -->
|
|
<div id="footer-include"></div>
|
|
</body>
|
|
</html>`;
|
|
|
|
// Output the modified HTML content to the console
|
|
console.log('=== MODIFIED HTML CONTENT ===');
|
|
console.log(modifiedHTML);
|
|
console.log('=== END MODIFIED HTML CONTENT ===');
|
|
|
|
// Helper function to get the relative path to the root
|
|
function getRelativePath() {
|
|
const path = window.location.pathname;
|
|
const depth = (path.match(/\//g) || []).length - 1;
|
|
return depth > 0 ? '../'.repeat(depth) : '';
|
|
}
|
|
});
|