feat(blog): share

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",
+      title: name,
-      description: "Cochise Oncology",
+      description: name,
       openGraph: {
-        title: "Cochise Oncology",
+        title: name,
-        description: "Cochise Oncology",
+        description: name,
       },
     };
   }
 
-  const title = `${blog.data.title} - Cochise Oncology`;
+  const title = `${blog.data.title} - ${name}`;
 
   return {
     title: title,

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>

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).*)",
+  ],
+};

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;