Add CassetteOne advertisement

app/[lang]/posts/[...slug]/Advertising.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { Dictionary, getDictionary, Language } from "@/dictionaries";
+import { getRandomElement } from "@/lib/array";
+import Image from 'next/image';
+import { useMemo } from "react";
+
+export function PostAdvertising({advertisements}: {advertisements: Dictionary["postAdvertisements"]}) {
+  const advertisement = useMemo(() => getRandomElement(advertisements), [advertisements]);
+
+  return <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={advertisement.link}
+          target="_blank"
+        >
+          <Image className="rounded-xl w-16 h-16" src={advertisement.icon} alt={advertisement.title} />
+          <div className="flex flex-col gap-2">
+            <div className="opacity-70 text-sm">{advertisement.title}</div>
+            <div className="">{advertisement.description}</div>
+          </div>
+        </a>
+}

app/[lang]/posts/[...slug]/page.tsx

@@ -3,11 +3,11 @@ import { CalendarDaysIcon, LanguageIcon } from "@heroicons/react/24/solid";
 import { displayDate } from "@/lib/date";
 import { notFound } from "next/navigation";
 import Link from "next/link";
-import { getDictionary, languageLabels } from "@/dictionaries";
+import { getDictionary, Language, languageLabels } from "@/dictionaries";
 import { SiX } from "@icons-pack/react-simple-icons";
 import { Metadata } from "next";
-import Image from "next/image";
 import classNames from "classnames";
+import { PostAdvertising } from "./Advertising";
 
 export const runtime = "edge";
 
@@ -53,7 +53,7 @@ export default async function PostPage({
   params,
 }: {
   params: {
-    lang: string;
+    lang: Language;
     slug: string[];
   };
 }) {
@@ -127,17 +127,7 @@ export default async function PostPage({
           </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>
+        <PostAdvertising advertisements={dictionary.postAdvertisements} />
 
       </div>
       <section className="hidden md:flex md:basis-1/4 sticky top-28 border rounded-3xl p-4 flex-col shrink-0">

dictionaries/en.ts

@@ -217,12 +217,20 @@ 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",
-  },
+  postAdvertisements:[
+    {
+      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",
+    },
+    {
+      title: "Support me",
+      description: "CassetteOne is a retro design cassette white noise and music player for iOS.",
+      icon: CassetteOneLogo,
+      link: "https://cassette.one",
+    },
+  ],
 };
 
 export default dictionary;

dictionaries/index.ts

@@ -10,6 +10,8 @@ export const languageLabels = {
   zh: "中文",
 };
 
+export type Dictionary = Awaited<ReturnType<typeof dictionaries[keyof typeof dictionaries]>>;
+
 export type Language = keyof typeof languageLabels;
 
 export const dictionaryKeys = Object.keys(dictionaries);

dictionaries/zh.ts

@@ -212,12 +212,20 @@ Serverless 爱好者。
       icon: EnvelopeIcon,
     },
   ],
-  postAdvertising: {
-    title: "支持我",
-    description: "「星火记」是一个简洁的短笔记应用，可以用来记录灵感、想法，或者是用于稍后阅读、读书笔记等。",
-    icon: SparkMemosLogo,
-    link: "https://sparkmemos.com",
-  },
+  postAdvertisements: [
+    {
+      title: "支持我",
+      description: "「星火记」是一个简洁的短笔记应用，可以用来记录灵感、想法，或者是用于稍后阅读、读书笔记等。",
+      icon: SparkMemosLogo,
+      link: "https://sparkmemos.com",
+    },
+    {
+      title: "支持我",
+      description: "「CassetteOne」是一个模拟磁带机设计的复古风格白噪音和音乐播放器。",
+      icon: CassetteOneLogo,
+      link: "https://cassette.one",
+    }
+  ],
 };
 
 export default dictionary;

lib/array.ts

@@ -10,3 +10,7 @@ export function shuffleArray<T>(array: T[]): T[] {
   }
   return arrayToShuffle;
 }
+
+export function getRandomElement<T>(array: T[]): T {
+  return array[Math.floor(Math.random() * array.length)];
+}