Overhaul homepage to use Fomantic-UI.

BigBlueHat · BigBlueHat · commit 54767dc6a2e7 · 2025-12-08T10:59:00.000-05:00
diff --git a/_includes/implementation-card.liquid 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
@@ -1,12 +1,12 @@
-<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 -%}
         {{ implementation.jsonldVersion }}{% if implementation.state == 'InProgress' %} (<abbr title="Work In Progress">WIP</abbr>){% endif %}
       {%- endif -%}
     </span>
   </a>
-</li>
+</div>
diff --git 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; }
@@ -48,7 +52,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">
@@ -101,7 +105,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
