improve and normalize microblog formatting

CHANGELOG.md

@@ -1,5 +1,2 @@
-- BREAKING
+- ENHANCEMENT
-  - remove `geekblogAnchorLeft`;
+  - improve and normalize microblog formatting
-    for a better spacing left-side anchors were removed
-- INTERNAL
-  - upgrade CI pipeline to use Hugo v0.74.3

layouts/posts/list.html

@@ -1,21 +1,26 @@
 {{ define "main" }}
-    {{ $dateFormat := default "January 2, 2006" .Site.Params.GeekdocDateFormat }}
+    {{ range .Paginator.Pages }}
-    {{ range sort .Paginator.Pages }}
         <article class="gdoc-markdown gdoc-post">
-            <header>
+            <header class="gdoc-post__header">
-                <h1 class="gdoc-post__title">
+                <h1 class="gdoc-post__title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h1>
-                    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+                <div class="gdoc-post__date">
-                </h1>
+                    <svg class="icon date"><use xlink:href="#date"></use></svg>
-                <div class="gdoc-post__date">{{ .Date.Format $dateFormat }}</div>
+                    <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
-            </header>
+                        {{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
-            <div>
+                        Updated on
-                {{ .Summary }}
-                {{ if .Truncated }}
-                <a class="gdoc-post__readmore" title="Read full post" href="{{ .RelPermalink }}">
-                    Read full post
-                </a>
                         {{ end }}
+                        {{ .Lastmod.Format "Jan 2, 2006" }}
+                    </time>
                 </div>
+            </header>
+            <section>
+                {{ .Summary }}
+            </section>
+            {{ if .Truncated }}
+            <div class="gdoc-post__readmore">
+                <a class="flex-inline align-center fake-link" title="Read full post" href="{{ .RelPermalink }}">Read full post</a>
+            </div>
+            {{ end }}
         </article>
     {{ end }}
 {{ end }}

layouts/posts/single.html

@@ -1,9 +1,16 @@
 {{ define "main" }}
-    {{ $dateFormat := default "January 2, 2006" .Site.Params.GeekdocDateFormat }}
     <article class="gdoc-markdown gdoc-post">
-      <header>
+      <header class="gdoc-post__header">
         <h1 class="gdoc-post__title">{{ .Title }}</h1>
-        <div class="gdoc-post__date">{{ .Date.Format $dateFormat }}</div>
+        <div class="gdoc-post__date">
+            <svg class="icon date"><use xlink:href="#date"></use></svg>
+            <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
+                {{ if ne (.Lastmod.Format "2006-01-02") (.Date.Format "2006-01-02") }}
+                Updated on
+                {{ end }}
+                {{ .Lastmod.Format "Jan 2, 2006" }}
+            </time>
+        </div>
       </header>
       <div>
         {{ partial "content" . }}

src/sass/_base.scss

@@ -35,19 +35,12 @@ h6 {
   font-weight: $body-font-weight;
   display: flex;
   align-items: center;
-
-  > code {
-    border-top: 3px solid $gray-300;
-    font-size: 0.75em !important;
-  }
 }
 
 h4,
 h5,
 h6 {
-  > code {
+  font-size: 1rem !important;
-    font-size: 0.8rem !important;
-  }
 }
 
 a {
@@ -67,6 +60,14 @@ img {
   vertical-align: middle;
 }
 
+.fake-link:hover {
+  background-image: linear-gradient($color-link, $color-link);
+  background-position: 0 100%;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  text-decoration: none;
+}
+
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -273,19 +274,37 @@ img {
 .gdoc-post {
   word-wrap: break-word;
   border-top: 1px dashed $gray-600;
-  padding-bottom: 1em;
+  padding: $padding-32 0;
   line-height: 1.5;
 
-  &__title {
+  &:first-of-type {
+    padding-top: 0;
+  }
+
+  &__header {
+    h1 {
+      margin-top: 0;
+    }
+
     a,
     a:visited {
       color: $body-font-color;
+      text-decoration: none;
+    }
+
+    a:hover {
+      background: none;
+      text-decoration: underline;
+      color: $body-font-color;
     }
   }
 
   &__date {
-    font-weight: bold;
     margin: 1em 0;
+
+    .icon {
+      font-size: 1.2em;
+    }
   }
 
   &:first-child {
@@ -297,16 +316,18 @@ img {
   }
 
   &__readmore {
-    margin-top: 1em;
+    margin: 1.5rem 0 2rem 0;
-    color: $color-link;
-    display: block;
 
-    &:visited {
+    a:after {
-      color: $color-link;
+      font-family: GeekdocIcons;
+      content: "\ea02";
     }
 
-    &:after {
+    a,
-      content: "\1f82a";
+    a:hover,
+    a:visited {
+      color: $color-link;
+      text-decoration: none !important;
     }
   }
 }

src/sass/_markdown.scss

@@ -20,24 +20,20 @@
   h4,
   h5,
   h6 {
-    font-weight: normal;
+    font-weight: 600;
-    line-height: 1em;
+
-    margin-top: 1.5em;
+    > code {
-    margin-bottom: $padding-16;
+      border-top: 3px solid $gray-300;
+      font-size: 0.75em !important;
+    }
   }
 
   h4,
   h5,
   h6 {
-    font-weight: bolder;
+    > code {
+      font-size: 0.8rem !important;
     }
-
-  h5 {
-    font-size: 0.875em;
-  }
-
-  h6 {
-    font-size: 0.75em;
   }
 
   b,

src/sass/_utils.scss

@@ -6,6 +6,10 @@
   flex: 1 1 auto;
 }
 
+.flex-inline {
+  display: inline-flex;
+}
+
 .flex-even {
   flex: 1 1;
 }