5151e87824
- Set up esbuild for fast TypeScript compilation of frontend code - Create SharedHeader component with factories for main/admin/privacy pages - Create SharedFooter component with standard and minimal variants - Add frontend build scripts (build:frontend, watch:frontend, dev:full) - Configure TypeScript for browser environment with DOM types - Add example page demonstrating shared component usage - Update .gitignore to exclude compiled frontend files Benefits: - Type-safe frontend components - Consistent headers/footers across all pages - Single source of truth for common UI elements - Built-in i18n and theme toggle support 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
47 lines
No EOL
1.6 KiB
HTML
47 lines
No EOL
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Shared Components Example</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<!-- Internationalization -->
|
|
<script src="i18n.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Container for shared header -->
|
|
<div id="header-container"></div>
|
|
|
|
<div class="content">
|
|
<div class="form-section">
|
|
<h2>Example Page Using Shared Components</h2>
|
|
<p>This page demonstrates the new TypeScript-based shared header and footer components.</p>
|
|
|
|
<h3>Benefits:</h3>
|
|
<ul>
|
|
<li>✅ Type-safe TypeScript components</li>
|
|
<li>✅ Consistent headers/footers across all pages</li>
|
|
<li>✅ Easy to maintain - change once, update everywhere</li>
|
|
<li>✅ Built-in i18n support</li>
|
|
<li>✅ Automatic theme toggle functionality</li>
|
|
</ul>
|
|
|
|
<h3>How to use:</h3>
|
|
<pre><code>// Include the compiled bundle
|
|
<script src="dist/app-main.js"></script>
|
|
|
|
// The shared components are automatically rendered
|
|
// into #header-container and #footer-container</code></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container for shared footer -->
|
|
<div id="footer-container"></div>
|
|
</div>
|
|
|
|
<!-- Include the compiled TypeScript bundle -->
|
|
<script src="dist/app-main.js"></script>
|
|
</body>
|
|
</html> |