Adding some description for opengraph

TK-Entertainment · Oct 28, 2023 · e43d47e · e43d47e
1 parent b48f086
commit e43d47e
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 14 deletions.
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
@@ -1,3 +1,4 @@
+import { type Metadata } from "next";
 import { allBlogs } from "contentlayer/generated";
 import { MDXContent } from "next-docs-ui/mdx";
 import { Content } from "@/components/content";
@@ -8,6 +9,32 @@ import { TOC } from "@/components/toc";
 import Actionbar from "@/components/Navigation/actionbar";
 import Link from "next/link";
 
+export function generateMetadata({ params }: { params: { slug?: string } }): Metadata {
+ const slug = params.slug ?? "";
+ const blog = allBlogs.find((blog) => blog.slug == params.slug);
+
+ return {
+ title: {
+ template: `Wilson's Notes | ${blog?.title}`,
+ default: "Wilson's Notes",
+ absolute: "Wilson's Notes",
+ },
+ description: blog?.description,
+ openGraph: {
+ type: "article",
+ images: blog?.image ?? "",
+ title: {
+ template: `Wilson's Notes | ${blog?.title}`,
+ absolute: "Wilson's Notes",
+ default: "Wilson's Notes",
+ },
+ authors: blog?.authors,
+ tags: blog?.tags,
+ description: blog?.description,
+ },
+ }
+};
+
 export default async function BlogSlug({
  params,
 }: {

diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
@@ -2,22 +2,24 @@ import type { Metadata } from "next";
 import type { ReactNode } from "react";
 import { RollButton } from "next-docs-ui/components/roll-button";
 
-export const metadata: Metadata = {
- title: {
- template: "Wilson's Blog | %s",
- default: "Wilson's Blog",
- absolute: "Wilson's Blog",
- },
- description: "",
- openGraph: {
- images: "",
+export function generateMetadata(): Metadata {
+ return {
  title: {
- template: "Wilson's Blog | %s",
- absolute: "Wilson's Blog",
- default: "Wilson's Blog",
+ template: "Wilson's Notes | 部落格",
+ default: "Wilson's Notes",
+ absolute: "Wilson's Notes",
  },
- description: "",
- },
+ description: "仰望星空科普專案介紹，為你帶來不同以往的科普體驗，重拾愛好自然與科學之心，讓我們一起徜徉在浩瀚星河中吧！",
+ openGraph: {
+ images: "",
+ title: {
+ template: "Wilson's Notes | 部落格",
+ absolute: "Wilson's Notes",
+ default: "Wilson's Notes",
+ },
+ description: "仰望星空科普專案介紹，為你帶來不同以往的科普體驗，重拾愛好自然與科學之心，讓我們一起徜徉在浩瀚星河中吧！",
+ },
+ }
 };
 
 export default function BlogLayout({ children }: { children: ReactNode }) {

diff --git a/app/blog/tags/[slug]/page.tsx b/app/blog/tags/[slug]/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import type { Metadata } from "next";
 import { useState, useEffect } from "react";
 import Actionbar from "@/components/Navigation/actionbar";
 import TagSidebar from "@/components/Navigation/tagsidebar";
@@ -8,6 +9,29 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 
+export function generateMetadata({ params }: { params: { slug?: string } }): Metadata {
+ const slug = params.slug ?? "";
+ const decodedTag = decodeURIComponent(slug);
+
+ return {
+ title: {
+ template: `Wilson's Notes | 標籤 > ${decodedTag}`,
+ default: "Wilson's Notes",
+ absolute: "Wilson's Notes",
+ },
+ description: "仰望星空科普專案介紹，為你帶來不同以往的科普體驗，重拾愛好自然與科學之心，讓我們一起徜徉在浩瀚星河中吧！",
+ openGraph: {
+ images: "",
+ title: {
+ template: `Wilson's Notes | 標籤 > ${decodedTag}`,
+ absolute: "Wilson's Notes",
+ default: "Wilson's Notes",
+ },
+ description: "仰望星空科普專案介紹，為你帶來不同以往的科普體驗，重拾愛好自然與科學之心，讓我們一起徜徉在浩瀚星河中吧！",
+ },
+ }
+};
+
 export default function TagSlug({ params }: { params: { slug?: string } }) {
  const postSorted = allBlogs.sort(
  (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,3 +1,4 @@
+import { type Metadata } from "next";
 import { RootProvider } from "next-docs-ui/provider";
 import { Inter } from "next/font/google";
 import type { ReactNode } from "react";
@@ -12,6 +13,26 @@ const inter = Inter({
 
 export const runtime = "edge";
 
+export function generateMetadata(): Metadata {
+ return {
+ title: {
+ template: "Wilson's Notes",
+ default: "Wilson's Notes",
+ absolute: "Wilson's Notes",
+ },
+ description: "仰望星空科普專案介紹，為你帶來不同以往的科普體驗，重拾愛好自然與科學之心，讓我們一起徜徉在浩瀚星河中吧！",
+ openGraph: {
+ images: "",
+ title: {
+ template: "Wilson's Notes",
+ absolute: "Wilson's Notes",
+ default: "Wilson's Notes",
+ },
+ description: "仰望星空科普專案介紹，為你帶來不同以往的科普體驗，重拾愛好自然與科學之心，讓我們一起徜徉在浩瀚星河中吧！",
+ },
+ }
+};
+
 export default function Layout({ children }: { children: ReactNode }) {
  return (
  <html lang="en" className={inter.className}>