From f0304c83cbad4b76bfee1124ce48e3b04835e657 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Tue, 17 Dec 2024 14:31:34 +0800
Subject: [PATCH] feat: rename options and wording

---
 docs/custom/index.md                      |  4 ++--
 packages/client/constants.ts              |  2 +-
 packages/client/internals/IconButton.vue  |  9 +++++++--
 packages/client/internals/NavControls.vue |  8 +++++++-
 packages/client/internals/Settings.vue    | 12 ++++--------
 packages/client/pages/export.vue          |  2 +-
 packages/client/setup/routes.ts           |  2 +-
 packages/client/styles/index.css          |  3 +--
 packages/parser/src/config.ts             |  2 +-
 packages/slidev/node/cli.ts               |  8 ++++----
 packages/slidev/node/options.ts           |  2 +-
 packages/types/src/frontmatter.ts         |  4 ++--
 packages/vscode/schema/headmatter.json    |  6 +++---
 shim.d.ts                                 |  4 ++--
 14 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/docs/custom/index.md b/docs/custom/index.md
index 2436520a5d..2e106509ed 100644
--- a/docs/custom/index.md
+++ b/docs/custom/index.md
@@ -27,8 +27,8 @@ keywords: keyword1,keyword2
 
 # enable presenter mode, can be boolean, 'dev' or 'build'
 presenter: true
-# enable exporting UI, can be boolean, 'dev' or 'build'
-exportingUI: dev
+# enable browser exporter, can be boolean, 'dev' or 'build'
+browserExporter: dev
 # enabled pdf downloading in SPA build, can also be a custom url
 download: false
 # filename of the export file
diff --git a/packages/client/constants.ts b/packages/client/constants.ts
index a92885c3d7..e21ba35cc2 100644
--- a/packages/client/constants.ts
+++ b/packages/client/constants.ts
@@ -56,7 +56,7 @@ export const HEADMATTER_FIELDS = [
   'author',
   'keywords',
   'presenter',
-  'exportingUI',
+  'browserExporter',
   'download',
   'exportFilename',
   'export',
diff --git a/packages/client/internals/IconButton.vue b/packages/client/internals/IconButton.vue
index bbc7c52ef7..abc395829c 100644
--- a/packages/client/internals/IconButton.vue
+++ b/packages/client/internals/IconButton.vue
@@ -1,13 +1,18 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   title: string
   icon?: string
   as?: string
+  to?: string
 }>()
+
+const type = computed(() => props.as || (props.to ? 'router-link' : 'button'))
 </script>
 
 <template>
-  <component :is="as || 'button'" class="slidev-icon-btn" :title="title">
+  <component :is="type" class="slidev-icon-btn" :title="title" :to="to">
     <span class="sr-only">{{ title }}</span>
     <slot>
       <div :class="icon" />
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
index 448b56e277..1f05f65506 100644
--- a/packages/client/internals/NavControls.vue
+++ b/packages/client/internals/NavControls.vue
@@ -58,7 +58,7 @@ if (__SLIDEV_FEATURE_RECORD__)
 <template>
   <nav ref="root" class="flex flex-col">
     <div
-      class="flex flex-wrap-reverse text-xl gap-0.5 p-1 lg:gap-1 lg:p-2"
+      class="flex flex-wrap-reverse text-xl gap-0.5 p-1 lg:p-2"
       :class="barStyle"
       @mouseleave="onMouseLeave"
     >
@@ -142,6 +142,12 @@ if (__SLIDEV_FEATURE_RECORD__)
         </IconButton>
       </template>
 
+      <template v-if="__SLIDEV_FEATURE_BROWSER_EXPORTER__">
+        <IconButton title="Browser Explorer" to="/export">
+          <div class="i-carbon:document-pdf" />
+        </IconButton>
+      </template>
+
       <IconButton
         v-if="!isPresenter && configs.info && !isEmbedded"
         title="Show info"
diff --git a/packages/client/internals/Settings.vue b/packages/client/internals/Settings.vue
index 51807cf866..9507e15940 100644
--- a/packages/client/internals/Settings.vue
+++ b/packages/client/internals/Settings.vue
@@ -32,13 +32,9 @@ const wakeLockItems: SelectionItem<boolean>[] = [
 <template>
   <div class="text-sm select-none mb-2">
     <SelectList v-model="slideScale" title="Scale" :items="scaleItems" />
-    <SelectList v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported" v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems" />
-    <div class="text-xs uppercase opacity-50 tracking-widest px-7 py-1 select-none text-nowrap">
-      Actions
-    </div>
-    <RouterLink v-if="__SLDIEV_FEATURE_EXPORTING_UI__" to="/export" class="block px-2 flex gap-1 py-1 hover:bg-gray-400 hover:bg-opacity-10">
-      <div class="i-carbon:export text-3 w-4 op-80 my-a" />
-      Export as
-    </RouterLink>
+    <SelectList
+      v-if="__SLIDEV_FEATURE_WAKE_LOCK__ && isSupported"
+      v-model="wakeLockEnabled" title="Wake lock" :items="wakeLockItems"
+    />
   </div>
 </template>
diff --git a/packages/client/pages/export.vue b/packages/client/pages/export.vue
index af4f0777e7..67a3fd0690 100644
--- a/packages/client/pages/export.vue
+++ b/packages/client/pages/export.vue
@@ -216,7 +216,7 @@ if (import.meta.hot) {
     <div class="print:hidden min-w-fit flex flex-wrap md:flex-nowrap md:of-y-auto md:flex-col gap-2 p-6 max-w-100">
       <h1 class="text-3xl md:my-4 flex items-center gap-2 w-full">
         <RouterLink to="/" class="i-carbon:previous-outline op-70 hover:op-100" />
-        Export Slides
+        Browser Exporter
         <sup op50 italic text-sm>Experimental</sup>
       </h1>
       <div flex="~ col gap-2">
diff --git a/packages/client/setup/routes.ts b/packages/client/setup/routes.ts
index f465473032..16c546d288 100644
--- a/packages/client/setup/routes.ts
+++ b/packages/client/setup/routes.ts
@@ -64,7 +64,7 @@ export default function setupRoutes() {
     )
   }
 
-  if (__SLDIEV_FEATURE_EXPORTING_UI__) {
+  if (__SLIDEV_FEATURE_BROWSER_EXPORTER__) {
     routes.push(
       {
         name: 'export',
diff --git a/packages/client/styles/index.css b/packages/client/styles/index.css
index fa4d087d6c..ff624519ba 100644
--- a/packages/client/styles/index.css
+++ b/packages/client/styles/index.css
@@ -19,11 +19,10 @@ html {
 
 .slidev-icon-btn {
   aspect-ratio: 1;
-  display: inline-block;
   user-select: none;
   outline: none;
   cursor: pointer;
-  @apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
+  @apply inline-flex items-center justify-center opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
   @apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
   @apply focus-visible:(opacity-100 outline outline-2 outline-offset-2 outline-black dark:outline-white);
   @apply md:p-2;
diff --git a/packages/parser/src/config.ts b/packages/parser/src/config.ts
index 4252d762f5..dcc0f13c87 100644
--- a/packages/parser/src/config.ts
+++ b/packages/parser/src/config.ts
@@ -36,7 +36,7 @@ export function getDefaultConfig(): SlidevConfig {
     record: 'dev',
     css: 'unocss',
     presenter: true,
-    exportingUI: 'dev',
+    browserExporter: 'dev',
     htmlAttrs: {},
     transition: null,
     editor: true,
diff --git a/packages/slidev/node/cli.ts b/packages/slidev/node/cli.ts
index 7e22bf84c5..48bc8ce9be 100644
--- a/packages/slidev/node/cli.ts
+++ b/packages/slidev/node/cli.ts
@@ -447,11 +447,11 @@ cli.command(
     for (const entryFile of entry as unknown as string) {
       const options = await resolveOptions({ entry: entryFile, theme }, 'export')
 
-      if (options.data.config.exportingUI !== false && !warned) {
+      if (options.data.config.browserExporter !== false && !warned) {
         warned = true
-        console.log(lightCyan('[Slidev] Try the new exporting UI!'))
+        console.log(lightCyan('[Slidev] Try the new browser exporter!'))
         console.log(
-          lightCyan('You can use the exporting UI instead by starting the dev server as normal and visit'),
+          lightCyan('You can use the browser exporter instead by starting the dev server as normal and visit'),
           `${blue('localhost:')}${dim('<port>')}${blue('/export')}\n`,
         )
       }
@@ -647,7 +647,7 @@ function printInfo(
     if (options.utils.define.__SLIDEV_FEATURE_PRESENTER__)
       console.log(`${dim('  presenter mode ')}     > ${blue(`http://localhost:${bold(port)}${presenterPath}`)}`)
     console.log(`${dim('  slides overview ')}    > ${blue(`http://localhost:${bold(port)}${overviewPath}`)}`)
-    if (options.utils.define.__SLDIEV_FEATURE_EXPORTING_UI__)
+    if (options.utils.define.__SLIDEV_FEATURE_BROWSER_EXPORTER__)
       console.log(`${dim('  export slides')}       > ${blue(`http://localhost:${bold(port)}/export/`)}`)
     if (options.inspect)
       console.log(`${dim('  vite inspector')}      > ${yellow(`http://localhost:${bold(port)}/__inspect/`)}`)
diff --git a/packages/slidev/node/options.ts b/packages/slidev/node/options.ts
index 425f3fd151..e17d469604 100644
--- a/packages/slidev/node/options.ts
+++ b/packages/slidev/node/options.ts
@@ -127,7 +127,7 @@ function getDefine(options: Omit<ResolvedSlidevOptions, 'utils'>): Record<string
       __SLIDEV_FEATURE_RECORD__: matchMode(options.data.config.record),
       __SLIDEV_FEATURE_PRESENTER__: matchMode(options.data.config.presenter),
       __SLIDEV_FEATURE_PRINT__: options.mode === 'export' || (options.mode === 'build' && [true, 'true', 'auto'].includes(options.data.config.download)),
-      __SLDIEV_FEATURE_EXPORTING_UI__: matchMode(options.data.config.exportingUI),
+      __SLIDEV_FEATURE_BROWSER_EXPORTER__: matchMode(options.data.config.browserExporter),
       __SLIDEV_FEATURE_WAKE_LOCK__: matchMode(options.data.config.wakeLock),
       __SLIDEV_HAS_SERVER__: options.mode !== 'build',
     },
diff --git a/packages/types/src/frontmatter.ts b/packages/types/src/frontmatter.ts
index fd7fe4a5ca..a9ae54f123 100644
--- a/packages/types/src/frontmatter.ts
+++ b/packages/types/src/frontmatter.ts
@@ -177,11 +177,11 @@ export interface HeadmatterConfig extends TransitionOptions {
    */
   presenter?: boolean | 'dev' | 'build'
   /**
-   * Enable exporting user interface
+   * Enable browser exporter
    *
    * @default 'dev'
    */
-  exportingUI?: boolean | 'dev' | 'build'
+  browserExporter?: boolean | 'dev' | 'build'
   /**
    * Attributes to apply to the HTML element
    *
diff --git a/packages/vscode/schema/headmatter.json b/packages/vscode/schema/headmatter.json
index 72e767c41b..ea664d20f4 100644
--- a/packages/vscode/schema/headmatter.json
+++ b/packages/vscode/schema/headmatter.json
@@ -345,7 +345,7 @@
           "markdownDescription": "Enable presenter mode",
           "default": true
         },
-        "exportingUI": {
+        "browserExporter": {
           "anyOf": [
             {
               "type": "boolean"
@@ -359,8 +359,8 @@
               "const": "build"
             }
           ],
-          "description": "Enable exporting user interface",
-          "markdownDescription": "Enable exporting user interface",
+          "description": "Enable browser exporter",
+          "markdownDescription": "Enable browser exporter",
           "default": "dev"
         },
         "htmlAttrs": {
diff --git a/shim.d.ts b/shim.d.ts
index 5a134a2d21..2d618a0f27 100644
--- a/shim.d.ts
+++ b/shim.d.ts
@@ -9,7 +9,7 @@ declare global {
   const __SLIDEV_FEATURE_RECORD__: boolean
   const __SLIDEV_FEATURE_PRESENTER__: boolean
   const __SLIDEV_FEATURE_PRINT__: boolean
-  const __SLDIEV_FEATURE_EXPORTING_UI__: boolean
+  const __SLIDEV_FEATURE_BROWSER_EXPORTER__: boolean
   const __SLIDEV_FEATURE_WAKE_LOCK__: boolean
   const __SLIDEV_HAS_SERVER__: boolean
 }
@@ -25,7 +25,7 @@ declare module '@vue/runtime-core' {
     __SLIDEV_FEATURE_RECORD__: boolean
     __SLIDEV_FEATURE_PRESENTER__: boolean
     __SLIDEV_FEATURE_PRINT__: boolean
-    __SLDIEV_FEATURE_EXPORTING_UI__: boolean
+    __SLIDEV_FEATURE_BROWSER_EXPORTER__: boolean
     __SLIDEV_FEATURE_WAKE_LOCK__: boolean
     __SLIDEV_HAS_SERVER__: boolean
   }