feat[frontend]: make title configurable

SharzyL · SharzyL · commit 8e14cd913dbb · 2025-04-27T23:40:10.000+08:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/static/favicon-32x32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pastebin Worker</title>
+    <title>%INDEX_PAGE_TITLE%</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/pb.tsx b/frontend/pb.tsx
@@ -261,7 +261,9 @@ export function PasteBin() {
 
   const info = (
     <div className="mx-4 lg:mx-0">
-      <h1 className="text-3xl mt-8 mb-4 relative">Pastebin Worker {toggleDarkModeButton}</h1>
+      <h1 className="text-3xl mt-8 mb-4 relative">
+        {INDEX_PAGE_TITLE} {toggleDarkModeButton}
+      </h1>
       <p className="my-2">This is an open source pastebin deployed on Cloudflare Workers. </p>
       <p className="my-2">
         <b>Usage</b>: paste any text here, submit, then share it with URL. (
diff --git a/frontend/vite-env.d.ts b/frontend/vite-env.d.ts
@@ -3,3 +3,4 @@ declare const API_URL: string
 declare const REPO: string
 declare const MAX_EXPIRATION: string
 declare const DEFAULT_EXPIRATION: string
+declare const INDEX_PAGE_TITLE: string
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -17,16 +17,28 @@ export default defineConfig(({ mode }) => {
       throw new Error(`Cannot find vars.${name} in ${wranglerConfigPath}`)
     }
   }
-  let deployUrl = getVar("DEPLOY_URL")
+  const deployUrl = getVar("DEPLOY_URL")
+
+  const indexTitle = getVar("INDEX_PAGE_TITLE") + (mode === "development" ? " (dev)" : "")
+  const transformHtmlPlugin = () => ({
+    name: "transform-html",
+    transformIndexHtml: {
+      order: "pre",
+      handler(html) {
+        return html.replace(/%INDEX_PAGE_TITLE%/g, () => indexTitle)
+      },
+    },
+  })
 
   return {
-    plugins: [react(), tailwindcss()],
+    plugins: [react(), tailwindcss(), transformHtmlPlugin()],
     define: {
       DEPLOY_URL: mode === "development" ? JSON.stringify(devAPIUrl) : JSON.stringify(deployUrl),
       API_URL: mode === "development" ? JSON.stringify(devAPIUrl) : JSON.stringify(""),
       REPO: JSON.stringify(getVar("REPO")),
       MAX_EXPIRATION: JSON.stringify(getVar("MAX_EXPIRATION")),
       DEFAULT_EXPIRATION: JSON.stringify(getVar("DEFAULT_EXPIRATION")),
+      INDEX_PAGE_TITLE: JSON.stringify(indexTitle),
     },
     server: {
       port: 5173,
diff --git a/wrangler.toml b/wrangler.toml
@@ -37,6 +37,9 @@ REPO = "https://github.com/SharzyL/pastebin-worker"
 # the name displayed in TOS
 TOS_MAINTAINER = "Sharzy"
 
+# the page title displayed in index page
+INDEX_PAGE_TITLE = "Pastebin Worker"
+
 # the email displayed in TOS
 TOS_MAIL = "pb@shz.al"
 
