Add distill post styles and template

Author: alshedivat

_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 @@ <h2>news</h2>
             {% 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 @@
     {% 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,16 +13,16 @@
 
     <!-- Content -->
 
-    <div class="container mt-5">
+    <div class="container mt-1">
       {{ content }}
     </div>
 
     <!-- Footer -->
 
     {% 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="container-fluid mt-5">
 
-    <div class="page-content">
+      <div class="post distill">
 
-      <d-title>
-        <h1>{{ page.title }}</h1>
-        <p>{{ page.description }}</p>
-      </d-title>
+        <d-title>
+          <h1>{{ page.title }}</h1>
+          <p>{{ page.description }}</p>
+        </d-title>
 
-      <d-byline></d-byline>
+        <d-byline></d-byline>
 
-      <d-article>
-        {{ content }}
-      </d-article>
+        <d-article>
+          {{ content }}
+        </d-article>
 
-      <d-appendix>
-        <d-footnote-list></d-footnote-list>
-        <d-citation-list></d-citation-list>
-      </d-appendix>
+        <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 %}