From 135a16f13ee783d9308669ff9a824847a73c951c Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 26 Apr 2022 01:43:40 +0800
Subject: [PATCH] perf: avoid post pageviews from shifting while loading

---
 _layouts/post.html | 65 ++++++++++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 31 deletions(-)

diff --git a/_layouts/post.html b/_layouts/post.html
index 91d0a00..a1e4f48 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -35,46 +35,46 @@ tail_includes:
 
 <div class="post-meta text-muted">
 
-  <!-- author -->
   <div>
-    {% capture author_name %}{{ site.data.authors[page.author].name | default: site.social.name }}{% endcapture %}
-    {% assign author_link = nil %}
+    <!-- published date -->
+    <span>
+      {{ site.data.locales[lang].post.posted }}
+      {% include datetime.html date=page.date tooltip=true %}
+    </span>
 
-    {% if page.author %}
-      {% assign author_link = site.data.authors[page.author].url %}
-    {% elsif author_name == site.social.name %}
-      {% assign author_link = site.social.links[0] %}
+    <!-- lastmod date -->
+    {% if page.last_modified_at %}
+    <span>
+      {{ site.data.locales[lang].post.updated }}
+      {% include datetime.html date=page.last_modified_at tooltip=true %}
+    </span>
     {% endif %}
-
-    {{ site.data.locales[lang].post.written_by }}
-    <em>
-      {% if author_link %}
-        <a href="{{ author_link }}">{{ author_name }}</a>
-      {% else %}
-        {{ author_name }}
-      {% endif %}
-    </em>
   </div>
 
-  <div class="d-flex">
-    <div>
-      <!-- published date -->
-      <span>
-        {{ site.data.locales[lang].post.posted }}
-        {% include datetime.html date=page.date tooltip=true %}
-      </span>
+  <div class="d-flex justify-content-between">
+    <!-- author -->
+    <span>
+      {% capture author_name %}{{ site.data.authors[page.author].name | default: site.social.name }}{% endcapture %}
+      {% assign author_link = nil %}
 
-      <!-- lastmod date -->
-      {% if page.last_modified_at %}
-      <span>
-        {{ site.data.locales[lang].post.updated }}
-        {% include datetime.html date=page.last_modified_at tooltip=true %}
-      </span>
+      {% if page.author %}
+        {% assign author_link = site.data.authors[page.author].url %}
+      {% elsif author_name == site.social.name %}
+        {% assign author_link = site.social.links[0] %}
       {% endif %}
 
-      <!-- read time -->
-      {% include read-time.html content=content prompt=true %}
+      {{ site.data.locales[lang].post.written_by }}
 
+      <em>
+        {% if author_link %}
+          <a href="{{ author_link }}">{{ author_name }}</a>
+        {% else %}
+        {{ author_name }}
+        {% endif %}
+      </em>
+    </span>
+
+    <div>
       <!-- page views -->
       {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
       <span>
@@ -84,6 +84,9 @@ tail_includes:
         {{ site.data.locales[lang].post.pageview_measure }}
       </span>
       {% endif %}
+
+      <!-- read time -->
+      {% include read-time.html content=content prompt=true %}
     </div>
 
   </div> <!-- .d-flex -->