add development version notice

src/app/[locale]/layout.tsx

@@ -1,3 +1,4 @@
+import { DevVersionNoticeServer } from "@/components/dev-version-notice-server";
 import { Footer } from "@/components/layout/footer";
 import { Navbar } from "@/components/layout/navbar";
 import { RouterTransition } from "@/components/layout/router-transition";
@@ -10,6 +11,7 @@ import { clsx } from "clsx";
 import type { Metadata } from 'next'
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, setRequestLocale } from "next-intl/server";
+import React from "react";
 import styles from './layout.module.css';
 import MantineThemeProvider from "./mantine-theme-provider";
 import { StatsScripts } from "./stats-scripts";
@@ -65,6 +67,7 @@ export default async function RootLayout(props: RootLayoutProps) {
               {children}
             </main>
 
+            <DevVersionNoticeServer/>
             <Footer/>
           </div>
         </MantineThemeProvider>

src/components/dev-version-notice-server.tsx

@@ -0,0 +1,20 @@
+import { getGitInfo } from "@/utils/git-info";
+import { pick } from "@/utils/i18n-utils";
+import { NextIntlClientProvider } from "next-intl";
+import { getLocale, getMessages } from "next-intl/server";
+import React from "react";
+import { DevVersionNotice } from "./dev-version-notice";
+
+export async function DevVersionNoticeServer() {
+  const gitInfo = await getGitInfo()
+  if (gitInfo && gitInfo.isDev) {
+    const locale = await getLocale()
+    const messages = await getMessages()
+    return (
+      <NextIntlClientProvider locale={locale} messages={pick(messages, 'component.dev_version_notice')}>
+        <DevVersionNotice/>
+      </NextIntlClientProvider>
+    )
+  }
+  return <></>
+}

src/components/dev-version-notice.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { NaLink } from "@/components/na-link";
+import { siteConfig } from "@/site/config";
+import { Notification } from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+export function DevVersionNotice() {
+  const t = useTranslations('component.dev_version_notice')
+  const [isEnabled, setEnabled] = useState(true)
+  return (
+    isEnabled && <Notification
+      className="fixed top-[calc(var(--mw-navbar-height)+1rem)] right-[1rem] ml-[1rem] z-[100]"
+      icon={<IconAlertCircle size={32}/>}
+      color="yellow"
+      withBorder={true}
+      radius="md"
+      title={t('title')}
+      onClose={() => setEnabled(false)}
+    >
+      <p>{t('line1')}</p>
+      <p>{t.rich('line2', {
+        link: (chunks) => <NaLink href={siteConfig.links.website} external={false} hoverUnderline colored>{chunks}</NaLink>
+      })}</p>
+    </Notification>
+  )
+}

src/messages/en.json

@@ -20,6 +20,15 @@
     }
   },
   "component": {
+    "dev_version_notice": {
+      "title": "Development Version Notice",
+      "line1": "You are visiting the development version of this website",
+      "line2": "<link>Click me</link> to visit the stable version"
+    },
+    "github_proxy_switch": {
+      "label": "Use GitHub Proxy",
+      "tooltip": "Use https://mirror.ghproxy.com/ to speed up plugin download in China mainland"
+    },
     "pip_install_code_highlight": {
       "copy": "Copy code",
       "copied": "Copied"
@@ -50,10 +59,6 @@
       "none": "none",
 
       "py_package_command": "Python Package Installation Command"
-    },
-    "github_proxy_switch": {
-      "label": "Use GitHub Proxy",
-      "tooltip": "Use https://mirror.ghproxy.com/ to speed up plugin download in China mainland"
     }
   },
   "page": {

src/messages/zh-CN.json

@@ -20,6 +20,15 @@
     }
   },
   "component": {
+    "dev_version_notice": {
+      "title": "开发版提示",
+      "line1": "你正在访问该网站的开发版本",
+      "line2": "<link>点我</link>以访问该网站的稳定版"
+    },
+    "github_proxy_switch": {
+      "label": "使用 GitHub Proxy 加速",
+      "tooltip": "使用 https://mirror.ghproxy.com/ 来优化中国大陆地区的下载速度"
+    },
     "pip_install_code_highlight": {
       "copy": "复制代码",
       "copied": "已复制"
@@ -50,10 +59,6 @@
       "none": "无",
 
       "py_package_command": "Python 包安装指令"
-    },
-    "github_proxy_switch": {
-      "label": "使用 GitHub Proxy 加速",
-      "tooltip": "使用 https://mirror.ghproxy.com/ 来优化中国大陆地区的下载速度"
     }
   },
   "page": {

src/site/config.ts

@@ -4,6 +4,7 @@ export const siteConfig = {
   description: 'MCDReforged official website',
   favicon: "/favicon.svg",
   links: {
+    website: "https://mcdreforged.com",
     docs: "https://docs.mcdreforged.com",
     githubMcdr: "https://github.com/MCDReforged/MCDReforged",
     githubWebsite: "https://github.com/MCDReforged/website",

src/utils/git-info.ts

@@ -6,6 +6,7 @@ import { promisify } from "node:util"
 interface GitInfo {
   branch: string
   commitHash: string
+  isDev: boolean
 }
 
 let cachedGitInfo: GitInfo | undefined | null = null
@@ -30,7 +31,10 @@ async function tryGetGitInfoFromCommand(): Promise<GitInfo | undefined> {
     const branch = branchResult.stdout.trim()
     const commitHash = commitHashResult.stdout.trim()
     if (branch && commitHash) {
-      return { branch, commitHash }
+      return {
+        branch, commitHash,
+        isDev: false,  // treat local development environment as isDev=false
+      }
     }
   } catch {
     return undefined
@@ -53,6 +57,7 @@ async function getGitInfoFromFile(): Promise<GitInfo | undefined> {
       const data = await fs.readFile(filePath, 'utf8')
       const gitInfo: GitInfo = JSON.parse(data)
       if (gitInfo.branch && gitInfo.commitHash) {
+        gitInfo.isDev = isDev(gitInfo.branch)
         return gitInfo
       }
     }
@@ -85,11 +90,16 @@ function gitRefToBranch(gitRef: string): string {
   return gitRef
 }
 
+function isDev(branch: string): boolean {
+  return branch !== 'master'
+}
+
 async function getGitInfoImpl(): Promise<GitInfo | undefined> {
   if (process.env.NODE_ENV === 'development') {
     return (await tryGetGitInfoFromCommand()) || {
-      branch: 'test',
+      branch: 'master',
       commitHash: 'abc',
+      isDev: false,
     }
   }
 
@@ -102,5 +112,7 @@ async function getGitInfoImpl(): Promise<GitInfo | undefined> {
   const commitHash = getEnvVar('GIT_COMMIT_HASH', 'GITHUB_SHA', 'VERCEL_GIT_COMMIT_SHA')
   const branch = gitRef ? gitRefToBranch(gitRef) : getEnvVar('VERCEL_GIT_COMMIT_REF')
 
-  return (branch && commitHash) ? {branch, commitHash} : undefined
+  return (branch && commitHash)
+    ? {branch, commitHash, isDev: isDev(branch)}
+    : undefined
 }