feat(plugin-redirect): add remember my choice, close #253 (#259)

docs/plugins/tools/redirect.md

@@ -223,6 +223,71 @@ By default, the plugin will output to `.vuepress/redirect` directory under sourc
 - Default: the first locale
 - Details: Default locale path.
 
+- Type: `RedirectPluginLocaleConfig`
+
+  ```ts
+  interface RedirectPluginLocaleData {
+    /**
+     * Language name
+     */
+    name: string
+
+    /**
+     * Switch hint
+     */
+    hint: string
+
+    /**
+     * Switch button text
+     */
+    switch: string
+
+    /**
+     * Cancel button text
+     */
+    cancel: string
+
+    /**
+     * remember hint text
+     */
+    remember: string
+  }
+
+  interface RedirectPluginLocaleConfig {
+    [localePath: string]: RedirectPluginLocaleData
+  }
+  ```
+
+- Required: No
+
+- Details:
+
+  Locales config for redirect plugin.
+
+::: details Built-in Supported Languages
+
+- **Simplified Chinese** (zh-CN)
+- **Traditional Chinese** (zh-TW)
+- **English (United States)** (en-US)
+- **German** (de-DE)
+- **German (Australia)** (de-AT)
+- **Russian** (ru-RU)
+- **Ukrainian** (uk-UA)
+- **Vietnamese** (vi-VN)
+- **Portuguese (Brazil)** (pt-BR)
+- **Polish** (pl-PL)
+- **French** (fr-FR)
+- **Spanish** (es-ES)
+- **Slovak** (sk-SK)
+- **Japanese** (ja-JP)
+- **Turkish** (tr-TR)
+- **Korean** (ko-KR)
+- **Finnish** (fi-FI)
+- **Indonesian** (id-ID)
+- **Dutch** (nl-NL)
+
+:::
+
 ## Frontmatter
 
 ### redirectFrom

docs/zh/plugins/tools/redirect.md

@@ -229,6 +229,73 @@ Options:
 - 默认值: 首个语言路径
 - 详情：默认语言路径
 
+### locales
+
+- 类型：`RedirectPluginLocaleConfig`
+
+  ```ts
+  interface RedirectPluginLocaleData {
+    /**
+     * 语言名称
+     */
+    name: string
+
+    /**
+     * 切换提示
+     */
+    hint: string
+
+    /**
+     * 切换按钮文字
+     */
+    switch: string
+
+    /**
+     * 取消按钮文字
+     */
+    cancel: string
+
+    /**
+     * 记住提示文本
+     */
+    remember: string
+  }
+
+  interface RedirectPluginLocaleConfig {
+    [localePath: string]: RedirectPluginLocaleData
+  }
+  ```
+
+- 必填：否
+
+- 详情：
+
+  重定向插件的国际化配置。
+
+::: details 内置支持语言
+
+- **简体中文** (zh-CN)
+- **繁体中文** (zh-TW)
+- **英文(美国)** (en-US)
+- **德语** (de-DE)
+- **德语(澳大利亚)** (de-AT)
+- **俄语** (ru-RU)
+- **乌克兰语** (uk-UA)
+- **越南语** (vi-VN)
+- **葡萄牙语(巴西)** (pt-BR)
+- **波兰语** (pl-PL)
+- **法语** (fr-FR)
+- **西班牙语** (es-ES)
+- **斯洛伐克** (sk-SK)
+- **日语** (ja-JP)
+- **土耳其语** (tr-TR)
+- **韩语** (ko-KR)
+- **芬兰语** (fi-FI)
+- **印尼语** (id-ID)
+- **荷兰语** (nl-NL)
+
+:::
+
 ## Frontmatter
 
 ### redirectFrom

plugins/tools/plugin-redirect/src/client/components/RedirectModal.ts

@@ -1,4 +1,5 @@
 import {
+  useLocalStorage,
   usePreferredLanguages,
   useScrollLock,
   useSessionStorage,
@@ -31,8 +32,14 @@ interface LocaleInfo {
   localePath: string
 }
 
-const redirectStatusStorage = useSessionStorage<Record<string, boolean>>(
-  'VUEPRESS_REDIRECT_LOCALES',
+const REDIRECT_STORAGE_KEY = 'VUEPRESS_REDIRECT_STATUS'
+
+const redirectStatusSessionStorage = useSessionStorage<Record<string, boolean>>(
+  REDIRECT_STORAGE_KEY,
+  {},
+)
+const redirectStatusLocalStorage = useLocalStorage<Record<string, boolean>>(
+  REDIRECT_STORAGE_KEY,
   {},
 )
 
@@ -48,6 +55,7 @@ export default defineComponent({
     const body = ref<HTMLElement>()
     // lock body scroll when modal is displayed
     const showModal = useScrollLock(body)
+    const shouldRemember = ref(false)
 
     const info = computed<LocaleInfo | null>(() => {
       if (redirectLocaleEntries.some(([key]) => routeLocale.value === key))
@@ -79,6 +87,7 @@ export default defineComponent({
             .map(({ switch: switchText }) => switchText.replace('$1', lang))
             .join(' / '),
           cancel: locales.map(({ cancel }) => cancel).join(' / '),
+          remember: locales.map(({ remember }) => remember).join(' / '),
         }
       }
 
@@ -100,9 +109,16 @@ export default defineComponent({
 
       await nextTick()
 
-      if (!redirectStatusStorage.value[routeLocale.value] && info.value) {
+      if (
+        !redirectStatusSessionStorage.value[routeLocale.value] &&
+        info.value
+      ) {
         if (switchLocale === 'direct') redirect()
-        else if (switchLocale === 'modal') showModal.value = true
+        else if (
+          switchLocale === 'modal' &&
+          !redirectStatusLocalStorage.value[routeLocale.value]
+        )
+          showModal.value = true
       }
     })
 
@@ -128,13 +144,33 @@ export default defineComponent({
                     { class: 'redirect-modal-content' },
                     locale.value?.hint.map((text) => h('p', text)),
                   ),
+                  h('div', { class: 'redirect-modal-hint' }, [
+                    h('input', {
+                      id: 'remember-redirect',
+                      type: 'checkbox',
+                      value: shouldRemember.value,
+                      onChange: () => {
+                        shouldRemember.value = !shouldRemember.value
+                      },
+                    }),
+                    h(
+                      'label',
+                      { for: 'remember-redirect' },
+                      locale.value?.remember,
+                    ),
+                  ]),
                   h(
                     'button',
                     {
                       type: 'button',
                       class: 'redirect-modal-action primary',
                       onClick: () => {
-                        redirectStatusStorage.value[routeLocale.value] = true
+                        redirectStatusSessionStorage.value[routeLocale.value] =
+                          true
+                        if (shouldRemember.value) {
+                          redirectStatusLocalStorage.value[routeLocale.value] =
+                            true
+                        }
                         showModal.value = false
                         redirect()
                       },
@@ -147,7 +183,12 @@ export default defineComponent({
                       type: 'button',
                       class: 'redirect-modal-action',
                       onClick: () => {
-                        redirectStatusStorage.value[routeLocale.value] = true
+                        redirectStatusSessionStorage.value[routeLocale.value] =
+                          true
+                        if (shouldRemember.value) {
+                          redirectStatusLocalStorage.value[routeLocale.value] =
+                            true
+                        }
                         showModal.value = false
                       },
                     },

plugins/tools/plugin-redirect/src/client/styles/redirect-modal.scss

@@ -38,6 +38,76 @@
   box-shadow: 0 2px 6px 0 var(--redirect-c-shadow);
 }
 
+.redirect-modal-hint {
+  margin-top: 0.5rem;
+  color: var(--vp-c-text-mute);
+  font-size: 14px;
+  text-align: start;
+
+  input[type='checkbox'] {
+    position: relative;
+
+    vertical-align: text-bottom;
+
+    height: 1em;
+    margin-inline-end: 18px;
+
+    cursor: pointer;
+
+    appearance: none;
+
+    &::after {
+      content: ' ';
+
+      position: absolute;
+      top: 0;
+
+      display: inline-block;
+
+      box-sizing: border-box;
+      width: 14px;
+      height: 14px;
+      padding-inline-start: 0;
+      border: 1px solid var(--vp-c-border);
+      border-radius: 50%;
+
+      background: var(--vp-c-control);
+
+      text-align: center;
+
+      visibility: visible;
+    }
+
+    &:checked {
+      &::after {
+        content: '';
+        border-color: var(--vp-c-accent-bg);
+        background: var(--vp-c-accent-bg);
+      }
+
+      &::before {
+        content: '';
+
+        position: absolute;
+        inset-inline-start: 5px;
+        top: 2px;
+        z-index: 1;
+
+        width: 2px;
+        height: 6px;
+        border: solid var(--vp-c-white);
+        border-width: 0 2px 2px 0;
+
+        transform: rotate(45deg);
+      }
+    }
+  }
+
+  label {
+    display: inline-block;
+  }
+}
+
 .redirect-modal-action {
   display: block;