From cb23d7796704cb7f51e1d348ff44ccc9799e1f91 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra 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 { + 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) { {/* End Author, Categories, Comments */} + +
+ + + + + + + + + +
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;