refactor: reader mode font size

Author: wilfredinni

.eslintrc-auto-import.json

@@ -119,7 +119,6 @@
     "useClipboard": true,
     "useColorMode": true,
     "useConfirmDialog": true,
-    "useCoreStore": true,
     "useCounter": true,
     "useCssModule": true,
     "useCssVar": true,
@@ -199,6 +198,7 @@
     "usePreferredLanguages": true,
     "usePreferredReducedMotion": true,
     "useRafFn": true,
+    "useReaderStore": true,
     "useRefHistory": true,
     "useResizeObserver": true,
     "useRoute": true,

src/auto-imports.d.ts

@@ -120,7 +120,6 @@ declare global {
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
-  const useCoreStore: typeof import('./store/core')['useCoreStore']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -200,6 +199,7 @@ declare global {
   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useReaderStore: typeof import('./store/reader')['useReaderStore']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
@@ -391,7 +391,6 @@ declare module '@vue/runtime-core' {
     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
-    readonly useCoreStore: UnwrapRef<typeof import('./store/core')['useCoreStore']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
@@ -471,6 +470,7 @@ declare module '@vue/runtime-core' {
     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
+    readonly useReaderStore: UnwrapRef<typeof import('./store/reader')['useReaderStore']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>

src/components/Prose.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const core = useCoreStore()
+const reader = useReaderStore()
 </script>
 
 <template>
@@ -23,7 +23,7 @@ const core = useCoreStore()
       // code
       'prose-code:text-sky-500 prose-code:dark:text-sky-400',
       // reader
-      core.reader ? 'prose-xl' : '',
+      reader.isActive ? reader.fontSize : '',
     ]"
   >
     <slot />

src/components/Subscribe.vue

@@ -1,23 +1,25 @@
 <script setup lang="ts">
 const showSubscription = import.meta.env.VITE_NEWSLETTER === 'true' || false
 
-const core = useCoreStore()
+const reader = useReaderStore()
 const newsletter = useNewsletterStore()
-
 const email = ref('')
 const loading = ref(false)
+
 const subscribe = async () => {
   loading.value = true
   await newsletter.subscribe(email.value)
   loading.value = false
 }
+
 const response = computed(() => newsletter.getResponse)
+
 const showNewsletterForm = useLocalStorage('showNewsletterForm', true)
 </script>
 
 <template>
   <div
-    v-if="showSubscription && !core.reader && showNewsletterForm"
+    v-if="showSubscription && !reader.isActive && showNewsletterForm"
     class="mb-8 rounded-xl border border-slate-300/70 bg-slate-50 px-5 py-5 dark:border-transparent dark:bg-slate-800"
   >
     <div class="flex justify-end">

src/components/layout/TheNavbarReader.vue

@@ -1,17 +1,63 @@
 <script setup lang="ts">
-const core = useCoreStore()
+const reader = useReaderStore()
+
+const fontIndex = computed(() => {
+  return reader.fontSizes.findIndex((item) => item === reader.fontSize)
+})
+
+const hasNext = computed(() => reader.fontSizes.length - 1 > fontIndex.value)
+const increaseFont = () => {
+  if (hasNext.value) {
+    reader.setFontSize(reader.fontSizes[fontIndex.value + 1])
+  }
+}
+
+const hasPrevious = computed(() => fontIndex.value !== 0)
+const decreaseFont = () => {
+  if (hasPrevious.value) {
+    reader.setFontSize(reader.fontSizes[fontIndex.value - 1])
+  }
+}
 </script>
 
 <template>
   <nav
-    class="sticky top-0 z-40 w-full flex-none bg-white/25 backdrop-blur dark:border-slate-50/[0.06] dark:bg-transparent lg:z-50 lg:border-b lg:border-slate-900/10"
+    class="sticky top-0 z-40 w-full flex-none bg-transparent backdrop-blur dark:border-slate-50/[0.06] lg:z-50 lg:border-b lg:border-slate-900/10"
   >
-    <div class="mx-auto max-w-4xl px-4 lg:pr-0 lg:pl-8 xl:px-16">
+    <div class="mx-auto max-w-8xl px-4 xl:px-10">
       <div class="relative flex h-14 justify-between">
-        <div class="flex flex-1 items-center justify-between sm:items-center">
+        <div
+          class="flex flex-1 items-center justify-end space-x-5 sm:items-center"
+        >
+          <div
+            class="ml-6 space-x-6 border-r border-slate-200 dark:border-slate-800"
+          >
+            <button
+              class="text-slate-400 transition duration-300 dark:text-slate-500"
+              :class="
+                hasNext ? 'hover:text-sky-500 dark:hover:text-sky-500' : ''
+              "
+              @click="increaseFont"
+            >
+              A+
+            </button>
+            <button
+              class="text-slate-400 transition duration-300 dark:text-slate-500"
+              :class="
+                hasPrevious ? 'hover:text-sky-500 dark:hover:text-sky-500' : ''
+              "
+              @click="decreaseFont"
+            >
+              A-
+            </button>
+            <span class="text-white"> </span>
+          </div>
+
+          <base-theme-toggle />
+
           <button
-            class="rounded text-slate-400 hover:bg-sky-100 hover:text-sky-600 dark:hover:bg-transparent"
-            @click="core.toggle()"
+            class="rounded text-slate-400 transition duration-300 hover:text-sky-500 dark:hover:bg-transparent"
+            @click="reader.toggle()"
           >
             <span class="sr-only">close reader mode</span>
             <svg
@@ -29,8 +75,6 @@ const core = useCoreStore()
               />
             </svg>
           </button>
-
-          <base-theme-toggle />
         </div>
       </div>
     </div>

src/components/ui/BaseReaderMode.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-const core = useCoreStore()
+const reader = useReaderStore()
 </script>
 
 <template>
   <button
     class="flex w-auto items-center rounded-full bg-sky-400/10 py-1 px-3 text-xs font-medium leading-5 text-sky-600 transition duration-300 hover:bg-sky-400/20 dark:text-sky-400"
-    @click="core.toggle()"
+    @click="reader.toggle()"
   >
     <strong class="font-semibold"> Enter reader mode </strong>
     <svg

src/layouts/default.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-const core = useCoreStore()
+const reader = useReaderStore()
 
 const rootRepositoryRoutes = ['contributing', 'changelog']
 </script>
 
 <template>
   <div class="min-h-screen bg-white dark:bg-gray-900">
-    <the-navbar v-show="!core.reader" />
-    <the-navbar-reader v-show="core.reader" />
+    <the-navbar v-show="!reader.isActive" />
+    <the-navbar-reader v-show="reader.isActive" />
 
     <div
       class="relative mx-auto flex min-h-screen max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12"
     >
       <!-- sidebar -->
       <div
-        v-show="!core.reader"
+        v-show="!reader.isActive"
         class="hidden lg:relative lg:block lg:flex-none"
       >
         <div class="absolute inset-y-0 right-0 w-[50vw] dark:hidden" />
@@ -36,7 +36,7 @@ const rootRepositoryRoutes = ['contributing', 'changelog']
       <!-- article -->
       <div
         class="min-w-0 flex-auto px-4 py-12 lg:pr-0 lg:pl-8 xl:px-16"
-        :class="[core.reader ? 'max-w-2xl lg:max-w-4xl' : 'lg:max-w-none']"
+        :class="[reader.isActive ? 'max-w-2xl lg:max-w-4xl' : 'lg:max-w-none']"
       >
         <article>
           <prose v-if="$route.name !== 'index'"><router-view /></prose>
@@ -58,7 +58,7 @@ const rootRepositoryRoutes = ['contributing', 'changelog']
 
       <!-- table of content -->
       <div
-        v-show="!core.reader"
+        v-show="!reader.isActive"
         class="overflow-overlay hidden overflow-x-hidden xl:sticky xl:top-[3.6rem] xl:-mr-6 xl:block xl:h-[calc(100vh-3.6rem)] xl:flex-none xl:overflow-y-auto xl:py-10 xl:pr-6"
       >
         <the-toc />

src/store/core.ts

@@ -0,0 +1,36 @@
+import { acceptHMRUpdate, defineStore } from 'pinia'
+
+export const useReaderStore = defineStore('reader', {
+  state: () => ({
+    readerMode: false,
+    availableFontSizes: [
+      'prose-sm',
+      'prose-md',
+      'prose-lg',
+      'prose-xl',
+      'prose-2xl',
+    ],
+    currentFontSize: 'prose-xl',
+  }),
+
+  getters: {
+    isActive: (state) => state.readerMode,
+    fontSize: (state) => state.currentFontSize,
+    fontSizes: (state) => state.availableFontSizes,
+  },
+
+  actions: {
+    toggle() {
+      this.currentFontSize = 'prose-xl'
+      this.readerMode = !this.readerMode
+    },
+
+    setFontSize(size: string) {
+      this.currentFontSize = size
+    },
+  },
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useReaderStore, import.meta.hot))
+}