Add direct # anchor links to all headings on index pages

_includes/components/addons-section.html

@@ -3,14 +3,16 @@
   <div class="container inner">
     <div class="row">
       <div class="col-md-8 mx-auto text-center">
-        <h2 class="title-color color-gray">Enhance Your Order</h2>
+        <h2 id="enhance-your-order" class="title-color color-gray">Enhance Your Order{% include components/heading-anchor.html id="enhance-your-order" %}</h2>
         <h3 class="display-3">Get your chips packaged and ready to test, or take home an entire wafer</h3>
         <div class="space40"></div>
       </div>
     </div>
 
     <div class="row justify-content-center">
       {% for addon in site.data.slots.addons %}
+      {% assign addon_id = addon.name | slugify %}
+      {% assign addon_learn_more_id = addon_id | prepend: 'learn-more-' %}
       <div class="col-lg-5 col-md-6 mb-30">
         <div class="box bg-white shadow addon-card">
           {% if addon.image %}
@@ -19,14 +21,14 @@ <h3 class="display-3">Get your chips packaged and ready to test, or take home an
               <img src="{{ addon.image | relative_url }}" alt="{{ addon.name }}" />
             </a>
             <figcaption>
-              <h5 class="from-top mb-0">Learn More</h5>
+              <h5 id="{{ addon_learn_more_id }}" class="from-top mb-0">Learn More{% include components/heading-anchor.html id=addon_learn_more_id %}</h5>
             </figcaption>
           </figure>
           {% endif %}
 
           <span class="addon-badge">Add-on</span>
 
-          <h5 class="mb-15">{{ addon.name }}</h5>
+          <h5 id="{{ addon_id }}" class="mb-15">{{ addon.name }}{% include components/heading-anchor.html id=addon_id %}</h5>
 
           <div class="d-flex align-items-baseline mb-10">
             <span class="addon-price color-dark">${{ addon.price | divided_by: 1000 }},{{ addon.price | modulo: 1000 | prepend: '000' | slice: -3, 3 }}</span>

_includes/components/countdown.html

@@ -10,7 +10,9 @@
         <div class="container inner text-center">
           <div class="row">
             <div class="col-lg-8 offset-lg-2">
-              <h2 class="title-color color-gray text-center">Deadlines</h2>
+              {% comment %} The "Deadlines" heading links to the wrapper div's
+                 id (its scroll target) rather than duplicating it. {% endcomment %}
+              <h2 class="title-color color-gray text-center">Deadlines{% include components/heading-anchor.html id="deadlines" %}</h2>
               <h3 class="display-3 text-center">
                 <a href="https://buy.wafer.space" class="text-decoration-none">wafer.space {{ run.name }}</a>
               </h3>
@@ -23,7 +25,8 @@ <h3 class="display-3 text-center">
             {% assign deadline = run.early_bird_deadline %}
             <div class="row">
               <div class="col-xl-10 offset-xl-1">
-                <h4 class="mb-20"><i class="jam jam-shopping-cart mr-10"></i>{{ deadline.title | default: "Early Bird Deadline" }}</h4>
+                {% assign eb_deadline_id = deadline.title | default: "Early Bird Deadline" | slugify | prepend: "early-bird-" %}
+                <h4 id="{{ eb_deadline_id }}" class="mb-20"><i class="jam jam-shopping-cart mr-10"></i>{{ deadline.title | default: "Early Bird Deadline" }}{% include components/heading-anchor.html id=eb_deadline_id %}</h4>
                 {% if deadline.subtitle %}<p class="text-muted mb-20">{{ deadline.subtitle }}</p>{% endif %}
                 <div class="countdown-section" data-expired-message="{{ deadline.expired_message | default: 'Early bird deadline passed' }}">
                   <div class="countdown-wrapper d-flex align-items-center justify-content-center">
@@ -96,7 +99,8 @@ <h3 class="mb-0 text-warning"><i class="jam jam-shopping-cart mr-2"></i>{{ deadl
             {% assign deadline = run.campaign_deadline %}
             <div class="row">
               <div class="col-xl-10 offset-xl-1">
-                <h4 class="mb-20"><i class="jam jam-rocket mr-10"></i>{{ deadline.title | default: "Campaign Deadline" }}</h4>
+                {% assign campaign_deadline_id = deadline.title | default: "Campaign Deadline" | slugify | prepend: "campaign-" %}
+                <h4 id="{{ campaign_deadline_id }}" class="mb-20"><i class="jam jam-rocket mr-10"></i>{{ deadline.title | default: "Campaign Deadline" }}{% include components/heading-anchor.html id=campaign_deadline_id %}</h4>
                 {% if deadline.subtitle %}<p class="text-muted mb-20">{{ deadline.subtitle }}</p>{% endif %}
                 <div class="countdown-section" data-expired-message="{{ deadline.expired_message | default: 'Deadline passed' }}">
                   <div class="countdown-wrapper d-flex align-items-center justify-content-center">
@@ -176,7 +180,8 @@ <h3 class="mb-0 text-danger"><i class="jam jam-rocket mr-2"></i>{{ deadline.expi
             {% assign deadline = run.submission_deadline %}
             <div class="row">
               <div class="col-xl-10 offset-xl-1">
-                <h4 class="mb-20"><i class="jam jam-upload mr-10"></i>{{ deadline.title | default: "Submission Deadline" }}</h4>
+                {% assign submission_deadline_id = deadline.title | default: "Submission Deadline" | slugify | prepend: "submission-" %}
+                <h4 id="{{ submission_deadline_id }}" class="mb-20"><i class="jam jam-upload mr-10"></i>{{ deadline.title | default: "Submission Deadline" }}{% include components/heading-anchor.html id=submission_deadline_id %}</h4>
                 {% if deadline.subtitle %}<p class="text-muted mb-20">{{ deadline.subtitle }}</p>{% endif %}
                 <div class="countdown-section" data-expired-message="{{ deadline.expired_message | default: 'Deadline passed' }}">
                   <div class="countdown-wrapper d-flex align-items-center justify-content-center">
@@ -251,7 +256,7 @@ <h3 class="mb-0 text-warning">{{ deadline.expired_message | default: 'Deadline p
             <div class="space60"></div>
             <div class="row">
               <div class="col-lg-10 offset-lg-1">
-                <h4 class="text-center mb-30">Complete Timeline</h4>
+                <h4 id="complete-timeline" class="text-center mb-30">Complete Timeline{% include components/heading-anchor.html id="complete-timeline" %}</h4>
                 <div class="table-responsive">
                   <table class="table table-hover table-borderless">
                     <thead>

_includes/components/cta-design-help.html

@@ -3,7 +3,7 @@
   <div class="container inner">
     <div class="row">
       <div class="col-lg-8 offset-lg-2 text-center">
-        <h2 class="title-color color-gray">Ready to design your chip?</h2>
+        <h2 id="ready-to-design-your-chip" class="title-color color-gray">Ready to design your chip?{% include components/heading-anchor.html id="ready-to-design-your-chip" %}</h2>
         <h3 class="display-3">Your&nbsp;design. Your&nbsp;silicon. From&nbsp;$4&nbsp;per&nbsp;die.</h3>
         <div class="space40"></div>
       </div>
@@ -12,7 +12,7 @@ <h3 class="display-3">Your&nbsp;design. Your&nbsp;silicon. From&nbsp;$4&nbsp;per
     <div class="row align-items-start">
       <!-- Left Column: Get Started -->
       <div class="col-lg-6 mb-30">
-        <h4 class="mb-20"><i class="jam jam-rocket mr-10"></i>Get Started</h4>
+        <h4 id="cta-get-started" class="mb-20"><i class="jam jam-rocket mr-10"></i>Get Started{% include components/heading-anchor.html id="cta-get-started" %}</h4>
         <ul class="icon-list bullet-default">
           <li>
             <i class="icofont-verification-check"></i>
@@ -47,7 +47,7 @@ <h4 class="mb-20"><i class="jam jam-rocket mr-10"></i>Get Started</h4>
 
       <!-- Right Column: Need Help? -->
       <div class="col-lg-6 mb-30">
-        <h4 class="mb-20"><i class="jam jam-cog mr-10"></i>Need Help?</h4>
+        <h4 id="need-help" class="mb-20"><i class="jam jam-cog mr-10"></i>Need Help?{% include components/heading-anchor.html id="need-help" %}</h4>
         <p>
           Professional design services are available from independent consultants experienced with the GF180MCU process.
           Whether you need a full custom design, help with verification, or guidance on your first tapeout, experts are ready to assist.

_includes/components/half-slot-banner.html

@@ -3,7 +3,7 @@
   <div class="container inner text-center">
     <div class="row">
       <div class="col-lg-10 offset-lg-1">
-        <h2 class="title-color color-white text-center">Half Slots Are Here!</h2>
+        <h2 id="half-slots-are-here" class="title-color color-white text-center">Half Slots Are Here!{% include components/heading-anchor.html id="half-slots-are-here" %}</h2>
         <h3 class="display-3 mb-10">Get 1,000 custom silicon dies from just <strong>$4 per die</strong></h3>
         <p class="lead mb-30">New half-width (0.5×1&nbsp;slot) and half-height (1×0.5&nbsp;slot) options &mdash; 1,000&nbsp;dies for $4,000 with Early&nbsp;Bird pricing.</p>
         <a href="#slot-0p5x1" class="btn btn-white mb-0" role="button">See Half Slot Pricing</a>

_includes/components/heading-anchor.html

@@ -0,0 +1,20 @@
+{%- comment -%}
+  Renders a hover-revealed "#" permalink for a heading so it can be linked
+  directly via a URL fragment.
+
+  Place it immediately before the heading's closing tag and pass the heading's
+  id:
+
+    <h2 id="how-it-works">How it works{% include components/heading-anchor.html id="how-it-works" %}</h2>
+
+  For dynamic / templated headings, slugify the text once and reuse it for both
+  the id and this include:
+
+    {% assign hid = page.faq_area.sub_title | slugify %}
+    <h3 id="{{ hid }}">{{ page.faq_area.sub_title }}{% include components/heading-anchor.html id=hid %}</h3>
+
+  Renders nothing when the supplied id is blank, so it is safe to use behind a
+  slugify that may produce an empty string.
+{%- endcomment -%}
+{%- assign anchor_id = include.id | strip -%}
+{%- if anchor_id != "" -%}<a class="heading-anchor" href="#{{ anchor_id }}" aria-label="Permalink to this heading" title="Copy link to this heading">#</a>{%- endif -%}

_includes/components/run1-showcase.html

@@ -5,7 +5,7 @@
   <div class="container inner">
     <div class="row">
       <div class="col-lg-10 offset-lg-1 text-center">
-        <h2 class="title-color color-gray">Run 1: Many Designs on a Single Reticle</h2>
+        <h2 id="run-1-many-designs" class="title-color color-gray">Run 1: Many Designs on a Single Reticle{% include components/heading-anchor.html id="run-1-many-designs" %}</h2>
         <h3 class="display-3">{{ run1.open_source_designs }} open-source designs from universities, startups, and hobbyists worldwide</h3>
         <p class="lead">Silicon currently in fabrication &mdash; expected delivery late April 2026</p>
         <div class="space20"></div>
@@ -15,6 +15,9 @@ <h3 class="display-3">{{ run1.open_source_designs }} open-source designs from un
     <div class="grid-view position-relative">
       <div class="carousel owl-carousel" id="run1-carousel" data-margin="30" data-dots="true" data-loop="true" data-autoplay="true" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "992":{"items": "3"}}'>
         {% for design in run1.designs %}
+        {% assign design_id = design.name | slugify | append: "-" | append: forloop.index %}
+        {% assign design_view_source_id = design_id | prepend: "view-source-" %}
+        {% assign design_code_id = design_id | prepend: "code-" %}
         <div class="item">
           <div class="box bg-white shadow p-30">
             {% if design.image %}
@@ -23,7 +26,7 @@ <h3 class="display-3">{{ run1.open_source_designs }} open-source designs from un
                 <img src="{{ design.image | relative_url }}" alt="{{ design.name }}" />
               </a>
               <figcaption>
-                <h5 class="from-top mb-0">View Source</h5>
+                <h5 id="{{ design_view_source_id }}" class="from-top mb-0">View Source{% include components/heading-anchor.html id=design_view_source_id %}</h5>
               </figcaption>
             </figure>
             {% else %}
@@ -41,7 +44,7 @@ <h5 class="from-top mb-0">View Source</h5>
             {% endif %}
             <figure class="rounded mb-20 text-center" style="background: linear-gradient(135deg, {{ grad }}); padding: 2.5rem 1rem; min-height: 140px; display: flex; align-items: center; justify-content: center;">
               <div>
-                <h4 class="text-white mb-5" style="font-size: 1.8rem; font-weight: 700; letter-spacing: 0.5px;">{{ design.code }}</h4>
+                <h4 id="{{ design_code_id }}" class="text-white mb-5" style="font-size: 1.8rem; font-weight: 700; letter-spacing: 0.5px;">{{ design.code }}{% include components/heading-anchor.html id=design_code_id %}</h4>
                 <p class="text-white-50 mb-0" style="font-size: 0.8rem;">{{ design.slot_size }} slot</p>
               </div>
             </figure>
@@ -61,12 +64,12 @@ <h4 class="text-white mb-5" style="font-size: 1.8rem; font-weight: 700; letter-s
                 {% endif %}
                 <span class="badge rounded-pill {{ badge_color }}">{{ design.category }}</span>
               </div>
-              <h5 class="post-title mb-5">
+              <h5 id="{{ design_id }}" class="post-title mb-5">
                 {% if design.repo_url %}
                   <a href="{{ design.repo_url }}" target="_blank" rel="noopener">{{ design.name }}</a>
                 {% else %}
                   {{ design.name }}
-                {% endif %}
+                {% endif %}{% include components/heading-anchor.html id=design_id %}
               </h5>
               <p class="mb-10 text-muted small">{{ design.description }}</p>
               <div class="meta mb-0">

_includes/components/section-divider.html

@@ -1,7 +1,10 @@
 <!-- Section Divider -->
-<div id="{{ include.title | slugify }}" class="wrapper dark-wrapper inverse-text">
+{% assign divider_id = include.title | slugify %}
+<div id="{{ divider_id }}" class="wrapper dark-wrapper inverse-text">
   <div class="container inner text-center py-3">
-    <h2 class="title-color color-white mb-0">{{ include.title }}</h2>
+    {% comment %} The heading links to the wrapper div's id (the section's
+       scroll target) rather than carrying a duplicate id of its own. {% endcomment %}
+    <h2 class="title-color color-white mb-0">{{ include.title }}{% include components/heading-anchor.html id=divider_id %}</h2>
     {% if include.subtitle %}
     <h3 class="display-3 mb-0">{{ include.subtitle }}</h3>
     {% endif %}