refactor: replace string concatenation with path utility for URL construction

Author: 3w36zj6

website/src/components/templates/BaseTemplate.tsx

@@ -3,6 +3,7 @@ import { html } from "hono/html";
 import type { FC, PropsWithChildren } from "hono/jsx";
 import { basePath, originUrl, typstOfficialUrl } from "../../metadata";
 import type { Page } from "../../types/model";
+import { joinPath } from "../../utils/path";
 import { getTranslationStatus } from "../../utils/translationStatus";
 import {
 	CaretRightCircleIcon,
@@ -78,41 +79,53 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 					rel="icon"
 					type="image/png"
 					sizes="32x32"
-					href={`${basePath.replace(/\/$/, "")}/favicon.png`}
+					href={joinPath(basePath, "/favicon.png")}
 				/>
 				<link
 					rel="preload"
-					href={`${basePath.replace(/\/$/, "")}/fonts/hanken-grotesk/HKGrotesk-Regular.woff2`}
+					href={joinPath(
+						basePath,
+						"/fonts/hanken-grotesk/HKGrotesk-Regular.woff2",
+					)}
 					as="font"
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
 				<link
 					rel="preload"
-					href={`${basePath.replace(/\/$/, "")}/fonts/hanken-grotesk/HKGrotesk-Bold.woff2`}
+					href={joinPath(
+						basePath,
+						"/fonts/hanken-grotesk/HKGrotesk-Bold.woff2",
+					)}
 					as="font"
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
 				<link
 					rel="preload"
-					href={`${basePath.replace(/\/$/, "")}/fonts/hanken-grotesk/HKGrotesk-SemiBold.woff2`}
+					href={joinPath(
+						basePath,
+						"/fonts/hanken-grotesk/HKGrotesk-SemiBold.woff2",
+					)}
 					as="font"
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
 				<link
 					rel="preload"
-					href={`${basePath.replace(/\/$/, "")}/fonts/cascadia-code/CascadiaMono-Regular-Sub.woff2`}
+					href={joinPath(
+						basePath,
+						"/fonts/cascadia-code/CascadiaMono-Regular-Sub.woff2",
+					)}
 					as="font"
 					type="font/woff2"
 					crossOrigin="anonymous"
 				/>
 				<link
 					href={
 						import.meta.env.DEV
-							? `${basePath.replace(/\/$/, "")}/src/globals.css`
-							: `${basePath.replace(/\/$/, "")}/globals.css`
+							? joinPath(basePath, "/src/globals.css")
+							: joinPath(basePath, "/globals.css")
 					}
 					rel="stylesheet"
 				/>
@@ -124,7 +137,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 /* Global font family */
 @font-face {
 	font-family: "HK Grotesk";
-	src: url("${basePath.replace(/\/$/, "")}/fonts/hanken-grotesk/HKGrotesk-Regular.woff2")
+	src: url("${joinPath(basePath, "/fonts/hanken-grotesk/HKGrotesk-Regular.woff2")}")
 		format("woff2");
 	font-weight: 400;
 	font-style: normal;
@@ -133,7 +146,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 
 @font-face {
 	font-family: "HK Grotesk";
-	src: url("${basePath.replace(/\/$/, "")}/fonts/hanken-grotesk/HKGrotesk-SemiBold.woff2")
+	src: url("${joinPath(basePath, "/fonts/hanken-grotesk/HKGrotesk-SemiBold.woff2")}")
 		format("woff2");
 	font-weight: 600;
 	font-style: normal;
@@ -142,15 +155,15 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
 
 @font-face {
 	font-family: "HK Grotesk";
-	src: url("${basePath.replace(/\/$/, "")}/fonts/hanken-grotesk/HKGrotesk-Bold.woff2") format("woff2");
+	src: url("${joinPath(basePath, "/fonts/hanken-grotesk/HKGrotesk-Bold.woff2")}") format("woff2");
 	font-weight: 700;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
 	font-family: "Cascadia Mono";
-	src: url("${basePath.replace(/\/$/, "")}/fonts/cascadia-code/CascadiaMono-Regular-Sub.woff2")
+	src: url("${joinPath(basePath, "/fonts/cascadia-code/CascadiaMono-Regular-Sub.woff2")}")
 		format("woff2");
 	font-weight: 400;
 	font-style: normal;
@@ -176,7 +189,7 @@ samp {
 				{import.meta.env.DEV &&
 					html`
           <script>
-            import("${basePath.replace(/\/$/, "")}/@vite/client")
+			import("${joinPath(basePath, "/@vite/client")}")
           </script>
         `}
 			</head>

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

@@ -1,5 +1,6 @@
 import type { FC } from "hono/jsx";
 import { basePath } from "../../../metadata";
+import { joinPath } from "../../../utils/path";
 import { CloseIcon } from "../../icons";
 
 export const SearchWindow: FC = () => {
@@ -8,12 +9,10 @@ export const SearchWindow: FC = () => {
 			{import.meta.env.PROD && (
 				<>
 					<link
-						href={`${basePath.replace(/\/$/, "")}/pagefind/pagefind-ui.css`}
+						href={joinPath(basePath, "/pagefind/pagefind-ui.css")}
 						rel="stylesheet"
 					/>
-					<script
-						src={`${basePath.replace(/\/$/, "")}/pagefind/pagefind-ui.js`}
-					/>
+					<script src={joinPath(basePath, "/pagefind/pagefind-ui.js")} />
 				</>
 			)}
 			<div class="flex justify-between items-center p-4 border-b border-gray-200 flex-shrink-0">

website/vite.config.ts

@@ -8,6 +8,7 @@ import ssg from "@hono/vite-ssg";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 import { basePath, originUrl } from "./src/metadata";
+import { joinPath } from "./src/utils/path";
 
 // Create a symbolic link to the assets generated by typst-docs in ./public/assets/
 const assetsDocsPath = resolve(__dirname, "../assets/");
@@ -43,8 +44,8 @@ export default defineConfig({
 				/^\/assets\/.+/,
 				/^\/index\.html$/,
 				// NOTE: @hono/vite-dev-server does not respect the base setting in the Vite configuration.
-				new RegExp(`^${basePath.replace(/\/$/, "")}/@.+`),
-				new RegExp(`^${basePath.replace(/\/$/, "")}/node_modules(?:/|$)`),
+				new RegExp(`^${joinPath(basePath, "@")}`),
+				new RegExp(`^${joinPath(basePath, "node_modules")}(?:/|$)`),
 			],
 		}),
 	],