From cb23d7796704cb7f51e1d348ff44ccc9799e1f91 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Wed, 12 Feb 2025 10:42:17 +0700
Subject: [PATCH] feat(blog): share

---
 src/app/(main)/blog/[slug]/page.tsx | 11 +++---
 src/components/Blogs/BlogDetail.tsx | 22 ++++++++++++
 src/middleware.ts                   | 34 ++++++++++++++++++
 src/payload-types.ts                | 54 +++++++++++++++++++++++++++++
 4 files changed, 116 insertions(+), 5 deletions(-)
 create mode 100644 src/middleware.ts

diff --git a/src/app/(main)/blog/[slug]/page.tsx b/src/app/(main)/blog/[slug]/page.tsx
index 9b29800..0003646 100644
--- a/src/app/(main)/blog/[slug]/page.tsx
+++ b/src/app/(main)/blog/[slug]/page.tsx
@@ -5,21 +5,22 @@ import Image from "next/image";
 import { Suspense } from "react";
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const name = "Cochise Oncology";
   const slug = (await params).slug;
   const blog = await fetchBlogDetail(slug);
 
   if (!blog) {
     return {
-      title: "Cochise Oncology",
-      description: "Cochise Oncology",
+      title: name,
+      description: name,
       openGraph: {
-        title: "Cochise Oncology",
-        description: "Cochise Oncology",
+        title: name,
+        description: name,
       },
     };
   }
 
-  const title = `${blog.data.title} - Cochise Oncology`;
+  const title = `${blog.data.title} - ${name}`;
 
   return {
     title: title,
diff --git a/src/components/Blogs/BlogDetail.tsx b/src/components/Blogs/BlogDetail.tsx
index 9171599..745c0a5 100644
--- a/src/components/Blogs/BlogDetail.tsx
+++ b/src/components/Blogs/BlogDetail.tsx
@@ -1,6 +1,8 @@
 import { fetchBlogDetail } from "@/services/payload/blog";
 import { RichText } from "@payloadcms/richtext-lexical/react";
+import { headers } from "next/headers";
 import Image from "next/image";
+import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
 
 export interface BlogDetailProps {
   slug: string;
@@ -8,6 +10,14 @@ export interface BlogDetailProps {
 
 export default async function BlogDetail({ slug }: BlogDetailProps) {
   const data = await fetchBlogDetail(slug);
+  const headersList = await headers();
+  const fullUrl = headersList.get("x-full-url");
+
+  const shareUrl = {
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${fullUrl}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${fullUrl}`,
+    twitter: `https://twitter.com/intent/tweet?url=${fullUrl}`,
+  };
 
   if (!data) return <></>;
 
@@ -32,6 +42,18 @@ export default async function BlogDetail({ slug }: BlogDetailProps) {
                 </div>
               </div>
               {/* End Author, Categories, Comments */}
+
+              <div className="flex justify-center space-x-5 mt-8 wow fadeIn">
+                <a className="cursor-pointer" href={shareUrl["facebook"]} target="_blank">
+                  <FaFacebook className="text-2xl text-gray-300" />
+                </a>
+                <a className="cursor-pointer" href={shareUrl["linkedin"]} target="_blank">
+                  <FaLinkedin className="text-2xl text-gray-300" />
+                </a>
+                <a className="cursor-pointer" href={shareUrl["twitter"]} target="_blank">
+                  <FaTwitter className="text-2xl text-gray-300" />
+                </a>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..bb27fd2
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,34 @@
+// middleware.ts
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+// the following code is taken from : https://nextjs.org/docs/advanced-features/middleware#setting-headers
+export function middleware(request: NextRequest) {
+  const protocol = request.headers.get("x-forwarded-proto") || "http"; // Default to 'http' if not provided
+  const host = request.headers.get("x-forwarded-host") || request.nextUrl.hostname;
+  const path = request.nextUrl.pathname + request.nextUrl.search;
+  // Construct the full URL
+  const fullUrl = `${protocol}://${host}${path}`;
+  request.headers.set("x-full-url", fullUrl);
+
+  return NextResponse.next({
+    request: {
+      // New request headers
+      headers: request.headers,
+    },
+  });
+}
+
+// the following code has been copied from https://nextjs.org/docs/advanced-features/middleware#matcher
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
+     */
+    "/((?!api|_next/static|_next/image|assets|sw.js|favicon.ico|sitemap.xml|robots.txt).*)",
+  ],
+};
diff --git a/src/payload-types.ts b/src/payload-types.ts
index 56dede4..19120e2 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -6,6 +6,60 @@
  * and re-run `payload generate:types` to regenerate this file.
  */
 
+/**
+ * Supported timezones in IANA format.
+ *
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "supportedTimezones".
+ */
+export type SupportedTimezones =
+  | 'Pacific/Midway'
+  | 'Pacific/Niue'
+  | 'Pacific/Honolulu'
+  | 'Pacific/Rarotonga'
+  | 'America/Anchorage'
+  | 'Pacific/Gambier'
+  | 'America/Los_Angeles'
+  | 'America/Tijuana'
+  | 'America/Denver'
+  | 'America/Phoenix'
+  | 'America/Chicago'
+  | 'America/Guatemala'
+  | 'America/New_York'
+  | 'America/Bogota'
+  | 'America/Caracas'
+  | 'America/Santiago'
+  | 'America/Buenos_Aires'
+  | 'America/Sao_Paulo'
+  | 'Atlantic/South_Georgia'
+  | 'Atlantic/Azores'
+  | 'Atlantic/Cape_Verde'
+  | 'Europe/London'
+  | 'Europe/Berlin'
+  | 'Africa/Lagos'
+  | 'Europe/Athens'
+  | 'Africa/Cairo'
+  | 'Europe/Moscow'
+  | 'Asia/Riyadh'
+  | 'Asia/Dubai'
+  | 'Asia/Baku'
+  | 'Asia/Karachi'
+  | 'Asia/Tashkent'
+  | 'Asia/Calcutta'
+  | 'Asia/Dhaka'
+  | 'Asia/Almaty'
+  | 'Asia/Jakarta'
+  | 'Asia/Bangkok'
+  | 'Asia/Shanghai'
+  | 'Asia/Singapore'
+  | 'Asia/Tokyo'
+  | 'Asia/Seoul'
+  | 'Australia/Sydney'
+  | 'Pacific/Guam'
+  | 'Pacific/Noumea'
+  | 'Pacific/Auckland'
+  | 'Pacific/Fiji';
+
 export interface Config {
   auth: {
     users: UserAuthOperations;