Implement a basic api.contentTypes.create

& a very primitive UI to test the api

Author: scriptype

package-lock.json

@@ -9,7 +9,7 @@
   "scripts": {
     "start": "node src/ssg",
     "hookup": "husky install",
-    "tape":    "tape \"src/**/*.spec.js\" \"src/ssg/e2e-tests/**/*.test.js\" | tap-nyan",
+    "tape": "tape \"src/**/*.spec.js\" \"src/ssg/e2e-tests/**/*.test.js\" | tap-nyan",
     "tape:ci": "tape \"src/**/*.spec.js\" \"src/ssg/e2e-tests/**/*.test.js\" | tap-spec",
     "test": "nyc --reporter=text-summary npm run tape",
     "test:ci": "nyc --reporter=lcov npm run tape:ci",
@@ -42,7 +42,8 @@
     "posthtml": "^0.16.6",
     "posthtml-urls": "^1.0.0",
     "slug": "^8.2.3",
-    "turndown": "^7.1.1"
+    "turndown": "^7.1.1",
+    "yaml": "^2.8.2"
   },
   "devDependencies": {
     "cheerio": "^1.1.2",

package.json

@@ -1,6 +1,26 @@
-const createContentTypesModel = ({ getContentTypes }) => {
+const { join } = require('path')
+const { mkdir, writeFile } = require('fs/promises')
+const { stringify } = require('yaml')
+
+const createContentTypesModel = ({ getSettings, getContentTypes }) => {
+  const createContentType = async ({ name, description = '', attributes, ...config }) => {
+    const { rootDirectory } = getSettings()
+    const schemaDirectory = join(rootDirectory, 'schema')
+    const filePath = join(schemaDirectory, `${name}.md`)
+    const frontMatter = stringify({
+      name,
+      attributes,
+      ...config
+    })
+    const fileContent = ['---', frontMatter.replace(/\s+$/, ''), '---', description].join('\n')
+    await mkdir(schemaDirectory, { recursive: true })
+    await writeFile(filePath, fileContent)
+    return { ok: true }
+  }
+
   return {
-    get: getContentTypes
+    get: getContentTypes,
+    create: createContentType
   }
 }
 

src/cms/api/models/contentTypes.js

@@ -118,6 +118,17 @@ const api = {
         }
       })
       return response.json()
+    },
+
+    create: async (options) => {
+      const response = await fetch('/api/contentTypes', {
+        method: 'post',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify(options)
+      })
+      return response.json()
     }
   },
 

src/cms/server/public/api.js

@@ -32,6 +32,13 @@ const editProject = async ({ ssgOptions }) => {
   console.log('starting editor with ssgOptions', ssgOptions)
   await api.ssg.watch(ssgOptions)
   setIframeSrc()
+
+  const contentTypes = await api.contentTypes.get()
+  if (contentTypes.length) {
+    console.log('contentTypes', contentTypes)
+  } else {
+    console.log('no contentTypes')
+  }
 }
 
 window.addEventListener('DOMContentLoaded', async () => {

src/cms/server/public/app.js

@@ -4,6 +4,10 @@ const dialog = {
   $el: query('#dialog'),
   $content: query('#dialog-content'),
 
+  find(selector) {
+    return this.$content.querySelector(selector)
+  },
+
   textContent(content) {
     if (content) {
       this.$content.textContent = content
@@ -12,6 +16,14 @@ const dialog = {
     return this.$content.textContent
   },
 
+  html(html) {
+    if (html) {
+      this.$content.innerHTML = html
+      return this
+    }
+    return this.$content.innerHTML
+  },
+
   show() {
     this.$el.showModal()
   }

src/cms/server/public/app/components/dialog.js

@@ -6,6 +6,7 @@ import getSSGOptions from './explorePanel/getSSGOptions.js'
 import getSettings from './explorePanel/getSettings.js'
 import updateSettings from './explorePanel/updateSettings.js'
 import getContentTypes from './explorePanel/getContentTypes.js'
+import createContentType from './explorePanel/createContentType.js'
 import getContentModel from './explorePanel/getContentModel.js'
 import getFileSystemTree from './explorePanel/getFileSystemTree.js'
 import getCollections from './explorePanel/getCollections.js'
@@ -30,6 +31,7 @@ const template = () => {
 
       <p>contentTypes</p>
       <button type="button" id="get-content-types-btn">get contentTypes</button>
+      <button type="button" id="create-content-type-btn">create contentType</button>
 
       <p>contentModel</p>
       <button type="button" id="get-content-model-btn">get contentModel</button>
@@ -69,6 +71,7 @@ const makeButtonsWork = (panel) => {
   panel.querySelector('#get-settings-btn').addEventListener('click', getSettings)
   panel.querySelector('#update-settings-btn').addEventListener('click', updateSettings)
   panel.querySelector('#get-content-types-btn').addEventListener('click', getContentTypes)
+  panel.querySelector('#create-content-type-btn').addEventListener('click', createContentType)
   panel.querySelector('#get-content-model-btn').addEventListener('click', getContentModel)
   panel.querySelector('#get-file-system-tree-btn').addEventListener('click', getFileSystemTree)
   panel.querySelector('#get-collections-btn').addEventListener('click', getCollections)