feat: add translation status display switcher (#298)

Author: 3w36zj6

website/src/components/templates/BaseTemplate.tsx

@@ -1,6 +1,11 @@
 import { html } from "hono/html";
 import type { FC, PropsWithChildren } from "hono/jsx";
-import { basePath, originUrl, typstOfficialDocsUrl } from "../../metadata";
+import {
+	basePath,
+	displayTranslationStatus,
+	originUrl,
+	typstOfficialDocsUrl,
+} from "../../metadata";
 import { Translation, translation } from "../../translation/";
 import type { Page } from "../../types/model";
 import { joinPath, shiftBase } from "../../utils/path";
@@ -208,7 +213,10 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 							<Breadcrumbs path={path} />
 
 							<div class="flex flex-col gap-2 my-4">
-								<TranslationStatusAlert status={translationStatus} />
+								{(displayTranslationStatus ||
+									translationStatus === "community") && (
+									<TranslationStatusAlert status={translationStatus} />
+								)}
 							</div>
 
 							{translationStatus !== "community" && (

website/src/components/ui/common/Header.tsx

@@ -1,5 +1,6 @@
 import {
 	discordServerUrl,
+	displayTranslationStatus,
 	githubRepositoryUrl,
 	typstOfficialDocsUrl,
 	typstOfficialUrl,
@@ -57,7 +58,7 @@ export const Header = () => {
 					<div class="flex items-center gap-2 flex-shrink-0">
 						<SiteTitle />
 						<VersionBadge />
-						<TranslationCoverageBadge />
+						{displayTranslationStatus && <TranslationCoverageBadge />}
 					</div>
 
 					<div class="xl:absolute xl:left-1/2 xl:transform xl:-translate-x-1/2">
@@ -128,9 +129,11 @@ export const Header = () => {
 							<SiteTitle />
 							<VersionBadge />
 						</div>
-						<div>
-							<TranslationCoverageBadge />
-						</div>
+						{displayTranslationStatus && (
+							<div>
+								<TranslationCoverageBadge />
+							</div>
+						)}
 					</div>
 					<div class="flex items-center gap-2 flex-shrink-0 self-center">
 						<button

website/src/metadata.ts

@@ -18,3 +18,5 @@ export const discordServerUrl = "https://discord.gg/9xF7k4aAuH";
 export const originUrl = "https://typst-jp.github.io/";
 /** The base public path for deployment. This must match the value used in typst-docs. */
 export const basePath: "/" | `/${string}/` = "/docs/";
+/** Indicates whether to display the translation status on the site. Community content is always displayed. */
+export const displayTranslationStatus: boolean = true;