Add support for base24 and rename to tinted-gallery (#14)

tinted-theming · Jan 4, 2025 · f201af9 · f201af9
1 parent 93b15eb
commit f201af9
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 43 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -2,7 +2,7 @@ name: Update with the latest colorschemes
 on:
   workflow_dispatch:
   schedule:
-    - cron: "0 0 * * 0" # https://crontab.guru/every-week
+    - cron: "0 0 * * *" # https://crontab.guru/every-day
   push:
     branches: [ "main" ]
 

diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,3 @@
 out/
 tinted-vim/
-base16-schemes/
 schemes/
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
-# Base16 Gallery 
+# Titned Gallery 
 
-https://tinted-theming.github.io/base16-gallery
+https://tinted-theming.github.io/tinted-gallery
 
-This gallery is a collection of base16 themes maintained by
+This gallery is a collection of tinted themes maintained by
 [tinted-theming](https://github.com/tinted-theming). The software
 license of `build.sh` is CC0.
diff --git a/build.sh b/build.sh
@@ -1,8 +1,22 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 set -eu pipefail
 
+main() {
+  setup
+
+  generate_themes "base16"
+  generate_themes "base24"
+
+  erb template.erb > out/index.html
+}
+
 setup() {
+  if [ -z "$(command -v 'vim')" ]; then
+    echo "Error: vim is required for build."
+    exit 1
+  fi
+
   rm -rf out
   mkdir out
 
@@ -13,17 +27,17 @@ setup() {
   git clone --depth=1 https://github.com/tinted-theming/schemes
 }
 
-main() {
-  setup
+generate_themes() {
+  local system=${1:-"base16"}
 
-  colorschemes=($(ls schemes/base16/ | grep yaml | sed 's/\..*$//'))
+  colorschemes=($(ls "schemes/$system/" | grep yaml | sed 's/\..*$//'))
   tmpfile="$0.html"
 
   vim -es -u NORC -N \
     -c 'silent! set termguicolors' \
-    -c 'silent! set runtimepath+=base16-vim' \
+    -c 'silent! set runtimepath+=tinted-vim' \
     -c 'silent! syntax on' \
-    -c "silent! colorscheme base16-${colorschemes[0]}" \
+    -c "silent! colorscheme $system-${colorschemes[0]}" \
     -c 'silent! TOhtml' \
     -c 'silent! wqa!' \
     $0 > /dev/null 2>&1
@@ -36,19 +50,17 @@ main() {
       -c 'set termguicolors' \
       -c 'set runtimepath+=tinted-vim' \
       -c 'syntax on' \
-      -c "colorscheme base16-$colorscheme" \
+      -c "colorscheme $system-$colorscheme" \
       -c 'TOhtml' \
       -c 'wqall' \
       $0 > /dev/null 2>&1
 
     grep -Pzo '(?s)<style>.*</style>' $tmpfile \
-      | sed "3,14!d;s/body/pre/;s/^/#base16-$colorscheme /" \
-      > out/$colorscheme.css
+      | sed "3,14!d;s/body/pre/;s/^/#$system-$colorscheme /" \
+      > "out/$system-$colorscheme.css"
 
     rm -f $tmpfile
   done
-
-  erb template.erb > out/index.html
 }
 
 main
diff --git a/template.erb b/template.erb
@@ -1,35 +1,52 @@
-<% 
+<%
   require 'yaml'
   require 'ostruct'
   require 'json'
 
-  # Collect paths
-  colorscheme_files = Dir['schemes/base16/*.yaml']
+  # Collect paths for base16 and base24 schemes
+  base16_files = Dir['schemes/base16/*.yaml']
+  base24_files = Dir['schemes/base24/*.yaml']
 
-  # Parse each file into an OpenStruct object, including the slug
-  colorschemes = colorscheme_files.map do |file_path|
+  # Parse base16 schemes
+  base16_colorschemes = base16_files.map do |file_path|
     slug = File.basename(file_path, '.yaml')
-
+
+    data = YAML.load_file(file_path)
+    data['slug'] ||= slug
+    data['system'] = 'base16'
+
+    OpenStruct.new(data)
+  end
+
+  # Parse base24 schemes
+  base24_colorschemes = base24_files.map do |file_path|
+    slug = File.basename(file_path, '.yaml')
+
     data = YAML.load_file(file_path)
     data['slug'] ||= slug
-
+    data['system'] = 'base24'
+
     OpenStruct.new(data)
   end
+
+  # Combine into a single array
+  colorschemes = (base16_colorschemes + base24_colorschemes).sort_by(&:slug)
 %>
 <!doctype html>
 <html lang="en">
   <head>
-    <title>Base16 Gallery</title>
+    <title>Tinted Gallery</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-      <% colorschemes.each do |colorscheme| %>
-        <%= File.read("out/#{colorscheme.slug}.css") %>
+      <% colorschemes.each do |cs| %>
+        <%= File.read("out/#{cs.system}-#{cs.slug}.css") %>
       <% end %>
     </style>
     <style>
+    html { font-size: 16px; }
     h1 {
       font-family: Lobster, cursive;
     }
@@ -45,14 +62,38 @@
       overflow-y: scroll;
       box-shadow: 5px 5px 10px #333;
       border-radius: 5px;
+      margin: 0;
     }
     .Scheme-codeBlock a {
       color: inherit;
       text-decoration: none;
       pointer-events: none;
     }
+    .Scheme-tagList {
+      display: flex;
+      font-size: 0.7rem;
+      gap: 5px;
+      justify-content: right;
+      list-style: none;
+      margin: 0;
+      padding: 6px 0;
+    }
+    .Scheme-tagItem {
+      border: 1px solid rgba(0,0,0,0.50);
+      background-color: rgba(0,0,0,0.25);
+      color: rgba(0,0,0,0.75);
+      border-radius: 5px;
+      height: 18px;
+      line-height: 18px;
+      padding: 0 4px;
+    }
+    .darkmode .Scheme-tagItem {
+      border: 1px solid rgba(255,255,255,0.50);
+      background-color: rgba(255,255,255,0.25);
+      color: rgba(255,255,255,0.75);
+    }
     .Scheme-title {
-      font-size: 1.5em !important;
+      font-size: 1.5rem;
       padding-bottom: 50px;
     }
     .Scheme-palette {
@@ -87,24 +128,35 @@
   <body>
     <div class="container-fluid">
       <div class="row">
-        <h1 class="text-center">Base16 Gallery</h1>
+        <h1 class="text-center">Tinted Gallery</h1>
         <p class="text-center">
           This gallery is generated from <a href="https://github.com/tinted-theming/tinted-vim">tinted-theming/tinted-vim</a>.</p>
       </div>
-      <div>
-        Group by variant: <input id="sort-by-variant" type="checkbox" />
-      </div>
-      <div>
-        Dark mode: <input id="darkmode" type="checkbox" />
-      </div>
+      <form>
+        <div>
+          Group by:
+          <select id="group-select" name="group-select">
+            <option value="">--None--</option>
+            <option value="variant">Variant</option>
+            <option value="system">Scheme System</option>
+          </select>
+        </div>
+        <div>
+          Dark mode: <input id="darkmode" type="checkbox" />
+        </div>
+      </form>
       <div class="row" id="gallery">
       <% colorschemes.each do |cs| %>
-        <div class="Scheme col-xxl-2 col-lg-3 col-md-4 col-sm-6" id="base16-<%= cs.slug %>" data-scheme-variant="<%= cs.variant %>">
-          <div class="Scheme-content">
+        <div class="Scheme col-xxl-2 col-lg-3 col-md-4 col-sm-6" data-scheme-variant="<%= cs.variant %>">
+          <div class="Scheme-content" id="<%= cs.system %>-<%= cs.slug %>">
             <input class="Scheme-checkbox" type="checkbox" />
-            <pre class="Scheme-meta"><code><%= File.read("schemes/base16/#{cs.slug}.yaml") %></code></pre>
+            <pre class="Scheme-meta"><code><%= File.read("schemes/#{cs.system}/#{cs.slug}.yaml") %></code></pre>
             <pre class="Scheme-codeBlock"><code> <%= File.read("out/shell.html") %> </code></pre>
           </div>
+          <ul class="Scheme-tagList">
+            <li class="Scheme-tagItem"><%= cs.system %></li>
+            <li class="Scheme-tagItem"><%= cs.variant %></li>
+          </ul>
           <div class="Scheme-palette">
             <div class="Scheme-color" title="<%= cs.palette['base00'] %>" style="background-color: <%= cs.palette['base00'] %>"></div>
             <div class="Scheme-color" title="<%= cs.palette['base01'] %>" style="background-color: <%= cs.palette['base01'] %>"></div>
@@ -122,6 +174,14 @@
             <div class="Scheme-color" title="<%= cs.palette['base0D'] %>" style="background-color: <%= cs.palette['base0D'] %>"></div>
             <div class="Scheme-color" title="<%= cs.palette['base0E'] %>" style="background-color: <%= cs.palette['base0E'] %>"></div>
             <div class="Scheme-color" title="<%= cs.palette['base0F'] %>" style="background-color: <%= cs.palette['base0F'] %>"></div>
+            <% if cs.palette['base10'] %><div class="Scheme-color" title="<%= cs.palette['base10'] %>" style="background-color: <%= cs.palette['base10'] %>"></div><% end %>
+            <% if cs.palette['base11'] %><div class="Scheme-color" title="<%= cs.palette['base11'] %>" style="background-color: <%= cs.palette['base11'] %>"></div><% end %>
+            <% if cs.palette['base12'] %><div class="Scheme-color" title="<%= cs.palette['base12'] %>" style="background-color: <%= cs.palette['base12'] %>"></div><% end %>
+            <% if cs.palette['base13'] %><div class="Scheme-color" title="<%= cs.palette['base13'] %>" style="background-color: <%= cs.palette['base13'] %>"></div><% end %>
+            <% if cs.palette['base14'] %><div class="Scheme-color" title="<%= cs.palette['base14'] %>" style="background-color: <%= cs.palette['base14'] %>"></div><% end %>
+            <% if cs.palette['base15'] %><div class="Scheme-color" title="<%= cs.palette['base15'] %>" style="background-color: <%= cs.palette['base15'] %>"></div><% end %>
+            <% if cs.palette['base16'] %><div class="Scheme-color" title="<%= cs.palette['base16'] %>" style="background-color: <%= cs.palette['base16'] %>"></div><% end %>
+            <% if cs.palette['base17'] %><div class="Scheme-color" title="<%= cs.palette['base17'] %>" style="background-color: <%= cs.palette['base17'] %>"></div><% end %>
           </div>
           <div class="Scheme-title text-center">
             <%= cs.slug %>
@@ -133,13 +193,18 @@
 
     <script>
       const colorschemes = <%= colorschemes.map(&:to_h).to_json %>;
+      colorschemes.sort((a, b) => {
+        if (a.slug > b.slug) return 1;
+        if (a.slug < b.slug) return -1;
+        return 0;
+      });
       const galleryEl = document.getElementById('gallery');
       const codeText = {
         shell: <%= File.read('out/shell.html').to_json %>
       };
 
       // Listen for changes to DOM "settings" and re-render
-      document.getElementById('sort-by-variant').addEventListener('change', function() {
+      document.getElementById('group-select').addEventListener('change', function() {
         renderSchemes();
       });
 
@@ -158,10 +223,10 @@
       // Get settings from DOM
       function getSettings() {
         const groupBy = [];
-        const isGroupedByVariant = document.getElementById('sort-by-variant').checked;
+        const groupSelected = document.getElementById('group-select').value;
 
-        if (isGroupedByVariant) {
-          groupBy.push('variant');
+        if (groupSelected) {
+          groupBy.push(groupSelected);
         }
 
         return {
@@ -173,9 +238,18 @@
       function renderSchemes() {
         const { groupBy } = getSettings();
         const schemes = [...colorschemes];
+        console.log({schemes});
 
         emptyGalleryEl();
 
+        if (groupBy.includes('system')) {
+          schemes.sort((a, b) => {
+            if (a.system < b.system) return 1;
+            if (a.system > b.system) return -1;
+            return 0;
+          });
+        }
+
         if (groupBy.includes('variant')) {
           schemes.sort((a, b) => {
             if (a.variant < b.variant) return 1;
@@ -202,13 +276,29 @@
       function appendSchemeToGalleryEl(cs) {
         const schemeDiv = document.createElement('div');
         schemeDiv.className = 'Scheme col-xxl-2 col-lg-3 col-md-4 col-sm-6 heh';
-        schemeDiv.id = `base16-${cs.slug}`;
         schemeDiv.setAttribute('data-scheme-variant', cs.variant);
 
         // Create Scheme-content div
         const schemeContentDiv = document.createElement('div');
+        schemeContentDiv.id = `base16-${cs.slug}`;
         schemeContentDiv.className = 'Scheme-content';
 
+        // Create Scheme-tagItem li
+        const schemeTagItemSystemLi = document.createElement('li');
+        schemeTagItemSystemLi.className = 'Scheme-tagItem';
+        schemeTagItemSystemLi.textContent = `${cs.system}`
+
+        // Create Scheme-tagItem li
+        const schemeTagItemVaraintLi = document.createElement('li');
+        schemeTagItemVaraintLi.className = 'Scheme-tagItem';
+        schemeTagItemVaraintLi.textContent = `${cs.variant}`
+
+        // Create Scheme-content ul
+        const schemeTagListUl = document.createElement('ul');
+        schemeTagListUl.className = 'Scheme-tagList';
+        schemeTagListUl.appendChild(schemeTagItemSystemLi);
+        schemeTagListUl.appendChild(schemeTagItemVaraintLi);
+
         // Add checkbox input
         const checkbox = document.createElement('input');
         checkbox.className = 'Scheme-checkbox';
@@ -224,7 +314,7 @@ slug: ${cs.slug}
 name: ${cs.name}
 author: ${cs.author}
 variant: ${cs.variant}
-palette: 
+palette:
   ${cs.palette.base00 ? 'base00: ' + cs.palette.base00 : ''}
   ${cs.palette.base01 ? 'base01: ' + cs.palette.base01 : ''}
   ${cs.palette.base02 ? 'base02: ' + cs.palette.base02 : ''}
@@ -255,6 +345,9 @@ palette:
         // Append Scheme-content to the main div
         schemeDiv.appendChild(schemeContentDiv);
 
+        // Append Scheme-tagList to the main div
+        schemeDiv.appendChild(schemeTagListUl);
+
         // Create Scheme-palette div
         const schemePaletteDiv = document.createElement('div');
         schemePaletteDiv.className = 'Scheme-palette';