refactor: Switch from web components for icons to partials to support showing icons without JS

pojntfx · pojntfx · commit 04764e546f79 · 2026-04-04T00:42:46.000-07:00
Signed-off-by: Felicitas Pojtinger &lt;felicitas@pojtinger.com&gt;
diff --git a/assets/js/event-detail-modal.js b/assets/js/event-detail-modal.js
@@ -151,7 +151,7 @@ customElements.define(
               className: "pf-v6-c-button pf-m-link pf-m-inline pf-m-small",
             });
             mapLink.innerHTML =
-              'View on map <span class="pf-v6-c-button__icon pf-m-end"><icon-external></icon-external></span>';
+              'View on map <span class="pf-v6-c-button__icon pf-m-end"><i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></span>';
             $("map-link").append(mapLink);
           } else {
             $("map-br").remove();
diff --git a/assets/js/icons.js b/assets/js/icons.js
diff --git a/assets/js/luma-next-event.js b/assets/js/luma-next-event.js
@@ -33,7 +33,7 @@ template.innerHTML = `
               <a data-slot="rsvp" target="_blank" rel="noopener"
                 class="pf-v6-c-button pf-m-link pf-m-inline">
                 <span class="pf-v6-c-button__text">RSVP on Luma</span>
-                <span class="pf-v6-c-button__icon pf-m-end"><icon-external></icon-external></span>
+                <span class="pf-v6-c-button__icon pf-m-end"><i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></span>
               </a>
             </div>
           </div>
diff --git a/assets/js/luma-upcoming-events.js b/assets/js/luma-upcoming-events.js
@@ -22,7 +22,7 @@ rowTemplate.innerHTML = `
           Details
         </button>
         <a data-slot="rsvp" target="_blank" rel="noopener" class="pf-v6-c-button pf-m-link pf-m-inline pf-m-small">
-          RSVP<span class="pf-v6-c-button__icon pf-m-end"><icon-external></icon-external></span>
+          RSVP<span class="pf-v6-c-button__icon pf-m-end"><i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></span>
         </a>
       </div>
     </td>
@@ -81,7 +81,7 @@ customElements.define(
       const api = this.getAttribute("api");
       const lumaUrl = this.getAttribute("luma") ?? "https://luma.com/vanlug";
       const rssUrl = `${api}/events/feed?calendar=${encodeURIComponent(cal)}`;
-      const subscribeLinks = `<br>Stay updated via <a href="${lumaUrl}" target="_blank" rel="noopener">Luma<icon-external></icon-external></a> or <a href="${rssUrl}" target="_blank" rel="noopener">RSS<icon-custom data-icon="fa-solid fa-rss"></icon-custom></a>.`;
+      const subscribeLinks = `<br>Stay updated via <a href="${lumaUrl}" target="_blank" rel="noopener">Luma<span style="display: inline; white-space: nowrap;">&#8288;<i class="fa-solid fa-arrow-up-right-from-square pf-v6-u-ml-xs" aria-hidden="true"></i></span></a> or <a href="${rssUrl}" target="_blank" rel="noopener">RSS<span style="display: inline; white-space: nowrap;">&#8288;<i class="fa-solid fa-rss pf-v6-u-ml-xs" aria-hidden="true"></i></span></a>.`;
 
       try {
         const { entries } = await fetch(
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -1,6 +1,5 @@
 import "./theme.js";
 import "./sidebar.js";
-import "./icons.js";
 import "./event-detail-modal.js";
 import "./luma-next-event.js";
 import "./luma-upcoming-events.js";
diff --git a/data/content.yaml b/data/content.yaml
@@ -112,4 +112,4 @@ footer:
     body: "VanLUG is 100% volunteer-run. All Board of Directors and Executives volunteer their time and effort for free. Donations go toward maintaining our website, Discourse platform, network infrastructure, and expenses related to our in-person meetings. Any amount helps. Thank you for sharing your resources."
     cta: Donate via PayPal
   land_acknowledgment: "VanLUG acknowledges that we meet, learn, and collaborate on the shared territories of many Indigenous Peoples, including the q̓ic̓əy̓ (Katzie), q̓ʷɑ:n̓ƛ̓ən̓ (Kwantlen), kʷikʷəƛ̓əm (Kwikwetlem), máthxwi (Matsqui), xʷməθkʷəy̓əm (Musqueam), qiqéyt (Qayqayt), Semiahmoo, Sḵwx̱wú7mesh Úxwumixw (Squamish), scəw̓aθən məsteyəxʷ (Tsawwassen), and səlilwətaɬ (Tsleil-Waututh). We respect the diverse and distinct histories, languages, and cultures of First Nations, Métis, and Inuit."
-  nonprofit: 'VanLUG is a registered non-profit organization with the <a href="https://www2.gov.bc.ca/gov/content/employment-business/business/not-for-profit-organizations" target="_blank" rel="noreferrer noopener">BC Provincial Government<icon-external></icon-external></a>, incorporated on March 29, 1999. Run entirely by volunteers, we''ve been bringing Linux and open-source enthusiasts together in Vancouver for over 25 years.'
+  nonprofit: 'VanLUG is a registered non-profit organization with the <a href="https://www2.gov.bc.ca/gov/content/employment-business/business/not-for-profit-organizations" target="_blank" rel="noreferrer noopener">BC Provincial Government<span style="display: inline; white-space: nowrap;">&#8288;<i class="fa-solid fa-arrow-up-right-from-square pf-v6-u-ml-xs" aria-hidden="true"></i></span></a>, incorporated on March 29, 1999. Run entirely by volunteers, we''ve been bringing Linux and open-source enthusiasts together in Vancouver for over 25 years.'
diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html
@@ -50,14 +50,13 @@
                 href="{{ .Site.Data.site.source }}"
                 target="_blank"
                 rel="noopener"
-                >source code<icon-external></icon-external>
-              </a>
+                >source code{{ partial "icon" "external" }}</a>
               on GitHub, licensed under
               <a
                 href="{{ .Site.Data.site.source }}/blob/main/LICENSE"
                 target="_blank"
                 rel="noopener"
-                >AGPL-3.0-or-later<icon-external></icon-external></a
+                >AGPL-3.0-or-later{{ partial "icon" "external" }}</a
               >. See our <a href="{{ "/terms/" | relURL }}">terms</a> and
               <a href="{{ "/privacy/" | relURL }}">privacy policy</a>.</small
             >
diff --git a/layouts/_partials/icon.html b/layouts/_partials/icon.html
@@ -1 +1,27 @@
-{{- with . -}}{{ printf `<icon-custom data-icon="%s"></icon-custom>` . | safeHTML }}{{- end -}}
+{{- $map := dict
+  "discourse" "fa-brands fa-discourse"
+  "signal" "fa-brands fa-signal-messenger"
+  "mastodon" "fa-brands fa-mastodon"
+  "bluesky" "fa-brands fa-bluesky"
+  "linkedin" "fa-brands fa-linkedin"
+  "paypal" "fa-brands fa-paypal"
+  "github" "fa-brands fa-github"
+  "globe" "fa-solid fa-globe"
+  "external" "fa-solid fa-arrow-up-right-from-square"
+  "email" "fa-solid fa-envelope"
+  "rss" "fa-solid fa-rss"
+-}}
+{{- $name := "" -}}
+{{- $inButton := false -}}
+{{- if reflect.IsMap . -}}
+  {{- $name = .icon -}}
+  {{- $inButton = .inButton | default false -}}
+{{- else -}}
+  {{- $name = . -}}
+{{- end -}}
+{{- $fa := index $map $name | default $name -}}
+{{- if $inButton -}}
+  <i class="{{ $fa }}" aria-hidden="true"></i>
+{{- else -}}
+  <span style="display: inline; white-space: nowrap;">&#8288;<i class="{{ $fa }} pf-v6-u-ml-xs" aria-hidden="true"></i></span>
+{{- end -}}
diff --git a/layouts/_partials/mastodon-feed.html b/layouts/_partials/mastodon-feed.html
@@ -48,13 +48,13 @@ <h3>Latest posts</h3>
         href="{{ .Site.Data.links.socials.mastodon.url }}"
         target="_blank"
         rel="noopener"
-        >See all posts<icon-external></icon-external></a
+        >See all posts{{ partial "icon" "external" }}</a
       >, or subscribe via
       <a
         href="{{ .Site.Data.links.feed.mastodon }}"
         target="_blank"
         rel="noopener"
-        >RSS<icon-custom data-icon="fa-solid fa-rss"></icon-custom></a
+        >RSS{{ partial "icon" "rss" }}</a
       >.
     </p>
   </div>
diff --git a/layouts/_partials/section-about.html b/layouts/_partials/section-about.html
@@ -45,18 +45,17 @@ <h3>{{ .Site.Data.board.year }} Board of Directors</h3>
         <p>
           {{ .Site.Data.content.about.board.preamble | default "As a registered non-profit society in British Columbia, VanLUG is governed by a volunteer Board of Directors. Elections are held annually at our AGM. New volunteers are always welcome." }}
           <a href="{{ .Site.Data.links.socials.email.url }}"
-            >Get in touch<icon-email></icon-email
-          ></a>
+            >Get in touch{{ partial "icon" "email" }}</a>
           if you'd like to help.
         </p>
       </div>
 
-      {{ $prevRole := "" }}
+      {{ $directorSeen := false }}
       {{ range $i, $member := .Site.Data.board.bios }}
-        {{ if and (ne $i 0) (ne $member.role $prevRole) }}
+        {{ if and (not $directorSeen) (eq $member.role "Director-at-large") (ne $i 0) }}
           <hr class="pf-v6-c-divider" />
         {{ end }}
-        {{ $prevRole = $member.role }}
+        {{ if eq $member.role "Director-at-large" }}{{ $directorSeen = true }}{{ end }}
         <div class="pf-v6-c-card pf-m-compact">
           <div class="pf-v6-c-card__title">
             <div class="pf-v6-c-card__title-text">
@@ -83,7 +82,7 @@ <h3>{{ .Site.Data.board.year }} Board of Directors</h3>
                     href="{{ .url }}"
                     target="_blank"
                     rel="noreferrer noopener"
-                  >{{ .label }}{{ with .icon }}{{ printf "<%s></%s>" . . | safeHTML }}{{ else }}<icon-external></icon-external>{{ end }}</a>
+                  >{{ .label }}{{ partial "icon" ((.icon | default "icon-external") | strings.TrimPrefix "icon-") }}</a>
                 {{ end }}
               </div>
             {{ end }}
diff --git a/layouts/_partials/section-events.html b/layouts/_partials/section-events.html
@@ -28,13 +28,13 @@ <h3>Upcoming</h3>
             href="{{ .Site.Data.links.luma.url }}"
             target="_blank"
             rel="noopener"
-            >calendar on Luma<icon-external></icon-external></a
+            >calendar on Luma{{ partial "icon" "external" }}</a
           > and
           <a
             href="{{ .Site.Data.links.api }}/events/feed?calendar={{ .Site.Data.links.luma.calendar }}"
             target="_blank"
             rel="noopener"
-            >RSS feed<icon-custom data-icon="fa-solid fa-rss"></icon-custom></a
+            >RSS feed{{ partial "icon" "rss" }}</a
           >.
         </p>
       </div>
@@ -145,19 +145,18 @@ <h3>Past events</h3>
             href="{{ .Site.Data.links.luma.url }}"
             target="_blank"
             rel="noopener"
-            >Luma<icon-external></icon-external></a
+            >Luma{{ partial "icon" "external" }}</a
           >,
           <a
             href="{{ .Site.Data.links.meetup.url }}"
             target="_blank"
             rel="noopener"
-            >Meetup<icon-external></icon-external
-          ></a>
+            >Meetup{{ partial "icon" "external" }}</a>
           and the Web Archive ({{ range $i, $link := $c.past.archive_links }}{{ if $i }}, {{ end }}<a
             href="{{ $link.url }}"
             target="_blank"
             rel="noopener"
-            >{{ $link.title }}<icon-external></icon-external></a
+            >{{ $link.title }}{{ partial "icon" "external" }}</a
           >{{ end }}). Slides and materials from past talks are on our
           <a href="{{ "/resources/" | relURL }}">Resources</a> page.
         </p>
@@ -188,8 +187,7 @@ <h3>Past events</h3>
                     target="_blank"
                     rel="noopener"
                     class="pf-v6-c-button pf-m-link pf-m-inline pf-m-small"
-                    >{{ .title }}<icon-external></icon-external
-                  ></a>
+                    >{{ .title }}{{ partial "icon" "external" }}</a>
                 {{ end }}
               </td>
             </tr>
diff --git a/layouts/_partials/section-home.html b/layouts/_partials/section-home.html
@@ -45,7 +45,7 @@ <h1 class="pf-v6-u-font-size-4xl">
           class="pf-v6-c-button pf-m-link"
           ><span class="pf-v6-c-button__text">{{ $c.cta_link.title }}</span
           ><span class="pf-v6-c-button__icon pf-m-end"
-            >{{ partial "icon" $social.icon }}</span
+            >{{ partial "icon" (dict "icon" $social.icon "inButton" true) }}</span
         ></a>
       </div>
     </div>
@@ -121,7 +121,7 @@ <h3>{{ $c.next_meeting.title }}</h3>
             href="{{ .Site.Data.links.api }}/events/feed?calendar={{ .Site.Data.links.luma.calendar }}"
             target="_blank"
             rel="noopener"
-            >RSS<icon-custom data-icon="fa-solid fa-rss"></icon-custom></a
+            >RSS{{ partial "icon" "rss" }}</a
           >.
         </p>
       </div>
@@ -158,15 +158,13 @@ <h4>{{ .title }}</h4>
                       href="{{ $.Site.Data.links.socials.discourse.url }}"
                       target="_blank"
                       rel="noopener"
-                      >Discourse<icon-discourse></icon-discourse
-                    ></a>
+                      >Discourse{{ partial "icon" "discourse" }}</a>
                     and
                     <a
                       href="{{ $.Site.Data.links.socials.signal.url }}"
                       target="_blank"
                       rel="noreferrer noopener"
-                      >Signal<icon-signal></icon-signal
-                    ></a>
+                      >Signal{{ partial "icon" "signal" }}</a>
                     between meetings. Ask questions, share projects, find
                     collaborators.
                   {{ else }}
@@ -185,24 +183,22 @@ <h4>{{ .title }}</h4>
             href="{{ .Site.Data.links.socials.mastodon.url }}"
             target="_blank"
             rel="noopener"
-            >Mastodon<icon-mastodon></icon-mastodon></a
+            >Mastodon{{ partial "icon" "mastodon" }}</a
           >,
           <a
             href="{{ .Site.Data.links.socials.bluesky.url }}"
             target="_blank"
             rel="noopener"
-            >Bluesky<icon-bluesky></icon-bluesky></a
+            >Bluesky{{ partial "icon" "bluesky" }}</a
           >, or
           <a
             href="{{ .Site.Data.links.socials.linkedin.url }}"
             target="_blank"
             rel="noopener"
-            >LinkedIn<icon-linkedin></icon-linkedin
-          ></a>
+            >LinkedIn{{ partial "icon" "linkedin" }}</a>
           for announcements. Want to give a talk or have a question?
           <a href="{{ .Site.Data.links.socials.email.url }}"
-            >Email the board.<icon-email></icon-email
-          ></a>
+            >Email the board.{{ partial "icon" "email" }}</a>
         </p>
       </div>
     </div>
@@ -241,7 +237,7 @@ <h4>{{ .title }}</h4>
                     class="pf-v6-c-button pf-m-link pf-m-inline"
                     ><span class="pf-v6-c-button__text">Visit website</span
                     ><span class="pf-v6-c-button__icon pf-m-end"
-                      ><icon-external></icon-external></span
+                      >{{ partial "icon" (dict "icon" "external" "inButton" true) }}</span
                   ></a>
                 </div>
               </div>
diff --git a/layouts/_partials/section-membership.html b/layouts/_partials/section-membership.html
@@ -70,7 +70,7 @@ <h3>How to join</h3>
         class="pf-v6-c-button pf-m-primary"
         ><span class="pf-v6-c-button__text">Register on Luma</span
         ><span class="pf-v6-c-button__icon pf-m-end"
-          ><icon-external></icon-external></span
+          >{{ partial "icon" (dict "icon" "external" "inButton" true) }}</span
       ></a>
     </div>
   </section>
diff --git a/layouts/_partials/section-partners.html b/layouts/_partials/section-partners.html
@@ -40,8 +40,7 @@ <h1>{{ .Title }}</h1>
                     href="{{ .url }}"
                     target="_blank"
                     rel="noopener"
-                    >{{ .name }}<icon-external
-                    ></icon-external></a
+                    >{{ .name }}{{ partial "icon" "external" }}</a
                 ></b>
                 <br />
                 {{ .description }}
diff --git a/layouts/_partials/section-resources.html b/layouts/_partials/section-resources.html
