From 2a9af0c1e1377e229f6587cd89fcb98ff8601a65 Mon Sep 17 00:00:00 2001
From: Nooc <nooc@nooc.me>
Date: Sun, 18 Aug 2024 21:57:24 +0800
Subject: [PATCH] Add post advertising

---
 app/[lang]/posts/[...slug]/page.tsx | 110 ++++++++++++++++------------
 dictionaries/en.ts                  |   6 ++
 dictionaries/zh.ts                  |   6 ++
 3 files changed, 75 insertions(+), 47 deletions(-)

diff --git a/app/[lang]/posts/[...slug]/page.tsx b/app/[lang]/posts/[...slug]/page.tsx
index a97b448..a0f5ff5 100644
--- a/app/[lang]/posts/[...slug]/page.tsx
+++ b/app/[lang]/posts/[...slug]/page.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import { getDictionary, languageLabels } from "@/dictionaries";
 import { SiX } from "@icons-pack/react-simple-icons";
 import { Metadata } from "next";
+import Image from "next/image";
 import classNames from "classnames";
 
 export const runtime = "edge";
@@ -72,57 +73,72 @@ export default async function PostPage({
 
   return (
     <main className="mx-auto flex items-start w-full max-w-screen-lg gap-4 px-4 py-8 relative scroll-smooth">
-      <article className="rounded-3xl p-4 pb-8 sm:p-8 border bg-white/50 dark:bg-indigo-100/5 flex flex-col md:basis-3/4 grow-0 min-w-0">
-        <h1 className="text-3xl font-serif">{post.title}</h1>
-        <div className="opacity-50 flex items-center gap-4 mt-2">
-          <div className="flex items-center gap-1">
-            <CalendarDaysIcon className="w-4 h-4" />
-            {displayDate(post.date, params.lang)}
-          </div>
-
-          {otherLanguages.length ? (
+      <div className="flex flex-col gap-4">
+        <article className="rounded-3xl p-4 pb-8 sm:p-8 border bg-white/50 dark:bg-indigo-100/5 flex flex-col md:basis-3/4 grow-0 min-w-0">
+          <h1 className="text-3xl font-serif">{post.title}</h1>
+          <div className="opacity-50 flex items-center gap-4 mt-2">
             <div className="flex items-center gap-1">
-              <LanguageIcon className="w-4 h-4" />
-              {otherLanguages.map((post) => (
-                <Link
-                  key={post.lang}
-                  className="underline"
-                  href={post.permalink}
-                >
-                  {languageLabels[post.lang]}
-                </Link>
-              ))}
+              <CalendarDaysIcon className="w-4 h-4" />
+              {displayDate(post.date, params.lang)}
             </div>
-          ) : undefined}
-        </div>
-        <p className="opacity-70 mt-2">{post.description}</p>
-        <hr className="my-4" />
-        {/* <div className="leading-loose flex flex-col gap-4">
+
+            {otherLanguages.length ? (
+              <div className="flex items-center gap-1">
+                <LanguageIcon className="w-4 h-4" />
+                {otherLanguages.map((post) => (
+                  <Link
+                    key={post.lang}
+                    className="underline"
+                    href={post.permalink}
+                  >
+                    {languageLabels[post.lang]}
+                  </Link>
+                ))}
+              </div>
+            ) : undefined}
+          </div>
+          <p className="opacity-70 mt-2">{post.description}</p>
+          <hr className="my-4" />
+          {/* <div className="leading-loose flex flex-col gap-4">
           <MDXContent code={post.content} />
         </div> */}
-        <div
-          className={classNames(
-            "prose dark:prose-invert",
-            "prose-headings:font-serif prose-headings:mt-8",
-            "prose-h1:text-xl",
-            "prose-h2:text-lg",
-            "prose-blockquote:font-normal",
-            "prose-pre:border prose-pre:rounded-xl",
-            "before:prose-p:content-none after:prose-p:content-none",
-          )}
-          dangerouslySetInnerHTML={{ __html: post.content }}
-        ></div>
-        <hr className="my-8" />
-        <div className="flex items-center gap-4">
-          <span className="opacity-50">{dictionary.labels.shareTo}</span>
-          <a
-            href={dictionary.urls.shareToX(post.title, post.permalink)}
-            target="_blank"
-          >
-            <SiX className="w-5 h-5" />
-          </a>
-        </div>
-      </article>
+          <div
+            className={classNames(
+              "prose dark:prose-invert",
+              "prose-headings:font-serif prose-headings:mt-8",
+              "prose-h1:text-xl",
+              "prose-h2:text-lg",
+              "prose-blockquote:font-normal",
+              "prose-pre:border prose-pre:rounded-xl",
+              "before:prose-p:content-none after:prose-p:content-none",
+            )}
+            dangerouslySetInnerHTML={{ __html: post.content }}
+          ></div>
+          <hr className="my-8" />
+          <div className="flex items-center gap-4">
+            <span className="opacity-50">{dictionary.labels.shareTo}</span>
+            <a
+              href={dictionary.urls.shareToX(post.title, post.permalink)}
+              target="_blank"
+            >
+              <SiX className="w-5 h-5" />
+            </a>
+          </div>
+        </article>
+        
+        <a 
+          className="flex gap-4 rounded-3xl p-4 pb-8 sm:p-8 border bg-white/50 dark:bg-indigo-100/5 md:basis-3/4 grow-0 min-w-0"
+          href={dictionary.postAdvertising.link}
+          target="_blank"
+        >
+          <Image className="rounded-xl w-16 h-16" src={dictionary.postAdvertising.icon} alt={dictionary.postAdvertising.title} />
+          <div className="flex flex-col gap-2">
+            <div className="opacity-70 text-sm">{dictionary.postAdvertising.title}</div>
+            <div className="">{dictionary.postAdvertising.description}</div>
+          </div>
+        </a>
+
+      </div>
       <section className="hidden md:flex md:basis-1/4 sticky top-28 border rounded-3xl p-4 flex-col shrink-0">
         <label className="opacity-50 mb-4">{dictionary.labels.toc}</label>
         <ul className="flex flex-col gap-2 list-disc ml-6">
diff --git a/dictionaries/en.ts b/dictionaries/en.ts
index d265b6d..cc8f345 100644
--- a/dictionaries/en.ts
+++ b/dictionaries/en.ts
@@ -208,6 +208,12 @@ A fan of Serverless.
       icon: EnvelopeIcon,
     },
   ],
+  postAdvertising: {
+    title: "Support me",
+    description: "Spark Memos is a concise note-taking app for capturing ideas, inspirations, or for later reading and book notes.",
+    icon: SparkMemosLogo,
+    link: "https://sparkmemos.com",
+  },
 };
 
 export default dictionary;
diff --git a/dictionaries/zh.ts b/dictionaries/zh.ts
index d60b2f8..fa41dbe 100644
--- a/dictionaries/zh.ts
+++ b/dictionaries/zh.ts
@@ -203,6 +203,12 @@ Serverless 爱好者。
       icon: EnvelopeIcon,
     },
   ],
+  postAdvertising: {
+    title: "支持我",
+    description: "「星火记」是一个简洁的短笔记应用，可以用来记录灵感、想法，或者是用于稍后阅读、读书笔记等。",
+    icon: SparkMemosLogo,
+    link: "https://sparkmemos.com",
+  },
 };
 
 export default dictionary;