Introduce no-rootDirectory-yet case (create)

This is the first onboarding case when desktop app will be used to init
writ. For now, add a new mode in the cli (create) that starts the CMS
without an initial state.

Speaking of which, now the cli delegates the watch mode's work to CMS.

Reasoning:
- If 'writ build' is entered, then it's ok to just run writ once
- If 'writ watch' is entered, it means we are entering the live preview
+ cms mode. So let the CMS handle the rest
- Because the CMS will anyway have to handle everything when writ is
started via desktop app

Speaking of which, now CMS server is not started within the routines of
ssg. CMS initialization logic is moved up to the clients (cli, desktop
(tbd)). This made the interior of the ssg immediately simpler. No need
for the routines-wrapping index. It's all index.js now. Injecting
cms.setState to watcher's onChange has also become simpler.

Now, since the CMS will be responsible to run build and watch, new api
endpoints, server routes and frontend modules are added. The prototype
CMS UI now has these new buttons:
- ssg.build()
- ssg.watch()
- get ssg options

SSG options is what's passed as initial state to the CMS from the CLI
(or other client). Currently, if no initial state is passed, meaning no
rootDirectory to run writ in, none of the new buttons (or any others)
work. But this is by design, for now. This case is going to evolve into
onboarding flow, where the user inputs the ssg options and more and then
watching and building will be triggered by the cms

While at it:
- Make the explore-panel (container of buttons) draggable
- Inject settings to watcher

Author: scriptype

src/cli/bin

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
-const writ = require('../')
+const ssg = require('../')
+const createCMS = require('../cms')
 const manual = require('./manual')
 const Flag = require('./flag')
 
@@ -12,7 +13,7 @@ if (!cli.length) {
 
 let [ mode, ...opts ] = cli
 
-const modes = ['start', 'build']
+const modes = ['start', 'build', 'create']
 const flags = {
   refreshTheme: new Flag('refresh-theme', 'r'),
   debug: new Flag('debug', 'd')
@@ -34,4 +35,23 @@ if (options.debug) {
   console.log('cli', { mode, opts, options })
 }
 
-writ[mode](options)
+if (mode === 'start') {
+  const cms = createCMS({
+    ssgOptions: {
+      rootDirectory: options.rootDirectory,
+      refreshTheme: options.refreshTheme,
+      debug: options.debug,
+      cli: true
+    }
+  })
+  cms.server.start({
+    silent: false
+  })
+} else if (mode === 'create') {
+  const cms = createCMS()
+  cms.server.start({
+    silent: false
+  })
+} else {
+  ssg.build(options)
+}

src/cli/manual.js

@@ -13,6 +13,7 @@ Commands
 --------
 build: Run once to produce build output
 start: Start livereloading preview and rerun on changes
+create: Create from scratch
 
 
 Options
@@ -54,4 +55,7 @@ $ writ start ../the-other-directory --debug
 
 Refresh theme directory and start development
 $ writ start --refresh-theme
+
+Create a project from scratch
+$ writ create
 `

src/cms/api/index.js

@@ -13,6 +13,8 @@ const createAPI = (providers) => {
     homepage: require('./models/homepage')(providers),
     tags: require('./models/tags')(providers),
     tag: require('./models/tag')(providers),
+    ssg: require('./models/ssg')(providers),
+    ssgOptions: require('./models/ssgOptions')(providers),
   }
 }
 

src/cms/api/models/ssg.js

@@ -0,0 +1,30 @@
+const ssg = require('../../../')
+
+const createSSGModel = (state) => {
+  return {
+    async build({ rootDirectory, refreshTheme, debug, cli }) {
+      return state.setState(
+        await ssg.build({
+          rootDirectory,
+          refreshTheme,
+          debug,
+          cli
+        })
+      )
+    },
+
+    async watch({ rootDirectory, refreshTheme, debug, cli }) {
+      return state.setState(
+        await ssg.watch({
+          rootDirectory,
+          refreshTheme,
+          debug,
+          cli,
+          onChange: state.setState
+        })
+      )
+    }
+  }
+}
+
+module.exports = createSSGModel

src/cms/api/models/ssgOptions.js

@@ -0,0 +1,7 @@
+const createSSGOPtionsModel = ({ getSSGOptions }) => {
+  return {
+    get: getSSGOptions
+  }
+}
+
+module.exports = createSSGOPtionsModel

src/cms/index.js

@@ -1,18 +1,28 @@
 const createAPI = require('./api')
 const createServer = require('./server')
 
-const createCMS = () => {
-  const state = {
-    settings: {},
-    fileSystemTree: [],
-    contentModel: {}
-  }
+const createCMS = (initialState = {}) => {
+  const store = (() => {
+    const state = Object.assign({
+      ssgOptions: {},
+      settings: {},
+      fileSystemTree: [],
+      contentModel: {}
+    }, initialState)
 
-  const api = createAPI({
-    getSettings: () => state.settings,
-    getFileSystemTree: () => state.fileSystemTree,
-    getContentModel: () => state.contentModel
-  })
+    return {
+      getSettings: () => state.settings,
+      getFileSystemTree: () => state.fileSystemTree,
+      getContentModel: () => state.contentModel,
+      getSSGOptions: () => state.ssgOptions,
+
+      setState: (newState) => {
+        Object.assign(state, newState)
+      }
+    }
+  })()
+
+  const api = createAPI(store)
 
   const server = createServer({
     api
@@ -21,11 +31,7 @@ const createCMS = () => {
   return {
     api,
     server,
-    setState(newState) {
-      state.settings = newState.settings
-      state.fileSystemTree = newState.fileSystemTree
-      state.contentModel = newState.contentModel
-    }
+    ...store
   }
 }
 

src/cms/server/public/api.js

@@ -9,6 +9,43 @@ const makeQueryString = (params) => {
 }
 
 const api = {
+  ssg: {
+    build: async (options) => {
+      const response = await fetch('/api/ssg/build', {
+        method: 'post',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify(options)
+      })
+      return response.text()
+    },
+
+    watch: async (options) => {
+      const response = await fetch('/api/ssg/watch', {
+        method: 'post',
+        headers: {
+          'content-type': 'application/json'
+        },
+        body: JSON.stringify(options)
+      })
+      return response.text()
+    }
+
+  },
+
+  ssgOptions: {
+    get: async () => {
+      const response = await fetch('/api/ssgOptions', {
+        method: 'get',
+        headers: {
+          'content-type': 'application/json'
+        }
+      })
+      return response.json()
+    }
+  },
+
   category: {
     get: async (options) => {
       const { name } = options

src/cms/server/public/app.js

@@ -1,3 +1,6 @@
+import ssgBuild from './app/ssgBuild.js'
+import ssgWatch from './app/ssgWatch.js'
+import getSSGOptions from './app/getSSGOptions.js'
 import getSettings from './app/getSettings.js'
 import updateSettings from './app/updateSettings.js'
 import getFileSystemTree from './app/getFileSystemTree.js'
@@ -20,6 +23,15 @@ import getTag from './app/getTag.js'
 const query = document.querySelector.bind(document)
 
 const makeButtonsWork = () => {
+  query('#ssg-build-btn').addEventListener('click', async () => {
+    await ssgBuild()
+    setIframeSrc()
+  })
+  query('#ssg-watch-btn').addEventListener('click', async () => {
+    await ssgWatch()
+    setIframeSrc()
+  })
+  query('#get-ssg-options-btn').addEventListener('click', getSSGOptions)
   query('#get-settings-btn').addEventListener('click', getSettings)
   query('#update-settings-btn').addEventListener('click', updateSettings)
   query('#get-file-system-tree-btn').addEventListener('click', getFileSystemTree)
@@ -45,7 +57,31 @@ const setIframeSrc = () => {
   query('#preview').src = `http://${hostname}:3000`
 }
 
+const makeDraggable = (element) => {
+  let offsetX = 0
+  let offsetY = 0
+
+  element.addEventListener('mousedown', (e) => {
+    offsetX = e.clientX - element.offsetLeft
+    offsetY = e.clientY - element.offsetTop
+
+    const move = (e) => {
+      element.style.left = (e.clientX - offsetX) + 'px'
+      element.style.top = (e.clientY - offsetY) + 'px'
+    }
+
+    const stop = () => {
+      document.removeEventListener('mousemove', move)
+      document.removeEventListener('mouseup', stop)
+    }
+
+    document.addEventListener('mousemove', move)
+    document.addEventListener('mouseup', stop)
+  })
+}
+
 window.addEventListener('DOMContentLoaded', () => {
   setIframeSrc()
   makeButtonsWork()
+  makeDraggable(document.querySelector('.explore-panel'))
 })

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

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

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

@@ -0,0 +1,8 @@
+import api from '../api.js'
+
+const ssgBuild = async () => {
+  const ssgOptions = await api.ssgOptions.get()
+  return api.ssg.build(ssgOptions)
+}
+
+export default ssgBuild