Update CMS UI & API

Keep legacy/outdated actions in a lower section in the UI, just for
reference.

Add necessary api bits for fetching all collections.

Now all buttons except for those in the outdated section work properly.

Author: scriptype

src/cms/api/helpers.js

@@ -17,7 +17,18 @@ const readFileContent = path => {
   return readFile(path, { encoding: 'utf-8' })
 }
 
+// TODO: find a nicer way for contentModel to serialize for cms
+const omitResolvedLinks = (data) => {
+  return JSON.parse(JSON.stringify(data, (key, value) => {
+    if (key === '__links') {
+      return undefined
+    }
+    return value
+  }))
+}
+
 module.exports = {
   contentRootPath,
-  readFileContent
+  readFileContent,
+  omitResolvedLinks
 }

src/cms/api/index.js

@@ -3,6 +3,7 @@ const createAPI = (providers) => {
     settings: require('./models/settings')(providers),
     fileSystemTree: require('./models/fileSystemTree')(providers),
     contentModel: require('./models/contentModel')(providers),
+    collections: require('./models/collections')(providers),
     categories: require('./models/categories')(providers),
     category: require('./models/category')(providers),
     posts: require('./models/posts')(providers),

src/cms/api/models/collections.js

@@ -0,0 +1,13 @@
+const { omitResolvedLinks } = require('../helpers')
+
+const createCollectionsModel = ({ getContentModel }) => {
+  const getCollections = () => {
+    return omitResolvedLinks(getContentModel().subtree.collections)
+  }
+
+  return {
+    get: getCollections
+  }
+}
+
+module.exports = createCollectionsModel

src/cms/api/models/contentModel.js

@@ -1,13 +1,9 @@
+const { omitResolvedLinks } = require('../helpers')
+
 const createContentModelModel = ({ getContentModel }) => {
   return {
     get() {
-      // TODO: find a nicer way for contentModel to serialize for cms
-      return JSON.parse(JSON.stringify(getContentModel(), (key, value) => {
-        if (key === '__links') {
-          return undefined
-        }
-        return value
-      }))
+      return omitResolvedLinks(getContentModel())
     }
   }
 }

src/cms/api/models/homepage.js

@@ -1,7 +1,7 @@
 const { writeFile } = require('fs/promises')
 const { join } = require('path')
 const frontMatter = require('front-matter')
-const { contentRootPath } = require('../helpers')
+const { contentRootPath, omitResolvedLinks } = require('../helpers')
 
 const helpers = {
   buildFrontMatter(metadata) {
@@ -37,7 +37,7 @@ const createHomepageModel = ({ getSettings, getContentModel }) => {
   }
 
   const getHomepage = (handle) => {
-    return getContentModel().homepage
+    return omitResolvedLinks(getContentModel().subtree.homepage)
   }
 
   return {

src/cms/api/models/subpage.js

@@ -1,7 +1,7 @@
 const { writeFile, mkdir } = require('fs/promises')
 const { join } = require('path')
 const frontMatter = require('front-matter')
-const { contentRootPath } = require('../helpers')
+const { contentRootPath, omitResolvedLinks } = require('../helpers')
 
 const helpers = {
   buildFrontMatter(metadata) {
@@ -42,7 +42,8 @@ const createSubpageModel = ({ getSettings, getContentModel }) => {
   }
 
   const getSubpage = (title) => {
-    return getContentModel().subpages.find(p => p.title === title)
+    const subpages = omitResolvedLinks(getContentModel().subtree.subpages)
+    return subpages.find(p => p.title === title)
   }
 
   return {

src/cms/api/models/subpages.js

@@ -1,6 +1,8 @@
+const { omitResolvedLinks } = require('../helpers')
+
 const createSubpagesModel = ({ getContentModel }) => {
   const getSubpages = () => {
-    return getContentModel().subpages
+    return omitResolvedLinks(getContentModel().subtree.subpages)
   }
 
   return {

src/cms/server/public/api.js

@@ -33,6 +33,18 @@ const api = {
     }
   },
 
+  collections: {
+    get: async () => {
+      const response = await fetch('/api/collections', {
+        method: 'get',
+        headers: {
+          'content-type': 'application/json'
+        }
+      })
+      return response.json()
+    }
+  },
+
   categories: {
     get: async () => {
       const response = await fetch('/api/categories', {
@@ -88,7 +100,7 @@ const api = {
         },
         body: JSON.stringify(options)
       })
-      return response.json()
+      return response.text()
     }
   },
 
@@ -173,7 +185,7 @@ const api = {
         },
         body: JSON.stringify(options)
       })
-      return response.json()
+      return response.text()
     }
   },
 

src/cms/server/public/app.js

@@ -2,6 +2,7 @@ import getSettings from './app/getSettings.js'
 import updateSettings from './app/updateSettings.js'
 import getFileSystemTree from './app/getFileSystemTree.js'
 import getContentModel from './app/getContentModel.js'
+import getCollections from './app/getCollections.js'
 import getCategories from './app/getCategories.js'
 import getCategory from './app/getCategory.js'
 import createCategory from './app/createCategory.js'
@@ -23,6 +24,7 @@ const makeButtonsWork = () => {
   query('#update-settings-btn').addEventListener('click', updateSettings)
   query('#get-file-system-tree-btn').addEventListener('click', getFileSystemTree)
   query('#get-content-model-btn').addEventListener('click', getContentModel)
+  query('#get-collections-btn').addEventListener('click', getCollections)
   query('#get-categories-btn').addEventListener('click', getCategories)
   query('#get-category-btn').addEventListener('click', getCategory)
   query('#create-category-btn').addEventListener('click', createCategory)

src/cms/server/public/app/getCollections.js

@@ -0,0 +1,10 @@
+import api from '../api.js'
+import dialog from './components/dialog.js'
+
+export default async () => {
+  dialog.textContent('Loading').show()
+
+  const collections = await api.collections.get()
+
+  dialog.textContent(JSON.stringify(collections, null, 2))
+}