From d26fffd48c1a20cb223885e16dd443091d06fad3 Mon Sep 17 00:00:00 2001
From: Eric McCarthy <eric@limulus.net>
Date: Wed, 20 Nov 2024 21:29:34 +0000
Subject: [PATCH] feat: add share and subscribe buttons to header

---
 www/_includes/components/ldn-header.webc  | 86 +++++++++++++++++++++++
 www/_includes/components/pill-button.webc | 30 ++++++++
 www/_includes/css/main.css                | 37 ++--------
 www/lib/common/index.ts                   |  2 +
 www/lib/share-button/index.ts             | 23 ++++++
 5 files changed, 147 insertions(+), 31 deletions(-)
 create mode 100644 www/_includes/components/ldn-header.webc
 create mode 100644 www/_includes/components/pill-button.webc
 create mode 100644 www/lib/share-button/index.ts

diff --git a/www/_includes/components/ldn-header.webc b/www/_includes/components/ldn-header.webc
new file mode 100644
index 0000000..025a15c
--- /dev/null
+++ b/www/_includes/components/ldn-header.webc
@@ -0,0 +1,86 @@
+<header webc:root="override">
+  <nav>
+    <h2 class="visually-hidden">Top level navigation menu</h2>
+    <ul>
+      <li><a href="/">limulus.net</a></li>
+      <script webc:type="js">
+        let path = '/'
+        page.url
+          .split('/')
+          .filter((dir) => dir !== '')
+          .map((dir) => {
+            path = `${path}${dir}/`
+            return `<li><a href="${path}">${dir}</a></li>\n`
+          })
+          .join('')
+      </script>
+    </ul>
+  </nav>
+
+  <section class="engagement">
+    <h2 class="visually-hidden">Please Engage</h2>
+    <ul>
+      <li>
+        <share-button>
+          <pill-button @icon="arrow-up-from-bracket-solid" :href="page.url"
+            >Share</pill-button
+          >
+        </share-button>
+      </li>
+      <li><pill-button @icon="bell-solid" href="/feed.xml">Subscribe</pill-button></li>
+    </ul>
+  </section>
+</header>
+
+<style webc:scoped>
+  :host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin: 2rem 0;
+    font-size: 1.2rem;
+    --var-font-wght: 700;
+    font-synthesis: none;
+  }
+
+  :host ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  :host nav ul {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :host li {
+    display: block;
+    text-wrap: nowrap;
+    white-space: nowrap;
+  }
+
+  :host nav,
+  :host section {
+    display: flex;
+  }
+
+  :host nav li::after {
+    content: '/';
+    margin: 0 0.5em;
+  }
+
+  :host section.engagement {
+    margin-left: auto;
+  }
+
+  :host section.engagement li + li {
+    margin-left: 0.5em;
+  }
+
+  :host section.engagement ul {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+</style>
diff --git a/www/_includes/components/pill-button.webc b/www/_includes/components/pill-button.webc
new file mode 100644
index 0000000..11b3d88
--- /dev/null
+++ b/www/_includes/components/pill-button.webc
@@ -0,0 +1,30 @@
+<a :href="href" @attributes>
+  <script webc:if="icon" webc:type="js">
+    this.svg(icon)
+  </script>
+
+  <span class="visually-hidden">
+    <slot></slot>
+  </span>
+</a>
+
+<style webc:scoped>
+  :host a {
+    display: flex;
+    border: none;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    height: 1.5em;
+    border-radius: 1.5em;
+    background-color: var(--color);
+    fill: var(--background-color);
+    cursor: pointer;
+    overflow: hidden;
+  }
+
+  :host svg {
+    display: block;
+    width: 50%;
+  }
+</style>
diff --git a/www/_includes/css/main.css b/www/_includes/css/main.css
index 20600f1..dea0d88 100644
--- a/www/_includes/css/main.css
+++ b/www/_includes/css/main.css
@@ -63,6 +63,7 @@ header nav {
 }
 
 :root {
+  --background-color: #f3f3f3;
   --body-padding: 2rem;
   --body-max-width: 55rem;
   --card-background-color: #f6f6f6;
@@ -72,12 +73,13 @@ header nav {
   --card-box-shadow: 0 0 0.2rem var(--card-box-shadow-color);
   --card-box-shadow-color: rgba(0, 0, 0, 0.2);
   --card-padding: 0.75rem 1rem;
+  --color: #333;
   --hairline-pixels: 1px;
 }
 
 html {
-  background-color: #f3f3f3;
-  color: #333;
+  background-color: var(--background-color);
+  color: var(--color);
   font-size: 18px;
   line-height: 1.6;
   overflow-y: scroll;
@@ -116,30 +118,6 @@ h1:first-of-type {
   margin-top: 0;
 }
 
-body > header {
-  /* padding: 0 0 1rem 0; */
-  font-size: 1rem;
-  --var-font-wght: 700;
-  font-synthesis: none;
-}
-
-body > header nav {
-  display: flex;
-}
-body > header nav li {
-  display: inline-block;
-  text-wrap: nowrap;
-}
-body > header nav li::after {
-  content: '/';
-  margin: 0 0.5em;
-}
-body > header nav ul {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0;
-}
-
 code {
   font-family: 'Monaspace Neon', monospace;
   /**
@@ -188,14 +166,11 @@ sphere-shadow::part(hud-value) {
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --background-color: rgb(13, 17, 23);
     --card-background-color: #20212c;
     --card-border-color: #444;
     --card-box-shadow-color: rgba(0, 0, 0, 0.7);
-  }
-
-  html {
-    background-color: rgb(13, 17, 23);
-    color: rgb(201, 209, 217);
+    --color: rgb(201, 209, 217);
   }
 
   a {
diff --git a/www/lib/common/index.ts b/www/lib/common/index.ts
index 5cdb412..9d7ee5a 100644
--- a/www/lib/common/index.ts
+++ b/www/lib/common/index.ts
@@ -1,3 +1,5 @@
+import '../share-button/index.js'
+
 if (window.location.hostname.endsWith('limulus.net')) {
   import('../rum/index.js')
 }
diff --git a/www/lib/share-button/index.ts b/www/lib/share-button/index.ts
new file mode 100644
index 0000000..2fefadb
--- /dev/null
+++ b/www/lib/share-button/index.ts
@@ -0,0 +1,23 @@
+export class ShareButton extends HTMLElement {
+  connectedCallback() {
+    this.addEventListener('click', this.#onClick)
+  }
+
+  async #onClick(e: Event) {
+    e.preventDefault()
+    if (navigator.share) {
+      const title =
+        document.querySelector('meta[property="og:title"]')?.getAttribute('content') ?? ''
+      await navigator.share({
+        title,
+        url: location.href,
+      })
+    }
+  }
+
+  // TODO: Fallback to copying the URL to the clipboard
+}
+
+if (!customElements.get('share-button')) {
+  customElements.define('share-button', ShareButton)
+}