init

app/BaiDuAnalytics.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import Script from "next/script";
+
+const BaiDuAnalytics = () => {
+  return (
+    <>
+      {process.env.NEXT_PUBLIC_BAIDU_TONGJI ? (
+        <>
+          <Script
+            id="baidu-tongji"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+              var _hmt = _hmt || [];
+              (function() {
+                var hm = document.createElement("script");
+                hm.src = "https://hm.baidu.com/hm.js?${process.env.NEXT_PUBLIC_BAIDU_TONGJI}";
+                var s = document.getElementsByTagName("script")[0]; 
+                s.parentNode.insertBefore(hm, s);
+              })();
+            `,
+            }}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default BaiDuAnalytics;

app/GoogleAdsense.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import Script from "next/script";
+
+const GoogleAdsense = () => {
+  return (
+    <>
+      {process.env.NEXT_PUBLIC_GOOGLE_ADSENSE_ID ? (
+        <>
+          <Script
+            async
+            src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-${process.env.NEXT_PUBLIC_GOOGLE_ADSENSE_ID}`}
+            crossOrigin="anonymous"
+            strategy="afterInteractive"
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default GoogleAdsense;

app/GoogleAnalytics.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import Script from "next/script";
+import * as gtag from "../gtag.js";
+
+const GoogleAnalytics = () => {
+  return (
+    <>
+      {gtag.GA_TRACKING_ID ? (
+        <>
+          <Script
+            strategy="afterInteractive"
+            src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+          />
+          <Script
+            id="gtag-init"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = window.dataLayer || [];
+                function gtag(){dataLayer.push(arguments);}
+                gtag('js', new Date());
+                gtag('config', '${gtag.GA_TRACKING_ID}', {
+                page_path: window.location.pathname,
+                });
+              `,
+            }}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default GoogleAnalytics;

app/PlausibleAnalytics.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Script from "next/script";
+
+// 你可以将域名放在环境变量中，这里先直接使用你提供的域名
+const PLAUSIBLE_DOMAIN = process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN;
+const PLAUSIBLE_SRC = process.env.NEXT_PUBLIC_PLAUSIBLE_SRC;
+
+const PlausibleAnalytics = () => {
+  return (
+    <>
+      {PLAUSIBLE_DOMAIN ? (
+        <>
+          <Script
+            strategy="afterInteractive"
+            data-domain={PLAUSIBLE_DOMAIN}
+            src={PLAUSIBLE_SRC}
+            defer
+          />
+          <Script
+            id="plausible-init"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.plausible = window.plausible || function() { 
+                  (window.plausible.q = window.plausible.q || []).push(arguments) 
+                }
+              `,
+            }}
+          />
+        </>
+      ) : (
+        <></>
+      )}
+    </>
+  );
+};
+
+export default PlausibleAnalytics;

app/[locale]/about/page.tsx

@@ -0,0 +1,78 @@
+import MDXComponents from "@/components/mdx/MDXComponents";
+import { Locale, LOCALES } from "@/i18n/routing";
+import { constructMetadata } from "@/lib/metadata";
+import fs from "fs/promises";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { MDXRemote } from "next-mdx-remote-client/rsc";
+import path from "path";
+import remarkGfm from "remark-gfm";
+
+const options = {
+  parseFrontmatter: true,
+  mdxOptions: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [],
+  },
+};
+
+async function getMDXContent(locale: string) {
+  const filePath = path.join(
+    process.cwd(),
+    "content",
+    "about",
+    `${locale}.mdx`
+  );
+  try {
+    const content = await fs.readFile(filePath, "utf-8");
+    return content;
+  } catch (error) {
+    console.error(`Error reading MDX file: ${error}`);
+    return "";
+  }
+}
+
+type Params = Promise<{
+  locale: string;
+}>;
+
+type MetadataProps = {
+  params: Params;
+};
+
+export async function generateMetadata({
+  params,
+}: MetadataProps): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "About" });
+
+  return constructMetadata({
+    page: "About",
+    title: t("title"),
+    description: t("description"),
+    locale: locale as Locale,
+    path: `/about`,
+    canonicalUrl: `/about`,
+  });
+}
+
+export default async function AboutPage({ params }: { params: Params }) {
+  const { locale } = await params;
+  const content = await getMDXContent(locale);
+
+  return (
+    <article className="w-full md:w-3/5 px-2 md:px-12">
+      <MDXRemote
+        source={content}
+        components={MDXComponents}
+        options={options}
+      />
+    </article>
+  );
+}
+
+export async function generateStaticParams() {
+  return LOCALES.map((locale) => ({
+    locale,
+  }));
+}

app/[locale]/blog/BlogCard.tsx

@@ -0,0 +1,31 @@
+import { Link as I18nLink } from "@/i18n/routing";
+import { BlogPost } from "@/types/blog";
+import dayjs from "dayjs";
+import Image from "next/image";
+
+export function BlogCard({ post, locale }: { post: BlogPost; locale: string }) {
+  return (
+    <I18nLink
+      href={`/blog${post.slug}`}
+      prefetch={false}
+      className="bg-transparent rounded-lg hover:underline"
+    >
+      <div className="relative rounded shadow-md  pt-[56.25%]">
+        <Image
+          src={post.image || "/placeholder.svg"}
+          alt={post.title}
+          fill
+          className="object-cover shadow-sm w-full rounded hover:shadow-lg transition-shadow duration-200 h-[200p]"
+        />
+      </div>
+      <div className="py-3 flex-1 flex flex-col">
+        <h2 className="text-lg font-500 line-clamp-2 flex-grow">
+          {post.title}
+        </h2>
+        <p className="text-gray-600 dark:text-gray-400 text-sm mt-2">
+          {dayjs(post.date).format("YYYY-MM-DD")}
+        </p>
+      </div>
+    </I18nLink>
+  );
+}

app/[locale]/blog/[slug]/page.tsx

@@ -0,0 +1,103 @@
+import { Callout } from "@/components/mdx/Callout";
+import MDXComponents from "@/components/mdx/MDXComponents";
+import { Locale, LOCALES } from "@/i18n/routing";
+import { getPosts } from "@/lib/getBlogs";
+import { constructMetadata } from "@/lib/metadata";
+import { BlogPost } from "@/types/blog";
+import { Metadata } from "next";
+import { MDXRemote } from "next-mdx-remote-client/rsc";
+import { notFound } from "next/navigation";
+
+type Params = Promise<{
+  locale: string;
+  slug: string;
+}>;
+
+type MetadataProps = {
+  params: Params;
+};
+
+export async function generateMetadata({
+  params,
+}: MetadataProps): Promise<Metadata> {
+  const { locale, slug } = await params;
+  let { posts }: { posts: BlogPost[] } = await getPosts(locale);
+  const post = posts.find((post) => post.slug === "/" + slug);
+
+  if (!post) {
+    return constructMetadata({
+      title: "404",
+      description: "Page not found",
+      noIndex: true,
+      locale: locale as Locale,
+      path: `/blog/${slug}`,
+      canonicalUrl: `/blog/${slug}`,
+    });
+  }
+
+  return constructMetadata({
+    page: "blog",
+    title: post.title,
+    description: post.description,
+    images: post.image ? [post.image] : [],
+    locale: locale as Locale,
+    path: `/blog/${slug}`,
+    canonicalUrl: `/blog/${slug}`,
+  });
+}
+
+export default async function BlogPage({ params }: { params: Params }) {
+  const { locale, slug } = await params;
+  let { posts }: { posts: BlogPost[] } = await getPosts(locale);
+
+  const post = posts.find((item) => item.slug === "/" + slug);
+
+  if (!post) {
+    return notFound();
+  }
+
+  return (
+    <div className="w-full md:w-3/5 px-2 md:px-12">
+      <h1 className="break-words text-4xl font-bold mt-6 mb-4">{post.title}</h1>
+      {post.image && (
+        <img src={post.image} alt={post.title} className="rounded-sm" />
+      )}
+      {post.tags && post.tags.split(",").length ? (
+        <div className="flex flex-wrap gap-2">
+          {post.tags.split(",").map((tag) => {
+            return (
+              <div
+                key={tag}
+                className={`rounded-md bg-gray-200 hover:!no-underline dark:bg-[#24272E] flex px-2.5 py-1.5 text-sm font-medium transition-colors hover:text-black hover:dark:bg-[#15AFD04C] hover:dark:text-[#82E9FF] text-gray-500 dark:text-[#7F818C] outline-none focus-visible:ring transition`}
+              >
+                {tag.trim()}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        <></>
+      )}
+      {post.description && <Callout>{post.description}</Callout>}
+      <MDXRemote source={post?.content || ""} components={MDXComponents} />
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  let posts = (await getPosts()).posts;
+
+  // Filter out posts without a slug
+  posts = posts.filter((post) => post.slug);
+
+  return LOCALES.flatMap((locale) =>
+    posts.map((post) => {
+      const slugPart = post.slug.replace(/^\//, "").replace(/^blog\//, "");
+
+      return {
+        locale,
+        slug: slugPart,
+      };
+    })
+  );
+}

app/[locale]/blog/page.tsx

@@ -0,0 +1,51 @@
+import { BlogCard } from "@/app/[locale]/blog/BlogCard";
+import { Locale, LOCALES } from "@/i18n/routing";
+import { getPosts } from "@/lib/getBlogs";
+import { constructMetadata } from "@/lib/metadata";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+
+type Params = Promise<{ locale: string }>;
+
+type MetadataProps = {
+  params: Params;
+};
+
+export async function generateMetadata({
+  params,
+}: MetadataProps): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "Blog" });
+
+  return constructMetadata({
+    page: "Blog",
+    title: t("title"),
+    description: t("description"),
+    locale: locale as Locale,
+    path: `/blog`,
+    canonicalUrl: `/blog`,
+  });
+}
+
+export default async function Page({ params }: { params: Params }) {
+  const { locale } = await params;
+  const { posts } = await getPosts(locale);
+
+  const t = await getTranslations("Blog");
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <h1 className="text-4xl font-bold mb-8 text-center">{t("title")}</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {posts.map((post) => (
+          <BlogCard key={post.slug} locale={locale} post={post} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  return LOCALES.map((locale) => ({ locale }));
+}

app/[locale]/globals.css

@@ -0,0 +1,2 @@
+@import url(../../styles/globals.css);
+@import url(../../styles/loading.css);

app/[locale]/layout.tsx

@@ -0,0 +1,110 @@
+import BaiDuAnalytics from "@/app/BaiDuAnalytics";
+import GoogleAdsense from "@/app/GoogleAdsense";
+import GoogleAnalytics from "@/app/GoogleAnalytics";
+import PlausibleAnalytics from "@/app/PlausibleAnalytics";
+import Footer from "@/components/footer/Footer";
+import Header from "@/components/header/Header";
+import { LanguageDetectionAlert } from "@/components/LanguageDetectionAlert";
+import { TailwindIndicator } from "@/components/TailwindIndicator";
+import { siteConfig } from "@/config/site";
+import { DEFAULT_LOCALE, Locale, routing } from "@/i18n/routing";
+import { constructMetadata } from "@/lib/metadata";
+import { cn } from "@/lib/utils";
+import "@/styles/globals.css";
+import "@/styles/loading.css";
+import { Analytics } from "@vercel/analytics/react";
+import { Metadata, Viewport } from "next";
+import { hasLocale, NextIntlClientProvider } from "next-intl";
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server";
+import { ThemeProvider } from "next-themes";
+import { notFound } from "next/navigation";
+// import './globals.css';
+
+type MetadataProps = {
+  params: Promise<{ locale: string }>;
+};
+
+export async function generateMetadata({
+  params,
+}: MetadataProps): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "Home" });
+
+  return constructMetadata({
+    page: "Home",
+    title: t("title"),
+    description: t("description"),
+    locale: locale as Locale,
+    path: `/`,
+    canonicalUrl: `/`,
+  });
+}
+
+export const viewport: Viewport = {
+  themeColor: siteConfig.themeColors,
+};
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  // Ensure that the incoming `locale` is valid
+  if (!hasLocale(routing.locales, locale)) {
+    notFound();
+  }
+
+  setRequestLocale(locale);
+
+  // Providing all messages to the client
+  // side is the easiest way to get started
+  const messages = await getMessages();
+
+  return (
+    <html lang={locale || DEFAULT_LOCALE} suppressHydrationWarning>
+      <head />
+      <body
+        className={cn(
+          "min-h-screen bg-background flex flex-col font-sans antialiased"
+        )}
+      >
+        <NextIntlClientProvider messages={messages}>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme={siteConfig.defaultNextTheme}
+            enableSystem
+          >
+            {messages.LanguageDetection && <LanguageDetectionAlert />}
+            {messages.Header && <Header />}
+
+            <main className="flex-1 flex flex-col items-center">
+              {children}
+            </main>
+
+            {messages.Footer && <Footer />}
+          </ThemeProvider>
+        </NextIntlClientProvider>
+        <TailwindIndicator />
+        {process.env.NODE_ENV === "development" ? (
+          <></>
+        ) : (
+          <>
+            <Analytics />
+            <BaiDuAnalytics />
+            <GoogleAnalytics />
+            <GoogleAdsense />
+            <PlausibleAnalytics />
+          </>
+        )}
+      </body>
+    </html>
+  );
+}

app/[locale]/page.tsx

@@ -0,0 +1,15 @@
+import HomeComponent from "@/components/home";
+
+// export const dynamic = "force-static";
+
+export default function Home() {
+  return <HomeComponent />;
+}
+
+// export async function generateStaticParams() {
+//   return [
+//     { locale: 'en' },
+//     { locale: 'zh' },
+//     { locale: 'ja' },
+//   ]
+// }

app/[locale]/privacy-policy/page.tsx

@@ -0,0 +1,78 @@
+import MDXComponents from "@/components/mdx/MDXComponents";
+import { Locale, LOCALES } from "@/i18n/routing";
+import { constructMetadata } from "@/lib/metadata";
+import fs from "fs/promises";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { MDXRemote } from "next-mdx-remote-client/rsc";
+import path from "path";
+import remarkGfm from "remark-gfm";
+
+const options = {
+  parseFrontmatter: true,
+  mdxOptions: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [],
+  },
+};
+
+async function getMDXContent(locale: string) {
+  const filePath = path.join(
+    process.cwd(),
+    "content",
+    "privacy-policy",
+    `${locale}.mdx`
+  );
+  try {
+    const content = await fs.readFile(filePath, "utf-8");
+    return content;
+  } catch (error) {
+    console.error(`Error reading MDX file: ${error}`);
+    return "";
+  }
+}
+
+type Params = Promise<{
+  locale: string;
+}>;
+
+type MetadataProps = {
+  params: Params;
+};
+
+export async function generateMetadata({
+  params,
+}: MetadataProps): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "PrivacyPolicy" });
+
+  return constructMetadata({
+    page: "PrivacyPolicy",
+    title: t("title"),
+    description: t("description"),
+    locale: locale as Locale,
+    path: `/privacy-policy`,
+    canonicalUrl: `/privacy-policy`,
+  });
+}
+
+export default async function AboutPage({ params }: { params: Params }) {
+  const { locale } = await params;
+  const content = await getMDXContent(locale);
+
+  return (
+    <article className="w-full md:w-3/5 px-2 md:px-12">
+      <MDXRemote
+        source={content}
+        components={MDXComponents}
+        options={options}
+      />
+    </article>
+  );
+}
+
+export async function generateStaticParams() {
+  return LOCALES.map((locale) => ({
+    locale,
+  }));
+}

app/[locale]/terms-of-service/page.tsx

@@ -0,0 +1,78 @@
+import MDXComponents from "@/components/mdx/MDXComponents";
+import { Locale, LOCALES } from "@/i18n/routing";
+import { constructMetadata } from "@/lib/metadata";
+import fs from "fs/promises";
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { MDXRemote } from "next-mdx-remote-client/rsc";
+import path from "path";
+import remarkGfm from "remark-gfm";
+
+const options = {
+  parseFrontmatter: true,
+  mdxOptions: {
+    remarkPlugins: [remarkGfm],
+    rehypePlugins: [],
+  },
+};
+
+async function getMDXContent(locale: string) {
+  const filePath = path.join(
+    process.cwd(),
+    "content",
+    "terms-of-service",
+    `${locale}.mdx`
+  );
+  try {
+    const content = await fs.readFile(filePath, "utf-8");
+    return content;
+  } catch (error) {
+    console.error(`Error reading MDX file: ${error}`);
+    return "";
+  }
+}
+
+type Params = Promise<{
+  locale: string;
+}>;
+
+type MetadataProps = {
+  params: Params;
+};
+
+export async function generateMetadata({
+  params,
+}: MetadataProps): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "TermsOfService" });
+
+  return constructMetadata({
+    page: "TermsOfService",
+    title: t("title"),
+    description: t("description"),
+    locale: locale as Locale,
+    path: `/terms-of-service`,
+    canonicalUrl: `/terms-of-service`,
+  });
+}
+
+export default async function AboutPage({ params }: { params: Params }) {
+  const { locale } = await params;
+  const content = await getMDXContent(locale);
+
+  return (
+    <article className="w-full md:w-3/5 px-2 md:px-12">
+      <MDXRemote
+        source={content}
+        components={MDXComponents}
+        options={options}
+      />
+    </article>
+  );
+}
+
+export async function generateStaticParams() {
+  return LOCALES.map((locale) => ({
+    locale,
+  }));
+}

app/robots.ts

@@ -0,0 +1,31 @@
+import { siteConfig } from '@/config/site'
+import type { MetadataRoute } from 'next'
+
+const siteUrl = siteConfig.url
+
+// export const dynamic = "force-static"
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: [
+        '/private/',
+        '/api/',
+        '/auth/',
+        '/dashboard/',
+        '/_next/',
+        '/assets/',
+        '/error',
+        '/*/404',
+        '/*/500',
+        '/*/403',
+        '/*/401',
+        '/*/400',
+        '/cdn-cgi/',
+      ],
+    },
+    sitemap: `${siteUrl}/sitemap.xml`
+  }
+}

app/sitemap.ts

@@ -0,0 +1,48 @@
+import { siteConfig } from '@/config/site'
+import { DEFAULT_LOCALE, LOCALES } from '@/i18n/routing'
+import { getPosts } from '@/lib/getBlogs'
+import { MetadataRoute } from 'next'
+
+const siteUrl = siteConfig.url
+
+type ChangeFrequency = 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never' | undefined
+
+// export const dynamic = "force-static"
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  // Static pages
+  const staticPages = [
+    '',
+    '/blog',
+    '/about',
+    '/privacy-policy',
+    '/terms-of-service',
+  ]
+
+  // Generate multilingual pages
+  const pages = LOCALES.flatMap(locale => {
+    return staticPages.map(page => ({
+      url: `${siteUrl}${locale === DEFAULT_LOCALE ? '' : `/${locale}`}${page}`,
+      lastModified: new Date(),
+      changeFrequency: 'daily' as ChangeFrequency,
+      priority: page === '' ? 1.0 : 0.8,
+    }))
+  })
+
+  const blogPosts = await Promise.all(
+    LOCALES.map(async (locale) => {
+      const { posts } = await getPosts(locale)
+      return posts.map(post => ({
+        url: `${siteUrl}${locale === DEFAULT_LOCALE ? '' : `/${locale}`}/blog${post.slug}`,
+        lastModified: post.metadata.updatedAt || post.date,
+        changeFrequency: 'daily' as const,
+        priority: 0.7,
+      }))
+    })
+  ).then(results => results.flat())
+
+  return [
+    ...pages,
+    ...blogPosts,
+  ]
+}