Update everything.

.gitignore

@@ -1,2 +1,3 @@
 _site
 _includes/pubs.html
+/test-deploy.sh

_config.yml

@@ -11,12 +11,22 @@ permalink: /blog/:year/:month/:day/:title.html
 
 # Sections on the "people" page.
 roles:
-    - {key: faculty, name: Faculty}
+  - key: faculty
-    - {key: staff, name: Staff}
+    name: Faculty
-    - {key: postdoc, name: Researchers}
+  - key: staff
-    - {key: grad, name: Graduate Students}
+    name: Staff
-    - {key: collab, name: Collaborators}
+  - key: postdoc
-    - {key: alum, name: Alumni}
+    name: Researchers
+  - key: grad
+    name: Graduate Students
+  - key: ugrad
+    name: Undergraduate Students
+  - key: ugrad-alum
+    name: Past Undergraduate Students
+  - key: collab
+    name: Collaborators
+  - key: alum
+    name: Alumni
 
 # Number of news stories on the front page.
 front_page_news: 8
@@ -24,15 +34,18 @@ front_page_news: 8
 # Base pathname for links.
 base: ''
 
+# make pages for the _projects folder
+collections:
+  projects:
+    output: true
+
 # Navigation bar links.
 navigation:
-    - title: Home
+  - title: Home
-      link: /
+    link: /
-    - title: People
+  - title: Research
-      link: /people.html
+    link: /research.html
-    - title: Research
+  - title: Publications
-      link: /research/
+    link: /publications.html
-    - title: Publications
+  - title: Code
-      link: /publications.html
+    link: /code.html
-    - title: Code
-      link: /code.html

_data/people.yml

@@ -1,16 +1,30 @@
+
+prof-a:
+    display_name: "Prof A"
+    role: faculty
+
+prof-b:
+    display_name: "Prof B"
+    role: faculty
+
+prof-c:
+    display_name: "Prof C"
+    role: faculty
+
 profx:
     display_name: "Professor X"
     webpage: "http://en.wikipedia.org/wiki/Professor_X"
     github: profx
     role: faculty
-    bio: |
+    image: /img/people/prof-x.png
-        Professor X is the leader and founder of X-Men. 
+    bio: Professor
-melody:
+
+scott:
     display_name: "Scott Summers"
     webpage: "http://en.wikipedia.org/wiki/Cyclops_(comics)"
     role: staff
-    bio: |
+    image: /img/people/scott.png
-        Scott, also known as Cyclops, shoots lasers from his eyes, which makes him the perfect administrative assistant.
+    bio: aka Cyclops
 
 wolverine:
     display_name: "Wolverine"
@@ -22,8 +36,126 @@ storm:
     display_name: "Storm"
     webpage: "http://en.wikipedia.org/wiki/Storm_%28Marvel_Comics%29"
     role: grad
+    image: /img/people/storm.png
+
+grad-a:
+    display_name: "Grad A"
+    role: grad
+
+grad-b:
+    display_name: "Graduate Student B With Long Name"
+    role: grad
+
+grad-c:
+    display_name: "Grad C"
+    role: grad
 
-jean:
+grad-d:
-    display_name: "Jean Grey"
+    display_name: "Grad D"
+    role: grad
+
+grad-e:
+    display_name: "Grad E"
+    role: grad
+
+grad-f:
+    display_name: "Grad F"
+    role: grad
+
+grad-g:
+    display_name: "Grad G"
+    role: grad
+
+grad-h:
+    display_name: "Grad H"
+    role: grad
+
+grad-i:
+    display_name: "Grad I"
+    role: grad
+
+alum-a:
+    display_name: "Alum A"
     role: alum
     bio: "Ph.D., 2013. Now at Microsoft Research."
+
+alum-b:
+    display_name: "Alum B With Way Longer Name"
+    role: alum
+
+alum-c:
+    display_name: "Alum C"
+    role: alum
+    webpage: "https://www.google.com"
+
+alum-d:
+    display_name: "Alum D"
+    role: alum
+
+alum-e:
+    display_name: "Alum E"
+    role: alum
+
+alum-f:
+    display_name: "Alum F"
+    role: alum
+
+alum-g:
+    display_name: "Alum G"
+    role: alum
+
+alum-h:
+    display_name: "Alum H"
+    role: alum
+
+alum-i:
+    display_name: "Alum I"
+    role: alum
+
+collab-a:
+    display_name: "Collaborator A"
+    role: collab
+
+collab-b:
+    display_name: "Collaborator B With Long Name"
+    role: collab
+
+collab-c:
+    display_name: "Collaborator C"
+    role: collab
+
+collab-d:
+    display_name: "Collaborator D"
+    role: collab
+
+collab-e:
+    display_name: "Collaborator E"
+    role: collab
+
+ugrad-a:
+    display_name: "Ugrad A"
+    role: ugrad
+
+ugrad-b:
+    display_name: "Ugrad Student B With Long Name"
+    role: ugrad
+
+ugrad-c:
+    display_name: "Ugrad C"
+    role: ugrad
+
+ugrad-d:
+    display_name: "Ugrad D"
+    role: ugrad
+
+ugrad-e:
+    display_name: "Ugrad E"
+    role: ugrad
+
+ugrad-alum-a:
+    display_name: "Past Ugrad A"
+    role: ugrad-alum
+
+ugrad-alum-b:
+    display_name: "Past Ugrad Student B With Long Name"
+    role: ugrad-alum

_includes/news-item.html

@@ -0,0 +1,23 @@
+
+{% assign item = include.item %}
+{% if item.icon %}
+{% assign icon = item.icon %}
+{% assign class = "shortnews" %}
+{% else %}
+{% assign icon = "newspaper-o" %}
+{% endif %}
+
+<li class="{{ class }}">
+    <span class="fa fa-fw fa-{{ icon }}"></span>
+    <span class="date">{{ post.date | date: '%B %d, %Y' }}</span>
+    <div>
+    {% if post.shortnews %}
+        {{ post.content | remove: '<p>' | remove: '</p>' }}
+    {% else %}
+        <h4> <a href="{{ site.base }}{{ post.url }}"> {{ post.title }}</a> </h4>
+        {{ post.excerpt | remove: '<p>' | remove: '</p>' }}
+        <br>
+        <a href="{{ site.base }}{{ post.url }}"> Read more &raquo;</a>
+        {% endif %}
+    </div>
+</li>

_includes/person-image.html

@@ -0,0 +1,38 @@
+
+{% assign person = include.person %}
+
+{% comment %}
+
+Usage: {% include person-image.html person=person %}
+
+Sizing of the SVG is done in a viewBox, and it's resized later in CSS.
+
+text-decoration hack is for Safari. We don't SVGs to be underlined.
+
+{% endcomment %}
+
+{% if person.image %}
+    {% capture image %}
+        <img class="rounded-circle profile" src="{{ site.base }}{{ person.image }}" />
+    {% endcapture %}
+{% else %}
+    {% capture image %}
+        <svg class="profile noprofile" viewBox="0 0 100 100">
+            <circle r="50" cx="50" cy="50" />
+            <text x="50" y="50"
+                  font-size="70"
+                  text-anchor="middle" dominant-baseline="central" >
+                {{ person.display_name | slice: 0 }}
+            </text>
+        </svg>
+    {% endcapture %}
+{% endif %}
+
+{% if person.webpage %}
+    <a href="{{ person.webpage | escape }}"
+       style="text-decoration: none">
+        {{ image }}
+    </a>
+{% else %}
+    {{ image }}
+{% endif %}

_includes/person.html

@@ -0,0 +1,49 @@
+
+{% assign person = include.person %}
+
+{% comment %}
+
+Usage:
+
+{% for item in site.data.people %}
+    {% assign person = item[1] %}
+    {% if person.role == role.key %}
+        {% include person.html person=person image=true %}
+    {% endif %}
+{% endfor %}
+
+Use the image parameter to include or not include an image.
+
+Note that pl-0 just removes the left padding from the name part that is put
+there by default by Bootstrap columns.
+
+{% endcomment %}
+
+{% if person.webpage %}
+    {% capture name %}
+        <a href="{{ person.webpage | escape }}"> {{ person.display_name }} </a>
+    {% endcapture %}
+{% else %}
+    {% assign name = person.display_name %}
+{% endif %}
+
+{% if include.image %}
+    <div class="person person-with-image row align-items-center">
+        <div class="col-auto">
+            {% include person-image.html person=person %}
+        </div>
+        <div class="col pl-0">
+            <h4> {{ name }} </h4>
+            {% if person.bio %}
+                <div class="bio">{{person.bio}}</div>
+            {% endif %}
+        </div>
+    </div>
+{% else %}
+    <div class="person person-without-image">
+        {{ name }}
+        {% if person.bio %}
+            <span class="bio">{{person.bio}}</span>
+        {% endif %}
+    </div>
+{% endif %}

_includes/project-card.html

@@ -0,0 +1,49 @@
+
+{% assign project = include.project %}
+
+{% capture card-content %}
+    <div class="card-body">
+        {% if project.image %}
+            {% assign imgurl = project.image %}
+            {% capture init %}{{ project.image | slice: 0,1 }}{% endcapture %}
+            {% if init == "/" %}
+                {% capture imgurl %}{{site.base}}{{project.image}}{% endcapture %}
+            {% endif %}
+            <img class="img-fluid mb-3" src="{{imgurl}}" alt="{{project.title}}"/>
+        {% endif %}
+        {% if project.notitle != true %}
+            <h3 class="card-title">{{project.title}}</h3>
+        {% endif %}
+        <div class="card-text">
+            {{ project.description | markdownify }}
+        </div>
+    </div>
+    {% if project.people %}
+        <div class="card-footer d-flex flex-row flex-wrap justify-content-center">
+            {% for uname in project.people %}
+                <div>
+                    {% assign person = site.data.people[uname]  %}
+                    {% include person-image.html person=person %}
+                </div>
+            {% endfor %}
+        </div>
+    {% endif %}
+{% endcapture %}
+
+{% if project.link %}
+    {% assign proj-url = project.link %}
+{% else %}
+    {% capture proj-url %}{{site.base}}{{project.url}}.html{% endcapture %}
+{% endif %}
+
+{% if proj-url %}
+    <div class="card link">
+        <a href="{{proj-url}}">
+            {{ card-content }}
+        </a>
+    </div>
+{% else %}
+    <div class="card">
+        {{ card-content }}
+    </div>
+{% endif %}

_includes/role-people.html

@@ -0,0 +1,16 @@
+
+{% assign role-key = include.role %}
+
+{% for role in site.roles %}
+    {% if role.key == role-key %}
+        <h3 class="pt-3"> {{ role.name }} </h3>
+        <div class="role {{ role.key }}">
+            {% for item in site.data.people %}
+                {% assign person = item[1] %}
+                {% if person.role == role.key %}
+                    {% include person.html person=person image=include.image %}
+                {% endif %}
+            {% endfor %}
+        </div>
+    {% endif %}
+{% endfor %}

_layouts/default.html

@@ -1,55 +1,80 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta charset="utf-8">
         <title>{{ site.name }}: {{ page.title }}</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta charset="utf-8">
-        <link href="{{ site.base }}/css/bootstrap.min.css" rel="stylesheet">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link href="{{ site.base }}/css/group.css" rel="stylesheet">
+        <link rel="stylesheet"
-        <link rel="alternate" type="application/atom+xml" title="Atom"
+              href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
-            href="{{ site.base }}/blog/blog.xml">
+              integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
+              crossorigin="anonymous">
+        <link rel="stylesheet"
+              href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="{{ site.base }}/css/group.css">
     </head>
     <body>
         <div class="container">
-          <div class="header">
+            <!-- This is a bit nasty, but it basically says be a column first, and on larger screens be a spaced out row -->
-            <ul class="nav nav-pills pull-right">
+            <div class="header d-flex
-              {% assign shorturl = page.url | replace:'index.html','' %}
+                        flex-column
-              {% for item in site.navigation %}
+                        flex-md-row justify-content-md-between">
-                <li {% if item.link == shorturl %}class="active"{% endif %}>
+                <a href="{{ site.base }}/" class="">
-                  <a href="{{ site.base }}{{ item.link }}">
+                    <img src="{{ site.base }}/img/logo.png"
-                    {{ item.title }}
+                         srcset="{{ site.base }}/img/logo@2x.png 2x"
-                  </a>
+                         alt="Awesome" id="logo">
-                </li>
+                </a>
-              {% endfor %}
+                <ul class="nav nav-pills justify-content-center">
-            </ul>
+
-            <a href="{{ site.base }}/">
+                    {% assign shorturl = page.url | replace:'.html','' | replace:'index','' %}
-                <img src="{{ site.base }}/img/logo.png"
+                    {% for item in site.navigation %}
-                    srcset="{{ site.base }}/img/logo@2x.png 2x"
+
-                    alt="Awesome" id="logo">
+                        {% assign itemshorturl = item.link | replace:'.html','' %}
-            </a>
+
-          </div>
+                        {% assign maybe-active = '' %}
-
+                        {% if item.title == 'Research' and page.layout == 'project' %}
-          {% comment %}Liquid is sort of terrible! I think "!= true" is the
+                            {% assign maybe-active = 'active' %}
-          only way to do negation?{% endcomment %}
+                        {% endif %}
-          {% if page.notitle != true %}
+                        {% if itemshorturl == shorturl or is-research %}
-          <h2>{{ page.title }}</h2>
+                            {% assign maybe-active = 'active' %}
-          {% endif %}
+                        {% endif %}
-
+
-          {{ content }}
+                        <li class="nav-item">
-
+                            <a class="nav-link {{ maybe-active }}"
-          <div class="footer">
+                               href="{{ site.base }}{{ item.link }}">
-            <p>
+                                {{ item.title }}
-              <a href="http://dept.example.edu/">Illustrious Department</a>
+                            </a>
-              at the
+                        </li>
-              <a href="http://example.edu/">University of
+
-                Example</a>
+                    {% endfor %}
-            </p>
+
-          </div>
+                </ul>
+            </div>
+
+            {% if page.image %}
+                <img src="{{ page.image }}"
+                     alt="{{ page.title }}"
+                     style="max-width: 400px"
+                     class="img-fluid mx-auto d-block mb-4"/>
+            {% endif %}
+
+            {% if page.notitle != true %}
+                <h1>{{ page.title }}</h1>
+            {% endif %}
+
+            {{ content }}
+
+            <div class="footer">
+                <p>
+                    <a href="http://dept.example.edu/">Illustrious Department</a>
+                    at the
+                    <a href="http://example.edu/">University of Example</a>
+                </p>
+            </div>
 
         </div> <!-- /container -->
 
         <!-- Support retina images. -->
         <script type="text/javascript"
-            src="{{ site.base }}/js/srcset-polyfill.js"></script>
+                src="{{ site.base }}/js/srcset-polyfill.js"></script>
     </body>
 </html>

_layouts/post.html

@@ -1,7 +1,7 @@
 ---
 layout: default
 ---
-<p class="meta">{{ page.date | date_to_string }}</p>
+<p class="date">{{ page.date | date: '%B %d, %Y' }}</p>
 
 <div class="post">
 {{ content }}

_layouts/project.html

@@ -0,0 +1,13 @@
+---
+layout: default
+---
+
+{{ content }}
+
+<h2> People </h2>
+<section class="people project-people">
+    {% for uname in page.people %}
+        {% assign person = site.data.people[uname] %}
+        {% include person.html person=person image=true%}
+    {% endfor %}
+</section>

_posts/2014-05-14-test.md

@@ -1,5 +1,7 @@
 ---
 layout: post
 shortnews: true
+icon: newspaper-o
 ---
+
 This is a short notice of something that happened recently. Just a news update blurb in no great detail.

_posts/2014-05-25-anothertest.md

@@ -1,7 +1,9 @@
 ---
 layout: post
 title: "A Full Blog Post"
+icon: star-o
 ---
+
 Unlike a short news post, a blog post has its own page and lots of text. Text text text.
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

_projects/a-project.md

@@ -0,0 +1,43 @@
+---
+title: A Project
+
+description: |
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit blandit
+  varius. Pellentesque habitant morbi tristique senectus et netus et malesuada
+  fames ac turpis egestas.
+
+people:
+  - storm
+  - profx
+  - grad-b
+  - scott
+  - wolverine
+
+layout: project
+---
+
+Proin massa augue, eleifend non ultricies eget, feugiat ut nisl. Fusce at
+aliquet justo, id elementum lacus. Praesent eleifend tempus molestie. Nunc
+vulputate sed tortor a ultrices. Nullam blandit hendrerit nisi, at suscipit
+augue ultricies quis. Nulla tincidunt rhoncus nisl sed consectetur. Phasellus
+dapibus, leo in varius tempus, nibh velit tincidunt lacus, ut porta eros ex et
+eros. Ut diam purus, sagittis vitae cursus eu, molestie eget turpis. Sed
+consectetur magna in posuere faucibus. Morbi nibh eros, blandit ut vehicula ac,
+pellentesque ut urna.
+
+Maecenas scelerisque ut enim non convallis. Mauris ut nisl vitae mi dictum
+mollis. Pellentesque iaculis lacinia nisl viverra laoreet. Integer ac lacus quis
+elit varius mollis et ultrices tortor. Aliquam id dolor cursus, sagittis arcu
+tincidunt, scelerisque nisi. Morbi scelerisque feugiat mi in faucibus. Maecenas
+suscipit aliquet est et efficitur. Nullam sed purus nec nulla placerat ultrices
+ac at ipsum. Mauris a imperdiet eros.
+
+Aenean malesuada tellus nulla, ut ultrices purus dictum et. Nunc non eleifend
+nulla, ut luctus nulla. Nulla et accumsan odio. Fusce libero nisl, rutrum ac
+risus sit amet, interdum feugiat eros. Morbi semper scelerisque magna vel
+malesuada. Curabitur in blandit orci. Cras eu tincidunt odio. Sed consectetur
+nunc purus, id pharetra felis fermentum vitae. Sed rhoncus lacus lacus. Aenean a
+ante et quam viverra pharetra interdum id ligula. Vestibulum lobortis ipsum ac
+risus sagittis, non dapibus metus finibus. Quisque efficitur felis sed felis
+luctus, non egestas ex dapibus. Sed pharetra gravida augue, id posuere nunc
+fringilla eget.

_projects/big-project.md

@@ -0,0 +1,51 @@
+---
+title: Big Project
+
+description: |
+  This project has a lot of people working on it!!
+  It also has some `Mark` _down_
+
+people:
+  - storm
+  - profx
+  - grad-a
+  - grad-b
+  - grad-c
+  - grad-d
+  - scott
+  - wolverine
+  - ugrad-a
+  - ugrad-b
+  - ugrad-c
+  - ugrad-d
+
+layout: project
+---
+
+## A Header
+
+Proin massa augue, eleifend non ultricies eget, feugiat ut nisl. Fusce at
+aliquet justo, id elementum lacus. Praesent eleifend tempus molestie. Nunc
+vulputate sed tortor a ultrices. Nullam blandit hendrerit nisi, at suscipit
+augue ultricies quis. Nulla tincidunt rhoncus nisl sed consectetur. Phasellus
+dapibus, `leo` in varius tempus, nibh velit tincidunt lacus, ut porta eros ex et
+eros. Ut diam purus, sagittis vitae cursus eu, molestie eget turpis. Sed
+consectetur magna in posuere faucibus. Morbi nibh eros, blandit ut vehicula ac,
+pellentesque ut urna.
+
+Maecenas _scelerisque ut enim non convallis_. Mauris ut nisl vitae mi dictum
+mollis. Pellentesque iaculis lacinia nisl viverra laoreet. Integer ac lacus quis
+elit varius mollis et ultrices tortor. Aliquam id dolor cursus, sagittis arcu
+tincidunt, scelerisque nisi. Morbi scelerisque feugiat mi in faucibus. Maecenas
+suscipit aliquet est et efficitur. Nullam sed purus nec nulla placerat ultrices
+ac at ipsum. Mauris a imperdiet eros.
+
+Aenean malesuada tellus nulla, ut ultrices purus dictum et. Nunc non eleifend
+nulla, ut luctus nulla. Nulla et accumsan odio. Fusce libero nisl, rutrum ac
+risus sit amet, interdum feugiat eros. Morbi semper scelerisque magna vel
+malesuada. Curabitur in blandit orci. Cras eu tincidunt odio. Sed consectetur
+nunc purus, id pharetra felis fermentum vitae. Sed rhoncus lacus lacus. Aenean a
+ante et quam viverra pharetra interdum id ligula. Vestibulum lobortis ipsum ac
+risus sagittis, non dapibus metus finibus. Quisque efficitur felis sed felis
+luctus, non egestas ex dapibus. Sed pharetra gravida augue, id posuere nunc
+fringilla eget.

_projects/logo-project.md

@@ -0,0 +1,27 @@
+---
+title: Logo Project
+
+notitle: true
+
+description: |
+  This project has a sweet logo!
+
+people:
+  - storm
+  - grad-b
+  - ugrad-c
+
+layout: project
+image: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Xmencomic-logo.svg/2000px-Xmencomic-logo.svg.png"
+---
+
+Some preliminary text.
+
+## header
+
+Maecenas _scelerisque ut enim non convallis_. Mauris ut nisl vitae mi dictum
+mollis. Pellentesque iaculis lacinia nisl viverra laoreet. Integer ac lacus quis
+elit varius mollis et ultrices tortor. Aliquam id dolor cursus, sagittis arcu
+tincidunt, scelerisque nisi. Morbi scelerisque feugiat mi in faucibus. Maecenas
+suscipit aliquet est et efficitur. Nullam sed purus nec nulla placerat ultrices
+ac at ipsum. Mauris a imperdiet eros.

_projects/longer-project.md

@@ -0,0 +1,43 @@
+---
+title: Project with a Longer Title
+
+description: |
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit blandit
+  varius. Pellentesque habitant morbi tristique senectus et netus et malesuada
+  fames ac turpis egestas.
+
+people:
+  - storm
+  - profx
+  - grad-b
+  - scott
+  - wolverine
+
+layout: project
+---
+
+Proin massa augue, eleifend non ultricies eget, feugiat ut nisl. Fusce at
+aliquet justo, id elementum lacus. Praesent eleifend tempus molestie. Nunc
+vulputate sed tortor a ultrices. Nullam blandit hendrerit nisi, at suscipit
+augue ultricies quis. Nulla tincidunt rhoncus nisl sed consectetur. Phasellus
+dapibus, leo in varius tempus, nibh velit tincidunt lacus, ut porta eros ex et
+eros. Ut diam purus, sagittis vitae cursus eu, molestie eget turpis. Sed
+consectetur magna in posuere faucibus. Morbi nibh eros, blandit ut vehicula ac,
+pellentesque ut urna.
+
+Maecenas scelerisque ut enim non convallis. Mauris ut nisl vitae mi dictum
+mollis. Pellentesque iaculis lacinia nisl viverra laoreet. Integer ac lacus quis
+elit varius mollis et ultrices tortor. Aliquam id dolor cursus, sagittis arcu
+tincidunt, scelerisque nisi. Morbi scelerisque feugiat mi in faucibus. Maecenas
+suscipit aliquet est et efficitur. Nullam sed purus nec nulla placerat ultrices
+ac at ipsum. Mauris a imperdiet eros.
+
+Aenean malesuada tellus nulla, ut ultrices purus dictum et. Nunc non eleifend
+nulla, ut luctus nulla. Nulla et accumsan odio. Fusce libero nisl, rutrum ac
+risus sit amet, interdum feugiat eros. Morbi semper scelerisque magna vel
+malesuada. Curabitur in blandit orci. Cras eu tincidunt odio. Sed consectetur
+nunc purus, id pharetra felis fermentum vitae. Sed rhoncus lacus lacus. Aenean a
+ante et quam viverra pharetra interdum id ligula. Vestibulum lobortis ipsum ac
+risus sagittis, non dapibus metus finibus. Quisque efficitur felis sed felis
+luctus, non egestas ex dapibus. Sed pharetra gravida augue, id posuere nunc
+fringilla eget.

_projects/short-inactive-project.md

@@ -0,0 +1,16 @@
+---
+title: Short Inactive Project
+status: inactive
+
+description: |
+  This project is quite brief: it only has a description and an external link.
+  It's inactive so it should only appear on the "Research" page.
+
+people:
+  - storm
+  - grad-e
+  - collab-a
+
+layout: project
+link: "https://en.wikipedia.org/wiki/X-Men"
+---

bib/bib-url-check.pl

@@ -1,40 +0,0 @@
-#!/usr/bin/perl
-#
-# Check a .bib file for unretrievable URLs.
-#
-# Usage:
-#   bib-url-check.pl sampa-pubs.bib
-#  -or-
-#   < sampa-pubs.bib bib-url-check.pl > urlreport.txt
-#
-
-
-use strict;
-use LWP::UserAgent;
-
-# http://daringfireball.net/2010/07/improved_regex_for_matching_urls
-my $urlrx = qr{(?i)\b((?:https?://|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))}o;
-
-my $ua = LWP::UserAgent->new(
-        ssl_opts => { verify_hostname => 0 },
-        );
-$ua->timeout(10);
-$ua->env_proxy;
-my $response;
-
-my %done = {};
-
-while (<>) {
-    if (m/$urlrx/g) {
-        next if $done{$1};
-
-        $response = $ua->get($1);
-        if ($response->is_success) {
-            print "OK (", $response->code, "): line $.: $1\n";
-        } else {
-            print "FAIL (", $response->code, "): line $.: $1\n";
-        }
-        $done{$1} = 1;
-        sleep 1;
-    }
-}

bib/pubs.bib

@@ -3,5 +3,6 @@
   title = 	 {Awesome Publication},
   booktitle =    {International Conference on Awesome Research},
   year = 	 2014,
-  month = 5
+  month = 5,
+  url = {https://www.asdfasdf.asdfasdf.asdfasdfads}
 }

blog.html

@@ -0,0 +1,10 @@
+---
+layout: default
+title: Blog
+---
+
+<ul class="news list-unstyled">
+{% for post in site.posts %}
+    {% include news-item.html item=post %}
+{% endfor %}
+</ul>

blog/blog.xml

@@ -1,30 +0,0 @@
----
-layout: nil
----
-<?xml version="1.0" encoding="utf-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-	
-	<title type="text" xml:lang="en">{{ site.name }}</title>
-    <link type="application/atom+xml" href="{{ site.url }}{{ site.base }}/blog/blog.xml" rel="self"/>
-    <link href="{{ site.url }}{{ site.base }}/"/>
-	<updated>{{ site.time | date_to_xmlschema }}</updated>
-    <id>{{ site.url }}{{ site.base }}/</id>
-	<author>
-		<name>the Sampa group</name>
-	</author>
-	
-	{% for post in site.posts limit:20 %}
-	<entry>
-        {% if post.shortnews %}
-            <title>{{ post.date | date_to_long_string }}</title>
-            <link href="{{ site.url }}{{ site.base }}/blog/"/>
-        {% else %}
-            <title>{{ post.title }}</title>
-            <link href="{{ site.url }}{{ site.base }}{{ post.url }}"/>
-        {% endif %}
-		<updated>{{ post.date | date_to_xmlschema }}</updated>
-        <id>{{ site.url }}{{ site.base }}{{ post.url }}</id>
-		<content type="html">{{ post.content | xml_escape }}</content>
-	</entry>
-	{% endfor %}
-</feed>

blog/index.html

@@ -1,21 +0,0 @@
----
-layout: default
-title: News and Blog
----
-<ul class="news list-unstyled">
-{% for post in site.posts %}
-    {% if post.shortnews %}
-        <li class="shortnews">
-            <span class="date">{{ post.date | date_to_long_string }}</span>
-            {{ post.content }}
-        </li>
-    {% else %}
-        <li class="bloglink">
-            <span class="date">{{ post.date | date_to_long_string }}</span>
-            <a href="{{ post.url }}">&raquo; {{ post.title }}</a>
-        </li>
-    {% endif %}
-{% endfor %}
-</ul>
-
-<p><a href="{{ site.base }}/oldnews.html">See archived news posts.</a></p>

css/group.css

@@ -1,126 +0,0 @@
-/* Space out content a bit */
-body {
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-/* Everything but the jumbotron gets side spacing for mobile first views */
-.header,
-.footer {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-/* Custom page header */
-.header {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-/* Custom page footer */
-.footer {
-  padding-top: 19px;
-  color: #777;
-  border-top: 1px solid #e5e5e5;
-  text-align: center;
-  font-size: 0.8em;
-}
-.footer p {
-  margin: 0.1em 0;
-}
-.footer a:link, .footer a:visited {
-  color: #777;
-}
-
-/* Customize container */
-@media (min-width: 768px) {
-  .container {
-    max-width: 730px;
-  }
-}
-.container-narrow > hr {
-  margin: 30px 0;
-}
-
-/* Jumbotron */
-.jumbotron {
-  text-align: center;
-  border-bottom: 1px solid #e5e5e5;
-}
-.jumbotron p {
-    font-size: 15px;
-}
-.jumbotron {
-    padding-top: 18px;
-    padding-bottom: 10px;
-}
-
-/* Group logo */
-#logo {
-    width: 154px;
-    height: 35px;
-    margin: 2px 0 8px 0;
-}
-
-/* Responsive: Portrait tablets and up */
-@media screen and (min-width: 768px) {
-  /* Remove the padding we set earlier */
-  .header,
-  .footer {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  /* Space out the masthead */
-  .header {
-    margin-bottom: 30px;
-  }
-  /* Remove the bottom border on the jumbotron for visual effect */
-  .jumbotron {
-    border-bottom: 0;
-  }
-}
-
-/* Slightly better-looking header on mobile. */
-@media screen and (max-width: 767px) {
-    .nav-pills {
-        display: block;
-        margin: 0 auto 1em;
-    }
-    #logo {
-        display: block;
-        clear: both;
-        margin: 1em auto;
-    }
-}
-
-/* Photo */
-.inset-image {
-    width: 60%;
-    margin: 0 auto;
-}
-
-/* People list */
-dl.people dd {
-    margin-bottom: 1em;
-}
-
-/* Front page news. */
-ul.news .date {
-    color: #999;
-    font-weight: bold;
-    display: block;
-}
-ul.news > li {
-    margin-top: 1em;
-}
-ul.news .shortnews .date {
-    float: left;
-    margin-right: 1em;
-}
-ul.news .bloglink a {
-    font-size: 1.4em;
-}
-
-.illustration {
-    float: right;
-    margin: 0 0 1em 1em;
-}

css/group.scss

@@ -0,0 +1,151 @@
+---
+---
+
+$gray: #999;
+$light-gray: #EEE;
+
+/* Space out content a bit */
+body {
+    padding-top: 20px;
+}
+
+.header {
+    border-bottom: 1px solid $light-gray;
+    padding-bottom: 10px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.footer {
+    /* padding-top: 19px; */
+    color: $gray;
+    border-top: 1px solid $light-gray;
+    text-align: center;
+    font-size: 0.8em;
+
+    a:link, a:visited {
+        color: $gray;
+    }
+}
+
+.fa {
+    color: $gray;
+}
+a > .fa {
+    // make sure that font-awesome icons are underlined in links
+    display: inline;
+}
+
+/* /\* Customize container *\/ */
+/* @media (min-width: 768px) { */
+/*     .container { */
+/*         max-width: 730px; */
+/*     } */
+/* } */
+
+/* Jumbotron */
+.jumbotron {
+    text-align: center;
+    padding-top: 1.5em;
+    padding-bottom: 0.5em;
+    font-size: 125%
+}
+
+/* Group logo */
+#logo {
+    width: 154px;
+    height: 35px;
+    margin: 2px 0 8px 0;
+}
+
+/* Front page news. */
+ul.news {
+
+    .date {
+        color: $gray;
+        font-weight: bold;
+    }
+
+    > li {
+        margin-top: 1em;
+    }
+}
+
+@media (min-width: 576px) {
+    .project-people { column-count: 2 }
+    .card-columns   { column-count: 2 }
+}
+
+@media (min-width: 768px) {
+    .role.grad      { column-count: 2 }
+    .project-people { column-count: 3 }
+    .card-columns   { column-count: 3 }
+}
+
+.title img {
+    max-width: 50%;
+}
+
+section {
+    margin-bottom: 2em;
+}
+
+.profile {
+    object-fit: cover; // makes sure it's cropped
+}
+
+.noprofile {
+    circle {
+        fill: $light-gray;
+    }
+    text {
+        font-weight: 700;
+        fill: white;
+    }
+}
+
+.card {
+
+    &.link:hover { border-color: $gray }
+
+    > a {
+        color: inherit;
+        &:hover { text-decoration: none }
+    }
+
+
+    .profile {
+        height: 40px;
+        width: 40px;
+        margin: 3px;
+    }
+
+    .card-footer { padding: 0.5em }
+}
+
+.person {
+
+    margin-bottom: 10px;
+
+    .profile {
+        height: 70px;
+        width: 70px;
+    }
+
+    .bio {
+        color: $gray;
+    }
+}
+
+.person-without-image {
+    margin: 0;
+
+    .bio {
+        margin-left: 1em;
+    }
+}
+
+svg {
+    // make the alignment just like img from bootstrap's reboot.scss
+    vertical-align: middle;
+}

index.html

@@ -2,31 +2,69 @@
 layout: default
 title: Home
 notitle: true
+
+# groups of columns of {roles: list, width: num, image: bool}
+role-tables:
+- - roles: [faculty, postdoc, staff]
+    width: 4
+    image: true
+  - roles: [grad]
+    width: 8
+    image: true
+- - roles: [collab, ugrad, ugrad-alum]
+    width: 5
+    image: false
+  - roles: [alum]
+    width: 7
+    image: false
+
 ---
+
 <div class="jumbotron">
-  <p>
+    <p>
-    The <b>Awesome Research Group</b> at <b>Example U</b> does all sorts of
+        The <b>Awesome Research Group</b> at <b>Example U</b> does all sorts of
-    research. Here is a place where we tell you exactly what that is!
+        research. Here is a place where we tell you exactly what that is!
-  </p>
+    </p>
 </div>
 
-<h2>News</h2>
+<section>
-<ul class="news list-unstyled">
+    <h2>News</h2>
-{% for post in site.posts limit: site.front_page_news %}
+    <ul class="news list-unstyled">
-    {% if post.shortnews %}
+        {% for post in site.posts limit: site.front_page_news %}
-        <li class="shortnews">
+            {% include news-item.html item=post %}
-            <span class="date">{{ post.date | date_to_long_string }}</span>
+        {% endfor %}
-            {{ post.content }}
+    </ul>
-        </li>
+    {% assign numposts = site.posts | size %}
-    {% else %}
+    {% if numposts >= 1 %}
-        <li class="bloglink">
+        <p>
-            <span class="date">{{ post.date | date_to_long_string }}</span>
+            <span class="fa fa-fw fa-history"></span>
-            <a href="{{ post.url }}">&raquo; {{ post.title }}</a>
+            <a href="{{ site.base }}/blog.html">Older posts&hellip;</a>
-        </li>
+        </p>
     {% endif %}
-{% endfor %}
+</section>
-</ul>
+
-{% assign numposts = site.posts | size %}
+<section>
-{% if numposts >= site.front_page_news %}
+    <h2>Research</h2>
-<p><a href="{{ site.base }}/blog/">Older posts&hellip;</a></p>
+    <div class="card-columns">
-{% endif %}
+        {% for p in site.projects %}
+            {% if p.status != "inactive" %}
+                {% include project-card.html project=p %}
+            {% endif %}
+        {% endfor %}
+    </div>
+</section>
+
+<div id="people">
+    <h2>People</h2>
+    {% for role-table in page.role-tables %}
+        <section class="people row justify-content-between">
+            {% for role-column in role-table %}
+                <div class="col-md-{{ role-column.width }}">
+                    {% for role in role-column.roles %}
+                        {% include role-people.html role=role image=role-column.image %}
+                    {% endfor %}
+                </div>
+            {% endfor %}
+        </section>
+    {% endfor %}
+</div>

people.html

@@ -1,29 +1,32 @@
 ---
 layout: default
 title: People
+
+picture-role-groups:
+- {roles: [faculty, postdoc, staff], width: 4}
+- {roles: [grad], width: 8}
+
+no-picture-role-groups:
+- {roles: [collab, ugrad, ugrad-alum], width: 5}
+- {roles: [alum], width: 7}
 ---
 
-{% for role in site.roles %}
+<section class="people row justify-content-between">
-  <h3>{{ role.name }}</h3>
+    {% for role-group in page.picture-role-groups %}
-  <dl class="people">
+        <div class="col-md-{{ role-group.width }}">
-  {% for item in site.data.people %}
+            {% for role in role-group.roles %}
-    {% assign person = item[1] %}
+                {% include role-people.html role=role image=true %}
-    {% if person.role == role.key %}
+            {% endfor %}
-      <dt class="person">
+        </div>
-        {% if person.webpage %}
+    {% endfor %}
-        <a href="{{ person.webpage |escape }}">
+</section>
-        {% endif %}
+
-          {{ person.display_name }}
+<section class="people row justify-content-between">
-        {% if person.webpage %}
+    {% for role-group in page.no-picture-role-groups %}
-        </a>
+        <div class="col-md-{{ role-group.width }}">
-        {% endif %}
+            {% for role in role-group.roles %}
-      </dt>
+                {% include role-people.html role=role image=false %}
-      <dd>
+            {% endfor %}
-        {% if person.bio %}
+        </div>
-          {{ person.bio | markdownify }}
+    {% endfor %}
-        {% endif %}
+</section>
-      </dd>
-    {% endif %}
-  {% endfor %}
-  </dl>
-{% endfor %}

research.html

@@ -0,0 +1,10 @@
+---
+layout: default
+title: Research Projects
+---
+
+<div class="card-columns">
+    {% for p in site.projects %}
+        {% include project-card.html project=p %}
+    {% endfor %}
+</div>

research/index.md

@@ -1,15 +0,0 @@
----
-layout: default
-title: Research Projects
-projects:
-  - link: project/
-    name: An Exciting project
-    summary: This will never work.
----
-
-Our research is awesome.
-
-### An Exciting project
-Read about it [here][project].
-
-[project]: project/index.html

research/project/index.md

@@ -1,5 +0,0 @@
----
-layout: default
-title: An Exciting Project
----
-We've done some great work on this project!