From 7810a4089c6e62c927fca3d5e273c0f4d33ea366 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 16:39:44 -0500
Subject: [PATCH 01/12] Move index.html to index.liquid.

---
 index.html => index.liquid | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename index.html => index.liquid (100%)

diff --git a/index.html b/index.liquid
similarity index 100%
rename from index.html
rename to index.liquid

From 95ee0c35fbacf78142d306f819d57f2abf9fcc5e Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 16:40:47 -0500
Subject: [PATCH 02/12] Overhaul homepage to use Fomantic-UI.

---
 _includes/implementation-card.liquid |  24 ++
 _includes/implementation-item.liquid |   6 +-
 _layouts/fomantic.liquid             |  15 +-
 index.liquid                         | 516 ++++++++++-----------------
 4 files changed, 220 insertions(+), 341 deletions(-)
 create mode 100644 _includes/implementation-card.liquid

diff --git a/_includes/implementation-card.liquid b/_includes/implementation-card.liquid
new file mode 100644
index 00000000..ca76ab9d
--- /dev/null
+++ b/_includes/implementation-card.liquid
@@ -0,0 +1,24 @@
+<div class="card">
+  <div class="content">
+  <div class="header"><h3>{% if language %}{{ language | split: ',' | join: ' / ' }}{% else %}{{ applicationCategory }}{% endif %}</h3></div>
+    <div class="description">
+      <div class="ui selection list">
+        {% if language %}
+          {% assign languages = language | split: ',' %}
+          {% assign langExp = nil %}
+          {% for lang in languages %}
+            {% assign prefixed = lang | prepend: "imp.language contains '" | append: "'" %}
+            {% assign langExp = langExp | concat: prefixed %}
+          {% endfor %}
+          {% assign expression = langExp | join: ' or ' %}
+          {% assign imps = implementations | where_exp: 'imp', expression | where_exp: 'imp', 'imp.applicationCategory != "CLI"' %}
+        {% else %}
+          {% assign imps = implementations | where: 'applicationCategory', applicationCategory %}
+        {% endif %}
+        {% for implementation in imps %}
+        {% include 'implementation-item' %}
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/_includes/implementation-item.liquid b/_includes/implementation-item.liquid
index 576aaf65..9d81c6ce 100644
--- a/_includes/implementation-item.liquid
+++ b/_includes/implementation-item.liquid
@@ -1,7 +1,7 @@
-<li typeof="schema:SoftwareSourceCode">
+<div class="item" typeof="schema:SoftwareSourceCode">
   <a property="schema:codeRepository" href="{{ implementation.repo }}">
     <span property="schema:name">{{ implementation.name }}</span>
-    <span class="badge{% unless implementation.state == 'InProgress' %}{% if implementation.jsonldVersion == 1.1 %} badge-success{% else %} badge-info{% endif %}{% endunless %}">
+    <span class="ui label{% unless implementation.state == 'InProgress' %}{% if implementation.jsonldVersion == 1.1 %} green{% else %} blue{% endif %}{% endunless %}">
       {%- if implementation.jsonldVersion == 1.0 -%}
         1.0
       {%- else -%}
@@ -9,4 +9,4 @@
       {%- endif -%}
     </span>
   </a>
-</li>
+</div>
diff --git a/_layouts/fomantic.liquid b/_layouts/fomantic.liquid
index 7e254dc0..b421dfa4 100644
--- a/_layouts/fomantic.liquid
+++ b/_layouts/fomantic.liquid
@@ -21,10 +21,14 @@
     <style>
       /* fomantic overrides */
       html { scroll-padding-top: 5em; }
+      body { background-color: #f7f7f7; }
       .ui.main.container { margin-top: 7em; }
       .ui.top.menu .header.item { border: none !important; padding-left: 0; }
       .ui.top.menu .header.item > span { font-size: 150%; }
       .ui.top.menu .header.item > img { margin-right: 1rem; }
+      .ui.basic.masthead.segment { padding: 5em 0 3em; background: white; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2), -1px -1px 0 rgba(0, 0, 0, 0.1) }
+      .ui.basic.masthead.segment + .ui.main.container { margin-top: 3em; }
+      pre.ui.segment { overflow-x: auto; }
       .ui.fitted.tab.segment > .ui.table { border-left: 0; border-top: 0; border-right: 0; margin-top: 0; }
       .ui.table th:empty { display: none; }
       .ui.basic.footer.segment { border-top: 1px solid rgba(34,36,38,.15); margin-top: 4em; padding-top: 2em; }
@@ -50,7 +54,7 @@
 
   <body>
     <div class="ui top fixed menu">
-      <div class="ui container">
+      <div class="ui wide container">
         <!-- Brand -->
         <a class="header item" href="/">
           <img src="/images/json-ld-data-24.png" alt="JSON-LD logo">
@@ -103,7 +107,14 @@
       </div>
     </div>
 
-    <div class="ui main container">
+    {% if masthead %}
+    <div class="ui basic center aligned massive masthead segment">
+      <h1 class="ui massive header">{{ masthead.title }}</h1>
+      <p>{{ masthead.subtitle }}</p>
+    </div>
+    {% endif %}
+
+    <div class="ui main wide container">
     {{ content }}
     </div>
 
diff --git a/index.liquid b/index.liquid
index f074a6ba..68eebd09 100644
--- a/index.liquid
+++ b/index.liquid
@@ -1,355 +1,199 @@
 ---
-layout: default
+layout: fomantic
+masthead:
+  title: JSON for Linking Data
+  subtitle: >-
+    Data is messy and disconnected. JSON-LD organizes and connects it,
+    creating a better Web.
 ---
 
-    <div class="hero-unit">
-      <h1>JSON for Linking Data</h1>
-      <br>
-      <p class="tagline">Data is messy and disconnected. JSON-LD organizes and
-       connects it, creating a better Web.</p>
-    </div>
-
-    <div class="container">
-      <div class="row">
-        <div class="span3">
-          <h2><span class="icon-exchange"></span> Linked Data </h2>
-          <p class="text-justify">
-            <a href="https://en.wikipedia.org/wiki/Linked_data">Linked Data</a>
-            empowers people that publish and use information on the Web. It is a
-            way to create a network of standards-based, machine-readable data across
-            Web sites. It allows an application to start at one piece of Linked Data,
-            and follow embedded links to other pieces of Linked Data that are hosted
-            on different sites across the Web.
-          </p>
-        </div>
-        <!-- End span -->
 
-        <div class="span6">
-          <h2 style="text-align: center;">A Simple Example</h2>
-          <pre>{
+<div class="ui stackable grid">
+  <div class="justified four wide column">
+    <h2><i class="exchange alternate icon"></i> Linked Data</h2>
+    <p>
+      <a href="https://en.wikipedia.org/wiki/Linked_data">Linked Data</a>
+      empowers people that publish and use information on the Web. It is a
+      way to create a network of standards-based, machine-readable data across
+      Web sites. It allows an application to start at one piece of Linked Data,
+      and follow embedded links to other pieces of Linked Data that are hosted
+      on different sites across the Web.
+    </p>
+  </div>
+  <div class="eight wide column">
+    <h2 class="ui centered header">A Simple Example</h2>
+    <pre class="ui segment">{
   "<span style="color: rgb(255, 122, 0);">@context</span>": "<a href="https://json-ld.org/contexts/person.jsonld">https://json-ld.org/contexts/person.jsonld</a>",
   "<span style="color: rgb(255, 122, 0);">@id</span>": "<a href="http://dbpedia.org/resource/John_Lennon">http://dbpedia.org/resource/John_Lennon</a>",
   "<span style="color: rgb(255, 122, 0);">name</span>": "<span style="color: rgb(0, 148, 0);">John Lennon</span>",
   "<span style="color: rgb(255, 122, 0);">born</span>": "<span style="color: rgb(0, 0, 175);">1940-10-09</span>",
   "<span style="color: rgb(255, 122, 0);">spouse</span>": "<a href="http://dbpedia.org/resource/Cynthia_Lennon">http://dbpedia.org/resource/Cynthia_Lennon</a>"
 }</pre>
-        </div>
-        <!-- End span -->
-
-        <div class="span3">
-          <h2>
-            <span><img src="images/json-ld-data-32.png" alt="JSON-LD logo"></span> JSON-LD
-          </h2>
-          <p class="text-justify">JSON-LD is a lightweight Linked Data format. It
-            is easy for humans to read and write. It is based on the already
-            successful JSON format and provides a way to help JSON data interoperate
-            at Web-scale. JSON-LD is an ideal data format for programming
-            environments, REST Web services, and unstructured databases such as
-            Apache CouchDB and MongoDB.
-          </p>
-        </div>
-        <!-- End span -->
-      </div>
+  </div>
+  <div class="justified four wide column">
+    <h2><img class="ui micro inline image" src="images/json-ld-data-32.png" alt="JSON-LD logo"> JSON-LD</h2>
+    <p>JSON-LD is a lightweight Linked Data format. It
+      is easy for humans to read and write. It is based on the already
+      successful JSON format and provides a way to help JSON data interoperate
+      at Web-scale. JSON-LD is an ideal data format for programming
+      environments, REST Web services, and unstructured databases such as
+      Apache CouchDB and MongoDB.
+    </p>
+  </div>
+</div>
+
+<div class="ui large center aligned segment" style="margin: 3em auto">
+  <div class="ui center aligned massive basic segment grid">
+    <div class="ui header">
+      <i class="beer icon"></i>
+      <span class="content">Playground</span>
     </div>
-
-    <br/><br/>
-
-    <div class="hero-unit">
-      <h2 style="text-align:center;"><span class="icon-beer icon-large"></span> Playground</h2>
-      <div class="container">
-        <div class="row">
-          <p class="text-justify offset2 span8">
-            The <strong>JSON-LD Playground</strong> is a web-based JSON-LD viewer and debugger.
-            If you are interested in learning JSON-LD, this tool will be of great help
-            to you. Developers may also use the tool to debug, visualize, and share
-            their JSON-LD markup.
-          </p>
-          <a class="btn" href="./playground/">Launch the JSON-LD Playground</a>
-        </div>
+  </div>
+  <p class="ui basic huge left aligned padded segment">
+    The <strong>JSON-LD Playground</strong> is a web-based JSON-LD viewer and debugger.
+    If you are interested in learning JSON-LD, this tool will be of great help
+    to you. Developers may also use the tool to debug, visualize, and share
+    their JSON-LD markup.
+  </p>
+  <a href="./playground/" class="ui primary big button">Launch the JSON-LD Playground</a>
+</div>
+
+<div class="ui center aligned massive basic segment grid">
+  <div class="ui header">
+    <i class="cog icon"></i>
+    <span class="content">Developers</span>
+  </div>
+</div>
+
+<p class="ui basic large center aligned segment">JSON-LD is available in
+  a number of popular programming environments. Each implementation of JSON-LD
+  listed below is fully conforming to the official JSON-LD specifications.
+</p>
+
+<div class="ui four cards">
+  {% include 'implementation-card' language: 'JavaScript' %}
+  {% include 'implementation-card' language: 'Python' %}
+  {% include 'implementation-card' language: 'Ruby' %}
+  {% include 'implementation-card' language: 'Go' %}
+  {% include 'implementation-card' language: 'Java' %}
+  {% include 'implementation-card' language: 'C#' %}
+  {% include 'implementation-card' applicationCategory: 'CLI' %}
+  {% include 'implementation-card' language: 'Erlang,Elixir' %}
+  {% include 'implementation-card' language: 'PHP' %}
+  {% include 'implementation-card' language: 'Rust' %}
+  {% include 'implementation-card' language: 'TypeScript' %}
+</div>
+
+<div class="ui basic center aligned segment">
+  <p>
+    The <a href="https://w3c.github.io/json-ld-api/tests/">JSON-LD Test
+    Suite</a> (and <a
+    href="https://w3c.github.io/json-ld-framing/tests/">Framing Test Suite</a>)
+    is useful for validating JSON-LD Processors.
+  </p>
+  <p>
+    Conformance of various processors is documented in the official <a
+    href="https://w3c.github.io/json-ld-api/reports/">implementation report</a>.
+  </p>
+</div>
+
+<div class="ui center aligned massive basic segment grid">
+  <div class="ui header">
+    <i class="group icon"></i>
+    <span class="content">Getting Help / Collaborating</span>
+  </div>
+</div>
+
+<div class="ui large basic padded segment">
+  <p>
+    <strong>JSON-LD 1.1</strong> was being formally specified by the <a
+    href="https://www.w3.org/2018/json-ld-wg/"><strong>W3C JSON-LD Working
+    Group</strong></a>. Although the Working Group has completed, it remains
+    open as a <a
+    href="https://www.w3.org/2023/01/json-ld-wg-charter.html">Maintanence
+    Group</a> and may release revised specifications in the future. To
+    participate in this work, please <a
+    href="https://www.w3.org/Consortium/join">join the W3C</a> and then join the
+    Working Group. The <a
+    href="https://lists.w3.org/Archives/Public/public-json-ld-wg/">Working Group
+    mailing list</a> is visible to the public and participation in the <a
+    href="https://github.com/search?q=topic%3Ajson-ld-wg+org%3Aw3c&type=Repositories">specification
+    repositories</a> is encouraged. Additionally, discussions and exploration
+    continue in the Community Group spaces mentioned below.
+  </p>
+  <div class="ui divider"></div>
+  <p>
+    JSON-LD has been developed by the W3C <a
+    href="http://www.w3.org/community/json-ld/">JSON-LD Community Group</a>. It
+    is a <a href="http://www.w3.org/TR/json-ld/">W3C Recommendation</a> as of 16
+    January 2014. Participation is open to the public. There is a <a
+    href="https://github.com/json-ld">JSON-LD GitHub repository</a>. If you need
+    immediate help, we have a <a
+    href="https://irc.w3.org/?channels=#json-ld">#json-ld</a> IRC support
+    channel on irc.w3.org and a <a
+    href="https://gitter.im/json-ld/json-ld.org">Gitter channel</a>. There is
+    also a <a
+    href="http://lists.w3.org/Archives/Public/public-linked-json/">JSON-LD
+    mailing list</a>. All weekly meetings are open to the public, and are <a
+    href="https://json-ld.org/minutes/">minuted, recorded, and archived</a>.
+    Listed below are all of the communication tools that the community uses on a
+    weekly basis.
+  </p>
+</div>
+
+<div class="ui four cards">
+  <div class="card">
+    <div class="content">
+      <div class="header"><h3>Code</h3></div>
+      <div class="description">
+        <a href="https://github.com/json-ld/json-ld.org">json-ld on GitHub</a>
       </div>
-      <!-- End span -->
     </div>
-
-    <div class="container">
-      <div id="developers" class="row">
-        <h1 class="span12" style="text-align: center;"> <span class="icon-cog"></span> Developers</h1>
-      </div>
-      <div id="developers-description" class="row">
-        <p class="offset2 span8" style="text-align: center;">JSON-LD is available in
-          a number of popular programming environments. Each implementation of JSON-LD
-          listed below is fully conforming to the official JSON-LD specifications.
-        </p>
-      </div>
-
-      <div class="row">
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Javascript</h3></li>
-              {% assign imps = implementations | where: 'language', 'JavaScript' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Python</h3></li>
-              {% assign imps = implementations | where: 'language', 'Python' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Ruby</h3></li>
-              {% assign imps = implementations | where: 'language', 'Ruby' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Go</h3></li>
-              {% assign imps = implementations | where: 'language', 'Go' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Java</h3></li>
-              {% assign imps = implementations | where: 'language', 'Java' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>C#</h3></li>
-              {% assign imps = implementations | where: 'language', 'C#' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Command Line</h3></li>
-              {% assign imps = implementations | where: 'applicationCategory', 'CLI' %}
-              {% for implementation in imps %}
-              {% include 'implementation-item' %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Erlang / Elixir</h3></li>
-              {% assign imps = implementations | where_exp: 'imp', "imp.language contains 'Erlang' or imp.language contains 'Elixir'" %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>PHP</h3></li>
-              {% assign imps = implementations | where: 'language', 'PHP' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-
-        <!-- Work in Progress implemenations -->
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Rust</h3></li>
-              {% assign imps = implementations | where: 'language', 'Rust' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>TypeScript</h3></li>
-              {% assign imps = implementations | where: 'language', 'TypeScript' %}
-              {% for implementation in imps %}
-              {% unless implementation.applicationCategory == 'CLI' %}
-              {% include 'implementation-item' %}
-              {% endunless %}
-              {% endfor %}
-            </ul>
-          </div>
-        </div>
+  </div>
+  <div class="card">
+    <div class="content">
+      <div class="header"><h3>Meetings</h3></div>
+      <div class="description">
+        <a href="minutes/">Text and audio minutes</a>
       </div>
-
-      <div id="tests-description" class="row">
-        <p class="offset2 span8" style="text-align: center;">
-          The <a href="https://w3c.github.io/json-ld-api/tests/">JSON-LD Test Suite</a> (and <a href="https://w3c.github.io/json-ld-framing/tests/">Framing Test Suite</a>) is useful for validating JSON-LD Processors.
-        </p>
-        <p class="offset3 span6" style="text-align: center;">
-          Conformance of various processors is documented in the official <a href="https://w3c.github.io/json-ld-api/reports/">implementation report</a>.
-        </p>
-      </div>
-      <hr>
     </div>
-    <!-- /container -->
-    <div class="container">
-      <div id="collaborating" class="row">
-        <h1 class="span12" style="text-align: center;">
-        <span class="icon-group"></span> Getting Help / Collaborating</h1>
-      </div>
-
-      <div id="collaborating-description" class="row">
-        <div class="offset2 span8" style="text-align: center;">
-          <strong>JSON-LD 1.1</strong> was being formally specified by the
-          <a href="https://www.w3.org/2018/json-ld-wg/"><strong>W3C JSON-LD Working Group</strong></a>.
-          Although the Working Group has completed, it remains open
-          as a <a href="https://www.w3.org/2023/01/json-ld-wg-charter.html">Maintanence Group</a> and may release revised specifications in the future.
-          To participate in this work, please <a href="https://www.w3.org/Consortium/join">join the W3C</a>
-          and then join the Working Group.
-          The <a href="https://lists.w3.org/Archives/Public/public-json-ld-wg/">Working Group mailing list</a>
-          is visible to the public and participation in the
-          <a href="https://github.com/search?q=topic%3Ajson-ld-wg+org%3Aw3c&type=Repositories">specification repositories</a> is encouraged. Additionally, discussions and exploration continue
-          in the Community Group spaces mentioned below.
-          <hr />
-        </div>
-        <p class="offset2 span8" style="text-align: center;">
-        JSON-LD has been developed by the W3C <a
-        href="http://www.w3.org/community/json-ld/">JSON-LD Community Group</a>.
-        It is a <a href="http://www.w3.org/TR/json-ld/">W3C Recommendation</a>
-        as of 16 January 2014. Participation is open
-        to the public. There is a <a href="https://github.com/json-ld">JSON-LD
-        GitHub repository</a>. If you need immediate help, we have a <a
-        href="https://irc.w3.org/?channels=#json-ld">#json-ld</a> IRC
-        support channel on irc.w3.org
-        and a <a href="https://gitter.im/json-ld/json-ld.org">Gitter channel</a>.
-        There is also a <a
-        href="http://lists.w3.org/Archives/Public/public-linked-json/">JSON-LD
-        mailing list</a>. All weekly meetings are open to the public, and are <a
-        href="https://json-ld.org/minutes/">minuted, recorded, and archived</a>. Listed below are all of the
-        communication tools that the community uses on a weekly basis.</p>
-      </div>
-
-      <div class="row">
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Code</h3></li>
-              <li><a href="https://github.com/json-ld/json-ld.org">json-ld on GitHub</a></li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Meetings</h3></li>
-              <li><a href="minutes/">Text and audio minutes</a></li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Mailing List</h3></li>
-              <li><a href="http://lists.w3.org/Archives/Public/public-linked-json/">public-linked-json@w3.org</a></li>
-            </ul>
-          </div>
-        </div>
-
-        <div class="span3">
-          <div class="well" style="padding: 8px 0;">
-            <ul class="nav nav-list">
-              <li class="nav-header"><h3>Chat</h3></li>
-              <li><a href="https://irc.w3.org/?channels=#json-ld">#json-ld on irc.w3.org</a></li>
-              <li><a href="https://gitter.im/json-ld/json-ld.org">Gitter</a></li>
-            </ul>
-          </div>
-        </div>
+  </div>
+  <div class="card">
+    <div class="content">
+      <div class="header"><h3>Mailing List</h3></div>
+      <div class="description">
+        <a href="http://lists.w3.org/Archives/Public/public-linked-json/">public-linked-json@w3.org</a>
       </div>
     </div>
-    <!-- /container -->
-    <hr>
-    <div class="container">
-      <div id="learn-more" class="row">
-        <h1 class="span12" style="text-align: center;">
-        <span class="icon-book"></span> Learn More...</h1>
-      </div>
-
-      <div id="learn-more-description" class="row">
-        <p class="offset2 span8" style="text-align: center;">
-        This website contains a number of curated
-        video, presentations, tutorials, and documentation about JSON-LD. Assuming you
-        are familiar with JSON, these training materials will help you quickly
-        put the power of JSON-LD into your web development efforts.<br><br>
-        <a class="btn" href="./learn/">Learn more about JSON-LD</a>
-        </p>
-      </div>
-      <!-- End Row -->
-      <hr>
-      <div id="footer">
-        <p id="copyright">
-        Website content released under a <a href="https://creativecommons.org/about/cc0">Creative Commons CC0 Public Domain Dedication</a> except where an alternate is specified.
-        </p>
+  </div>
+  <div class="card">
+    <div class="content">
+      <div class="header"><h3>Chat</h3></div>
+      <div class="description">
+        <a href="https://irc.w3.org/?channels=#json-ld">#json-ld on irc.w3.org</a><br>
+        <a href="https://gitter.im/json-ld/json-ld.org">Gitter</a>
       </div>
     </div>
-    <!-- /container -->
+  </div>
+</div>
+
+<div class="ui divider"></div>
+
+<div class="ui center aligned massive basic segment grid">
+  <div class="ui header">
+    <i class="book icon"></i>
+    <span class="content">Learn More...</span>
+  </div>
+</div>
+
+<div class="ui large basic center aligned segment">
+  <p>
+  This website contains a number of curated video, presentations, tutorials, and
+  documentation about JSON-LD. Assuming you are familiar with JSON, these
+  training materials will help you quickly put the power of JSON-LD into your
+  web development efforts.
+  </p>
+  <p>
+    <a class="ui primary button" href="./learn/">Learn more about JSON-LD</a>
+  </p>
+</div>

From 75d96ddae8db78ecd3856ca7e10fb48a999271b8 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 16:52:29 -0500
Subject: [PATCH 03/12] Add Playground Next as a watch target.

---
 .eleventy.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.eleventy.js b/.eleventy.js
index 4e998428..c0aef216 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -73,6 +73,8 @@ export default async function(eleventyConfig) {
   }
   eleventyConfig.ignores.add('test-suite');
 
+  eleventyConfig.addWatchTarget('playground/next/index.html');
+
   // setup development proxy to cloudflare pages function server
   if(process.env.ELEVENTY_RUN_MODE === 'serve') {
     eleventyConfig.setServerOptions({

From 4109657d3109f9b2b7e568af033e816a9524a5e3 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 16:53:08 -0500
Subject: [PATCH 04/12] Fix Playground Next width to match homepage.

---
 playground/next/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/playground/next/index.html b/playground/next/index.html
index af1f01fc..b12308c0 100644
--- a/playground/next/index.html
+++ b/playground/next/index.html
@@ -29,7 +29,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
   <code>Shift+Tab</code>) to navigate out of the editor.</p>
 </div>
 
-<div class="ui container" v-scope v-effect="setOutputTab()">
+<div class="ui wide container" v-scope v-effect="setOutputTab()">
   <div class="ui buttons">
     <button class="ui large basic right pointing label">Examples</button>
     <button id="btn-person" class="ui button"
@@ -94,7 +94,7 @@ <h2 class="ui massive header">JSON-LD Playground</h2>
     </table>
   </div>
   <!-- main editor area -->
-  <div class="ui one column compact grid container" :class="[editorColumns]">
+  <div class="ui one column wide compact grid container" :class="[editorColumns]">
     <div class="column" :class="{ 'sixteen wide':  editorColumns == '' }">
       <div class="ui top attached tabular menu">
         <div :class="{ active: inputTab == 'json-ld' }" class="item" @click="inputTab = 'json-ld'"><i class="pencil alternate icon"></i> JSON-LD Input</div>

From 68545ff2ff594d8c88a111f0db4a55b2fd4b667e Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 16:58:21 -0500
Subject: [PATCH 05/12] Use Markdownn for Primer index.

---
 primer/index.html | 28 ----------------------------
 primer/index.md   | 13 +++++++++++++
 2 files changed, 13 insertions(+), 28 deletions(-)
 delete mode 100644 primer/index.html
 create mode 100644 primer/index.md

diff --git a/primer/index.html b/primer/index.html
deleted file mode 100644
index ecddd58a..00000000
--- a/primer/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: default
-title: Primer
-ga: 40462488
----
-
-    <div class="container">
-      <br>
-      <div id="content">
-        <div id="info">
-          <h1>Primers</h1>
-          <p>The following primers are sorted in most recent to
-          least recent order:</p>
-          <ul class="nav nav-list">
-            <li><a href="latest/">Latest</a></li>
-{%- for draft in specs['requirements'] -%}
-            <li><a href="{{ draft[1] }}">{{ draft[0] }}</a></li>
-{%- endfor -%}
-          </ul>
-        </div>
-      </div>
-      <hr>
-      <div id="footer">
-        <p id="copyright">
-         Website content released under a <a href="http://creativecommons.org/about/cc0">Creative Commons CC0 Public Domain Dedication</a> except where an alternate is specified.
-        </p>
-      </div>
-    </div> <!-- /container -->
diff --git a/primer/index.md b/primer/index.md
new file mode 100644
index 00000000..b8ff4b15
--- /dev/null
+++ b/primer/index.md
@@ -0,0 +1,13 @@
+---
+layout: fomantic
+title: Primer
+ga: 40462488
+---
+
+# Primers
+
+The following primers are sorted in most recent to least recent order:
+* [Latest](latest/)
+{% for draft in specs['requirements'] -%}
+* [{{ draft[0] }}]({{ draft[1] }})
+{% endfor %}

From 5a848b031f963e1dc158bd29d5200ed18c9caf66 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 17:03:23 -0500
Subject: [PATCH 06/12] Use Markdown for Requirements index.

---
 requirements/index.html | 27 ---------------------------
 requirements/index.md   | 12 ++++++++++++
 2 files changed, 12 insertions(+), 27 deletions(-)
 delete mode 100644 requirements/index.html
 create mode 100644 requirements/index.md

diff --git a/requirements/index.html b/requirements/index.html
deleted file mode 100644
index 9a44dd30..00000000
--- a/requirements/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: default
-ga: 40462488
----
-
-    <div class="container">
-      <br>
-      <div id="content">
-        <div id="info">
-          <h1>Requirements</h1>
-          <p>The following requirements are sorted in most recent to
-          least recent order:</p>
-          <ul class="nav nav-list">
-            <li><a href="latest/">Latest</a></li>
-{%- for draft in specs['requirements'] -%}
-            <li><a href="{{ draft[1] }}">{{ draft[0] }}</a></li>
-{%- endfor -%}
-          </ul>
-        </div>
-      </div>
-      <hr>
-      <div id="footer">
-        <p id="copyright">
-         Website content released under a <a href="http://creativecommons.org/about/cc0">Creative Commons CC0 Public Domain Dedication</a> except where an alternate is specified.
-        </p>
-      </div>
-    </div> <!-- /container -->
diff --git a/requirements/index.md b/requirements/index.md
new file mode 100644
index 00000000..ab549d0e
--- /dev/null
+++ b/requirements/index.md
@@ -0,0 +1,12 @@
+---
+layout: fomantic
+ga: 40462488
+---
+
+# Requirements
+
+The following requirements are sorted in most recent to least recent order:
+* [Latest](latest/)
+{% for draft in specs['requirements'] -%}
+* [{{ draft[0] }}]({{ draft[1] }})
+{% endfor %}

From e450bc8fdd161ec30c2ee5124c4a0caf8555c94a Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 17:20:28 -0500
Subject: [PATCH 07/12] Use Markdown for Specifications list.

Also fix `active` class on Specifications dropdown (which caused the
whole dropdown list to appear stuck open over the page...).
---
 _layouts/fomantic.liquid |  2 +-
 spec/index.html          | 98 ----------------------------------------
 spec/index.md            | 80 ++++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 99 deletions(-)
 delete mode 100644 spec/index.html
 create mode 100644 spec/index.md

diff --git a/_layouts/fomantic.liquid b/_layouts/fomantic.liquid
index b421dfa4..9e178e34 100644
--- a/_layouts/fomantic.liquid
+++ b/_layouts/fomantic.liquid
@@ -75,7 +75,7 @@
         </a>
 
         <!-- Dropdown menu -->
-        <div class="ui simple dropdown item {% if page.url == '/spec/' %}active{% endif %}">
+        <div class="ui simple dropdown item">
           <i class="folder open icon"></i>
           Specifications
           <i class="dropdown icon"></i>
diff --git a/spec/index.html b/spec/index.html
deleted file mode 100644
index 037b098c..00000000
--- a/spec/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-layout: default
-title: Specifications
-ga: 40462488
----
-
-    <div class="container">
-      <br>
-      <h1>Specifications</h1>
-      <p>
-JSON-LD has been designed to be a modular set of specifications. It consists of
-two base specifications: The JSON-LD Syntax and the JSON-LD API. All other
-JSON-LD specifications are layered upon the previous two specifications,
-allowing the community to build experimental extensions on top of the base
-specifications.
-      <p>
-      <div id="syntax">
-      <h2><a href="latest/json-ld/">The JSON-LD Syntax</a></h2>
-      <p>
-Defines JSON-LD, a JSON-based format to serialize Linked Data. The syntax is
-designed to easily integrate into deployed systems that already use JSON,
-and provides a smooth upgrade path from JSON to JSON-LD. It is primarily
-intended to be a way to use Linked Data in Web-based programming environments,
-to build interoperable Web services, and to store Linked Data in JSON-based
-storage engines.
-      </p>
-      <p>
-Links to JSON-LD specifications: <a href="latest/json-ld/">Latest</a>
-{%- for draft in specs['json-ld'] -%}
-, <a href="{{ draft[1] }}">{{ draft[0] }}</a>
-{%- endfor %}
-{%- for draft in specs['json-ld-syntax'] -%}
-, <a href="{{ draft[1] }}">{{ draft[0] }}</a>
-{%- endfor -%}
-               </div>
-               <div id="api">
-               <h2><a href="latest/json-ld-api/">The JSON-LD API</a></h2>
-               <p>
-An Application Programming Interface (API) and a set of algorithms for
-programmatic transformations of JSON-LD documents. This API defines algorithms
-for applying and removing JSON-LD contexts.
-               </p>
-               <p>
-Links to JSON-LD API specifications: <a href="latest/json-ld-api/">Latest</a>
-{%- for draft in specs['json-ld-api'] -%}
-, <a href="{{ draft[1] }}">{{ draft[0] }}</a>
-{%- endfor -%}
-               </p>
-               </div>
-               <div id="best-practices">
-               <h2><a href="https://w3c.github.io/json-ld-bp">JSON-LD Best Practices</a></h2>
-               <p>
-Best practices for publishing JSON-LD and building APIs.
-               </p>
-               <p>
-Links to JSON-LD API specifications: <a href="https://w3c.github.io/json-ld-bp">Latest</a>
-{%- for draft in specs['json-ld-api-best-practices'] -%}
-, <a href="{{ draft[1] }}">{{ draft[0] }}</a>
-{%- endfor -%}
-               </p>
-               </div>
-               <div id="framing">
-               <h2><a href="latest/json-ld-framing/">JSON-LD Framing</a></h2>
-               <p>
-JSON-LD Framing allows developers to perform <em>query by example</em>
-and force a specific tree layout to a JSON-LD document. It allows developers
-to restructure data retrieved from the Web according to the specific needs of
-their application. Restructuring JSON-LD data before your application processes
-it leads to simpler code when processing data from external sources.
-               </p>
-               <p>
-Links to JSON-LD Framing specifications: <a href="latest/json-ld-framing/">Latest</a>
-{%- for draft in specs['json-ld-framing'] -%}
-, <a href="{{ draft[1] }}">{{ draft[0] }}</a>
-{%- endfor -%}
-               </p>
-
-               </div>
-               <h2><a href="latest/json-ld-rdf/">JSON-LD RDF API</a></h2>
-               <p>
-JSON-LD RDF API describes access methods for transforming and abstract RDF
-represention into JSON-LD and back.
-               </p>
-               <p>
-Links to JSON-LD RDF API specifications: <a href="latest/json-ld-rdf/">Latest</a>
-{%- for draft in specs['json-ld-rdf'] -%}
-, <a href="{{ draft[1] }}">{{ draft[0] }}</a>
-{%- endfor -%}
-      </p>
-
-      <hr>
-      <div id="footer">
-        <p id="copyright">
-         JSON-LD Specifications are covered by the <a href="https://www.w3.org/Consortium/Legal/2015/doc-license">W3C DOCUMENT LICENSE</a> except where an alternate is specified.
-        </p>
-      </div>
-
-    </div> <!-- /container -->
diff --git a/spec/index.md b/spec/index.md
new file mode 100644
index 00000000..1b6d7794
--- /dev/null
+++ b/spec/index.md
@@ -0,0 +1,80 @@
+---
+layout: fomantic
+title: Specifications
+ga: 40462488
+---
+
+# Specifications
+
+JSON-LD has been designed to be a modular set of specifications. It
+consists of two base specifications: The JSON-LD Syntax and the JSON-LD
+API. All other JSON-LD specifications are layered upon the previous two
+specifications, allowing the community to build experimental extensions
+on top of the base specifications.
+
+## [The JSON-LD Syntax](latest/json-ld/) {#syntax}
+
+Defines JSON-LD, a JSON-based format to serialize Linked Data. The
+syntax is designed to easily integrate into deployed systems that
+already use JSON, and provides a smooth upgrade path from JSON to
+JSON-LD. It is primarily intended to be a way to use Linked Data in
+Web-based programming environments, to build interoperable Web services,
+and to store Linked Data in JSON-based storage engines.
+
+Links to JSON-LD specifications: [Latest](latest/json-ld/)
+{%- for draft in specs['json-ld'] -%}, [{{ draft[0]}}]({{ draft[1] }}) {%- endfor %}
+{%- for draft in specs['json-ld-syntax'] -%}, [{{ draft[0] }}]({{ draft[1] }}) {%- endfor %}
+
+
+## [The JSON-LD API](latest/json-ld-api/) {#api}
+
+An Application Programming Interface (API) and a set of algorithms for
+programmatic transformations of JSON-LD documents. This API defines
+algorithms for applying and removing JSON-LD contexts.
+
+Links to JSON-LD API specifications: [Latest](latest/json-ld-api/)
+{%- for draft in specs['json-ld-api'] -%}, [{{ draft[0]}}]({{ draft[1] }}) {%- endfor %}
+
+
+## [JSON-LD Best Practices](https://w3c.github.io/json-ld-bp) {#best-practices}
+
+Best practices for publishing JSON-LD and building APIs.
+
+Links to JSON-LD API specifications:
+[Latest](https://w3c.github.io/json-ld-bp)
+{%- for draft in specs['json-ld-api-best-practices'] -%} , [{{ draft[0]}}({{ draft[1] }}) {%- endfor %}
+
+
+
+## [JSON-LD Framing](latest/json-ld-framing/) {#framing}
+
+JSON-LD Framing allows developers to perform *query by example* and
+force a specific tree layout to a JSON-LD document. It allows developers
+to restructure data retrieved from the Web according to the specific
+needs of their application. Restructuring JSON-LD data before your
+application processes it leads to simpler code when processing data from
+external sources.
+
+Links to JSON-LD Framing specifications:
+[Latest](latest/json-ld-framing/)
+{%- for draft in specs['json-ld-framing'] -%} , [{{ draft[0] }}]({{ draft[1] }}) {%- endfor %}
+
+
+
+## [JSON-LD RDF API](latest/json-ld-rdf/)
+
+JSON-LD RDF API describes access methods for transforming and abstract
+RDF represention into JSON-LD and back.
+
+Links to JSON-LD RDF API specifications:
+[Latest](latest/json-ld-rdf/)
+{%- for draft in specs['json-ld-rdf'] -%} , [{{ draft[0] }}]({{ draft[1] }}) {%- endfor %}
+
+
+<div id="footer" class="ui message">
+
+JSON-LD Specifications are covered by the [W3C DOCUMENT
+LICENSE](https://www.w3.org/Consortium/Legal/2015/doc-license) except
+where an alternate is specified.
+
+</div>

From 2d7c8d94cffe7953ea1f9d19da599a81365faa21 Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 17:26:28 -0500
Subject: [PATCH 08/12] Move default.liquid to bs2.liquid.

The `bs2.liquid` file is not currently used. Keeping it on hand in case
some old page surfaces that we need to deal with.
---
 _layouts/{default.liquid => bs2.liquid} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename _layouts/{default.liquid => bs2.liquid} (100%)

diff --git a/_layouts/default.liquid b/_layouts/bs2.liquid
similarity index 100%
rename from _layouts/default.liquid
rename to _layouts/bs2.liquid

From 8162afa449337b4cc71fca4665cededc0200b3fe Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Thu, 4 Dec 2025 17:30:50 -0500
Subject: [PATCH 09/12] Add IDs to homepage sections and footer.

---
 _layouts/fomantic.liquid | 4 ++--
 index.liquid             | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/_layouts/fomantic.liquid b/_layouts/fomantic.liquid
index 9e178e34..0940dea4 100644
--- a/_layouts/fomantic.liquid
+++ b/_layouts/fomantic.liquid
@@ -118,8 +118,8 @@
     {{ content }}
     </div>
 
-    <div class="ui basic footer segment">
-      <div class="ui container">
+    <div class="ui basic footer segment" id="footer">
+      <div class="ui container" id="copyright">
         <p>Website content released under a
           <a href="https://creativecommons.org/about/cc0">Creative Commons CC0 Public Domain Dedication</a>
           except where an alternate is specified.</p>
diff --git a/index.liquid b/index.liquid
index 68eebd09..ba163b25 100644
--- a/index.liquid
+++ b/index.liquid
@@ -58,7 +58,7 @@ masthead:
   <a href="./playground/" class="ui primary big button">Launch the JSON-LD Playground</a>
 </div>
 
-<div class="ui center aligned massive basic segment grid">
+<div class="ui center aligned massive basic segment grid" id="developers">
   <div class="ui header">
     <i class="cog icon"></i>
     <span class="content">Developers</span>
@@ -84,7 +84,7 @@ masthead:
   {% include 'implementation-card' language: 'TypeScript' %}
 </div>
 
-<div class="ui basic center aligned segment">
+<div class="ui basic center aligned segment" id="tests-description">
   <p>
     The <a href="https://w3c.github.io/json-ld-api/tests/">JSON-LD Test
     Suite</a> (and <a
@@ -97,7 +97,7 @@ masthead:
   </p>
 </div>
 
-<div class="ui center aligned massive basic segment grid">
+<div class="ui center aligned massive basic segment grid" id="collaborating">
   <div class="ui header">
     <i class="group icon"></i>
     <span class="content">Getting Help / Collaborating</span>
@@ -179,7 +179,7 @@ masthead:
 
 <div class="ui divider"></div>
 
-<div class="ui center aligned massive basic segment grid">
+<div class="ui center aligned massive basic segment grid" id="learn-more">
   <div class="ui header">
     <i class="book icon"></i>
     <span class="content">Learn More...</span>

From 5290e3c4b04768cafc215c67113546bde8d1458a Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Fri, 5 Dec 2025 10:38:51 -0500
Subject: [PATCH 10/12] Make cards on homepage stack on mobile.

---
 index.liquid | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.liquid b/index.liquid
index ba163b25..7f83d6be 100644
--- a/index.liquid
+++ b/index.liquid
@@ -70,7 +70,7 @@ masthead:
   listed below is fully conforming to the official JSON-LD specifications.
 </p>
 
-<div class="ui four cards">
+<div class="ui four stackable cards">
   {% include 'implementation-card' language: 'JavaScript' %}
   {% include 'implementation-card' language: 'Python' %}
   {% include 'implementation-card' language: 'Ruby' %}
@@ -141,7 +141,7 @@ masthead:
   </p>
 </div>
 
-<div class="ui four cards">
+<div class="ui four stackable cards">
   <div class="card">
     <div class="content">
       <div class="header"><h3>Code</h3></div>

From 6be40a2d10402b64a0a2a768bd9c094c6820068f Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Fri, 5 Dec 2025 12:07:25 -0500
Subject: [PATCH 11/12] Rework language card selections.

Liquid `contains` does (unfortunate...) double duty for both string
and array matching and provides no way to create an array-only comparison
based on exact equivalence. Consequently...this is the result.
---
 _includes/implementation-card.liquid | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/_includes/implementation-card.liquid b/_includes/implementation-card.liquid
index ca76ab9d..9fae135d 100644
--- a/_includes/implementation-card.liquid
+++ b/_includes/implementation-card.liquid
@@ -5,19 +5,26 @@
       <div class="ui selection list">
         {% if language %}
           {% assign languages = language | split: ',' %}
-          {% assign langExp = nil %}
-          {% for lang in languages %}
-            {% assign prefixed = lang | prepend: "imp.language contains '" | append: "'" %}
-            {% assign langExp = langExp | concat: prefixed %}
+          {% assign imps = implementations | where_exp: 'imp', 'imp.applicationCategory != "CLI"' %}
+          {% for implementation in imps %}
+            {% assign found = false %}
+            {% for implang in implementation.language %}
+              {% for lang in languages %}
+                {% if found == false %}
+                  {% assign found = lang == implang %}
+                {% endif %}
+              {% endfor %}
+            {% endfor %}
+            {% if found == true %}
+              {% include 'implementation-item' %}
+            {% endif %}
           {% endfor %}
-          {% assign expression = langExp | join: ' or ' %}
-          {% assign imps = implementations | where_exp: 'imp', expression | where_exp: 'imp', 'imp.applicationCategory != "CLI"' %}
         {% else %}
           {% assign imps = implementations | where: 'applicationCategory', applicationCategory %}
+          {% for implementation in imps %}
+            {% include 'implementation-item' %}
+          {% endfor %}
         {% endif %}
-        {% for implementation in imps %}
-        {% include 'implementation-item' %}
-        {% endfor %}
       </div>
     </div>
   </div>

From b1173390683f65249fe8adf13d34c7d071cf837a Mon Sep 17 00:00:00 2001
From: Benjamin Young <byoung@digitalbazaar.com>
Date: Fri, 5 Dec 2025 12:09:45 -0500
Subject: [PATCH 12/12] Put large conditional section inside `liquid` tag.

---
 _includes/implementation-card.liquid | 46 +++++++++++++++-------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/_includes/implementation-card.liquid b/_includes/implementation-card.liquid
index 9fae135d..ef39cc43 100644
--- a/_includes/implementation-card.liquid
+++ b/_includes/implementation-card.liquid
@@ -3,28 +3,30 @@
   <div class="header"><h3>{% if language %}{{ language | split: ',' | join: ' / ' }}{% else %}{{ applicationCategory }}{% endif %}</h3></div>
     <div class="description">
       <div class="ui selection list">
-        {% if language %}
-          {% assign languages = language | split: ',' %}
-          {% assign imps = implementations | where_exp: 'imp', 'imp.applicationCategory != "CLI"' %}
-          {% for implementation in imps %}
-            {% assign found = false %}
-            {% for implang in implementation.language %}
-              {% for lang in languages %}
-                {% if found == false %}
-                  {% assign found = lang == implang %}
-                {% endif %}
-              {% endfor %}
-            {% endfor %}
-            {% if found == true %}
-              {% include 'implementation-item' %}
-            {% endif %}
-          {% endfor %}
-        {% else %}
-          {% assign imps = implementations | where: 'applicationCategory', applicationCategory %}
-          {% for implementation in imps %}
-            {% include 'implementation-item' %}
-          {% endfor %}
-        {% endif %}
+        {% liquid
+          if language
+            assign languages = language | split: ','
+            assign imps = implementations | where_exp: 'imp', 'imp.applicationCategory != "CLI"'
+            for implementation in imps
+              assign found = false
+              for implang in implementation.language
+                for lang in languages
+                  if found == false
+                    assign found = lang == implang
+                  endif
+                endfor
+              endfor
+              if found == true
+                include 'implementation-item'
+              endif
+            endfor
+          else
+            assign imps = implementations | where: 'applicationCategory', applicationCategory
+            for implementation in imps
+              include 'implementation-item'
+            endfor
+          endif
+        %}
       </div>
     </div>
   </div>