Merge pull request #171 from wanchichen/blog

Blog v1: speech foundation models

_includes/figure.html

@@ -0,0 +1,35 @@
+{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" -%}
+
+<figure>
+
+  <picture>
+    {% if site.imagemagick.enabled %}
+    {% for i in site.imagemagick.widths -%}
+      <source
+        class="responsive-img-srcset"
+        media="(max-width: {{ i }}px)"
+        srcset="{{ img_path | relative_url }}-{{ i }}.webp"
+      />
+    {% endfor -%}
+    {% endif %}
+
+    <!-- Fallback to the original file -->
+    <img
+      src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
+      {% if include.class %}class="{{ include.class }}"{% endif %}
+      {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %}
+      {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}
+      {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %}
+      {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %}
+      {% if include.max-width %}max-width="{{ include.max-width }}"{% endif %}
+      {% if include.max-height %}max-height="{{ include.max-height }}"{% endif %}
+      {% if include.alt %}alt="{{ include.alt }}"{% endif %}
+      {% if include.title %}title="{{ include.title }}"{% endif %}
+      {% if include.zoomable %}data-zoomable{% endif %}
+      onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
+    />
+  </picture>
+
+  {%- if include.caption -%}<figcaption class="caption">{{ include.caption }}</figcaption>{%- endif %}
+
+</figure>

_includes/scripts/analytics.html

@@ -0,0 +1,18 @@
+{%- if site.enable_google_analytics -%}
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){ window.dataLayer.push(arguments); }
+    gtag('js', new Date());
+    gtag('config', '{{ site.google_analytics }}');
+  </script>
+{%- endif -%}
+{%- if site.enable_cronitor_analytics -%}
+  <!-- Cronitor RUM -->
+  <script async src="https://rum.cronitor.io/script.js"></script>
+  <script>
+    window.cronitor = window.cronitor || function() { (window.cronitor.q = window.cronitor.q || []).push(arguments); };
+    cronitor('config', { clientKey: '{{site.cronitor_analytics}}' });
+  </script>
+{%- endif -%}

_includes/scripts/progressBar.html

@@ -0,0 +1,80 @@
+{% if site.enable_progressbar %}
+
+<!-- Scrolling Progress Bar -->
+<script type="text/javascript">
+  /*
+   * This JavaScript code has been adapted from the article 
+   * https://css-tricks.com/reading-position-indicator/ authored by Pankaj Parashar, 
+   * published on the website https://css-tricks.com on the 7th of May, 2014.
+   * Couple of changes were made to the original code to make it compatible 
+   * with the `al-foio` theme.
+   */
+  const progressBar = $("#progress");
+  /*
+   * We set up the bar after all elements are done loading.
+   * In some cases, if the images in the page are larger than the intended
+   * size they'll have on the page, they'll be resized via CSS to accomodate
+   * the desired size. This mistake, however, breaks the computations as the
+   * scroll size is computed as soon as the elements finish loading.
+   * To account for this, a minimal delay was introduced before computing the
+   * values.
+   */
+  window.onload = function () {
+    setTimeout(progressBarSetup, 50);
+  };
+  /*
+   * We set up the bar according to the browser.
+   * If the browser supports the progress element we use that.
+   * Otherwise, we resize the bar thru CSS styling
+   */
+  function progressBarSetup() {
+    if ("max" in document.createElement("progress")) {
+      initializeProgressElement();
+      $(document).on("scroll", function() {
+        progressBar.attr({ value: getCurrentScrollPosition() });
+      });
+      $(window).on("resize", initializeProgressElement);
+    } else {
+      resizeProgressBar();
+      $(document).on("scroll", resizeProgressBar);
+      $(window).on("resize", resizeProgressBar);
+    }
+  }
+  /*
+   * The vertical scroll position is the same as the number of pixels that
+   * are hidden from view above the scrollable area. Thus, a value > 0 is
+   * how much the user has scrolled from the top
+   */
+  function getCurrentScrollPosition() {
+    return $(window).scrollTop();
+  }
+
+  function initializeProgressElement() {
+    let navbarHeight = $("#navbar").outerHeight(true);
+    $("body").css({ "padding-top": navbarHeight });
+    $("progress-container").css({ "padding-top": navbarHeight });
+    progressBar.css({ top: navbarHeight });
+    progressBar.attr({
+      max: getDistanceToScroll(),
+      value: getCurrentScrollPosition(),
+    });
+  }
+  /*
+   * The offset between the html document height and the browser viewport
+   * height will be greater than zero if vertical scroll is possible.
+   * This is the distance the user can scroll
+   */
+  function getDistanceToScroll() {
+    return $(document).height() - $(window).height();
+  }
+
+  function resizeProgressBar() {
+    progressBar.css({ width: getWidthPercentage() + "%" });
+  }
+  // The scroll ratio equals the percentage to resize the bar
+  function getWidthPercentage() {
+    return (getCurrentScrollPosition() / getDistanceToScroll()) * 100;
+  }
+</script>
+
+{%- endif %}

_layouts/distill.html

@@ -1,15 +1,21 @@
 <!DOCTYPE html>
+<!-- _layouts/distill.html -->
 <html>
   <head>
-    {% include head.html %}
+    {%- include head.html %}
+
+    {% include scripts/jquery.html %}
     {% include scripts/mathjax.html %}
+    <!-- Distill js -->
     <script src="{{ '/assets/js/distillpub/template.v2.js' | relative_url }}"></script>
     <script src="{{ '/assets/js/distillpub/transforms.v2.js' | relative_url }}"></script>
+    <script src="{{ '/assets/js/distillpub/overrides.js' | relative_url }}"></script>
     {% if page._styles %}
+    <!-- Page/Post style -->
     <style type="text/css">
       {{ page._styles }}
     </style>
-    {% endif %}
+    {%- endif %}
   </head>
 
   <d-front-matter>
@@ -18,7 +24,7 @@
       "description": "{{ page.description }}",
       "published": "{{ page.date | date: '%B %-d, %Y' }}",
       "authors": [
-        {% for author in page.authors %}
+        {% for author in page.authors -%}
         {
           "author": "{{ author.name }}",
           "authorURL": "{{ author.url }}",
@@ -48,14 +54,12 @@
     }</script>
   </d-front-matter>
 
-  <body class="{% if site.navbar_fixed %}fixed-top-nav{% endif %} {% unless site.footer_fixed %}sticky-bottom-footer{% endunless %}">
+  <body class="{%- if site.navbar_fixed -%}fixed-top-nav{%- endif -%} {%- unless site.footer_fixed -%}sticky-bottom-footer{%- endunless -%}">
 
     <!-- Header -->
-
-    {% include header.html %}
+    {%- include header.html %}
 
     <!-- Content -->
-
     <div class="post distill">
 
       <d-title>
@@ -66,6 +70,24 @@ <h1>{{ page.title }}</h1>
       <d-byline></d-byline>
 
       <d-article>
+        {% if page.toc -%}
+        <d-contents>
+          <nav class="l-text figcaption">
+          <h3>Contents</h3>
+            {% for section in page.toc -%}
+            <div><a href="#{{ section.name | slugify }}">{{ section.name }}</a></div>
+            {% if section.subsections -%}
+            <ul>
+              {% for subsection in section.subsections -%}
+              <li><a href="#{{ subsection.name | slugify }}">{{ subsection.name }}</a></li>
+              {% endfor %}
+            </ul>
+            {%- endif -%}
+            {%- endfor %}
+          </nav>
+        </d-contents>
+        {%- endif %}
+
         {{ content }}
       </d-article>
 
@@ -74,15 +96,22 @@ <h1>{{ page.title }}</h1>
         <d-citation-list></d-citation-list>
       </d-appendix>
 
+      <d-bibliography src="{{ page.bibliography | prepend: '/assets/bibliography/' | relative_url }}"></d-bibliography>
+
+      {%- if site.disqus_shortname and page.disqus_comments -%}
+        {% include disqus.html %}
+      {%- endif %}
+      {%- if site.giscus.repo and page.giscus_comments -%}
+        {% include giscus.html %}
+      {%- endif -%}
+
     </div>
 
     <!-- Footer -->
+    {%- include footer.html %}
 
-    {% include footer.html %}
-
+    {% include scripts/bootstrap.html %}
+    {% include scripts/analytics.html %}
+    {% include scripts/progressBar.html %}
   </body>
-
-  <d-bibliography src="{{ page.bibliography | prepend: '/assets/bibliography/' | relative_url }}">
-  </d-bibliography>
-
 </html>

_plugins/details.rb

@@ -0,0 +1,24 @@
+# Code from http://movb.de/jekyll-details-support.html
+
+module Jekyll
+    module Tags
+      class DetailsTag < Liquid::Block
+
+        def initialize(tag_name, markup, tokens)
+          super
+          @caption = markup
+        end
+
+        def render(context)
+          site = context.registers[:site]
+          converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
+          caption = converter.convert(@caption).gsub(/<\/?p[^>]*>/, '').chomp
+          body = converter.convert(super(context))
+          "<details><summary>#{caption}</summary>#{body}</details>"
+        end
+
+      end
+    end
+  end
+
+  Liquid::Template.register_tag('details', Jekyll::Tags::DetailsTag)