Merge pull request #7 from joeroe/main

Replace theme
open-archaeo · Sep 21, 2024 · 7bbbf08 · 7bbbf08
2 parents aaf09da + f4e826f
commit 7bbbf08
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 71 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,26 +1,5 @@
 source "https://rubygems.org"
 
 # Bootstrap Github Pages dependencies (including Jekyll)
-gem "github-pages", "~> 232", group: :jekyll_plugins
+gem "github-pages", group: :jekyll_plugins
 
-# Default Jekyll theme
-gem "minima", "~> 2.5"
-
-# Jekyll plugins
-group :jekyll_plugins do
-  gem "jekyll-feed", "~> 0.12"
-end
-
-# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
-# and associated library.
-platforms :mingw, :x64_mingw, :mswin, :jruby do
-  gem "tzinfo", ">= 1", "< 3"
-  gem "tzinfo-data"
-end
-
-# Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1", :platforms => [:mingw, :x64_mingw, :mswin]
-
-# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
-# do not have a Java counterpart.
-gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
diff --git a/_config.yml b/_config.yml
@@ -18,17 +18,15 @@
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
 
-title: publish.open-archaeo.info
+title: 💎 Diamond Archaeology
 # email: [email protected]
 github_username: open-archaeo
-description: >
-    Open venues for publishing, reviewing and curating archaeological research.
+description: Open venues for publishing, reviewing and curating archaeological research
 
 #baseurl: "" # the subpath of your site, e.g. /blog
 #url: "" # the base hostname & protocol for your site, e.g. http://example.com
 
 # Build settings
-theme: minima
 plugins:
   - jekyll-feed
 

diff --git a/_includes/model.html b/_includes/model.html
@@ -0,0 +1,9 @@
+{% case include.model %}
+  {% when "diamond" %}
+    <span role="img" class="icon" data-tooltip="Diamond open access" data-placement="left">💎</span>
+  {% when "gold" %}
+    <span role="img" class="icon" data-tooltip="Gold open access" data-placement="left">🪙</span>
+  {% else %}
+    <span role="img" class="icon" data-tooltip="Unknown open access model" data-placement="left">❓</span>
+{% endcase %}
+
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -1,19 +1,37 @@
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: "en" }}">
+<html lang="{{ page.lang | default: site.lang | default: "en" }}" data-theme="light">
 
-  {%- include head.html -%}
+  <head>
+
+    <meta charset="utf-8">
+
+    <title>{{ site.title | escape }}</title>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {%- seo -%}
+
+    <link rel="stylesheet" href="{{ 'css/pico.cyan.min.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ 'css/styles.css' | relative_url }}">
+
+    <script src="{{ 'js/list.min.js' | relative_url }}" defer></script>
+    <script src="{{ 'js/scripts.js' | relative_url }}" defer></script>
+
+  </head>
 
   <body>
 
-    {%- include header.html -%}
+    <header class="container">
+      <hgroup>
+        <h1>{{ site.title | escape }}</h1>
+        <p>{{ site.description | escape }}</p>
+      </hgroup>
+    </header>
 
-    <main class="page-content" aria-label="Content">
-      <div class="wrapper">
-        {{ content }}
-      </div>
+    <main class="container">
+      {{ content }}
     </main>
 
-    {%- include footer.html -%}
+    <footer class="container"></footer>
 
   </body>
 

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -12,45 +12,70 @@ <h1 class="page-heading">{{ page.title }}</h1>
   {% assign journals = site.journals %}
 
   {%- if journals.size > 0 -%}
+    <div id="journals-list">
 
-    <table>
-      <tr>
-        <th scope="col">Journal</th>
-        <th scope="col">Publisher</th>
-        <th scope="col">Languages</th>
-        <th scope="col">ISSN</th>
-      </tr>
-
-    {%- for journal in journals %}
-
-      <tr>
-        <td>
-          <cite>
-            <a href="{{ journal.website }}" title="{{ journal.title }} home page">
-              {{ journal.title }}
-            </a>
-          </cite>
-        </td>
-        <td>{{ journal.publisher }}</td>
-        <td>
-          {% assign languages = journal.languages %}
-          {%- if languages.size > 1 -%}
-          <ul style="list-style-type: none; margin: 0;">
-              {%- for lang in languages %}
-                <li>{% include language.html lang=lang %}</li>
-              {%- endfor %}
-            </ul>
-          {%- else -%}
-            {% include language.html lang=languages.first %}
-          {%- endif -%}
-        </td>
-        <td>{% include issn.html issn=journal.issn %}</td>
-      </tr>
-
-    {%- endfor %}
-
-    </table>
+      <article>
 
+        <p><noscript><small>Searching and sorting requires a Javascript-enabled browser!</small></noscript></p>
+        <form role="search">
+          <input type="search" class="search" placeholder="Filter..." disabled />
+        </form>
+
+        <table>
+          <tr>
+            <th scope="col">
+              <button class="outline sort" data-sort="model" title="Sort by open access model" disabled></button>
+            </th>
+            <th scope="col">
+              <strong>Journal</strong>
+              <button class="outline sort" data-sort="title" title="Sort by title" disabled></button>
+            </th>
+            <th scope="col">
+              <strong>Publisher</strong>
+              <button class="outline sort" data-sort="publisher" title="Sort by publisher" disabled></button>
+            </th>
+            <th scope="col"><strong>Languages</strong></th>
+            <th scope="col"><strong>ISSN</strong></th>
+          </tr>
+
+          <tbody class="list">
+            {%- for journal in journals %}
+
+              <tr>
+                <td class="model center">
+                  {% include model.html model=journal.model %}
+                </td>
+                <td class="title" data-title="{{ journal.title }}">
+                  <cite>
+                    <a href="{{ journal.website }}" title="{{ journal.title }} home page">
+                      {{ journal.title }}
+                    </a>
+                  </cite>
+                </td>
+                <td class="publisher">{{ journal.publisher }}</td>
+                <td>
+                  {% assign languages = journal.languages %}
+                  {%- if languages.size > 1 -%}
+                  <ul style="list-style-type: none; margin: 0;">
+                      {%- for lang in languages %}
+                        <li>{% include language.html lang=lang %}</li>
+                      {%- endfor %}
+                    </ul>
+                  {%- else -%}
+                    {% include language.html lang=languages.first %}
+                  {%- endif -%}
+                </td>
+                <td>{% include issn.html issn=journal.issn %}</td>
+              </tr>
+
+            {%- endfor %}
+          </tbody>
+
+        </table>
+
+      </article>
+
+    </div>
   {%- endif -%}
 
 </div>

diff --git a/css/pico.cyan.min.css b/css/pico.cyan.min.css
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,25 @@
+.center {
+  text-align: center;
+}
+
+[data-tooltip].icon {
+  border-bottom: 0;
+}
+
+/* Table sorting */
+button.sort,
+button.sort:focus {
+  border: 0;
+}
+
+.sort:after {
+  content: "\21C5";
+}
+
+.sort.desc:after {
+  content: "\2191";
+}
+
+.sort.asc:after {
+  content: "\2193";
+}
diff --git a/js/list.min.js b/js/list.min.js
diff --git a/js/scripts.js b/js/scripts.js
@@ -0,0 +1,21 @@
+/* Sortable table with list.js */
+var listOptions = {
+  valueNames: [ 
+    'model', 
+    { attr: 'data-title', name: 'title' }, 
+    'publisher'
+  ]
+};
+
+var journalsList = new List('journals-list', listOptions);
+
+/* Turn on disabled controls */
+searchControls = document.getElementById("journals-list").getElementsByClassName("search");
+Array.from(searchControls).forEach((element) => {
+  element.disabled = false;
+});
+
+sortControls = document.getElementById("journals-list").getElementsByClassName("sort");
+Array.from(sortControls).forEach((element) => {
+  element.disabled = false;
+});