overhaul blog

reednel · Aug 11, 2023 · 64d08f4 · 64d08f4
1 parent d3b7b7a
commit 64d08f4
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 47 deletions.
diff --git a/src/config/config.json b/src/config/config.json
@@ -17,7 +17,7 @@
     "sticky_header": false,
     "theme_switcher": true,
     "default_theme": "system",
-    "pagination": 2,
+    "pagination": 4,
     "summary_length": 200,
     "blog_folder": "blog"
   },

diff --git a/src/layouts/BlogPostSingle.astro → src/layouts/BlogSingle.astro b/src/layouts/BlogPostSingle.astro → src/layouts/BlogSingle.astro
@@ -39,13 +39,15 @@ const { title, description, author, categories, image, date, tags } = post.data;
             </div>
           )
         }
-        <h1 set:html={markdownify(title)} class="h2 mb-4" />
+        <h1 set:html={markdownify(title)} class="mb-4" />
         <ul class="mb-4">
           <li class="mr-4 inline-block">
-            <a href={`/authors/${slugify(author)}`}>
-              <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
-              {humanize(author)}
-            </a>
+            <FaRegUserCircle className={"mr-2 -mt-1 inline-block"} />
+            {humanize(author)}
+          </li>
+          <li class="mr-4 inline-block">
+            <FaRegClock className={"mr-2 -mt-1 inline-block"} />
+            {dateFormat(date)}
           </li>
           <li class="mr-4 inline-block">
             <FaRegFolder className={"mr-2 -mt-1 inline-block"} />
@@ -58,10 +60,6 @@ const { title, description, author, categories, image, date, tags } = post.data;
               ))
             }
           </li>
-          <li class="mr-4 inline-block">
-            <FaRegClock className={"mr-2 -mt-1 inline-block"} />
-            {dateFormat(date)}
-          </li>
         </ul>
         <div class="content mb-10">
           <Content />
@@ -75,9 +73,9 @@ const { title, description, author, categories, image, date, tags } = post.data;
                   <li class="inline-block">
                     <a
                       class="m-1 block rounded bg-theme-light px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-theme-light dark:hover:bg-darkmode-primary dark:hover:text-dark"
-                      href={`/blog/tags/${slugify(tag)}`}
+                      href={`blog/tags/${slugify(tag)}`}
                     >
-                      {humanize(tag)}
+                      {tag}
                     </a>
                   </li>
                 ))
@@ -97,18 +95,21 @@ const { title, description, author, categories, image, date, tags } = post.data;
       </article>
     </div>
 
-    <!-- Related posts -->
-    <div class="section pb-0">
-      <h2 class="h3 mb-12 text-center">Related Posts</h2>
-      <div class="row justify-center">
-        {
-          similarPosts.map((post) => (
-            <div class="lg:col-4">
-              <BlogCard data={post} />
-            </div>
-          ))
-        }
-      </div>
-    </div>
-  </div>
-</section>
+    {
+      similarPosts.length > 0 && (
+        <!-- Related posts -->
+        <div class="section pb-0">
+          <h2 class="h3 mb-12 text-center">Related Posts</h2>
+          <div class="row justify-center">
+            {
+              similarPosts.slice(0, 3).map((post) => (
+                <div class="lg:col-4">
+                  <BlogCard data={post} />
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      )
+    }
+</section>
diff --git a/src/layouts/components/Share.astro b/src/layouts/components/Share.astro
@@ -1,8 +1,8 @@
 ---
 import config from "@/config/config.json";
 import {
+  IoMail,
   IoLogoFacebook,
-  IoLogoLinkedin,
   IoLogoPinterest,
   IoLogoTwitter,
 } from "react-icons/io5/index.js";
@@ -18,6 +18,15 @@ const {
 ---
 
 <ul class={`${className}`}>
+  <li class="inline-block">
+    <a href=`mailto:?subject=Article: ${title}&amp;body=Check out this article: ${base_url}/${slug}%0D%0A%0D%0AAbstract:%0D%0A${description}`
+       title="Share by Email"
+       target="_blank"
+      rel="noreferrer noopener"
+    >
+      <IoMail />
+    </a>
+  </li>
   <li class="inline-block">
     <a
       aria-label="facebook share button"
@@ -38,16 +47,6 @@ const {
       <IoLogoTwitter />
     </a>
   </li>
-  <li class="inline-block">
-    <a
-      aria-label="linkedin share button"
-      href={`https://www.linkedin.com/shareArticle?mini=true&url=${base_url}/${slug}&title=${title}&summary=${description}&source=${base_url}`}
-      target="_blank"
-      rel="noreferrer noopener"
-    >
-      <IoLogoLinkedin />
-    </a>
-  </li>
   <li class="inline-block">
     <a
       aria-label="pinterest share button"
@@ -58,4 +57,4 @@ const {
       <IoLogoPinterest />
     </a>
   </li>
-</ul>
+</ul>
diff --git a/src/layouts/partials/PostSidebar.astro → src/layouts/partials/BlogSidebar.astro b/src/layouts/partials/PostSidebar.astro → src/layouts/partials/BlogSidebar.astro
@@ -43,7 +43,7 @@ const { tags, categories, allCategories } = Astro.props;
                   class="m-1 block rounded bg-white px-3 py-1 hover:bg-primary hover:text-white dark:bg-darkmode-body dark:hover:bg-darkmode-primary dark:hover:text-dark"
                   href={`/blog/tags/${tag}`}
                 >
-                  {humanize(tag)}
+                  {tag}
                 </a>
               </li>
             );

diff --git a/src/pages/blog/[single].astro b/src/pages/blog/[single].astro
@@ -1,7 +1,7 @@
 ---
 import config from "@/config/config.json";
 import Base from "@/layouts/Base.astro";
-import BlogPostSingle from "@/layouts/BlogPostSingle.astro";
+import BlogSingle from "@/layouts/BlogSingle.astro";
 import { getSinglePage } from "@/lib/contentParser.astro";
 
 export async function getStaticPaths() {
@@ -26,5 +26,5 @@ const { title, meta_title, description, image } = post.data;
   description={description}
   image={image}
 >
-  <BlogPostSingle post={post} />
+  <BlogSingle post={post} />
 </Base>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -7,7 +7,7 @@ import { getSinglePage } from "@/lib/contentParser.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { sortByDate } from "@/lib/utils/sortFunctions";
 import PageHeader from "@/partials/PageHeader.astro";
-import PostSidebar from "@/partials/PostSidebar.astro";
+import BlogSidebar from "@/partials/BlogSidebar.astro";
 import { getEntryBySlug } from "astro:content";
 
 const { blog_folder } = config.settings;
@@ -50,7 +50,7 @@ const currentPosts = sortedPosts.slice(0, config.settings.pagination);
         </div>
 
         <!-- sidebar -->
-        <PostSidebar
+        <BlogSidebar
           categories={categories}
           tags={tags}
           allCategories={allCategories}

diff --git a/src/pages/blog/page/[slug].astro b/src/pages/blog/page/[slug].astro
@@ -7,7 +7,7 @@ import { getSinglePage } from "@/lib/contentParser.astro";
 import { getAllTaxonomy, getTaxonomy } from "@/lib/taxonomyParser.astro";
 import { sortByDate } from "@/lib/utils/sortFunctions";
 import PageHeader from "@/partials/PageHeader.astro";
-import PostSidebar from "@/partials/PostSidebar.astro";
+import BlogSidebar from "@/partials/BlogSidebar.astro";
 import { getEntryBySlug } from "astro:content";
 
 const { blog_folder } = config.settings;
@@ -69,7 +69,7 @@ export async function getStaticPaths() {
         </div>
 
         <!-- sidebar -->
-        <PostSidebar
+        <BlogSidebar
           categories={categories}
           tags={tags}
           allCategories={allCategories}

diff --git a/src/pages/blog/tags/index.astro b/src/pages/blog/tags/index.astro
@@ -24,7 +24,7 @@ const allTags = await getAllTaxonomy(blog_folder, "tags");
                   href={`/blog/tags/${tag}`}
                   class="block rounded bg-theme-light px-4 py-2 text-xl text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark"
                 >
-                  {humanize(tag)}{" "}
+                  {tag}{" "}
                   <span class="ml-2 rounded bg-body px-2 dark:bg-darkmode-body">
                     {count}
                   </span>