feat: metadata and share posts

_contents/posts/2024/05/15/first-post.md

@@ -6,7 +6,7 @@ title: "Preview Mode for Static Generation"
 description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 coverImage: "/assets/blog/preview/cover.jpg"
 ogImage:
-  url: "/assets/blog/preview/cover.jpg"
+  url: "/img/smug-me-export.png"
 ---
 
 ### Table Of Contents

src/app/_components/BlogPost/index.tsx

@@ -1,18 +1,80 @@
+"use client";
+
 import Link from "next/link";
 import "./markdown.css";
 import "./style.scss";
 import "highlight.js/styles/monokai.css";
+import {
+  BiCross,
+  BiLogoFacebook,
+  BiLogoFacebookSquare,
+  BiLogoLinkedinSquare,
+  BiLogoTwitter,
+  BiShare,
+  BiX,
+} from "react-icons/bi";
+import {
+  generateFacebookShare,
+  generateLinkedInShare,
+  generateTwitterShare,
+} from "@/lib/share";
+import { Post } from "@/interfaces/post";
+import { useState } from "react";
 
-export type BlogPostProps = {
+export type BlogPostProps = Post & {
   content: string;
-  title: string;
 };
 
 export default function BlogPost({ content, ...post }: BlogPostProps) {
+  const shareLinks = [
+    {
+      href: generateLinkedInShare({ content, ...post }),
+      title: "share on linkedin",
+      icon: <BiLogoLinkedinSquare />,
+    },
+    {
+      href: generateTwitterShare({ content, ...post }),
+      title: "share on twitter",
+      icon: <BiLogoTwitter />,
+    },
+    {
+      href: generateFacebookShare({ content, ...post }),
+      title: "share on facebook",
+      icon: <BiLogoFacebookSquare />,
+    },
+  ];
+
+  const [shareOpen, setShareOpen] = useState(false);
+
   return (
     <>
-      <article>
-        <h1 className="text-4xl mb-5 mt-12 font-bold ">
+      <article className="relative">
+        <div className="absolute right-[-4rem] -top-16 max-lg:right-0 h-full">
+          <ul className="flex flex-col gap-3 text-3xl sticky top-10 bottom-0 p-2 bg-header-bg-dark rounded-md">
+            <li className="lg:hidden">
+              <a
+                onClick={(e) => {
+                  e.preventDefault();
+                  setShareOpen((d) => !d);
+                }}
+                title="share"
+              >
+                {shareOpen ? <BiX /> : <BiShare />}
+              </a>
+            </li>
+            {shareLinks.map((d, i) => (
+              <li
+                key={`share_i_${i}`}
+                className={!shareOpen ? "max-lg:hidden" : ""}
+              >
+                <a href={d.href} title={d.title} target="_blank" rel="noopener">
+                  {d.icon}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <h1 className="text-4xl mb-5 mt-12 font-bold">
           <Link href="" className="no-underline">
             {post.title}
           </Link>
@@ -22,11 +84,11 @@ export default function BlogPost({ content, ...post }: BlogPostProps) {
           dangerouslySetInnerHTML={{ __html: content }}
         />
       </article>
-      <hr className="bg-[#4e4e57] h-[1px]" />
       <div className="post-info">
         <p></p>
       </div>
-      <div id="pagination"></div>
+
+      <div id="pagination" className="h-[1000px]"></div>
     </>
   );
 }

src/app/_components/layout/Footer/index.tsx

@@ -1,3 +1,4 @@
+import { baseURL } from "@/constants";
 import style from "./style.module.scss";
 
 const Footer = () => (
@@ -6,7 +7,7 @@ const Footer = () => (
       <div className={style.content}>
         <span>© 2024</span>
         <span>
-          <a href="https://ridhozhr10.github.io/">Ridho Azhar</a>
+          <a href={baseURL}>Ridho Azhar</a>
         </span>
         <span>
           Inspired by{" "}

src/app/posts/[...path]/page.tsx

@@ -1,5 +1,6 @@
 import BlogPost from "@/app/_components/BlogPost";
 import BaseLayout from "@/app/_components/layout/BaseLayout";
+import { baseURL } from "@/constants";
 import { getAllPosts, getPostBySlug } from "@/lib/api";
 import mdToHtml from "@/lib/markdown";
 import { Metadata } from "next";
@@ -20,7 +21,7 @@ export default async function Post({ params }: Props) {
   return (
     <BaseLayout logoText="cat ./content.txt | less ">
       <main className="post">
-        <BlogPost content={content} title={post.title} />
+        <BlogPost {...post} content={content} />
       </main>
     </BaseLayout>
   );
@@ -37,9 +38,17 @@ export function generateMetadata({ params }: Props): Metadata {
 
   return {
     title,
+    description: post.description,
+    robots: { follow: true, index: true },
     openGraph: {
       title,
+      url: `${baseURL}/posts/${post.path.join("/")}`,
+      description: post.description,
       images: [post.ogImage.url],
+      type: "article",
+      authors: "ridhozhr10.github.io",
+      publishedTime: post.created_at,
+      modifiedTime: post.updated_at,
     },
   };
 }

src/constants.ts

@@ -0,0 +1 @@
+export const baseURL = "https://ridhozhr10.github.io";

src/interfaces/post.ts

@@ -4,13 +4,14 @@ export type Post = {
 
   created_at: string;
   updated_at?: string;
-  
+
   title: string;
   description: string;
-  coverImage: string;
+  excerpt?: string;
+  coverImage?: string;
   ogImage: {
     url: string;
   };
 
   content: string;
-};
+};

src/lib/share.ts

@@ -0,0 +1,19 @@
+import { baseURL } from "@/constants";
+import { Post } from "@/interfaces/post";
+
+export function generateLinkedInShare(post: Post): string {
+  const url = `${baseURL}/posts/${post.path.join("/")}`;
+  return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI(
+    url
+  )}`;
+}
+
+export function generateTwitterShare(post: Post): string {
+  const url = `${baseURL}/posts/${post.path.join("/")}`;
+  return `https://twitter.com/intent/tweet/?url=${encodeURI(url)}`;
+}
+
+export function generateFacebookShare(post: Post): string {
+  const url = `${baseURL}/posts/${post.path.join("/")}`;
+  return `https://facebook.com/sharer/sharer.php?u=${encodeURI(url)}`;
+}