Accessibility, bug, performance, and misc fixes

404.md

@@ -8,15 +8,4 @@ permalink: /404.html
 Try searching the whole site for the content you want:
 {:.center}
 
-<input type="text" oninput="onInput(this)" placeholder="Search site">
-{% include link.html type="search" link="" icon="" style="button" %}
-{:.center}
-
-<script>
-  const onInput = (target) => {
-    const google = "https://www.google.com/search?q=site:";
-    const site = "{{ '' | absolute_url }}";
-    const query = target.value;
-    target.nextElementSibling.href = google + site + " " + query;
-  };
-</script>
+{% include site-search.html %}

CITATION.cff

@@ -1,11 +1,13 @@
+# GitHub citation metadata for lab-website-template itself
+
 cff-version: 1.2.0
 authors:
-- family-names: "Rubinetti"
-  given-names: "Vincent"
-  orcid: "https://orcid.org/0000-0002-4655-3773"
-- family-names: "Greene"
-  given-names: "Casey"
-  orcid: "https://orcid.org/0000-0001-8713-9213"
+  - family-names: "Rubinetti"
+    given-names: "Vincent"
+    orcid: "https://orcid.org/0000-0002-4655-3773"
+  - family-names: "Greene"
+    given-names: "Casey"
+    orcid: "https://orcid.org/0000-0001-8713-9213"
 title: "Lab Website Template"
 version: 0.4.1
 date-released: 2021-08-23

README.md

@@ -12,28 +12,6 @@ How easy is the template to use?
 How flexible is it?
 How's our documentation?
 
-## Gallery
-
-<kbd>
-  <a href="https://user-images.githubusercontent.com/8326331/112500343-acc58480-8d5e-11eb-9795-9592625872fc.png">
-    <img src="https://user-images.githubusercontent.com/8326331/112500343-acc58480-8d5e-11eb-9795-9592625872fc.png" height="150px" alt="Screenshot" />
-  </a>
-</kbd>
-
-<kbd>
-  <a href="https://greenelab.github.io/lab-website-template/">
-    <img src="https://raw.githubusercontent.com/greenelab/lab-website-template/main/favicons/share-thumbnail.jpg?raw=true" height="150px" alt="Lab Website Template" />
-  </a>
-</kbd>
-
-<kbd>
-  <a href="https://greenelab.com/">
-    <img src="https://greenelab.com/favicons/share-thumbnail.jpg" height="150px" alt="GreeneLab.com" />
-  </a>
-</kbd>
-
-more coming soon...
-
 ## Features
 
 - **Automatically generated citations** (using [Manubot](https://manubot.org)) from **just an identifier** (DOI, PubMed ID, and many more)
@@ -46,14 +24,18 @@ more coming soon...
   - image galleries
   - multi-size cards with image and text
   - citations
-  - ...[and more](https://github.com/greenelab/lab-website-template/wiki/Components)!
+  - ...[and many more](https://github.com/greenelab/lab-website-template/wiki/Components)!
 - A **home page**, where you can highlight the most important things that make your lab special
 - A **research page**, with a sorted, searchable list of all your published works
 - A **tools page**, where you can show off your software, datasets, or other useful things
 - A **team** page, compiled automatically from individual members
 - Individual **team member pages** with bios, assignable roles, and social media links
 - A **blog page**, with a sorted, grouped, tagged list of all your posts
 
+## Gallery
+
+[🖼️ See who else is using the template and what it can do!](https://github.com/greenelab/lab-website-template/wiki/Gallery)
+
 ## Documentation
 
 [▶️ Get Started](https://github.com/greenelab/lab-website-template/wiki/Get-Started)

_config.yaml

@@ -17,6 +17,8 @@ links:
   instagram: YourLabHandle
   youtube: YourLabChannel
 
+### advanced settings
+
 # automatic citations
 auto-cite:
   plugins:
@@ -25,8 +27,6 @@ auto-cite:
         - ../_data/sources.yaml
   output: ../_data/citations.yaml
 
-### advanced settings
-
 # default front matter parameters for markdown files
 defaults:
   # all markdown files

_includes/banner.html

@@ -1 +1,8 @@
-<img class="banner" src="{{ include.image | relative_url }}" loading="lazy" />
+{::nomarkdown}
+<img
+  class="banner"
+  src="{{ include.image | relative_url }}"
+  loading="lazy"
+  alt="Banner image"
+/>
+{:/}

_includes/card.html

@@ -19,6 +19,7 @@
       src="{{ include.image | relative_url }}"
       onerror="this.src = '{{ placeholder }}'; this.onerror = null;"
       loading="lazy"
+      alt=""
     >
   </{{ tag }}>
   <span class="card_text">

_includes/citation.html

@@ -28,6 +28,7 @@
           onerror="this.src = '{{ placeholder }}'; this.onerror = null;"
           data-tooltip="{{ id }}"
           loading="lazy"
+          alt="Citation thumbnail"
         >
       </a>
     </div>

_includes/content.html

@@ -35,16 +35,11 @@
 
     <section
       class="background"
+      {% if full %}data-full="true"{% endif %}
       {% if dark %}data-dark="true"{% endif %}
       {% if background %}style="--background: url('{{ background | relative_url }}')"{% endif %}
     >
-      {%- if full == false -%}
-      <div class="section">
-      {%- endif -%}
-        {{ section }}
-      {%- if full == false -%}
-      </div>
-      {%- endif -%}
+      {{- section -}}
     </section>
 
   {%- endunless -%}

_includes/feature.html

@@ -3,7 +3,11 @@
     {% if include.link %}href="{{ include.link | relative_url }}"{% endif %}
     class="feature_image"
   >
-    <img src="{{ include.image | relative_url }}" loading="lazy" />
+    <img
+      src="{{ include.image | relative_url }}"
+      loading="lazy"
+      alt=""
+    />
   </a>
   <div class="feature_text">
     {%- if include.headline -%}

_includes/figure.html

@@ -50,8 +50,8 @@
   >
     <img
       src="{{ include.image | relative_url }}"
-      alt="{{ include.caption }}"
-      title="{{ include.caption }}"
+      alt="{{ include.caption | default: '' }}"
+      title="{{ include.caption | default: '' }}"
       style="{{ img }}"
       loading="lazy"
     />

_includes/fonts.html

@@ -5,8 +5,16 @@
   rel="stylesheet"
 />
 
-<!-- Font Awesome (icons) -->
+<!-- Font Awesome icons (load asynchronously due to size) -->
 <link
   href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
-  rel="stylesheet"
+  rel="preload"
+  as="style"
+  onload="this.onload = null; this.rel = 'stylesheet';"
 />
+<noscript>
+  <link
+    href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
+    rel="stylesheet"
+  />
+</noscript>

_includes/footer.html

@@ -12,16 +12,27 @@
 {%- endif -%}
 
 <footer {% if background %}class="background"{% endif %} {% if background %}style="--background: url('{{ background | relative_url }}')"{% endif %} data-dark="{{ dark }}">
+
+  <!--
+  <div class="footer_row">
+    Extra details like contact info or address
+  </div>
+  -->
+
   <div class="footer_row">
     {%- for entry in site.links -%}
       {%- assign key = entry[0] -%}
       {%- assign value = entry[1] -%}
       {%- include link.html type=key icon="" tooltip="" link=value -%}
     {%- endfor -%}
   </div>
-  <!--
+
   <div class="footer_row">
-    &copy; {{ site.time | date: '%Y' }} {{ site.title }}
+    <span>
+      &copy; {{ site.time | date: '%Y' }} {{ site.title }}
+      &nbsp; | &nbsp;
+      Built with <a href="https://github.com/greenelab/lab-website-template">Lab Website Template</a>
+    </span>
   </div>
-  -->
+
 </footer>

_includes/gallery.html

@@ -22,9 +22,13 @@
       <a
         {% if link %}href="{{ link | relative_url }}"{% endif %}
         class="gallery_item"
-        data-tooltip="{{ tooltip }}"
+        data-tooltip="{{ tooltip | default: '' }}"
       >
-        <img src="{{ image | relative_url }}" loading="lazy">
+        <img
+          src="{{ image | relative_url }}"
+          loading="lazy"
+          alt=""
+        />
       </a>
     {%- endif -%}
 

_includes/head.html

@@ -1,9 +1,5 @@
 <head>
   {% include analytics.html %}
-  <title>
-    {{ site.title }}{% if page.title %} - {% endif %}{{ page.title }}
-  </title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
   {% include meta.html %}
   {% include favicons.html %}
   {% include fonts.html %}

_includes/header.html

@@ -11,20 +11,16 @@
   {%- assign dark = true -%}
 {%- endif -%}
 
-{%- assign title = site.logo-text -%}
-{%- if title == nil -%}
-  {%- assign title = site.title -%}
-{%- endif -%}
 
 <header {% if background %}class="background"{% endif %} {% if background %}style="--background: url('{{ background | relative_url }}')"{% endif %} data-dark="{{ dark }}">
   <a
     href="{{ '/' | relative_url }}"
     class="logo_row"
     data-tooltip="Home"
   >
-    <img src="{{ site.logo | relative_url }}" class="logo" />
-    {% if title and title != "" %}
-      <span class="logo_text">{{ title }}</span>
+    <img src="{{ site.logo | relative_url }}" class="logo" alt="Logo image" />
+    {% if site.logo-text != false %}
+      <span class="logo_text">{{ site.title }}</span>
     {% endif %}
   </a>
   <nav class="nav_row">

_includes/meta.html

@@ -1,6 +1,15 @@
-{% capture title%}
-{{ site.title }}{% if page.title %} - {% endif %}{{ page.title }}
-{% endcapture %}
+{% assign title = "" | split: "," %}
+{% if site.title %}
+  {% assign title = title | push: site.title %}
+{% endif %}
+{% if page.title %}
+  {% assign title = title | push: page.title %}
+{% endif %}
+{% assign title = title | join: " - " %}
+
+<title>{{ title }}</title>
+
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <!-- https://metatags.io/ -->
 <meta name="title" content="{{ title }}" />

_includes/portrait.html

@@ -26,17 +26,18 @@
   {%- if role -%}
     {%- include role.html type=role -%}
   {%- endif -%}
-
+
+  {%- assign name = member.name | default: "" -%}
   {%- assign image = member.image | default: "" -%}
   <span class="portrait_image">
     <img
       src="{{ image | relative_url }}"
       onerror="this.src = '{{ placeholder }}'; this.onerror = null;"
       loading="lazy"
+      alt="{{ name | default: 'Member portrait' }}"
     >
   </span>
 
-  {%- assign name = member.name | default: "" -%}
   {%- if name -%}
     <span class="portrait_name">
       {{ name }}

_includes/post-excerpt.html

@@ -16,14 +16,12 @@
     <a href="{{ url | relative_url }}">{{ title }}</a>
   </p>
 
-  {% assign author = post.author | default: "" %}
-  {% assign tags = post.tags | default: emptyarray %}
-  {% assign date = post.date | default: "" %}
   {%
     include post-info.html
-    author=author
-    tags=tags
-    date=date
+    author=post.author
+    member=post.member
+    date=post.date
+    tags=post.tags
   %}
 
   {% assign content = post.content | default: "" %}

_includes/scripts.html

@@ -1,10 +1,14 @@
 <!-- third party scripts -->
-<script src="https://unpkg.com/@popperjs/core@2"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
+<script src="https://unpkg.com/@popperjs/core@2" defer></script>
+<script src="https://unpkg.com/tippy.js@6" defer></script>
+<script
+  src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"
+  defer
+></script>
 
 <!-- site-wide javascript scripts -->
 {% for file in site.static_files %}
   {%- if file.path contains "/js" -%}
-    <script src="{{ file.path | relative_url }}"></script>
+    <script src="{{ file.path | relative_url }}" defer></script>
   {% endif -%}
 {% endfor %}

_includes/search-box.html

@@ -1,5 +1,10 @@
 <div class="search_box">
-  <input class="search_input" oninput="onSearchInput(this)" placeholder="Search" />
+  <input
+    class="search_input"
+    oninput="onSearchInput(this)"
+    placeholder="Search"
+    title="Search content on this page"
+  />
   <button disabled data-tooltip="Clear search" onclick="onSearchClear()">
     <i class="fas fa-search"></i>
   </button>

_includes/site-search.html

@@ -0,0 +1,6 @@
+<form onsubmit="onSiteSearchSubmit(event)" title="Search site with Google">
+  <input type="text" name="query" placeholder="Search site" />
+  <button type="submit">
+    <i class="fas fa-search"></i>
+  </button>
+</form>

_includes/tags.html

@@ -1,4 +1,12 @@
-{%- assign tags = include.tags | join: "," | split: "," -%}
+{%- assign tags = "" | split: "," -%}
+{%- assign input = include.tags | join: "," | split: "," -%}
+{%- for tag in input -%}
+  {%- assign tag = tag | strip -%}
+  {%- if tag != "" -%}
+    {%- assign tags = tags | push: tag -%}
+  {%- endif -%}
+{%- endfor -%}
+
 {%- assign repo = include.repo | strip -%}
 {%- if repo == "" -%}
   {%- assign repo = nil -%}

_includes/two-col.html

@@ -1,4 +1,4 @@
 <div class="two_col">
-  <div>{{ include.col1 }}</div>
-  <div>{{ include.col2 }}</div>
+  <div>{{ include.col1 | markdownify }}</div>
+  <div>{{ include.col2 | markdownify }}</div>
 </div>