Add distill post styles and template

_config.yml

@@ -51,6 +51,8 @@ pagination:
   collection: 'posts'
   permalink: /page/:num/
   per_page: 3
+  sort_field: 'date'
+  sort_reverse: true
   trail:
     before: 1 # The number of links before the current page
     after: 3  # The number of links after the current page

_includes/head.html

@@ -15,7 +15,7 @@
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:100,300,400,500,700|Material+Icons">
 
 <!-- Styles -->
-<link rel="shortcut icon" href="{{ '/assets/img/favicon.ico' | prepend: site.baseurl | prepend: site.url }}">
-<link rel="stylesheet" href="{{ '/assets/css/main.css' | prepend: site.baseurl | prepend: site.url }}">
+<link rel="shortcut icon" href="{{ '/assets/img/favicon.ico'  | relative_url }}">
+<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 
-<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+<link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">

_includes/header.html

@@ -23,7 +23,7 @@
         <ul class="navbar-nav ml-auto flex-nowrap">
           <!-- About -->
           <li class="nav-item {% if page.title == 'about' %}active{% endif %}">
-            <a class="nav-link" href="{{ '/' | prepend: site.baseurl | prepend: site.url }}">
+            <a class="nav-link" href="{{ '/' | relative_url }}">
               about
               {% if page.title == "about" %}
                 <span class="sr-only">(current)</span>
@@ -32,7 +32,7 @@
           </li>
           <!-- Blog -->
           <li class="nav-item {% if page.url contains 'blog' %}active{% endif %}">
-            <a class="nav-link" href="{{ '/blog/' | prepend: site.baseurl | prepend: site.url }}">
+            <a class="nav-link" href="{{ '/blog/' | relative_url }}">
               blog
               {% if page.title == "blog" %}
               <span class="sr-only">(current)</span>
@@ -43,7 +43,7 @@
           {% for p in site.pages %}
           {% if p.nav %}
           <li class="nav-item {% if page.title == p.title %}active{% endif %}">
-              <a class="nav-link" href="{{ p.url | prepend: site.baseurl | prepend: site.url }}">
+              <a class="nav-link" href="{{ p.url | relative_url }}">
                 {{ p.title }}
                 {% if page.title == p.title %}
                 <span class="sr-only">(current)</span>

_includes/hemline.html

@@ -5,7 +5,7 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/{{ site.mdb_version }}/js/mdb.min.js"></script>
 
 <!-- Load Common JS -->
-<script src="{{ '/assets/js/common.js' | prepend: site.baseurl | prepend: site.url }}"></script>
+<script src="{{ '/assets/js/common.js' | relative_url }}"></script>
 
 <!-- Code Syntax Highlighting -->
 <link rel="stylesheet" href="https://gitcdn.link/repo/jwarby/jekyll-pygments-themes/master/{{ site.highlight_theme }}.css" />
@@ -14,7 +14,7 @@
 <!-- Load KaTeX -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.css" integrity="sha256-V8SV2MO1FUb63Bwht5Wx9x6PVHNa02gv8BgH/uH3ung=" crossorigin="anonymous" />
 <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.js" integrity="sha256-F/Xda58SPdcUCr+xhSGz9MA2zQBPb0ASEYKohl8UCHc=" crossorigin="anonymous"></script>
-<script src="{{ '/assets/js/katex.js' | prepend: site.baseurl | prepend: site.url }}"></script>
+<script src="{{ '/assets/js/katex.js' | relative_url }}"></script>
 {% endif %}
 
 {% if site.enable_mansory %}
@@ -24,7 +24,7 @@
 
 {% if site.enable_progressbar %}
 <!-- Load Progress Bar -->
-<script src="{{ '/assets/js/progressbar.js' | prepend: site.baseurl | prepend: site.url }}"></script>
+<script src="{{ '/assets/js/progressbar.js' | relative_url }}"></script>
 {% endif %}
 
 {% if site.enable_tooltips %}

_includes/news.html

@@ -11,7 +11,7 @@
             {% if item.inline %}
               {{ item.content | remove: '<p>' | remove: '</p>' | emojify }}
             {% else %}
-              <a class="news-title" href="{{ item.url | prepend: site.baseurl }}">{{ item.title }}</a>
+              <a class="news-title" href="{{ item.url | relative_url }}">{{ item.title }}</a>
             {% endif %}
           </td>
         </tr>

_includes/pagination.html

@@ -2,15 +2,15 @@
 <nav aria-label="Blog page naviation">
   <ul class="pagination pagination-lg justify-content-center">
     <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
-      <a class="page-link" href="{{ paginator.previous_page_path | prepend: site.baseurl }}" tabindex="-1" aria-disabled="{{ paginator.previous_page }}">Newer</a>
+      <a class="page-link" href="{{ paginator.previous_page_path | relative_url }}" tabindex="-1" aria-disabled="{{ paginator.previous_page }}">Newer</a>
     </li>
     {% if paginator.page_trail %}
       {% for trail in paginator.page_trail %}
-        <li class="page-item {% if page.url == trail.path %}active{% endif %}"><a class="page-link" href="{{ trail.path | prepend: site.baseurl }}" title="{{trail.title}}">{{ trail.num }}</a></li>
+        <li class="page-item {% if page.url == trail.path %}active{% endif %}"><a class="page-link" href="{{ trail.path | relative_url }}" title="{{trail.title}}">{{ trail.num }}</a></li>
       {% endfor %}
     {% endif %}
     <li class="page-item {% unless paginator.next_page %}disabled{% endunless %}">
-      <a class="page-link" href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
+      <a class="page-link" href="{{ paginator.next_page_path | relative_url }}">Older</a>
     </li>
   </ul>
 </nav>

_layouts/about.html

@@ -9,7 +9,7 @@ layout: page
     {% if page.profile %}
     <div class="profile col-4 {% if page.profile.align == 'left' %}order-first{% endif %}">
       {% if page.profile.image %}
-        <img class="img-fluid z-depth-1 rounded" src="{{ page.profile.image | prepend: '/assets/img/' | prepend: site.baseurl | prepend: site.url }}">
+        <img class="img-fluid z-depth-1 rounded" src="{{ page.profile.image | prepend: '/assets/img/' | relative_url }}">
       {% endif %}
       {% if page.profile.address %}
         <div class="address">

_layouts/bib.html

@@ -28,7 +28,7 @@
               <em>{{author.last}}, {{author.first}}</em>,
             {% else %}
               {% if site.data.coauthors[author.last] %}
-                <a href="{{site.data.coauthors[author.last].url}}" target="_blank">{{author.last}}, {{author.first}}</a>, 
+                <a href="{{site.data.coauthors[author.last].url}}" target="_blank">{{author.last}}, {{author.first}}</a>,
               {% else %}
                 {{author.last}}, {{author.first}},
               {% endif %}
@@ -38,7 +38,7 @@
               and <em>{{author.last}}, {{author.first}}</em>
             {% else %}
               {% if site.data.coauthors[author.last] %}
-                and <a href="{{site.data.coauthors[author.last].url}}" target="_blank">{{author.last}}, {{author.first}}</a> 
+                and <a href="{{site.data.coauthors[author.last].url}}" target="_blank">{{author.last}}, {{author.first}}</a>
               {% else %}
                 and {{author.last}}, {{author.first}}
               {% endif %}
@@ -71,16 +71,16 @@
     [<a href="{{ entry.html }}" target="_blank">HTML</a>]
   {% endif %}
   {% if entry.pdf %}
-    [<a href="{{ entry.pdf | prepend: '/assets/pdf/' | prepend: site.baseurl | prepend: site.url }}" target="_blank">PDF</a>]
+    [<a href="{{ entry.pdf | prepend: '/assets/pdf/' | relative_url }}" target="_blank">PDF</a>]
   {% endif %}
   {% if entry.supp %}
-    [<a href="{{ entry.supp | prepend: '/assets/pdf/' | prepend: site.baseurl | prepend: site.url }}" target="_blank">Supp</a>]
+    [<a href="{{ entry.supp | prepend: '/assets/pdf/' | relative_url }}" target="_blank">Supp</a>]
   {% endif %}
   {% if entry.poster %}
-    [<a href="{{ entry.poster | prepend: '/assets/pdf/' | prepend: site.baseurl | prepend: site.url }}" target="_blank">Poster</a>]
+    [<a href="{{ entry.poster | prepend: '/assets/pdf/' | relative_url }}" target="_blank">Poster</a>]
   {% endif %}
   {% if entry.slides %}
-    [<a href="{{ entry.slides | prepend: '/assets/pdf/' | prepend: site.baseurl | prepend: site.url }}" target="_blank">Slides</a>]
+    [<a href="{{ entry.slides | prepend: '/assets/pdf/' | relative_url }}" target="_blank">Slides</a>]
   {% endif %}
   {% if entry.code %}
     [<a href="{{ entry.code }}" target="_blank">Code</a>]

_layouts/default.html

@@ -13,7 +13,7 @@
 
     <!-- Content -->
 
-    <div class="container mt-5">
+    <div class="container mt-1">
       {{ content }}
     </div>
 
@@ -21,8 +21,8 @@
 
     {% include footer.html %}
 
-    {% include hemline.html %}
-
   </body>
 
+  {% include hemline.html %}
+
 </html>

_layouts/distill.html

@@ -2,7 +2,13 @@
 <html>
   <head>
     {% include head.html %}
-    <script src="{{ '/assets/js/distill.js' | prepend: site.baseurl | prepend: site.url }}"></script>
+    <script src="{{ '/assets/js/distillpub/template.v2.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/distillpub/transforms.v2.js' | relative_url }}"></script>
+    {% if page._styles %}
+    <style type="text/css">
+      {{ page._styles }}
+    </style>
+    {% endif %}
   </head>
 
   <d-front-matter>
@@ -14,15 +20,13 @@
         {% for author in page.authors %}
         {
           "author": "{{ author.name }}",
-          "authorURL": "{{ author.url }}"
-        }{% if forloop.last == false %},{% endif %}
-        {% endfor %}
-      ],
-      "editors": [
-        {% for editor in page.editors %}
-        {
-          "editor": "{{ editor.name }}",
-          "editorURL": "{{ editor.url }}"
+          "authorURL": "{{ author.url }}",
+          "affiliations": [
+            {
+              "name": "{{ author.affiliations.name }}",
+              "url": "{{ author.affiliations.url }}"
+            }
+          ]
         }{% if forloop.last == false %},{% endif %}
         {% endfor %}
       ],
@@ -43,38 +47,47 @@
     }</script>
   </d-front-matter>
 
-  <body>
+  <body class="{% if site.navbar_fixed %}fixed-top-nav{% endif %} {% unless site.footer_fixed %}sticky-bottom-footer{% endunless %}">
+
+    <!-- Header -->
 
     {% include header.html %}
 
+    <!-- Content -->
 
-    <div class="page-content">
+    <div class="container-fluid mt-5">
 
-      <d-title>
-        <h1>{{ page.title }}</h1>
-        <p>{{ page.description }}</p>
-      </d-title>
+      <div class="post distill">
 
-      <d-byline></d-byline>
+        <d-title>
+          <h1>{{ page.title }}</h1>
+          <p>{{ page.description }}</p>
+        </d-title>
 
-      <d-article>
-        {{ content }}
-      </d-article>
+        <d-byline></d-byline>
 
-      <d-appendix>
-        <d-footnote-list></d-footnote-list>
-        <d-citation-list></d-citation-list>
-      </d-appendix>
+        <d-article>
+          {{ content }}
+        </d-article>
+
+        <d-appendix>
+          <d-footnote-list></d-footnote-list>
+          <d-citation-list></d-citation-list>
+        </d-appendix>
+
+      </div>
 
     </div>
 
+    <!-- Footer -->
+
     {% include footer.html %}
 
   </body>
 
   {% include hemline.html %}
 
-  <d-bibliography src="{{ page.bibliography | prepend: '/assets/distill/' | prepend: site.baseurl | prepend: site.url }}">
+  <d-bibliography src="{{ page.bibliography | prepend: '/assets/bibliography/' | relative_url }}">
   </d-bibliography>
 
 </html>

_layouts/post.html

@@ -1,6 +1,13 @@
 ---
 layout: default
 ---
+
+{% if page._styles %}
+<style type="text/css">
+  {{ page._styles }}
+</style>
+{% endif %}
+
 <div class="post">
 
   <header class="post-header">

_pages/projects.md

@@ -13,7 +13,7 @@ nav: true
     <div class="thumbnail">
         <a href="{{ project.redirect }}" target="_blank">
         {% if project.img %}
-        <img class="thumbnail" src="{{ project.img | prepend: site.baseurl | prepend: site.url }}"/>
+        <img class="thumbnail" src="{{ project.img | relative_url }}"/>
         {% else %}
         <div class="thumbnail blankbox"></div>
         {% endif %}    
@@ -29,9 +29,9 @@ nav: true
 
 <div class="project ">
     <div class="thumbnail">
-        <a href="{{ project.url | prepend: site.baseurl | prepend: site.url }}">
+        <a href="{{ project.url | relative_url }}">
         {% if project.img %}
-        <img class="thumbnail" src="{{ project.img | prepend: site.baseurl | prepend: site.url }}"/>
+        <img class="thumbnail" src="{{ project.img | relative_url }}"/>
         {% else %}
         <div class="thumbnail blankbox"></div>
         {% endif %}    

_posts/2018-12-22-distill.md

@@ -0,0 +1,139 @@
+---
+layout: distill
+title: a distill-style blog post
+description: an example of a distill-style blog post and main elements
+date: 2018-12-22
+
+authors:
+  - name: Albert Einstein
+    url: "https://en.wikipedia.org/wiki/Albert_Einstein"
+    affiliations:
+      name: IAS, Princeton
+  - name: Boris Podolsky
+    url: "https://en.wikipedia.org/wiki/Boris_Podolsky"
+    affiliations:
+      name: IAS, Princeton
+  - name: Nathan Rosen
+    url: "https://en.wikipedia.org/wiki/Nathan_Rosen"
+    affiliations:
+      name: IAS, Princeton
+
+bibliography: 2018-12-22-distill.bib
+
+# Below is an example of injecting additional post-specific styles.
+# If you use this post as a template, delete this _styles block.
+_styles: >
+  .fake-img {
+    background: #bbb;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 12px;
+  }
+  .fake-img p {
+    font-family: monospace;
+    color: white;
+    text-align: left;
+    margin: 12px 0;
+    text-align: center;
+    font-size: 16px;
+  }
+
+---
+
+## Equations
+
+This theme supports rendering beautiful math in inline and display modes using [KaTeX](https://khan.github.io/KaTeX/) engine.
+You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`.
+If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$.
+
+To use display mode, again surround your expression with `$$` and place it as a separate paragraph.
+Here is an example:
+
+$$
+\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
+$$
+
+Note that [KaTeX](https://khan.github.io/KaTeX/) is work in progress, so it does not support the full range of math expressions as, say, [MathJax](https://www.mathjax.org/).
+Yet, it is [blazing fast](http://www.intmath.com/cg5/katex-mathjax-comparison.php).
+
+***
+
+## Citations
+
+Citations are then used in the article body with the `<d-cite>` tag.
+The key attribute is a reference to the id provided in the bibliography.
+The key attribute can take multiple ids, separated by commas.
+
+The citation is presented inline like this: <d-cite key="gregor2015draw"></d-cite> (a number that displays more information on hover).
+If you have an appendix, a bibliography is automatically created and populated in it.
+
+Distill chose a numerical inline citation style to improve readability of citation dense articles and because many of the benefits of longer citations are obviated by displaying more information on hover.
+However, we consider it good style to mention author last names if you discuss something at length and it fits into the flow well — the authors are human and it’s nice for them to have the community associate them with their work.
+
+***
+
+## Footnotes
+
+Just wrap the text you would like to show up in a footnote in a `<d-footnote>` tag.
+The number of the footnote will be automatically generated.<d-footnote>This will become a hoverable footnote.</d-footnote>
+
+***
+
+## Code Blocks
+
+Syntax highlighting is provided within `<d-code>` tags.
+An example of inline code snippets: `<d-code language="html">let x = 10;</d-code>`.
+For larger blocks of code, add a `block` attribute:
+
+<d-code block language="javascript">
+  var x = 25;
+  function(x) {
+    return x * x;
+  }
+</d-code>
+
+***
+
+## Layouts
+
+The main text column is referred to as the body.
+It is the assumed layout of any direct descendants of the `d-article` element.
+
+<div class="fake-img l-body">
+  <p>.l-body</p>
+</div>
+
+For images you want to display a little larger, try `.l-page`:
+
+<div class="fake-img l-page">
+  <p>.l-page</p>
+</div>
+
+All of these have an outset variant if you want to poke out from the body text a little bit.
+For instance:
+
+<div class="fake-img l-body-outset">
+  <p>.l-body-outset</p>
+</div>
+
+<div class="fake-img l-page-outset">
+  <p>.l-page-outset</p>
+</div>
+
+Occasionally you’ll want to use the full browser width.
+For this, use `.l-screen`.
+You can also inset the element a little from the edge of the browser by using the inset variant.
+
+<div class="fake-img l-screen">
+  <p>.l-screen</p>
+</div>
+<div class="fake-img l-screen-inset">
+  <p>.l-screen-inset</p>
+</div>
+
+The final layout is for marginalia, asides, and footnotes.
+It does not interrupt the normal flow of `.l-body` sized text except on mobile screen sizes.
+
+<div class="fake-img l-gutter">
+  <p>.l-gutter</p>
+</div>

_sass/_base.scss

@@ -204,3 +204,13 @@ footer.sticky-bottom {
     background-color: $theme-color;
   }
 }
+
+
+// Distill
+
+.distill {
+  a:hover {
+    border-bottom-color: $theme-color;
+    text-decoration: none;
+  }
+}

assets/bibliography/2018-12-22-distill.bib

@@ -0,0 +1,7 @@
+@article{gregor2015draw,
+  title={DRAW: A recurrent neural network for image generation},
+  author={Gregor, Karol and Danihelka, Ivo and Graves, Alex and Rezende, Danilo Jimenez and Wierstra, Daan},
+  journal={arXivreprint arXiv:1502.04623},
+  year={2015},
+  url={https://arxiv.org/pdf/1502.04623.pdf}
+}