Improve Platform History

CLAUDE.md

@@ -32,7 +32,7 @@ bundle exec jekyll serve --livereload
 
 ## Architecture
 
-**Data-driven content:** Platform specs live in YAML files, not code. Most updates are data edits.
+**Data-driven content:** Platform specs live in YAML files, not code. Most updates are data edits. Do NOT change the schema without explicit direction or approval since this data is also relied upon by 3rd parties.
 
 ```
 _data/

_data/components.yml

@@ -30,42 +30,42 @@ categories:
     name: Common Components
     color: gray
     items:
+      - id: cpp_standard
+        name: "C++ API/SDK"
       - id: python
         name: Python
         subtitle: "(built with ucs4 pre-3.x)"
-      - id: qt
-        name: Qt
       - id: pyqt
         name: PyQt
       - id: pyside
         name: "Qt for Python (PySide)"
-      - id: numpy
-        name: NumPy
+      - id: qt
+        name: Qt
+      - id: aces
+        name: ACES
+      - id: alembic
+        name: Alembic
+      - id: boost
+        name: Boost
+      - id: fbx
+        name: FBX
       - id: imath
         name: Imath
         first_year: 2021
+      - id: numpy
+        name: NumPy
+      - id: onemkl
+        name: "oneMKL/MKL"
+      - id: onetbb
+        name: "oneTBB/TBB"
+        min_max: true
+      - id: opencolorio
+        name: OpenColorIO
       - id: openexr
         name: OpenEXR
-      - id: ptex
-        name: Ptex
       - id: opensubdiv
         name: OpenSubdiv
       - id: openvdb
         name: OpenVDB
-      - id: alembic
-        name: Alembic
-      - id: fbx
-        name: FBX
-      - id: opencolorio
-        name: OpenColorIO
-      - id: aces
-        name: ACES
-      - id: boost
-        name: Boost
-      - id: onetbb
-        name: "oneTBB/TBB"
-        min_max: true
-      - id: onemkl
-        name: "oneMKL/MKL"
-      - id: cpp_standard
-        name: "C++ API/SDK"
+      - id: ptex
+        name: Ptex

_data/useful_links.yml

@@ -13,12 +13,7 @@
   description: "Ready-to-build containers implementing VFX Reference Platform compliant build environments."
   icon: "container"
 
-- title: "DCC Tool Version Compatibility"
-  url: "https://docs.google.com/spreadsheets/d/1-8VdfspUBpkYJzfKKovI-H2bZeb5Wn3cuNPsq_Ho3S8/edit?usp=sharing"
-  description: "Track major digital content creation tool version compatibility with each platform year."
-  icon: "grid"
-
 - title: "VFX Industry Build Matrix"
-  url: "https://docs.google.com/spreadsheets/d/1EwRlz5ZYObEOdBfIk8iTX5thlpTyEAfp3bxOgAfFOiU/edit?usp=sharing"
+  url: "http://vfxindustrybuildmatrix.aswf.io/"
   description: "Cross-reference of build configurations used across the VFX industry."
   icon: "matrix"

_includes/platform-table.html

@@ -5,7 +5,7 @@
 
 {% assign col_count = include.years | size | plus: 1 %}
 
-<div class="platform-table-wrapper">
+<div class="platform-table-wrapper{% if include.compact %} platform-table-compact{% endif %}{% if include.scrollbar_top %} platform-table-scrollbar-top{% endif %}">
   <div class="overflow-x-auto">
     <table class="platform-table">
       <thead>
@@ -27,10 +27,18 @@
         {% for category in site.data.components.categories %}
           <!-- Category header row -->
           <tr class="category-header" data-category="{{ category.id }}" role="button" tabindex="0" aria-expanded="true">
-            <td colspan="{{ col_count }}">
-              <span class="category-chevron">&#9662;</span>
-              {{ category.name }}
-            </td>
+            {% if include.compact %}
+              <td>
+                <span class="category-chevron">&#9662;</span>
+                {{ category.name }}
+              </td>
+              {% for year in include.years %}<td></td>{% endfor %}
+            {% else %}
+              <td colspan="{{ col_count }}">
+                <span class="category-chevron">&#9662;</span>
+                {{ category.name }}
+              </td>
+            {% endif %}
           </tr>
 
           {% for item in category.items %}

assets/css/main.css

@@ -8,6 +8,10 @@
     line-height: 1.6;
     font-feature-settings: 'cv01', 'cv02';
   }
+
+  :is(.dark) {
+    color-scheme: dark;
+  }
 }
 
 @layer components {
@@ -96,6 +100,57 @@
     @apply border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden;
   }
 
+  /* Scrollbar at top variant (used on history page) */
+  .platform-table-scrollbar-top .overflow-x-auto {
+    transform: rotateX(180deg);
+  }
+
+  .platform-table-scrollbar-top .overflow-x-auto > table {
+    transform: rotateX(180deg);
+  }
+
+  /* Compact table variant (used on history page) */
+  .platform-table-compact .platform-table th {
+    @apply px-2 py-2 text-sm;
+  }
+
+  .platform-table-compact .platform-table td {
+    @apply px-2 py-2 text-xs;
+  }
+
+  .platform-table-compact .platform-table .category-header td {
+    @apply text-xs py-1.5;
+  }
+
+  /* Sticky first column for compact table */
+  .platform-table-compact .platform-table th:first-child,
+  .platform-table-compact .platform-table td:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  .platform-table-compact .platform-table th:first-child {
+    @apply bg-blue-600 dark:bg-blue-800;
+    z-index: 2;
+  }
+
+  .platform-table-compact .platform-table td:first-child {
+    @apply bg-white dark:bg-gray-900;
+  }
+
+  .platform-table-compact .platform-table tr.row-alt td:first-child {
+    @apply bg-gray-50 dark:bg-gray-800;
+  }
+
+  .platform-table-compact .platform-table .category-header td {
+    @apply bg-gray-200 dark:bg-gray-700;
+  }
+
+  .platform-table-compact .platform-table .category-header td:first-child {
+    z-index: 2;
+  }
+
   /* Draft badge for non-final platform years */
   .draft-badge {
     @apply ml-1 text-xs font-medium px-1.5 py-0.5 rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 align-middle;
@@ -273,7 +328,7 @@
 
   @media (min-width: 1024px) {
     .useful-links-grid > * {
-      width: calc(33.333% - 0.6667rem);
+      width: calc(50% - 0.5rem);
     }
   }
 
@@ -282,6 +337,19 @@
     @apply bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/30 rounded-lg p-5;
   }
 
+  /* View toggle buttons */
+  .view-toggle-btn {
+    @apply text-gray-500 dark:text-gray-400 bg-transparent cursor-pointer;
+  }
+
+  .view-toggle-btn:hover {
+    @apply bg-gray-100 dark:bg-gray-700;
+  }
+
+  .view-toggle-btn.active {
+    @apply bg-blue-600 dark:bg-blue-700 text-white;
+  }
+
   /* Accordion styles */
   .accordion-item {
     @apply border border-gray-200 dark:border-gray-700 rounded-lg mb-2;

assets/js/history-view-toggle.js

@@ -0,0 +1,27 @@
+// History page view toggle (Table / Cards) with localStorage persistence
+(function() {
+  var STORAGE_KEY = 'historyView';
+  var tableView = document.getElementById('table-view');
+  var cardView = document.getElementById('card-view');
+  var btnTable = document.getElementById('view-table');
+  var btnCards = document.getElementById('view-cards');
+
+  if (!tableView || !cardView || !btnTable || !btnCards) return;
+
+  function setView(view) {
+    var isTable = view === 'table';
+    tableView.classList.toggle('hidden', !isTable);
+    cardView.classList.toggle('hidden', isTable);
+    btnTable.classList.toggle('active', isTable);
+    btnCards.classList.toggle('active', !isTable);
+    try { localStorage.setItem(STORAGE_KEY, view); } catch (e) {}
+  }
+
+  btnTable.addEventListener('click', function() { setView('table'); });
+  btnCards.addEventListener('click', function() { setView('cards'); });
+
+  // Initialize from saved preference (default: table)
+  var saved = 'table';
+  try { saved = localStorage.getItem(STORAGE_KEY) || 'table'; } catch (e) {}
+  setView(saved);
+})();

platform_history.html

@@ -64,14 +64,32 @@ <h1 class="text-4xl md:text-5xl font-bold tracking-tight mb-4">
 
 <!-- All Platforms -->
 <section class="container mx-auto px-4 max-w-6xl py-12">
-  <div class="section-heading">
-    <h2>All Platforms</h2>
+  <div class="flex items-center gap-4 mb-8">
+    <span class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></span>
+    <h2 class="text-2xl font-semibold whitespace-nowrap">All Platforms</h2>
+    <span class="flex-1 h-px bg-gray-200 dark:bg-gray-700"></span>
+    <div class="flex rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden text-sm">
+      <button id="view-table" class="view-toggle-btn flex items-center gap-1.5 px-3 py-1.5 transition-colors" aria-label="Table view">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18M3 6h18M3 18h18"/></svg>
+        Table
+      </button>
+      <button id="view-cards" class="view-toggle-btn flex items-center gap-1.5 px-3 py-1.5 border-l border-gray-300 dark:border-gray-600 transition-colors" aria-label="Card view">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1V5zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1V5zM4 15a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1H5a1 1 0 01-1-1v-4zm10 0a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z"/></svg>
+        Cards
+      </button>
+    </div>
+  </div>
+
+  <div id="table-view">
+    {% include platform-table.html years=all_years scrollbar_top=true compact=true %}
   </div>
 
-  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-    {% for year in all_years %}
-      {% include year-card.html year=year %}
-    {% endfor %}
+  <div id="card-view" class="hidden">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {% for year in all_years %}
+        {% include year-card.html year=year %}
+      {% endfor %}
+    </div>
   </div>
 </section>
 
@@ -85,3 +103,5 @@ <h2>Previous Status Updates</h2>
 </section>
 
 {% include note-popover-content.html %}
+
+<script src="{{ '/assets/js/history-view-toggle.js' | relative_url }}"></script>