feat: add TITLE in worker for custom website title (#276)

CHANGELOG.md

@@ -1,6 +1,10 @@
 <!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG
 
+## main branch
+
+- worker 配置文件添加 `TITLE = "Custom Title"`, 可自定义网站标题
+
 ## v0.4.5
 
 - UI lazy load 懒加载

frontend/package.json

@@ -15,6 +15,7 @@
     "deploy": "npm run build && wrangler pages deploy ./dist --branch production"
   },
   "dependencies": {
+    "@unhead/vue": "^1.9.11",
     "@vicons/material": "^0.12.0",
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",

frontend/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@unhead/vue':
+        specifier: ^1.9.11
+        version: 1.9.11(vue@3.4.27(typescript@5.4.5))
       '@vicons/material':
         specifier: ^0.12.0
         version: 0.12.0
@@ -1296,6 +1299,20 @@ packages:
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
 
+  '@unhead/dom@1.9.11':
+    resolution: {integrity: sha512-mg8DuqPcm+JWSN3SIPa9lbNtFhdQ1M7K2TJe8icI4bK56GSj4eUgJZrbphZAUWPAUAS1UFyFFGJG7N9Y31LKOw==}
+
+  '@unhead/schema@1.9.11':
+    resolution: {integrity: sha512-hvIGl20wpQQImyHvAMv2tPgccKLGEwMn8KYQdImUkiCLdQw2Jw9jH7syE/u+TPSqwOQIwsvPja5sK+SChL1KNw==}
+
+  '@unhead/shared@1.9.11':
+    resolution: {integrity: sha512-jgpQ/cPfXzQA7c4F4PKyPXxS9POXAMrJ0QUBMTQYNOW6t6KlljjK89n6nUEmGuiyO4jdJGooZNVS1fXVaKIgYQ==}
+
+  '@unhead/vue@1.9.11':
+    resolution: {integrity: sha512-7gCEJGTSnpLcHGQ2j/IsBTz2nIUWbTlqUbbNiwPFgEksJbh8Pz8WduTvLC4ANlnnFy6PDG7yrZcaKJMOrNruoQ==}
+    peerDependencies:
+      vue: '>=2.7 || >=3'
+
   '@uppy/companion-client@2.2.2':
     resolution: {integrity: sha512-5mTp2iq97/mYSisMaBtFRry6PTgZA6SIL7LePteOV5x0/DxKfrZW3DEiQERJmYpHzy7k8johpm2gHnEKto56Og==}
 
@@ -1887,6 +1904,7 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -1939,6 +1957,9 @@ packages:
     resolution: {integrity: sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==}
     engines: {node: '>=12.0.0'}
 
+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
   html-void-elements@2.0.1:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
 
@@ -2587,6 +2608,9 @@ packages:
     resolution: {integrity: sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==}
     engines: {node: '>=14.0'}
 
+  unhead@1.9.11:
+    resolution: {integrity: sha512-AoX0hOBrpYM5ctX3rNPaKeHkhybIMrrirb+NlonRBMHy/YkodO5m6mretYEe17bu9mQoeU2rnEWRm36MXtG4OQ==}
+
   unicode-canonical-property-names-ecmascript@2.0.0:
     resolution: {integrity: sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==}
     engines: {node: '>=4'}
@@ -2876,6 +2900,9 @@ packages:
   youch@3.3.3:
     resolution: {integrity: sha512-qSFXUk3UZBLfggAW3dJKg0BMblG5biqSF8M34E06o5CSsZtH92u9Hqmj2RzGiHDi64fhe83+4tENFP2DB6t6ZA==}
 
+  zhead@2.2.4:
+    resolution: {integrity: sha512-8F0OI5dpWIA5IGG5NHUg9staDwz/ZPxZtvGVf01j7vHqSyZ0raHY+78atOVxRqb73AotX22uV1pXt3gYSstGag==}
+
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
@@ -4018,6 +4045,28 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
+  '@unhead/dom@1.9.11':
+    dependencies:
+      '@unhead/schema': 1.9.11
+      '@unhead/shared': 1.9.11
+
+  '@unhead/schema@1.9.11':
+    dependencies:
+      hookable: 5.5.3
+      zhead: 2.2.4
+
+  '@unhead/shared@1.9.11':
+    dependencies:
+      '@unhead/schema': 1.9.11
+
+  '@unhead/vue@1.9.11(vue@3.4.27(typescript@5.4.5))':
+    dependencies:
+      '@unhead/schema': 1.9.11
+      '@unhead/shared': 1.9.11
+      hookable: 5.5.3
+      unhead: 1.9.11
+      vue: 3.4.27(typescript@5.4.5)
+
   '@uppy/companion-client@2.2.2':
     dependencies:
       '@uppy/utils': 4.1.3
@@ -4832,6 +4881,8 @@ snapshots:
 
   highlight.js@11.9.0: {}
 
+  hookable@5.5.3: {}
+
   html-void-elements@2.0.1: {}
 
   i18next@20.6.1:
@@ -5517,6 +5568,13 @@ snapshots:
     dependencies:
       '@fastify/busboy': 2.1.1
 
+  unhead@1.9.11:
+    dependencies:
+      '@unhead/dom': 1.9.11
+      '@unhead/schema': 1.9.11
+      '@unhead/shared': 1.9.11
+      hookable: 5.5.3
+
   unicode-canonical-property-names-ecmascript@2.0.0: {}
 
   unicode-match-property-ecmascript@2.0.0:
@@ -5888,4 +5946,6 @@ snapshots:
       mustache: 4.2.0
       stacktracey: 2.1.8
 
+  zhead@2.2.4: {}
+
   zod@3.23.8: {}

frontend/src/api/index.js

@@ -54,6 +54,7 @@ const getOpenSettings = async (message) => {
     try {
         const res = await api.fetch("/open_api/settings");
         Object.assign(openSettings.value, {
+            title: res["title"] || "",
             prefix: res["prefix"] || "",
             needAuth: res["needAuth"] || false,
             domains: res["domains"].map((domain) => {

frontend/src/components/MailBox.vue

@@ -226,7 +226,7 @@ onBeforeUnmount(() => {
                     ID: {{ row.id }}
                   </n-tag>
                   <n-tag type="info">
-                    {{ row.created_at }}
+                    {{ `${row.created_at} UTC` }}
                   </n-tag>
                   <n-tag type="info">
                     FROM: {{ row.source }}
@@ -247,7 +247,7 @@ onBeforeUnmount(() => {
               ID: {{ curMail.id }}
             </n-tag>
             <n-tag type="info">
-              {{ curMail.created_at }}
+              {{ `${curMail.created_at} UTC` }}
             </n-tag>
             <n-tag type="info">
               FROM: {{ curMail.source }}
@@ -320,7 +320,7 @@ onBeforeUnmount(() => {
                   ID: {{ row.id }}
                 </n-tag>
                 <n-tag type="info">
-                  {{ row.created_at }}
+                  {{ `${row.created_at} UTC` }}
                 </n-tag>
                 <n-tag type="info">
                   FROM: {{ row.source }}
@@ -342,7 +342,7 @@ onBeforeUnmount(() => {
                 ID: {{ curMail.id }}
               </n-tag>
               <n-tag type="info">
-                {{ curMail.created_at }}
+                {{ `${curMail.created_at} UTC` }}
               </n-tag>
               <n-tag type="info">
                 FROM: {{ curMail.source }}

frontend/src/components/SendBox.vue

@@ -134,7 +134,7 @@ onMounted(async () => {
                     ID: {{ row.id }}
                   </n-tag>
                   <n-tag type="info">
-                    {{ row.created_at }}
+                    {{ `${row.created_at} UTC` }}
                   </n-tag>
                   <n-tag v-if="showEMailFrom" type="info">
                     FROM: {{ row.address }}
@@ -155,7 +155,7 @@ onMounted(async () => {
               ID: {{ curMail.id }}
             </n-tag>
             <n-tag type="info">
-              {{ curMail.created_at }}
+              {{ `${curMail.created_at} UTC` }}
             </n-tag>
             <n-tag type="info">
               FROM: {{ curMail.address }}
@@ -195,7 +195,7 @@ onMounted(async () => {
                   ID: {{ row.id }}
                 </n-tag>
                 <n-tag type="info">
-                  {{ row.created_at }}
+                  {{ `${row.created_at} UTC` }}
                 </n-tag>
                 <n-tag v-if="showEMailFrom" type="info">
                   FROM: {{ row.address }}
@@ -217,7 +217,7 @@ onMounted(async () => {
                 ID: {{ curMail.id }}
               </n-tag>
               <n-tag type="info">
-                {{ curMail.created_at }}
+                {{ `${curMail.created_at} UTC` }}
               </n-tag>
               <n-tag type="info">
                 FROM: {{ curMail.address }}

frontend/src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue'
 import { createI18n } from 'vue-i18n'
 import router from './router'
 import { registerSW } from 'virtual:pwa-register'
+import { createHead } from '@unhead/vue'
 
 registerSW({ immediate: true })
 const i18n = createI18n({
@@ -16,7 +17,9 @@ const i18n = createI18n({
         messages: {}
     }
 })
+const head = createHead()
 const app = createApp(App)
 app.use(i18n)
 app.use(router)
+app.use(head)
 app.mount('#app')

frontend/src/store/index.js

@@ -7,6 +7,7 @@ export const useGlobalState = createGlobalState(
         const toggleDark = useToggle(isDark)
         const loading = ref(false);
         const openSettings = ref({
+            title: '',
             prefix: '',
             needAuth: false,
             adminContact: '',

frontend/src/views/Header.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useHead } from '@unhead/vue'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
 import {
@@ -15,7 +16,7 @@ const message = useMessage()
 
 const {
     localeCache, toggleDark, isDark, isTelegram,
-    showAuth, adminAuth, auth, loading
+    showAuth, adminAuth, auth, loading, openSettings
 } = useGlobalState()
 const route = useRoute()
 const router = useRouter()
@@ -182,6 +183,13 @@ const menuOptions = computed(() => [
     }
 ]);
 
+useHead({
+    title: () => openSettings.value.title || t('title'),
+    meta: [
+        { name: "description", content: openSettings.value.description || t('title') },
+    ]
+});
+
 onMounted(async () => {
     await api.getOpenSettings(message);
 });
@@ -191,7 +199,7 @@ onMounted(async () => {
     <div>
         <n-page-header>
             <template #title>
-                <h3>{{ t('title') }}</h3>
+                <h3>{{ openSettings.title || t('title') }}</h3>
             </template>
             <template #avatar>
                 <n-avatar style="margin-left: 10px;" src="/logo.png" />

vitepress-docs/docs/en/cli.md

@@ -74,6 +74,7 @@ node_compat = true
 # ]
 
 [vars]
+# TITLE = "Custom Title" # The title of the site
 PREFIX = "tmp" # The mailbox name prefix to be processed
 # If you want your site to be private, uncomment below and change your password
 # PASSWORDS = ["123", "456"]

vitepress-docs/docs/zh/guide/cli/worker.md

@@ -42,6 +42,7 @@ node_compat = true
 # ]
 
 [vars]
+# TITLE = "Custom Title" # 自定义网站标题
 PREFIX = "tmp" # 要处理的邮箱名称前缀，不需要后缀可配置为空字符串
 # 如果你想要你的网站私有，取消下面的注释，并修改密码
 # PASSWORDS = ["123", "456"]

worker/src/commom_api.ts

@@ -15,6 +15,7 @@ api.get('/open_api/settings', async (c) => {
         needAuth = !auth || !passwords.includes(auth);
     }
     return c.json({
+        "title": c.env.TITLE,
         "prefix": c.env.PREFIX,
         "domains": getDomains(c),
         "needAuth": needAuth,

worker/src/types.d.ts

@@ -6,6 +6,7 @@ export type Bindings = {
     SEND_MAIL: any
 
     // config
+    TITLE: string | undefined
     PREFIX: string | undefined
     DOMAINS: string | string[] | undefined
     PASSWORDS: string | string[] | undefined

worker/wrangler.toml.template

@@ -16,6 +16,7 @@ node_compat = true
 # ]
 
 [vars]
+# TITLE = "Custom Title" # custom title
 PREFIX = "tmp"
 # IF YOU WANT TO MAKE YOUR SITE PRIVATE, UNCOMMENT THE FOLLOWING LINES
 # PASSWORDS = ["123", "456"]