Fix pinned docs in Nuxt build (more)

Author: davidmyersdev

layouts/dashboard.vue

@@ -2,7 +2,6 @@
 import { ViewColumnsIcon } from '@heroicons/vue/24/outline'
 import { CalendarIcon, Cog8ToothIcon, DocumentPlusIcon, HeartIcon, InboxIcon, UserCircleIcon, XMarkIcon } from '@heroicons/vue/24/solid'
 import { computed, defineComponent, onBeforeUnmount, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import { useMq } from 'vue3-mq'
 import DiscordIcon from '/assets/discord.svg?component'
@@ -73,9 +72,9 @@ export default defineComponent({
       toggleMeta()
     })
 
-    const handleTabClose = (id: string) => {
+    const handleTabClose = async (id: string) => {
       if (doc.value?.id === id) {
-        router.push({ path: '/docs/new' })
+        await router.push({ path: '/docs/new' })
       }
 
       unpinDoc(id)

pages/docs/[docId]/index.vue

@@ -1,26 +1,12 @@
-<template>
-  <Editor
-    ref="editable"
-    :appearance="appearance"
-    :doc="doc"
-    :key="doc.id"
-    :initialFocus="initialFocus"
-    :initialSelections="initialSelections"
-    :ro="ro"
-    :settings="settings"
-    @input="input"
-  />
-</template>
-
-<script>
-import { defineComponent, inject } from 'vue'
+<script lang="ts">
+import { type Ref, defineComponent, inject } from 'vue'
 import { useStore } from 'vuex'
 import Editor from '/components/Editor.vue'
 import Doc from '/src/models/doc'
 import { EDIT_DOCUMENT } from '/src/store/actions'
 import { useRecentDocs } from '/src/stores/useRecentDocs'
 
-const formatTags = (tags, delimiter = ', ') => {
+const formatTags = (tags: string[], delimiter = ', ') => {
   return tags.map((tag) => `#${tag}`).join(delimiter)
 }
 
@@ -33,7 +19,7 @@ export default defineComponent({
     initialFocus: {
       type: String,
       default: () => 'any',
-      validator: (position) => ['any', 'start', 'end'].includes(position),
+      validator: (position: string) => ['any', 'start', 'end'].includes(position),
     },
     initialSelections: {
       type: Array,
@@ -43,75 +29,73 @@ export default defineComponent({
       type: Boolean,
     },
   },
-  data() {
-    return {
-      editor: null,
-      placeholder: new Doc({ text: formatTags(this.$store.state.context.tags, ' ') }),
-    }
-  },
   setup(props) {
-    const appearance = inject('appearance')
+    const appearance = inject<Ref<string>>('appearance', ref('auto'))
+    const editor = ref()
     const router = useRouter()
     const store = useStore()
+    const placeholder = new Doc({ text: formatTags(store.state.context.tags, ' ') })
     const settings = computed(() => store.state.settings.editor)
     const recentDocs = useRecentDocs()
-    const docId = computed(() => props.docId || router.currentRoute.value.params.docId)
-
-    // Todo: Keep a centralized list of docId exclusions.
-    if (docId.value && docId.value !== 'new') {
-      recentDocs.add(docId.value)
-    }
+    const docId = computed(() => props.docId || router.currentRoute.value.params.docId as string)
+    const doc = computed(() => store.getters.decrypted.find((d: Doc) => d.id === docId.value) || placeholder)
+    const tags = computed(() => doc.value.tags)
+    const header = computed(() => doc.value.headers[0])
 
-    return {
-      appearance: appearance.value === 'october' ? 'dark' : appearance.value,
-      settings,
-    }
-  },
-  watch: {
-    tags: {
-      deep: true,
-      handler() {
-        this.updateTitle()
-      },
-    },
-    header() {
-      this.updateTitle()
-    },
-  },
-  computed: {
-    doc() {
-      return this.$store.getters.decrypted.find((doc) => doc.id === (this.docId || this.$route.params.docId)) || this.placeholder
-    },
-    tags() {
-      return this.doc.tags
-    },
-    header() {
-      return this.doc.headers[0]
-    },
-  },
-  methods: {
-    input(text) {
-      if (!this.ro) {
-        this.$store.commit(EDIT_DOCUMENT, new Doc({ ...this.doc, text }))
+    const onInput = async (text: string) => {
+      if (!props.ro) {
+        store.commit(EDIT_DOCUMENT, new Doc({ ...doc.value, text }))
 
-        if (!this.docId) {
-          this.$router.replace({
-            path: `/docs/${this.doc.id}`,
+        if (!docId.value || docId.value === 'new') {
+          await router.replace({
+            path: `/docs/${doc.value.id}`,
             query: {
-              p: true,
+              p: '1',
             },
           })
+
+          recentDocs.add(docId.value)
         }
       }
-    },
-    updateTitle() {
+    }
+
+    onMounted(() => {
+      // Todo: Keep a centralized list of docId exclusions.
+      if (docId.value && docId.value !== 'new') {
+        recentDocs.add(docId.value)
+      }
+    })
+
+    watchEffect(() => {
       useHead({
-        title: this.header || formatTags(this.doc.tags) || 'Build your second brain',
+        title: header.value || formatTags(tags.value) || 'Build your second brain',
       })
-    },
-  },
-  async mounted() {
-    this.updateTitle()
+    })
+
+    return {
+      appearance: appearance.value === 'october' ? 'dark' : appearance.value,
+      doc,
+      editor,
+      header,
+      onInput,
+      placeholder,
+      settings,
+      tags,
+    }
   },
 })
 </script>
+
+<template>
+  <Editor
+    ref="editable"
+    :appearance="appearance"
+    :doc="doc"
+    :key="doc.id"
+    :initialFocus="initialFocus"
+    :initialSelections="initialSelections"
+    :ro="ro"
+    :settings="settings"
+    @input="onInput"
+  />
+</template>

test/cypress/e2e/editor.cy.ts

@@ -3,7 +3,7 @@ describe('editor', () => {
     cy.clearIDB()
     cy.visit('/docs/new')
     // Todo: Determine if there is a better way to wait for the initial redirect.
-    cy.wait(100)
+    cy.wait(300)
     cy.visit('/docs/new')
   })
 
@@ -21,6 +21,6 @@ describe('editor', () => {
   it('redirects to /docs/:docId after typing anything', () => {
     cy.get('.ink-mde-editor-content').type('a')
     cy.url().should('not.match', /\/docs\/new$/)
-    cy.url().should('match', /\/docs\/.{4,}\?p=true$/)
+    cy.url().should('match', /\/docs\/.{4,}\?p=1$/)
   })
 })