Merge pull request #44 from ethmarks/refactor-components

Refactor ethmarks-components

Author: ethmarks

…uts/partials/ethmarks-components-js.html assets/js/ethmarks-components.jslayouts/partials/ethmarks-components-js.html renamed to assets/js/ethmarks-components.js layouts/partials/ethmarks-components-js.html renamed to assets/js/ethmarks-components.js

@@ -1,19 +1,21 @@
-{{- $header := partial "header.html" . | jsonify -}}
-{{- $footer := partial "footer.html" . | jsonify -}}
-{{- $js := printf `// Ethmarks Web Components
-// Generated automatically from Hugo partials
+// Ethmarks Web Components
 
 class EthmarksHeader extends HTMLElement {
   connectedCallback() {
-    this.innerHTML = %s;
+    this.innerHTML = `
+      <header>
+          <a href="https://ethmarks.github.io/" id="title" tabindex="0" aria-label="Home">Ethan Marks</a>
+          <nav>
+              <a id="nav-home" class="staggered" href="https://ethmarks.github.io/">Home</a>
+              <a id="nav-about" class="staggered" href="https://ethmarks.github.io/about/">About</a>
+              <a id="nav-posts" class="staggered" href="https://ethmarks.github.io/posts/">Posts</a>
+              <a id="nav-blips" class="staggered" href="https://ethmarks.github.io/blips/">Blips</a>
+              <a id="nav-projects" class="staggered" href="https://ethmarks.github.io/tags/projects/">Projects</a>
+          </nav>
+      </header>`;
 
     const activeLink = this.getAttribute('active');
     if (activeLink) {
-      // Remove any existing active classes
-      const navLinks = this.querySelectorAll('nav a');
-      navLinks.forEach(link => link.classList.remove('active'));
-
-      // Add active class to the specified link by ID
       const targetLink = this.querySelector('#nav-' + activeLink.toLowerCase());
       if (targetLink) {
         targetLink.classList.add('active');
@@ -24,7 +26,16 @@
 
 class EthmarksFooter extends HTMLElement {
   connectedCallback() {
-    this.innerHTML = %s;
+    this.innerHTML = `
+      <footer>
+          <span id="source">
+              <a href="https://github.com/ethmarks/ethmarks.github.io" id="sourcelink" target="_blank">Website Source</a>
+          </span>
+          <span id="copyright"><a href="https://ethmarks.github.io/about/">Ethan Marks</a>, &copy;2025</span>
+          <span id="email">
+              <a href="mailto:ethmarks.dev@gmail.com" target="_blank">Contact</a>
+          </span>
+      </footer>`;
 
     const sourceLink = this.getAttribute('source');
     if (sourceLink) {
@@ -64,6 +75,3 @@
 // Register the custom elements
 customElements.define('ethmarks-header', EthmarksHeader);
 customElements.define('ethmarks-footer', EthmarksFooter);
-` $header $footer -}}
-{{- $resource := resources.FromString "js/ethmarks-components.js" $js -}}
-{{- $resource.Publish -}}

layouts/partials/footer.html

@@ -2,7 +2,7 @@
     <span id="source">
         <a href="https://github.com/ethmarks/ethmarks.github.io" id="sourcelink" target="_blank">Website Source</a>
     </span>
-    <span id="copyright"><a href="{{ "/about/" | absURL }}">Ethan Marks</a>, &copy;2025</span>
+    <span id="copyright"><a href="/about/">Ethan Marks</a>, &copy;2025</span>
     <span id="email">
         <a href="mailto:ethmarks.dev@gmail.com" target="_blank">Contact</a>
     </span>

layouts/partials/header.html

@@ -1,10 +1,10 @@
 <header>
-    <a href="{{ "/" | absURL }}" id="title" tabindex="0" aria-label="Home">Ethan Marks</a>
+    <a href="/" id="title" tabindex="0" aria-label="Home">Ethan Marks</a>
     <nav>
-        <a id="nav-home" class="staggered{{ if .IsHome }} active{{ end }}" href="{{ "/" | absURL }}">Home</a>
-        <a id="nav-about" class="staggered{{ if eq .Section "about" }} active{{ end }}" href="{{ "/about/" | absURL }}">About</a>
-        <a id="nav-posts" class="staggered{{ if eq .Section "posts" }} active{{ end }}" href="{{ "/posts/" | absURL }}">Posts</a>
+        <a id="nav-home" class="staggered{{ if .IsHome }} active{{ end }}" href="/">Home</a>
+        <a id="nav-about" class="staggered{{ if eq .Section "about" }} active{{ end }}" href="/about/">About</a>
+        <a id="nav-posts" class="staggered{{ if eq .Section "posts" }} active{{ end }}" href="/posts/">Posts</a>
         <a id="nav-blips" class="staggered" href="https://ethmarks.github.io/blips/">Blips</a>
-        <a id="nav-projects" class="staggered{{ if eq .RelPermalink "/tags/projects/" }} active{{ end }}" href="{{ "/tags/projects/" | absURL }}">Projects</a>
+        <a id="nav-projects" class="staggered{{ if eq .RelPermalink "/tags/projects/" }} active{{ end }}" href="/tags/projects/">Projects</a>
     </nav>
 </header>

layouts/partials/publish.html

@@ -1,3 +1,3 @@
 {{ partial "publish-media.html" . }}
 {{ partial "publish-scss.html" . }}
-{{ partial "ethmarks-components-js.html" . }}
+{{ (resources.Get "js/ethmarks-components.js").Publish }}