Add latest posts section to the bottom of every content page

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;
 }
 

i18n/en.yaml

@@ -42,7 +42,7 @@ read_more:
   other: "Read more"
 
 related_posts:
-  other: "Related posts"
+  other: "Related Posts"
 
 older_post:
   other: "Older"

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 }}

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" }}

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>