From 56610009e98b22d9ba9f8e3c68fea770b2ef406c Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Wed, 4 May 2022 22:02:36 -0500
Subject: [PATCH] Add latest posts section to the bottom of every content page

---
 assets/css/bobastyle.css           | 26 ++++++++++++++------------
 i18n/en.yaml                       |  2 +-
 layouts/_default/single.html       | 16 ++++++++++------
 layouts/index.html                 |  2 +-
 layouts/partials/latest-posts.html | 21 +++++++++++++++++++++
 5 files changed, 47 insertions(+), 20 deletions(-)
 create mode 100644 layouts/partials/latest-posts.html

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index 0e2da05..c25565c 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -76,8 +76,7 @@
 }
 
 .page-list li,
-.series-taxonomy li,
-.related-posts .post {
+.series-taxonomy li {
   padding-top: 8px;
   padding-left: 24px;
   padding-right: 24px;
@@ -252,26 +251,27 @@
 
 
 /* Related posts */
-.related {
+.full-width-page-list {
   /* make left/right 0 margin so it takes up full width */
   margin: 25px 0;
 }
 
-.related > hr,
-.related > h2 {
+.full-width-page-list > hr,
+.full-width-page-list > h1 {
   margin-left: 20px;
   margin-right: 20px;
 }
 
-.related-posts .post {
+.full-width-page-list li {
   min-width: 300px;
   max-width: 300px;
 
-  /* since .related and .related-posts are both full-width with no margin */
-  margin-left: 20px;
 }
 
-.related-posts .post:last-child {
+.full-width-page-list li:first-child {
+  margin-left: 20px;
+}
+.full-width-page-list li:last-child {
   margin-right: 20px;
 }
 
@@ -280,14 +280,14 @@
    * still reaches the screen edge. then if the posts overflow and require
    * scrolling, you can see it cut off on the side of your phone screen
    */
-  .related {
+  .full-width-page-list {
     margin-left: -20px;
     margin-right: -20px;
   }
 }
 
 @media (min-width: 720px) {
-  .related {
+  .full-width-page-list {
     /* this makes it full width -- 720px max-width on body it is exactly 720px
      * so .related takes up full width
      */
@@ -296,8 +296,10 @@
   }
 }
 
-.related-posts {
+.full-width-page-list .page-list ul {
   display: flex;
+  flex-direction: row;
+  gap: 20px;
   overflow-x: scroll;
 }
 
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 286a7f9..21d72a9 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -42,7 +42,7 @@ read_more:
   other: "Read more"
 
 related_posts:
-  other: "Related posts"
+  other: "Related Posts"
 
 older_post:
   other: "Older"
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 471d7e8..da7ffbd 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -76,14 +76,18 @@
 
     {{ $related := .Site.RegularPages.Related . | first 10 }}
     {{ with $related }}
-        <div class="related">
+        <div class="related-posts full-width-page-list">
             <hr>
-            <h2>{{ i18n "related_posts" }}</h2>
-            <div class="related-posts">
-                {{ range . }}
-                    {{ .Render "summary/post" }}
-                {{ end }}
+            <h1>{{ i18n "related_posts" }}</h1>
+            <div class="page-list">
+                <ul>
+                    {{ range . }}
+                        <li>{{ .Render "summary/post" }}</li>
+                    {{ end }}
+                </ul>
             </div>
         </div>
     {{ end }}
+
+    {{ partialCached "latest-posts.html" . }}
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index 1b897b2..3d97dd8 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,7 +6,7 @@
     {{ end }}
 
     {{ if .Site.Params.homepageLatestPosts }}
-        <div class="hompage-latest-posts">
+        <div class="homepage-latest-posts">
             <hr>
             <h1>
                 {{ i18n "latest_posts" }}
diff --git a/layouts/partials/latest-posts.html b/layouts/partials/latest-posts.html
new file mode 100644
index 0000000..e6bdcd2
--- /dev/null
+++ b/layouts/partials/latest-posts.html
@@ -0,0 +1,21 @@
+<div class="latest-posts full-width-page-list">
+    <hr>
+    <h1>
+        {{ i18n "latest_posts" }}
+        {{ partial "rss-link.html" .Site.Home }}
+    </h1>
+
+    {{ with .Site.RegularPages | first 5 }}
+        <div class="page-list">
+            <ul>
+                {{ range . }}
+                    <li>{{ .Render "summary/post" }}</li>
+                {{ end }}
+            </ul>
+        </div>
+    {{ else }}
+        <div>
+            {{ i18n "no_posts" }}
+        </div>
+    {{ end }}
+</div>