add search, update readme, and more

.github/workflows/update-research.yml

@@ -0,0 +1,29 @@
+name: Update research page
+
+on:
+  pull_request:
+    paths:
+      - "_data/research-input.yml"
+
+jobs:
+  update_research:
+    name: Update Manubot-generated citations on research page
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Set up Python
+        uses: actions/setup-python@v2
+        with:
+          python-version: 3.7
+      - name: Install Manubot
+        run: pip install --upgrade manubot
+      - name: Build updated research output file
+        run: python _data/build-research.py
+      - name: Commit new research output file
+        uses: EndBug/add-and-commit@v4
+        with:
+          add: "_data/research-output.yml"
+          message: "update Manubot-generated citations on research page"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -17,12 +17,11 @@ In other words, people who need [these features](#features) and have [this backg
 - Automatically pull in and display tags from GitHub repositories
 - Works and looks good on all major desktop and mobile browsers
 - A suite of pre-built components:
-  - beautifully formatted tables and code blocks
+  - formatted tables and code blocks
   - social media links with icons
   - figures with captions
   - image galleries
   - multi-size cards with image and text
-  - member portraits with assignable role icons
   - ...and more!
 - 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
@@ -115,6 +114,8 @@ Files and folders to be edited by you.
 Files and folders used by the template.
 You might want to touch these if you want more customization, but make sure you know what you're doing.
 
+- `.github` - Files related to [GitHub Actions](https://github.com/features/actions), a feature of GitHub that (among other things) can automatically run scripts and other actions when changes are made to a repo.
+  This template uses GitHub Actions particularly to help [build the research page](#automatic-citations).
 - `/_includes` - Reusable, small snippets of HTML that can take parameters, aka _components_.
   See `index.md` for which ones you are meant to use.
   Notably, see `header.html` to edit the links shown in the site header.
@@ -184,8 +185,30 @@ OR
 
 ### Using the pre-built components
 
-The `index.md` file aims to provide a complete listing of all of the included components, and how to use them.
-See its [raw source code](https://github.com/greenelab/lab-website-template/blob/master/index.md) to see how to write the components into your site, and see the [template demo](https://greenelab.github.io/lab-website-template) to see what the components look like in action.
+The various `index.md` files in this repo aim to provide a complete listing of all of the included components, and document how to use them.
+See their source code to see how to write the components into your site, and see the [template demo](https://greenelab.github.io/lab-website-template) to see what the components look like in action.
+
+### Automatic Citations
+
+Automatic citations work a little bit different than the rest of the template.
+Instead of Jekyll automatically building them, we need to run a special [Python](https://www.python.org/) script in `/_data/build-research.py`.
+
+If you're previewing and testing your site on the GitHub website:
+
+1. Add or change the desired papers in `/_data/research-input.yml`
+2. Make a pull request with the changes
+3. GitHub should automatically run the Python script
+4. Citations will be automatically generated and output to `/_data/research-output.yml`
+5. GitHub should automatically commit the output file onto your pull request
+6. The _research list_ component will now (in a pull request preview and when you merge the pull request) show the updated list of papers
+
+If you're previewing and testing your site on your computer:
+
+1. Add or change the desired papers in `/_data/research-input.yml`
+2. [Install Python](https://www.python.org/downloads/)
+3. Run `./build.sh`, which will run the Python script
+4. Citations will be automatically generated and output to `/_data/research-output.yml`
+5. The _research list_ component will now show the updated list of papers
 
 ### Configuring blog post comments
 
@@ -239,7 +262,7 @@ All included photos are licensed under [CC0](https://creativecommons.org/share-y
 
 There are a lot of different technologies involved in this template; it's okay if you don't have a deep understanding of them all.
 
-If you need help, first make sure you search this readme and look through `index.md`.
+If you need help, first make sure you search this readme and look through the various `index.md` files in the repo.
 Also, we've tried to include comments in all files where we think they're needed, especially where users are likely to want to customize things.
 Look for file names relevant to your question, and you may find that you can achieve what you want just by opening them up and editing them.
 

_includes/blog-list.html

@@ -0,0 +1,33 @@
+{%- assign byyear = site.posts | sort: "date" | reverse | group_by_exp: "post", "post.date | date: '%Y'" | sort: "name" | reverse -%}
+
+{%- for yeargroup in byyear -%}
+
+<hr />
+
+<h3>{{ yeargroup.name }}</h3>
+
+{%- for post in yeargroup.items -%}
+
+<p>
+  <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+</p>
+
+{%- include post-info.html post=post -%}
+
+{%- include tags.html tags=post.tags -%}
+
+{%- if forloop.index <= 3 -%}
+{{ post.content | strip_html | truncate: 500 }}
+<p class="center">
+  <a href="{{ post.url | relative_url }}">Read more →</a>
+</p>
+{%- else -%}
+{{ post.content | strip_html | truncate: 200 }}
+{%- endif -%}
+
+{%- if forloop.index < forloop.length -%}
+{%- endif -%}
+
+{%- endfor -%}
+
+{%- endfor -%}

_includes/card-search.html

@@ -0,0 +1,9 @@
+<div class="card_search">
+  <div class="card_search_box">
+    <input data-search-box />
+    <i class="fas fa-search"></i>
+  </div>
+  <div class="card_search_info">
+    Showing <span data-search-info>all</span> {{ include.subject }}
+  </div>
+</div>

_includes/card.html

@@ -1,7 +1,9 @@
 {% assign size = include.size %}
+
 {% if size != "large" and size != "medium" and size != "small" %}
 {% assign size = "large" %}
 {% endif %}
+
 <div class="card" data-size="{{ size }}">
   {% assign placeholder = include.placeholder | default: "images/placeholder.svg" | relative_url %}
   <a
@@ -23,16 +25,21 @@
       {{- include.heading -}}
     </a>
     {% endif %}
+
     {%- for i in (1..5) -%}
+
     {%- assign row = "row" | append: i -%}
     {%- assign row = include[row] | strip -%}
+
     {%- if row != empty -%}
+
     {%- assign truncate = include.truncate | default: 0 -%}
     {%- if i <= truncate -%}
     {%- assign truncate = true -%}
     {%- else -%}
     {%- assign truncate = false -%}
     {%- endif -%}
+
     {%- assign firstchar = row | slice: 0 -%}
     {%- if firstchar != "<" -%}
     <p
@@ -46,7 +53,10 @@
     {%- if firstchar != "<" -%}
     </p>
     {%- endif -%}
+
     {%- endif -%}
+
     {%- endfor -%}
+
   </div>
 </div>

_includes/content.html

@@ -1,25 +1,25 @@
-{% comment %}
+{%- comment -%}
 Script to modify main content of page:
 - wrap each level 1 or 2 heading and its succeeding content in sections
 - wrap each table in div to allow for scrolling
-{% endcomment %}
+{%- endcomment -%}
 
-{% assign content = include.content %}
+{%- assign content = include.content -%}
 
-{% capture newContent %}
+{%- capture newContent -%}
 <section>
 {%- assign content = content | split: "<section" | join: "</section><section" -%}
 {%- assign content = content | split: "<h1" | join: "</section><section><h1" -%}
 {%- assign content = content | split: "<h2" | join: "</section><section><h2" -%}
 {{- content -}}
 </section>
-{% endcapture %}
+{%- endcapture -%}
 
-{% assign newContent = newContent | replace: "<section></section>", "" %}
-{% assign newContent = newContent | replace: "<section>", "<section><div class='section'>" %}
-{% assign newContent = newContent | replace: "</section>", "</div></section>" %}
+{%- assign newContent = newContent | replace: "<section></section>", "" -%}
+{%- assign newContent = newContent | replace: "<section>", "<section><div class='section'>" -%}
+{%- assign newContent = newContent | replace: "</section>", "</div></section>" -%}
 
-{% assign newContent = newContent | replace: "<table>", "<div class='table_wrapper'><table>" %}
-{% assign newContent = newContent | replace: "</table>", "</table></div>" %}
+{%- assign newContent = newContent | replace: "<table>", "<div class='table_wrapper'><table>" -%}
+{%- assign newContent = newContent | replace: "</table>", "</table></div>" -%}
 
 {{ newContent }}

_includes/feature.html

@@ -6,9 +6,9 @@
     <img src="{{ include.image | relative_url }}" />
   </a>
   <div class="feature_text">
-    {% if include.heading %}
+    {%- if include.heading -%}
     <p class="feature_heading">{{ include.heading }}</p>
-    {% endif %}
+    {%- endif -%}
     {{ include.text | markdownify }}
   </div>
 </div>

_includes/figure.html

@@ -18,9 +18,9 @@
       "
     />
   </a>
-  {% if include.caption %}
+  {%- if include.caption -%}
   <figcaption class="figure_caption">
-    {{ include.caption | markdownify | remove: "<p>" | remove: "</p>" }}
+    {{- include.caption | markdownify | remove: "<p>" | remove: "</p>" -}}
   </figcaption>
-  {% endif %}
+  {%- endif -%}
 </figure>

_includes/footer.html

@@ -1,12 +1,12 @@
 <footer>
   <div class="footer_row">
-    {% include social-link.html type="contact" large=true %}
-    {% include social-link.html type="github" large=true %}
-    {% include social-link.html type="twitter" large=true %}
-    {% include social-link.html type="instagram" large=true %}
-    {% comment %}
-    {% include social-link.html type="rss" large=true %}
-    {% endcomment %}
+    {%- include social-link.html type="contact" large=true -%}
+    {%- include social-link.html type="github" large=true -%}
+    {%- include social-link.html type="twitter" large=true -%}
+    {%- include social-link.html type="instagram" large=true -%}
+    {%- comment -%}
+    {%- include social-link.html type="rss" large=true -%}
+    {%- endcomment -%}
   </div>
   <!-- &copy; <script>document.write(new Date().getFullYear())</script> {{ site.title }} -->
 </footer>

_includes/gallery.html

@@ -1,32 +1,37 @@
-{% assign max = 0 %}
-{% for i in (1..100) %}
+{%- assign max = 0 -%}
+
+{%- for i in (1..100) -%}
 {% assign image = "image" | append: i %}
 {% assign image = include[image] %}
 {% if image %}
 {% assign max = i %}
 {% endif %}
-{% endfor %}
+{%- endfor -%}
+
 <div
   class="gallery"
   data-fit="{{ include.fit | default: true }}"
   data-flat="{{ include.flat | default: false }}"
   data-number="{{ max }}"
 >
-  {% for i in (1..100) %}
-  {% assign image = "image" | append: i %}
-  {% assign image = include[image] %}
-  {% assign tooltip = "tooltip" | append: i %}
-  {% assign tooltip = include[tooltip] %}
-  {% assign link = "link" | append: i %}
-  {% assign link = include[link] %}
-  {% if image %}
+  {%- for i in (1..100) -%}
+
+  {%- assign image = "image" | append: i -%}
+  {%- assign image = include[image] -%}
+  {%- assign tooltip = "tooltip" | append: i -%}
+  {%- assign tooltip = include[tooltip] -%}
+  {%- assign link = "link" | append: i -%}
+  {%- assign link = include[link] -%}
+
+  {%- if image -%}
   <a
     {% if link %}href="{{ link | relative_url }}"{% endif %}
     class="gallery_item"
     data-tooltip="{{ tooltip }}"
   >
     <img src="{{ image | relative_url }}">
   </a>
-  {% endif %}
-  {% endfor %}
+  {%- endif -%}
+
+  {%- endfor -%}
 </div>

_includes/header.html

@@ -7,19 +7,21 @@
     data-delay="400"
   >
     <span class="logo">
-      {% include logo.svg %}
+      {%- include logo.svg -%}
       <!-- <img src="{{ "images/logo.png" | relative_url }}" /> -->
     </span>
     <span class="logo_text">{{ site.title }}</span>
   </a>
   <nav class="nav_row">
-    {% comment %}
+
+    {%- comment -%}
     Add or remove header nav links here.
 
     Be wary of different screen sizes. Test by resizing your browser window
     from full-width to very narrow. Adjust the $tablet and $phone cutoff points
     in /css/variables.scss until the header elements wrap at the right time.
-    {% endcomment %}
+    {%- endcomment -%}
+
     <a
       href="{{ 'research' | relative_url }}"
       class="nav_link"

_includes/meta.html

@@ -1,5 +1,6 @@
-{% capture title%} {{ site.title }}{% if page.title %} - {% endif %}{{
-page.title }} {% endcapture %}
+{% capture title%}
+{{ site.title }}{% if page.title %} - {% endif %}{{ page.title }}
+{% endcapture %}
 
 <!-- https://metatags.io/ -->
 <meta name="title" content="{{ title }}" />