feat: editor create page mode

server/web.js

@@ -74,17 +74,13 @@ module.exports = async () => {
     index: false,
     maxAge: '7d'
   }))
-  app.use('/_assets-legacy/svg/twemoji', async (req, res, next) => {
+  app.use('/_assets/svg/twemoji', async (req, res, next) => {
     try {
       WIKI.asar.serve('twemoji', req, res, next)
     } catch (err) {
       res.sendStatus(404)
     }
   })
-  app.use('/_assets-legacy', express.static(path.join(WIKI.ROOTPATH, 'assets-legacy'), {
-    index: false,
-    maxAge: '7d'
-  }))
 
   // ----------------------------------------
   // SSL Handlers

ux/src/components/HeaderNav.vue

@@ -27,6 +27,7 @@ q-header.bg-header.text-white.site-header(
     q-toolbar.gt-sm(
       style='height: 64px;'
       dark
+      v-if='siteStore.features.search'
       )
       q-input(
         dark

ux/src/components/PageHeader.vue

@@ -126,6 +126,17 @@
         @click='discardChanges'
       )
       q-btn.acrylic-btn(
+        v-if='editorStore.mode === `create`'
+        flat
+        icon='las la-check'
+        color='positive'
+        label='Create Page'
+        aria-label='Create Page'
+        no-caps
+        @click='createPage'
+      )
+      q-btn.acrylic-btn(
+        v-else
         flat
         icon='las la-check'
         color='positive'
@@ -246,10 +257,49 @@ async function saveChanges () {
   $q.loading.hide()
 }
 
-function editPage () {
+async function createPage () {
+  $q.dialog({
+    component: defineAsyncComponent(() => import('../components/TreeBrowserDialog.vue')),
+    componentProps: {
+      mode: 'createPage',
+      folderPath: '',
+      itemTitle: pageStore.title,
+      itemFileName: pageStore.path
+    }
+  }).onOk(async ({ path, title }) => {
+    $q.loading.show()
+    try {
+      pageStore.$patch({
+        title,
+        path
+      })
+      await pageStore.pageSave()
+      $q.notify({
+        type: 'positive',
+        message: 'Page created successfully.'
+      })
+      editorStore.$patch({
+        isActive: false
+      })
+    } catch (err) {
+      $q.notify({
+        type: 'negative',
+        message: 'Failed to create page.',
+        caption: err.message
+      })
+    }
+    $q.loading.hide()
+  })
+}
+
+async function editPage () {
+  $q.loading.show()
+  await pageStore.pageLoad({ id: pageStore.id, withContent: true })
   editorStore.$patch({
     isActive: true,
-    editor: 'markdown'
+    mode: 'edit',
+    editor: pageStore.editor
   })
+  $q.loading.hide()
 }
 </script>

ux/src/components/TreeBrowserDialog.vue

@@ -230,7 +230,10 @@ const files = computed(() => {
 // METHODS
 
 async function save () {
-  onDialogOK()
+  onDialogOK({
+    title: state.title,
+    path: state.path
+  })
 }
 
 async function treeLazyLoad (nodeId, { done, fail }) {

ux/src/components/WelcomeOverlay.vue

@@ -93,7 +93,7 @@ function createHomePage (editor) {
   pageStore.pageCreate({
     editor,
     locale: 'en',
-    path: '',
+    path: 'home',
     title: t('welcome.homeDefault.title'),
     description: t('welcome.homeDefault.description'),
     content: t('welcome.homeDefault.content')

ux/src/pages/AdminGeneral.vue

@@ -752,12 +752,7 @@ async function save () {
     })
     await adminStore.fetchSites()
     if (adminStore.currentSiteId === siteStore.id) {
-      siteStore.$patch({
-        title: state.config.title,
-        description: state.config.description,
-        company: state.config.company,
-        contentLicense: state.config.contentLicense
-      })
+      siteStore.loadSite(window.location.hostname)
     }
   } catch (err) {
     $q.notify({

ux/src/stores/page.js

@@ -78,6 +78,34 @@ const gqlQueries = {
       }
     }
     ${pagePropsFragment}
+  `,
+  pageByIdWithContent: gql`
+    query loadPageWithContent (
+      $id: UUID!
+    ) {
+      pageById(
+        id: $id
+      ) {
+        ...PageRead,
+        content
+      }
+    }
+    ${pagePropsFragment}
+  `,
+  pageByPathWithContent: gql`
+    query loadPageWithContent (
+      $siteId: UUID!
+      $path: String!
+    ) {
+      pageByPath(
+        siteId: $siteId
+        path: $path
+      ) {
+        ...PageRead,
+        content
+      }
+    }
+    ${pagePropsFragment}
   `
 }
 
@@ -92,6 +120,7 @@ export const usePageStore = defineStore('page', {
     content: '',
     createdAt: '',
     description: '',
+    editor: '',
     icon: 'las la-file-alt',
     id: '',
     isBrowsable: true,
@@ -140,12 +169,18 @@ export const usePageStore = defineStore('page', {
     /**
      * PAGE - LOAD
      */
-    async pageLoad ({ path, id }) {
+    async pageLoad ({ path, id, withContent = false }) {
       const editorStore = useEditorStore()
       const siteStore = useSiteStore()
       try {
+        let query
+        if (withContent) {
+          query = id ? gqlQueries.pageByIdWithContent : gqlQueries.pageByPathWithContent
+        } else {
+          query = id ? gqlQueries.pageById : gqlQueries.pageByPath
+        }
         const resp = await APOLLO_CLIENT.query({
-          query: id ? gqlQueries.pageById : gqlQueries.pageByPath,
+          query,
           variables: id ? { id } : { siteId: siteStore.id, path },
           fetchPolicy: 'network-only'
         })
@@ -221,56 +256,157 @@ export const usePageStore = defineStore('page', {
      */
     async pageSave () {
       const editorStore = useEditorStore()
+      const siteStore = useSiteStore()
       try {
-        const resp = await APOLLO_CLIENT.mutate({
-          mutation: gql`
-            mutation savePage (
-              $id: UUID!
-              $patch: PageUpdateInput!
-            ) {
-              updatePage (
-                id: $id
-                patch: $patch
+        if (editorStore.mode === 'create') {
+          const resp = await APOLLO_CLIENT.mutate({
+            mutation: gql`
+              mutation createPage (
+                $allowComments: Boolean
+                $allowContributions: Boolean
+                $allowRatings: Boolean
+                $content: String!
+                $description: String!
+                $editor: String!
+                $icon: String
+                $isBrowsable: Boolean
+                $locale: String!
+                $path: String!
+                $publishState: PagePublishState!
+                $publishEndDate: Date
+                $publishStartDate: Date
+                $relations: [PageRelationInput!]
+                $scriptCss: String
+                $scriptJsLoad: String
+                $scriptJsUnload: String
+                $showSidebar: Boolean
+                $showTags: Boolean
+                $showToc: Boolean
+                $siteId: UUID!
+                $tags: [String!]
+                $title: String!
+                $tocDepth: PageTocDepthInput
               ) {
-                operation {
-                  succeeded
-                  message
+                createPage (
+                  allowComments: $allowComments
+                  allowContributions: $allowContributions
+                  allowRatings: $allowRatings
+                  content: $content
+                  description: $description
+                  editor: $editor
+                  icon: $icon
+                  isBrowsable: $isBrowsable
+                  locale: $locale
+                  path: $path
+                  publishState: $publishState
+                  publishEndDate: $publishEndDate
+                  publishStartDate: $publishStartDate
+                  relations: $relations
+                  scriptCss: $scriptCss
+                  scriptJsLoad: $scriptJsLoad
+                  scriptJsUnload: $scriptJsUnload
+                  showSidebar: $showSidebar
+                  showTags: $showTags
+                  showToc: $showToc
+                  siteId: $siteId
+                  tags: $tags
+                  title: $title
+                  tocDepth: $tocDepth
+                ) {
+                  operation {
+                    succeeded
+                    message
+                  }
                 }
               }
+              `,
+            variables: {
+              ...pick(this, [
+                'allowComments',
+                'allowContributions',
+                'allowRatings',
+                'content',
+                'description',
+                'icon',
+                'isBrowsable',
+                'locale',
+                'password',
+                'path',
+                'publishEndDate',
+                'publishStartDate',
+                'publishState',
+                'relations',
+                'scriptJsLoad',
+                'scriptJsUnload',
+                'scriptCss',
+                'showSidebar',
+                'showTags',
+                'showToc',
+                'tags',
+                'title',
+                'tocDepth'
+              ]),
+              editor: editorStore.editor,
+              siteId: siteStore.id
             }
-            `,
-          variables: {
-            id: this.id,
-            patch: pick(this, [
-              'allowComments',
-              'allowContributions',
-              'allowRatings',
-              // 'content',
-              'description',
-              'icon',
-              'isBrowsable',
-              'locale',
-              'password',
-              'path',
-              'publishEndDate',
-              'publishStartDate',
-              'publishState',
-              'relations',
-              'scriptJsLoad',
-              'scriptJsUnload',
-              'scriptCss',
-              'showSidebar',
-              'showTags',
-              'showToc',
-              'tags',
-              'title',
-              'tocDepth'
-            ])
+          })
+          const result = resp?.data?.createPage?.operation ?? {}
+          if (!result.succeeded) {
+            throw new Error(result.message)
+          }
+          this.id = resp.data.createPage.page.id
+          this.editor = editorStore.editor
+        } else {
+          const resp = await APOLLO_CLIENT.mutate({
+            mutation: gql`
+              mutation savePage (
+                $id: UUID!
+                $patch: PageUpdateInput!
+              ) {
+                updatePage (
+                  id: $id
+                  patch: $patch
+                ) {
+                  operation {
+                    succeeded
+                    message
+                  }
+                }
+              }
+              `,
+            variables: {
+              id: this.id,
+              patch: pick(this, [
+                'allowComments',
+                'allowContributions',
+                'allowRatings',
+                'content',
+                'description',
+                'icon',
+                'isBrowsable',
+                'locale',
+                'password',
+                'path',
+                'publishEndDate',
+                'publishStartDate',
+                'publishState',
+                'relations',
+                'scriptJsLoad',
+                'scriptJsUnload',
+                'scriptCss',
+                'showSidebar',
+                'showTags',
+                'showToc',
+                'tags',
+                'title',
+                'tocDepth'
+              ])
+            }
+          })
+          const result = resp?.data?.updatePage?.operation ?? {}
+          if (!result.succeeded) {
+            throw new Error(result.message)
           }
-        })
-        const result = resp?.data?.updatePage?.operation ?? {}
-        if (!result.succeeded) {
-          throw new Error(result.message)
         }
         // Update editor state timestamps
         const curDate = DateTime.utc()

ux/src/stores/site.js

@@ -26,7 +26,9 @@ export const useSiteStore = defineStore('site', {
     showSidebar: true,
     overlay: null,
     features: {
-      ratingsMode: 'off'
+      ratingsMode: 'off',
+      reasonForChange: 'required',
+      search: false
     },
     editors: {
       asciidoc: false,
@@ -87,6 +89,8 @@ export const useSiteStore = defineStore('site', {
                 footerExtra
                 features {
                   ratingsMode
+                  reasonForChange
+                  search
                 }
                 editors {
                   asciidoc {