Add basic UI for default content type selection

Extract onboarding and editProject flows into separate modules, as they
will grow.

Inside editProject, right away prompt this new dialog popup if no
contentTypes are found in the project. It's a percepted next step of the
onboarding flow.

Some default contentTypes are hardcoded.

Author: scriptype

src/cms/server/public/app.js

@@ -1,5 +1,6 @@
 import api from './api.js'
-import { setIframeSrc } from './common.js'
+import onboarding from './app/onboarding.js'
+import editProject from './app/editProject.js'
 
 const findMostRecentProject = async () => {
   console.log('checking workspace')
@@ -16,31 +17,6 @@ const findMostRecentProject = async () => {
   return workspace.projects[0]
 }
 
-const onboarding = async () => {
-  console.log('first time onboarding')
-  const newProject = await api.workspace.createProject({
-    name: prompt('Project name')
-  })
-  return editProject({
-    ssgOptions: {
-      rootDirectory: newProject.path
-    }
-  })
-}
-
-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 () => {
   const ssgOptions = await api.ssgOptions.get()
   if (ssgOptions.rootDirectory) {

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

@@ -26,6 +26,10 @@ const dialog = {
 
   show() {
     this.$el.showModal()
+  },
+
+  hide() {
+    this.$el.close()
   }
 }
 

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

@@ -0,0 +1,114 @@
+import api from '../api.js'
+import { setIframeSrc } from '../common.js'
+import dialog from './components/dialog.js'
+
+const defaultContentTypes = [{
+  name: 'Homepage',
+  model: 'homepage',
+  description: 'A generic landing page',
+  attributes: {
+    title: 'title',
+    description: 'text',
+    content: 'content'
+  }
+}, {
+  name: 'Subpage',
+  model: 'subpage',
+  description: 'A generic subpage',
+  attributes: {
+    title: 'title',
+    description: 'text',
+    content: 'content'
+  }
+}, {
+  name: 'Blog',
+  model: 'collection',
+  description: 'A collection of blog posts',
+  facets: ['tags', 'date', 'author'],
+  collectionAlias: 'blog',
+  categoryContentType: '',
+  categoryAlias: '',
+  categoriesAlias: '',
+  entryContentType: 'BlogPost',
+  entryAlias: 'post',
+  entriesAlias: 'posts',
+  attributes: {
+    title: 'title',
+    description: 'text',
+    content: 'content'
+  }
+}, {
+  name: 'Category',
+  model: 'category',
+  description: 'A group of entries in a collection',
+  attributes: {
+    title: 'title',
+    description: 'text',
+    content: 'content'
+  }
+}, {
+  name: 'BlogPost',
+  model: 'entry',
+  description: 'Article in a blog',
+  attributes: {
+    title: 'title',
+    tags: 'strings',
+    author: 'Person',
+    date: 'date',
+    summary: 'text',
+    content: 'content',
+    coverImage: 'imageAttachment'
+  }
+}, {
+  name: 'Person',
+  model: 'entry',
+  description: 'A person',
+  attributes: {
+    title: 'title',
+    email: 'email',
+    bio: 'text',
+    blogPosts: ['+BlogPost:author']
+  }
+}]
+
+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) {
+    return console.log('contentTypes', contentTypes)
+  }
+  console.log('no contentTypes')
+
+  dialog.html(
+
+`<h1>content types</h1>
+
+<form>
+${defaultContentTypes.map(contentType => `
+<label><input type="checkbox" name="${contentType.name}">${contentType.name}</label>
+`
+).join('')}
+
+  <button>Ok</button>
+</form>`
+  ).show()
+
+  const form = dialog.find('form')
+  form.addEventListener('submit', e => {
+    const formData = new FormData(form)
+    const keyValues = Array.from(formData.entries())
+    const selectedKeys = keyValues.filter(([key, value]) => value === 'on').map(([key]) => key)
+    const selectedContentTypes = defaultContentTypes.filter(ct => selectedKeys.includes(ct.name))
+    console.log('selectedContentTypes', selectedContentTypes)
+    e.preventDefault()
+    selectedContentTypes.forEach(async contentType => {
+      await api.contentTypes.create(contentType)
+    })
+    dialog.hide()
+  })
+}
+
+export default editProject

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

@@ -0,0 +1,16 @@
+import api from '../api.js'
+import editProject from './editProject.js'
+
+const onboarding = async () => {
+  console.log('first time onboarding')
+  const newProject = await api.workspace.createProject({
+    name: prompt('Project name')
+  })
+  return editProject({
+    ssgOptions: {
+      rootDirectory: newProject.path
+    }
+  })
+}
+
+export default onboarding