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;