Optimize rendering of the documentation site (#8020)

Merge pull request 8020

docs/_includes/analytics.html

@@ -1,4 +1,4 @@
-{% if site.google_analytics_id %}
+{% if site.google_analytics_id -%}
   <!-- Google Analytics (https://www.google.com/analytics) -->
   <script>
     !function(j,e,k,y,l,L){j.GoogleAnalyticsObject=y,j[y]||(j[y]=function(){
@@ -8,6 +8,5 @@
 
     ga('create', '{{ site.google_analytics_id }}', 'jekyllrb.com');
     ga('send', 'pageview');
-
   </script>
-{% endif %}
+{% endif -%}

docs/_includes/docs_contents.html

@@ -1,17 +1,15 @@
 <div class="unit one-fifth hide-on-mobiles">
   <aside>
-    {% for section in site.data.docs_nav %}
+    {% for section in site.data.docs_nav -%}
       <h4>{{ section.title }}</h4>
       <ul>
-        {% for item in section.docs %}
+      {%- for item in section.docs -%}
-          {% assign p = site.documents | where: "url", item.link | first %}
+        {%- assign p = site.documents | where: "url", item.link | first %}
-          <li {%- if page.url == p.url %} class="current" {%- endif %}>
+        <li {%- if page.url == p.url %} class="current" {%- endif -%}><a href="{{ p.url }}">
-            <a href="{{ p.url }}">
+          {{- p.menu_name | default: p.title -}}
-              {{ p.menu_name | default: p.title }}
+        </a></li>
-            </a>
+      {%- endfor %}
-          </li>
-        {% endfor %}
       </ul>
-    {% endfor %}
+    {% endfor -%}
   </aside>
 </div>

docs/_includes/docs_contents_mobile.html

@@ -1,15 +1,15 @@
 <div class="docs-nav-mobile unit whole show-on-mobiles">
   <select onchange="if (this.value) window.location.href=this.value">
     <option value="">Navigate the docs…</option>
-    {% for section in site.data.docs_nav %}
+    {% for section in site.data.docs_nav -%}
     <optgroup label="{{ section.title }}">
-      {% for item in section.docs %}
+    {%- for item in section.docs -%}
       {% assign p = site.documents | where: "url", item.link | first %}
       <option value="{{ p.url }}">
-          {{ p.menu_name | default: p.title }}
+        {{- p.menu_name | default: p.title -}}
       </option>
-      {% endfor %}
+    {%- endfor %}
     </optgroup>
-    {% endfor %}
+    {% endfor -%}
   </select>
 </div>

docs/_includes/docs_variables_table.html

@@ -7,12 +7,12 @@
     </tr>
   </thead>
   <tbody>
-  {% for var in include.scope %}
+  {% for var in include.scope -%}
     <tr>
       <td><p><code>{{ var.name }}</code></p></td>
       <td><p>{{- var.description -}}</p></td>
     </tr>
-  {% endfor %}
+  {% endfor -%}
   </tbody>
 </table>
 </div>

docs/_includes/header.html

@@ -9,23 +9,19 @@
       </h1>
     </div>
     <nav class="main-nav hide-on-mobiles">
-      {% include primary-nav-items.html %}
+      {% include primary-nav-items.html -%}
     </nav>
     <div class="search hide-on-mobiles">
-      {% include search/input.html %}
+      {% include search/input.html -%}
     </div>
     <div class="meta hide-on-mobiles">
       <ul>
-        <li>
+        <li><a href="{{ site.repository }}/releases/tag/v{{ site.version }}">v{{ site.version }}</a></li>
-          <a href="{{ site.repository }}/releases/tag/v{{ site.version }}">v{{ site.version }}</a>
+        <li><a href="{{ site.repository }}">GitHub</a></li>
-        </li>
-        <li>
-          <a href="{{ site.repository }}">GitHub</a>
-        </li>
       </ul>
     </div>
   </div>
   <nav class="mobile-nav show-on-mobiles">
-    {% include mobile-nav-items.html %}
+    {% include mobile-nav-items.html -%}
   </nav>
 </header>

docs/_includes/mobile-nav-items.html

@@ -1,18 +1,14 @@
 <ul>
-  {% for p in site.data.primary_nav %}
+  {% for p in site.data.primary_nav -%}
-    {%- if p.show_on_mobile %}
+    {% if p.show_on_mobile -%}
     <li
       {%- if p.link == '/' -%}
-        {% if page.url == '/' %} class="current" {%- endif %}
+        {%- if page.url == '/' %} class="current" {% endif -%}
-      {%- else -%}
+      {% else -%}
-        {% if page.url contains p.link %} class="current" {%- endif %}
+        {%- if page.url contains p.link %} class="current" {% endif -%}
-      {%- endif -%}
+      {% endif -%}
-    >
+    ><a href="{{ p.link }}">{{ p.title }}</a></li>
-      <a href="{{ p.link }}">{{ p.title }}</a>
+    {% endif -%}
-    </li>
+  {% endfor -%}
-    {%- endif %}
+  <li><a href="{{ site.repository }}">GitHub</a></li>
-  {% endfor %}
-  <li>
-    <a href="{{ site.repository }}">GitHub</a>
-  </li>
 </ul>

docs/_includes/news_contents.html

@@ -10,24 +10,24 @@
     </ul>
     <h4>Recent Releases</h4>
     <ul>
-      {% for post in site.categories.release limit:5 %}
+      {% for post in site.categories.release limit:5 -%}
-      <li {%- if page.title == post.title %} class="current" {%- endif %}>
+      <li {% if page.title == post.title %} class="current"{% endif %}>
         <a href="{{ post.url }}">Version {{ post.version }}</a>
       </li>
-      {% endfor %}
+      {% endfor -%}
       <li>
         <a href="/docs/history/">History »</a>
       </li>
     </ul>
     <h4>Other News</h4>
     <ul>
-      {% for post in site.posts %}
+    {% for post in site.posts -%}
-        {% unless post.categories contains 'release' %}
+      {% unless post.categories contains 'release' -%}
       <li {%- if page.title == post.title %} class="current" {%- endif %}>
         <a href="{{ post.url }}">{{ post.title }}</a>
       </li>
-        {% endunless %}
+      {% endunless -%}
-      {% endfor %}
+    {% endfor -%}
     </ul>
   </aside>
 </div>

docs/_includes/news_contents_mobile.html

@@ -3,9 +3,9 @@
     <option value="">Navigate the blog…</option>
     <option value="/news/">Home</option>
     <optgroup label="posts">
-      {% for post in site.posts %}
+      {% for post in site.posts -%}
       <option value="{{ post.url }}">{{ post.title }}</option>
-      {% endfor %}
+      {% endfor -%}
     </optgroup>
   </select>
 </div>

docs/_includes/news_item.html

@@ -1,25 +1,25 @@
 <article>
   <h2>
     <a href="{{ post.url }}">
-      {{ post.title }}
+      {{- post.title -}}
     </a>
   </h2>
   <span class="post-category">
     <span class="label">
-      {{ post.categories | array_to_sentence_string }}
+      {{- post.categories | array_to_sentence_string -}}
     </span>
   </span>
   <div class="post-meta">
     <span class="post-date">
-      {{ post.date | date_to_string }}
+      {{- post.date | date_to_string -}}
     </span>
-    {% assign author = post.author %}
+    {% assign author = post.author -%}
     <a href="https://github.com/{{ author }}" class="post-author">
-      {% avatar user=author size=24 %}
+      {% avatar user=author size=24 -%}
       {{ author }}
     </a>
   </div>
   <div class="post-content">
-    {{ post.content }}
+    {{- post.content -}}
   </div>
 </article>

docs/_includes/primary-nav-items.html

@@ -1,13 +1,11 @@
 <ul>
-  {% for p in site.data.primary_nav %}
+  {% for p in site.data.primary_nav -%}
   <li
     {%- if p.link == '/' -%}
-      {% if page.url == p.link %} class="current" {%- endif %}
+      {% if page.url == p.link %} class="current" {%- endif -%}
-    {%- else -%}
+    {% else -%}
-      {% if page.url contains p.link %} class="current" {%- endif %}
+      {% if page.url contains p.link %} class="current" {%- endif -%}
-    {%- endif -%}
+    {% endif -%}
-  >
+  ><a href="{{ p.link }}">{{ p.title }}</a></li>
-    <a href="{{ p.link }}">{{ p.title }}</a>
+  {% endfor -%}
-  </li>
-  {% endfor %}
 </ul>

docs/_includes/section_nav_tutorials.html

@@ -1,39 +1,39 @@
-{% comment %}
+{%- comment -%}
 Map grabs the tutorials sections, giving us an array of arrays. Join, flattens all
 the items to a comma delimited string. Split turns it into an array again.
-{% endcomment %}
+{%- endcomment -%}
-{% assign tutorials = site.data.tutorials | map: 'tutorials' | join: ',' | split: ',' %}
+{%- assign tutorials = site.data.tutorials | map: 'tutorials' | join: ',' | split: ',' -%}
 
-{% comment %}
+{%- comment -%}
 Because this is built for every page, lets find where we are in the ordered
 document list by comparing url strings. Then if there's something previous or
 next, lets build a link to it.
-{% endcomment %}
+{%- endcomment -%}
 
-{% for tutorial in tutorials %}
+{% for tutorial in tutorials -%}
-  {% assign tutorial_url = tutorial | prepend:"/tutorials/" | append:"/" %}
+  {% assign tutorial_url = tutorial | prepend:"/tutorials/" | append:"/" -%}
-  {% if tutorial_url == page.url %}
+  {% if tutorial_url == page.url -%}
   <div class="section-nav">
     <div class="left align-right">
-          {% if forloop.first %}
+        {% if forloop.first -%}
           <span class="prev disabled">Back</span>
-          {% else %}
+        {% else -%}
-            {% assign previous = forloop.index0 | minus: 1 %}
+          {% assign previous = forloop.index0 | minus: 1 -%}
-            {% assign previous_page = tutorials[previous] | prepend:"/tutorials/" | append:"/" %}
+          {% assign previous_page = tutorials[previous] | prepend:"/tutorials/" | append:"/" -%}
           <a href="{{ previous_page }}" class="prev">Back</a>
-          {% endif %}
+        {% endif -%}
     </div>
     <div class="right align-left">
-          {% if forloop.last %}
+        {% if forloop.last -%}
           <span class="next disabled">Next</span>
-          {% else %}
+        {% else -%}
-            {% assign next = forloop.index0 | plus: 1 %}
+          {% assign next = forloop.index0 | plus: 1 -%}
-            {% assign next_page = tutorials[next] | prepend:"/tutorials/" | append:"/" %}
+          {% assign next_page = tutorials[next] | prepend:"/tutorials/" | append:"/" -%}
           <a href="{{ next_page }}" class="next">Next</a>
-          {% endif %}
+        {% endif -%}
     </div>
   </div>
   <div class="clear"></div>
-    {% break %}
+  {% break -%}
-  {% endif %}
+  {% endif -%}
-{% endfor %}
+{% endfor -%}

docs/_includes/step-index.html

@@ -1,65 +1,34 @@
-{% assign docs = site.docs | where_exp: "doc", "doc.url contains '/step-by-step/'" %}
+{% assign docs = site.docs | where_exp: "doc", "doc.url contains '/step-by-step/'" -%}
 
-{% for tutorial in tutorials %}
+{% for doc in docs -%}
-  {% assign tutorial_url = tutorial | prepend:"/tutorials/" | append:"/" %}
+  {% if doc.url == page.url -%}
-  {% if tutorial_url == page.url %}
     <div class="section-nav">
       <div class="left align-right">
-          {% if forloop.first %}
+        {% if forloop.first -%}
           <span class="prev disabled">Back</span>
-          {% else %}
+        {% else -%}
-            {% assign previous = forloop.index0 | minus: 1 %}
+          {% assign previous = forloop.index0 | minus: 1 -%}
-            {% assign previous_page = tutorials[previous] | prepend:"/tutorials/" | append:"/" %}
-            <a href="{{ previous_page }}" class="prev">Back</a>
-          {% endif %}
-      </div>
-      <div class="right align-left">
-          {% if forloop.last %}
-            <span class="next disabled">Next</span>
-          {% else %}
-            {% assign next = forloop.index0 | plus: 1 %}
-            {% assign next_page = tutorials[next] | prepend:"/tutorials/" | append:"/" %}
-            <a href="{{ next_page }}" class="next">Next</a>
-          {% endif %}
-      </div>
-    </div>
-    <div class="clear"></div>
-    {% break %}
-  {% endif %}
-{% endfor %}
-
-
-{% for doc in docs %}
-  {% if doc.url == page.url %}
-    <div class="section-nav">
-      <div class="left align-right">
-          {% if forloop.first %}
-            <span class="prev disabled">Back</span>
-          {% else %}
-            {% assign previous = forloop.index0 | minus: 1 %}
           <a href="{{ docs[previous].url }}" class="prev">Back</a>
-          {% endif %}
+        {% endif -%}
       </div>
       <div class="right align-left">
-          {% if forloop.last %}
+      {% if forloop.last -%}
         <span class="next disabled">Next</span>
-          {% else %}
+      {% else -%}
-            {% assign next = forloop.index0 | plus: 1 %}
+        {% assign next = forloop.index0 | plus: 1 -%}
         <a href="{{ docs[next].url }}" class="next">Next</a>
-          {% endif %}
+      {% endif -%}
       </div>
     </div>
     <div class="clear"></div>
-    {% break %}
+    {% break -%}
-  {% endif %}
+  {% endif -%}
-{% endfor %}
+{% endfor -%}
 
 <ol class="step-nav">
-  {% for step in docs %}
+  {% for step in docs -%}
-    <li {% if step.url == page.url %}class="current"{% endif %}>
+  <li {%- if step.url == page.url %} class="current"{% endif %}><a href="{{ step.url }}">
-      <a href="{{ step.url }}">
+    {{- step.title -}}
-        {{ step.title }}
+  </a></li>
-      </a>
+  {% endfor -%}
-    </li>
-  {% endfor %}
 </ol>

docs/_includes/tutorials_contents.html

@@ -1,10 +1,16 @@
 <div class="unit one-fifth hide-on-mobiles">
   <aside>
-    {% for section in site.data.tutorials %}
+    {% for section in site.data.tutorials -%}
       <h4>{{ section.title }}</h4>
-
+      <ul>
-   {% include tutorials_ul.html items=section.tutorials %}
+      {% for item in section.tutorials -%}
-
+        {% assign item_url = item | prepend:"/tutorials/" | append:"/" -%}
-    {% endfor %}
+        {% assign p = site.tutorials | where:"url", item_url | first -%}
+        <li {%- if item_url == page.url %} class="current" {%- endif %}><a href="{{ p.url }}">
+          {{- p.title -}}
+        </a></li>
+      {% endfor -%}
+      </ul>
+    {% endfor -%}
   </aside>
 </div>

docs/_includes/tutorials_contents_mobile.html

@@ -1,10 +1,14 @@
 <div class="docs-nav-mobile unit whole show-on-mobiles">
   <select onchange="if (this.value) window.location.href=this.value">
     <option value="">Navigate the tutorials…</option>
-    {% for section in site.data.tutorials %}
+    {% for section in site.data.tutorials -%}
     <optgroup label="{{ section.title }}">
-      {% include tutorials_option.html items=section.tutorials %}
+      {% for item in section.tutorials -%}
+        {% assign item_url = item | prepend:"/tutorials/" | append:"/" -%}
+        {% assign tutorial = site.tutorials | where: "url", item_url | first -%}
+        <option value="{{ tutorial.url }}">{{ tutorial.title }}</option>
+      {% endfor -%}
     </optgroup>
-    {% endfor %}
+    {% endfor -%}
   </select>
 </div>

docs/_includes/tutorials_option.html

@@ -1,5 +0,0 @@
-{% for item in include.items %}
-  {% assign item_url = item | prepend:"/tutorials/" | append:"/" %}
-  {% assign tutorial = site.tutorials | where: "url", item_url | first %}
-  <option value="{{ tutorial.url }}">{{ tutorial.title }}</option>
-{% endfor %}

docs/_includes/tutorials_ul.html

@@ -1,7 +0,0 @@
-<ul>
-{% for item in include.items %}
-  {% assign item_url = item | prepend:"/tutorials/" | append:"/" %}
-  {% assign p = site.tutorials | where:"url", item_url | first %}
-  <li {%- if item_url == page.url %} class="current" {%- endif %}><a href="{{ p.url }}">{{ p.title }}</a></li>
-{% endfor %}
-</ul>

docs/_layouts/default.html

@@ -1,13 +1,13 @@
-{% include top.html %}
+{%- include top.html -%}
 
 <body class="wrap">
-  {% include header.html %}
+  {%- include header.html -%}
 
-  {{ content }}
+  {{- content -}}
 
-  {% include footer.html %}
+  {%- include footer.html -%}
-  {% include anchor_links.html %}
+  {%- include anchor_links.html -%}
-  {% include analytics.html %}
+  {%- include analytics.html -%}
-  {% include search/script.html %}
+  {%- include search/script.html -%}
 </body>
 </html>

docs/_layouts/docs.html

@@ -4,22 +4,18 @@ layout: default
 
 <section class="docs">
   <div class="grid">
-
+    {% include docs_contents_mobile.html -%}
-      {% include docs_contents_mobile.html %}
-
     <div class="unit four-fifths">
       <article>
         <div class="improve right hide-on-mobiles">
-            <a data-proofer-ignore href="https://github.com/jekyll/jekyll/edit/master/docs/{{ page.path }}"><i class="fa fa-pencil"></i> &nbsp;Improve this page</a>
+          <a data-proofer-ignore href="https://github.com/jekyll/jekyll/edit/master/docs/{{ page.path }}"><i
+             class="fa fa-pencil"></i> &nbsp;Improve this page</a>
         </div>
         <h1>{{ page.title }}</h1>
         {{ content }}
       </article>
     </div>
-
+    {% include docs_contents.html -%}
-      {% include docs_contents.html %}
-
     <div class="clear"></div>
-
   </div>
 </section>

docs/_layouts/news.html

@@ -4,16 +4,11 @@ layout: default
 
 <section class="news">
   <div class="grid">
-
+    {% include news_contents_mobile.html -%}
-      {% include news_contents_mobile.html %}
-
     <div class="unit four-fifths">
-        {{ content }}
+      {{- content -}}
     </div>
-
+    {% include news_contents.html -%}
-      {% include news_contents.html %}
-
     <div class="clear"></div>
-
   </div>
 </section>

docs/_layouts/news_item.html

@@ -12,17 +12,17 @@ layout: news
   </h2>
   <span class="post-category">
     <span class="label">
-      {{ page.categories | array_to_sentence_string }}
+      {{- page.categories | array_to_sentence_string -}}
     </span>
   </span>
   <div class="post-meta">
     <span class="post-date">
-      {{ page.date | date_to_string }}
+      {{- page.date | date_to_string -}}
     </span>
-    {% assign author = page.author %}
+    {% assign author = page.author -%}
     <a href="https://github.com/{{ author }}" class="post-author">
-      {% avatar user=author size=24 %}
+      {% avatar user=author size=24 -%}
-      {{ author }}
+      {{- author -}}
     </a>
   </div>
   <div class="post-content">

docs/_layouts/page.html

@@ -4,15 +4,12 @@ layout: default
 
 <section class="standalone">
   <div class="grid">
-
     <div class="unit whole">
       <article>
         <h1>{{ page.title }}</h1>
         {{ content }}
       </article>
     </div>
-
     <div class="clear"></div>
-
   </div>
 </section>

docs/_layouts/step.html

@@ -3,9 +3,7 @@ layout: default
 ---
 <section class="docs">
   <div class="grid">
-
+    {% include docs_contents_mobile.html -%}
-      {% include docs_contents_mobile.html %}
-
     <div class="unit four-fifths">
       <article>
         <div class="improve right hide-on-mobiles">
@@ -14,13 +12,10 @@ layout: default
         <h1>Step by Step Tutorial</h1>
         <h2>{{ page.position }}. {{ page.title }}</h2>
         {{ content }}
-          {% include step-index.html %}
+        {% include step-index.html -%}
       </article>
     </div>
-
+    {% include docs_contents.html -%}
-      {% include docs_contents.html %}
-
     <div class="clear"></div>
-
   </div>
 </section>

docs/_layouts/tutorials.html

@@ -4,9 +4,7 @@ layout: default
 
 <section class="docs">
   <div class="grid">
-
+    {%- include tutorials_contents_mobile.html -%}
-      {% include tutorials_contents_mobile.html %}
-
     <div class="unit four-fifths">
       <article>
         <div class="improve right hide-on-mobiles">
@@ -14,14 +12,11 @@ layout: default
              class="fa fa-pencil"></i> &nbsp;Improve this page</a>
         </div>
         <h1>{{ page.title }}</h1>
-          {{ content }}
+        {{- content -}}
-          {% include section_nav_tutorials.html %}
+        {%- include section_nav_tutorials.html -%}
       </article>
     </div>
-
+    {%- include tutorials_contents.html -%}
-      {% include tutorials_contents.html %}
-
     <div class="clear"></div>
-
   </div>
 </section>

docs/pages/404.html

@@ -18,18 +18,10 @@ sitemap: false
       <p>The resource you requested was not found. Here are some links to help you find your way:</p>
       <nav class="main-nav">
         <ul>
-          <li>
+          <li><a href="/">Home</a></li>
-            <a href="/">Home</a>
+          <li><a href="/docs/home/">Documentation</a></li>
-          </li>
+          <li><a href="/news/">News</a></li>
-          <li>
+          <li><a href="/help/">Help</a></li>
-            <a href="/docs/home/">Documentation</a>
-          </li>
-          <li>
-            <a href="/news/">News</a>
-          </li>
-          <li>
-            <a href="/help/">Help</a>
-          </li>
         </ul>
       </nav>
     </div>

docs/pages/news.html

@@ -5,6 +5,6 @@ permalink: /news/
 author: all
 ---
 
-{% for post in site.posts %}
+{% for post in site.posts -%}
-  {% include news_item.html %}
+  {% include news_item.html -%}
-{% endfor %}
+{% endfor -%}

docs/pages/releases.html

@@ -5,6 +5,6 @@ permalink: /news/releases/
 author: all
 ---
 
-{% for post in site.categories.release %}
+{% for post in site.categories.release -%}
-  {% include news_item.html %}
+  {% include news_item.html -%}
-{% endfor %}
+{% endfor -%}

docs/pages/showcase.html

@@ -9,7 +9,7 @@ redirect_from:
 <p>Jekyll is used for all kinds of usecases. Here's some of our favorites:</p>
 
 <ul class="showcase" id="showcase">
-  {% for s in site.data.showcase reversed %}
+  {% for s in site.data.showcase reversed -%}
   <li>
     <a href="{{ s.url }}" target="_blank">
       <figure>
@@ -20,7 +20,7 @@ redirect_from:
       </figure>
     </a>
   </li>
-  {% endfor %}
+  {% endfor -%}
   <li class="spacer"></li>
 </ul>