Cache certain includes

Gemfile

@@ -13,6 +13,7 @@ group :jekyll_plugins do
   gem "jekyll-redirect-from"
   gem "jekyll-auto-authors"
   gem "jekyll-url-metadata"
+  gem "jekyll-include-cache"
 end
 
 # Performance-booster for watching directories on Windows

_config.yml

@@ -50,6 +50,7 @@ plugins:
   - jekyll-redirect-from
   - jekyll-auto-authors
   - jekyll-url-metadata
+  - jekyll-include-cache
 
 pagination:
   enabled: true

_includes/cta.html

@@ -1,4 +1,3 @@
-{% if page.sitemap != false %}
 <div class="flex justify-center mx-6 md:mx-10 lg:mx-14">
   <div
     class="p-8 md:p-12 grid grid-flow-row sm:grid-flow-col gap-x-8 items-center justify-between elevated"
@@ -29,4 +28,3 @@ <h3>Contribute to the Genics Blog!</h3>
     </a>
   </div>
 </div>
-{% endif %}

_includes/display-ad.html

@@ -1,4 +1,4 @@
-{% if jekyll.environment == 'production' and page.sitemap != false %}
+{% if include.environment == 'production' and include.sitemap != false %}
 <div align="center">
   <ins
     class="adsbygoogle"

_includes/featured-content.html

@@ -3,7 +3,7 @@
 {% assign featuredPosts = site.data.featured.posts %}
 {% assign featuredPostsSize = featuredPosts | size %}
 {% assign featuredCategoriesSize = featuredCategories | size %}
-{% if page.url == '/index.html' %}
+{% if include.url == '/index.html' %}
 {% if featuredPostsSize != 0 %}
 <div class="flex justify-center">
   <h1>Popular this month</h1>
@@ -15,7 +15,16 @@ <h1>Popular this month</h1>
   <!-- prettier-ignore -->
   {% for featuredPost in featuredPosts %}
   {% assign post = site.posts | where_exp:"post", "post.url == featuredPost" | first %}
-  {% include postbox.html %}
+    {% include_cached postbox.html 
+      environment=jekyll.environment
+      author=post.author
+      category=post.category
+      url=post.url
+      image=post.image
+      title=post.title
+      excerpt=post.excerpt
+      date=post.date
+    %}
   {% endfor %}
 </div>
 
@@ -42,7 +51,16 @@ <h1>Featured</h1>
   <!-- prettier-ignore -->
   {% assign posts = site.posts | where: "category", category %}
   {% for post in posts | limit: 3 %}
-  {% include postbox.html %}
+    {% include_cached postbox.html 
+      environment=jekyll.environment
+      author=post.author
+      category=post.category
+      url=post.url
+      image=post.image
+      title=post.title
+      excerpt=post.excerpt
+      date=post.date
+    %}
   {% endfor %}
 </div>
 

_includes/infeed-ad.html

@@ -1,4 +1,4 @@
-{% if jekyll.environment == 'production' and page.sitemap != false %}
+{% if include.environment == 'production' and include.sitemap != false %}
 <br />
 
 <div align="center">

_includes/latestposts.html

@@ -5,6 +5,15 @@
 >
   <!-- prettier-ignore -->
   {% for post in site.posts | limit: 3 %}
-  {% include postbox.html %}
+    {% include_cached postbox.html 
+      environment=jekyll.environment
+      author=post.author
+      category=post.category
+      url=post.url
+      image=post.image
+      title=post.title
+      excerpt=post.excerpt
+      date=post.date
+    %}
   {% endfor %}
 </div>

_includes/nav.html

@@ -1,7 +1,7 @@
 <nav>
   <!-- prettier-ignore -->
   {% assign announcement = site.data.announcement %}
-  {% if announcement.visible and page.url != announcement.link.url %}
+  {% if announcement.visible and include.url != announcement.link.url %}
   <p
     class="bg-primary p-3 text-center text-white font-medium flex flex-col sm:block"
   >
@@ -53,24 +53,24 @@
         <div class="flex items-center h-16">
           <div class="hidden lg:block">
             <a
-              class="nav-item {% if page.url contains '/topics' %}text-slate-400{% else %}text-white{% endif %}"
+              class="nav-item {% if include.url contains '/topics' %}text-slate-400{% else %}text-white{% endif %}"
               href="{{ site.baseurl }}/topics"
               >Topics</a
             >
 
             <a
-              class="nav-item {% if page.url contains '/about' %}text-slate-400{% else %}text-white{% endif %}"
+              class="nav-item {% if include.url contains '/about' %}text-slate-400{% else %}text-white{% endif %}"
               href="{{ site.baseurl }}/about"
               >About Us</a
             >
 
             <a
-              class="nav-item {% if page.url contains '/contact' %}text-slate-400{% else %}text-white{% endif %}"
+              class="nav-item {% if include.url contains '/contact' %}text-slate-400{% else %}text-white{% endif %}"
               href="{{ site.baseurl }}/contact"
               >Contact</a
             >
 
-            <!--<a class="nav-item {% if page.url contains '/advertise' %}text-slate-400{% else %}text-white{% endif %}"
+            <!--<a class="nav-item {% if include.url contains '/advertise' %}text-slate-400{% else %}text-white{% endif %}"
                             href="{{ site.baseurl }}/advertise">Advertise</a>-->
 
             <a
@@ -152,26 +152,26 @@
     <div class="top-0 bg-background hidden p-6 lg:hidden" id="mobile-nav">
       <div class="grid grid-cols-2 gap-y-2 gap-x-4">
         <a
-          class="group mobile-nav-item {% if page.url contains '/categories' %}bg-gray-700{% endif %}"
+          class="group mobile-nav-item {% if include.url contains '/topics' %}bg-gray-700{% endif %}"
           href="{{ site.baseurl }}/topics"
         >
           <span class="group-hover:text-white">Topics</span>
         </a>
 
-        <!--<a class="group mobile-nav-item {% if page.url contains '/advertise' %}bg-gray-700{% endif %}"
+        <!--<a class="group mobile-nav-item {% if include.url contains '/advertise' %}bg-gray-700{% endif %}"
                     href="{{ site.baseurl }}/advertise">
                     <span class="group-hover:text-white">Advertise</span>
                 </a>-->
 
         <a
-          class="group mobile-nav-item {% if page.url contains '/about' %}bg-gray-700{% endif %}"
+          class="group mobile-nav-item {% if include.url contains '/about' %}bg-gray-700{% endif %}"
           href="{{ site.baseurl }}/about"
         >
           <span class="group-hover:text-white">About Us</span>
         </a>
 
         <a
-          class="group mobile-nav-item {% if page.url contains '/contact' %}bg-gray-700{% endif %}"
+          class="group mobile-nav-item {% if include.url contains '/contact' %}bg-gray-700{% endif %}"
           href="{{ site.baseurl }}/contact"
         >
           <span class="group-hover:text-white">Contact</span>

_includes/postbox.html

@@ -1,24 +1,24 @@
 <!-- prettier-ignore -->
-{% if jekyll.environment == 'production' %}
+{% if include.environment == 'production' %}
 {% assign optimize = site.img_src_prefix.header %}
 {% assign optimizeAvatar = site.img_src_prefix.avatar %}
 {% endif %}
-{% assign author = site.data.authors[post.author] %}
-{% assign category = post.category %}
+{% assign author = site.data.authors[include.author] %}
+{% assign category = include.category %}
 <a
   class="mt-4 mb-6 px-6 pt-2 pb-6 postbox hover:border-{{ category }} dark:hover:!border-{{ category }} underline-none"
-  href="{{ site.baseurl }}{{ post.url }}"
+  href="{{ site.baseurl }}{{ include.url }}"
 >
   <img
-    src="{{ optimize }}{{ post.image }}"
-    alt="{{ post.title }}"
-    title="{{ post.title }}"
+    src="{{ optimize }}{{ include.image }}"
+    alt="{{ include.title }}"
+    title="{{ include.title }}"
     class="aspect-video w-full mt-4"
   />
 
   <div class="mt-6 mb-16">
-    <h2 class="line-clamp-2">{{ post.title }}</h2>
-    <p class="line-clamp-3">{{ post.excerpt }}</p>
+    <h2 class="line-clamp-2">{{ include.title }}</h2>
+    <p class="line-clamp-3">{{ include.excerpt }}</p>
   </div>
 
   <div class="absolute mt-20 right-6 bottom-6 left-6">
@@ -36,7 +36,7 @@ <h2 class="line-clamp-2">{{ post.title }}</h2>
         <span class="ml-2">{{ author.name | split:' ' | first}}</span>
       </div>
 
-      <span>{{ post.date | date:"%b %e, %Y" }}</span>
+      <span>{{ include.date | date:"%b %e, %Y" }}</span>
     </div>
   </div>
 </a>

_includes/relatedposts.html

@@ -30,7 +30,16 @@ <h2>Related content</h2>
 
     <!-- prettier-ignore -->
     {% if sameTagCount >= minCommonTags %}
-      {% include postbox.html %}
+      {% include_cached postbox.html 
+        environment=jekyll.environment
+        author=post.author
+        category=post.category
+        url=post.url
+        image=post.image
+        title=post.title
+        excerpt=post.excerpt
+        date=post.date
+      %}
 
       <!-- prettier-ignore -->
       {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %}

_layouts/archive.html

@@ -6,7 +6,7 @@
   </head>
 
   <body>
-    {% include nav.html %}
+    {% include_cached nav.html url=page.url %}
 
     <header class="banner">
       <div class="flex flex-col items-center">
@@ -59,7 +59,16 @@
         >
           <!-- prettier-ignore -->
           {% for post in paginator.posts %}
-            {% include postbox.html %}
+            {% include_cached postbox.html 
+              environment=jekyll.environment
+              author=post.author
+              category=post.category
+              url=post.url
+              image=post.image
+              title=post.title
+              excerpt=post.excerpt
+              date=post.date
+            %}
           {% endfor %}
         </div>
 
@@ -88,9 +97,10 @@
         {% endif %}
       </section>
 
-      <div class="mb-8">{% include cta.html %}</div>
+      <div class="mb-8">{% include_cached cta.html %}</div>
 
-      {% include infeed-ad.html %}
+      <!-- prettier-ignore -->
+      {% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}
     </main>
 
     <!-- prettier-ignore -->

_layouts/author.html

@@ -93,7 +93,7 @@
   </head>
 
   <body>
-    {% include nav.html %}
+    {% include_cached nav.html url=page.url %}
 
     <header class="banner">
       <div class="flex flex-col items-center">
@@ -215,7 +215,16 @@ <h4>{{ author.role }}</h4>
         >
           <!-- prettier-ignore -->
           {% for post in paginator.posts %}
-            {% include postbox.html %}
+            {% include_cached postbox.html 
+              environment=jekyll.environment
+              author=post.author
+              category=post.category
+              url=post.url
+              image=post.image
+              title=post.title
+              excerpt=post.excerpt
+              date=post.date
+            %}
           {% endfor %}
         </div>
         {% else %}
@@ -248,9 +257,10 @@ <h4>{{ author.role }}</h4>
         {% endif %}
       </section>
 
-      <div class="mb-8">{% include cta.html %}</div>
+      <div class="mb-8">{% include_cached cta.html %}</div>
 
-      {% include infeed-ad.html %}
+      <!-- prettier-ignore -->
+      {% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}
     </main>
 
     <!-- prettier-ignore -->

_layouts/default.html

@@ -7,7 +7,7 @@
 
   <body>
     <!-- prettier-ignore -->
-    {% include nav.html %}
+    {% include_cached nav.html url=page.url %}
     {% include header.html %}
 
     <main>{{ content | extlinks }}</main>

_layouts/post.html

@@ -191,9 +191,7 @@
     </figure>
 
     {% if page.sitemap == false %}
-    <figure
-      class="p-6 md:p-8 lg:sticky lg:top-24 mt-8 elevated"
-    >
+    <figure class="p-6 md:p-8 lg:sticky lg:top-24 mt-8 elevated">
       <h4>This is a draft preview!</h4>
 
       Anyone with the link can read this draft, but not search engines :)
@@ -217,7 +215,7 @@ <h4>This is a draft preview!</h4>
       <p>This is an adslot that will be visible in production website.</p>
       <!-- prettier-ignore -->
       {% else %}
-      {% include display-ad.html %}
+      {% include_cached display-ad.html environment=jekyll.environment sitemap=page.sitemap %}
       {% endif %}
     </figure>
 
@@ -262,8 +260,8 @@ <h4>
 </section>
 
 <!-- prettier-ignore -->
-{% include cta.html %}
-{% include infeed-ad.html %}
+{% include_cached cta.html %}
+{% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}
 
 {% if jekyll.environment == 'production' and page.comments != false and page.sitemap != false %}
 <h1 class="mx-8 mt-12 md:mx-10 lg:mx-14 -mb-4 lg:-mb-8">Comments</h1>
@@ -292,4 +290,5 @@ <h1 class="mx-8 mt-12 md:mx-10 lg:mx-14 -mb-4 lg:-mb-8">Comments</h1>
 
 <div class="m-8 md:m-10 lg:m-14">{% include relatedposts.html %}</div>
 
-{% include infeed-ad.html %}
+<!-- prettier-ignore -->
+{% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}

_layouts/series.html

@@ -11,7 +11,7 @@
   </head>
 
   <body>
-    {% include nav.html %}
+    {% include_cached nav.html url=page.url %}
 
     <header class="banner">
       <div class="flex flex-col lg:flex-row p-2">
@@ -58,9 +58,10 @@ <h1 class="text-4xl font-black tracking-tight">{{ page.title }}</h1>
         {% endif %}
       </section>
 
-      <div class="mb-8">{% include cta.html %}</div>
+      <div class="mb-8">{% include_cached cta.html %}</div>
 
-      {% include infeed-ad.html %}
+      <!-- prettier-ignore -->
+      {% include_cached infeed-ad.html environment=jekyll.environment sitemap=page.sitemap %}
     </main>
 
     <!-- prettier-ignore -->