blog overhaul

reednel · Aug 11, 2023 · 793608f · 793608f
1 parent f1b6965
commit 793608f
Show file tree

Hide file tree

Showing 14 changed files with 53 additions and 168 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",
     "drink_folder": "drink"
@@ -26,6 +26,6 @@
   "metadata": {
     "meta_author": "reednel",
     "meta_image": "/images/og-image.png",
-    "meta_description": "Reed Nelson's perosnal website"
+    "meta_description": "A place with things."
   }
 }
diff --git a/src/config/social.json b/src/config/social.json
@@ -3,12 +3,12 @@
     {
       "name": "github",
       "icon": "FaGithub",
-      "link": "https://www.github.com/"
+      "link": "https://www.github.com/reednel"
     },
     {
       "name": "linkedin",
       "icon": "FaLinkedin",
-      "link": "https://www.linkedin.com/"
+      "link": "https://www.linkedin.com/in/reednel/"
     }
   ]
 }
diff --git a/src/layouts/PostSingle.astro → src/layouts/BlogPostSingle.astro b/src/layouts/PostSingle.astro → src/layouts/BlogPostSingle.astro
@@ -39,12 +39,16 @@ 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">
             <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"} />
             {
@@ -56,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 />
@@ -73,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={`/tags/${slugify(tag)}`}
+                      href={`blog/tags/${slugify(tag)}`}
                     >
-                      {humanize(tag)}
+                      {tag}
                     </a>
                   </li>
                 ))
@@ -95,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>
+    {
+      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/BlogCard.astro b/src/layouts/components/BlogCard.astro
@@ -9,7 +9,7 @@ const {
   blog_folder,
 }: { summary_length: number; blog_folder: string } = config.settings;
 const { data } = Astro.props;
-const { title, image, date, author, categories } = data.data;
+const { title, image, description, author, categories } = data.data;
 ---
 
 <div class="bg-body dark:bg-darkmode-body">
@@ -47,7 +47,8 @@ const { title, image, date, author, categories } = data.data;
       }
     </li>
   </ul>
-  <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
+  <!-- <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p> -->
+  <p class="mb-6">{description}</p>
   <a
     class="btn btn-outline-primary btn-sm"
     href={`/${blog_folder}/${data.slug}`}

diff --git a/src/layouts/components/Breadcrumbs.astro b/src/layouts/components/Breadcrumbs.astro
@@ -6,7 +6,7 @@ const { className }: { className?: string } = Astro.props;
 const paths = Astro.url.pathname.split("/").filter((x) => x);
 let parts = [
   {
-    label: "Home",
+    label: "home",
     href: "/",
     "aria-label": Astro.url.pathname === "/" ? "page" : undefined,
   },
@@ -16,7 +16,7 @@ paths.forEach((label: string, i: number) => {
   const href = `/${paths.slice(0, i + 1).join("/")}`;
   label !== "page" &&
     parts.push({
-      label: humanize(label.replace(/[-_]/g, " ")) || "",
+      label: label.replace(/[-_]/g, " ") || "",
       href,
       "aria-label": Astro.url.pathname === href ? "page" : undefined,
     });
@@ -27,7 +27,7 @@ paths.forEach((label: string, i: number) => {
   <ol class="inline-flex" role="list">
     {
       parts.map(({ label, ...attrs }, index) => (
-        <li class="mx-1 capitalize" role="listitem">
+        <li class="mx-1" role="listitem">
           {index > 0 && <span class="inlin-block mr-1">/</span>}
           {index !== parts.length - 1 ? (
             <a class="text-primary dark:text-darkmode-primary" {...attrs}>

diff --git a/src/layouts/components/DrinkCard.astro b/src/layouts/components/DrinkCard.astro
@@ -26,9 +26,7 @@ const { title, image, date, author, categories } = data.data;
     )
   }
   <h4 class="mb-3">
-    <a href={`/${drink_folder}/${data.slug}`}>
-      {title}
-    </a>
+    {title}
   </h4>
   <ul class="mb-4">
     <li class="mr-4 inline-block">
@@ -48,10 +46,4 @@ const { title, image, date, author, categories } = data.data;
     </li>
   </ul>
   <p class="mb-6">{plainify(data.body?.slice(0, Number(summary_length)))}</p>
-  <a
-    class="btn btn-outline-primary btn-sm"
-    href={`/${drink_folder}/${data.slug}`}
-  >
-    read more
-  </a>
 </div>
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"

diff --git a/src/layouts/partials/BlogSidebar.astro b/src/layouts/partials/BlogSidebar.astro
@@ -41,9 +41,9 @@ const { tags, categories, allCategories } = Astro.props;
               <li class="inline-block">
                 <a
                   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}`}
+                  href={`/blog/tags/${tag}`}
                 >
-                  {humanize(tag)}
+                  {tag}
                 </a>
               </li>
             );

diff --git a/src/layouts/partials/DrinkSidebar.astro b/src/layouts/partials/DrinkSidebar.astro
@@ -41,9 +41,9 @@ const { tags, categories, allCategories } = Astro.props;
               <li class="inline-block">
                 <a
                   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={`drink/tags/${tag}`}
+                  href={`/drink/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 PostSingle from "@/layouts/PostSingle.astro";
+import BlogPostSingle from "@/layouts/BlogPostSingle.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}
 >
-  <PostSingle post={post} />
+  <BlogPostSingle post={post} />
 </Base>
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>

diff --git a/src/pages/drink/[single].astro b/src/pages/drink/[single].astro
diff --git a/src/pages/drink/page/[slug].astro b/src/pages/drink/page/[slug].astro
diff --git a/src/pages/drink/tags/index.astro b/src/pages/drink/tags/index.astro
@@ -24,7 +24,7 @@ const allTags = await getAllTaxonomy(drink_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>