feat: Webサイトのページに原文へのリンクを追加 (typst-jp#227)

Author: 3w36zj6

website/src/components/icons/WorldIcon.tsx

@@ -0,0 +1,22 @@
+export const WorldIcon = () => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="icon icon-tabler icons-tabler-outline icon-tabler-world"
+			role="graphics-symbol"
+		>
+			<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+			<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
+			<path d="M3.6 9h16.8" />
+			<path d="M3.6 15h16.8" />
+			<path d="M11.5 3a17 17 0 0 0 0 18" />
+			<path d="M12.5 3a17 17 0 0 1 0 18" />
+		</svg>
+	);
+};

website/src/components/icons/index.ts

@@ -11,6 +11,7 @@ export { MenuIcon } from "./MenuIcon";
 export { CloseIcon } from "./CloseIcon";
 export { SearchIcon } from "./SearchIcon";
 export { LanguageIcon } from "./LanguageIcon";
+export { WorldIcon } from "./WorldIcon";
 
 // Simple Icons
 // https://simpleicons.org/

website/src/components/templates/BaseTemplate.tsx

@@ -7,6 +7,7 @@ import {
 	ChevronRightIcon,
 	CloseIcon,
 	InfoCircleIcon,
+	WorldIcon,
 } from "../icons";
 import {
 	Breadcrumbs,
@@ -176,14 +177,49 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 						<main class="flex-1 flex flex-col px-3.5 py-4 mb-8">
 							<Breadcrumbs path={path} />
 
-							<div class="mt-4">
+							<div class="flex flex-col gap-2 my-4">
 								<TranslationStatusAlert status={translationStatus} />
 							</div>
 
-							<div class="prose max-w-none w-full mt-6 flex-grow">
+							{translationStatus !== "community" && (
+								<div class="flex">
+									<a
+										href={`https://typst.app${route}`}
+										target="_blank"
+										rel="noopener noreferrer"
+										class="inline-flex items-center text-sm  underline text-gray-400 hover:text-gray-600 transition-colors"
+									>
+										<div class="w-4 h-4 mr-1 ">
+											<WorldIcon />
+										</div>
+										原文（英語）を開く
+									</a>
+								</div>
+							)}
+
+							<div class="prose max-w-none w-full my-6 flex-grow">
 								{children}
 							</div>
 
+							{translationStatus !== "community" && (
+								<a
+									href={`https://typst.app${route}`}
+									target="_blank"
+									rel="noopener noreferrer"
+									class="group inline-flex items-center px-3 py-2 rounded-md border border-gray-200 bg-white hover:border-gray-500 hover:bg-gray-50 transition-all duration-200 w-fit"
+								>
+									<div class="w-4 h-4 mr-2 text-gray-600 transition-colors">
+										<WorldIcon />
+									</div>
+									<span class="text-sm font-medium text-gray-800 group-hover:text-gray-900 transition-colors">
+										原文（英語）を開く
+									</span>
+									<div class="w-4 h-4 ml-2 text-gray-400 transition-colors">
+										<ChevronRightIcon />
+									</div>
+								</a>
+							)}
+
 							{route === "/docs/" ? (
 								<div class="doc-categories grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
 									<a

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

@@ -67,7 +67,7 @@ export const TranslationStatusAlert: FC<TranslationStatusAlertProps> = ({
 	return (
 		<div
 			class={twMerge(
-				"border rounded-md p-4 mb-6",
+				"border rounded-md p-4",
 				config.bgColor,
 				config.borderColor,
 				config.textColor,