Convert most of tag page to react

.babelrc.js

+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+}

.editorconfig

+root = true
+
+[*.{js,ts,tsx}]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -23,6 +23,8 @@ module.exports = {
     'no-underscore-dangle': 0,
     'no-nested-ternary': 0,
     'import/newline-after-import': 0,
+    'no-use-before-define': 0,
+    'import/prefer-default-export': 0,
   },
   globals: {
     process: true,

.gitignore

@@ -4,3 +4,4 @@
 /build
 /build-debug
 /.buildconfig
+/theme
\ No newline at end of file

.prettierrc

+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

index.js

 #!/usr/bin/env node
-const { spawnSync } = require('child_process')
+const { spawnSync, spawn } = require('child_process')
 const config = require('./sitegin/config')
 
+function onBabelExit(code) {
+  setTimeout(() => {
+    runBabel({ watch: true })
+  }, 500)
+}
+
+function runBabel({ watch = false }) {
+  const babel = spawn(
+    './node_modules/.bin/babel',
+    [
+      'theme-source',
+      '-d',
+      'theme',
+      '--delete-dir-on-start',
+      watch ? '--watch' : null,
+    ].filter(a => a),
+    { stdio: 'inherit', cwd: __dirname },
+  )
+  if (watch) babel.on('exit', onBabelExit)
+}
+
 ;(async () => {
   const opts = await config()
+  runBabel({ watch: !opts.nowatch })
   if (opts.config.options.nowatch) {
     require('./sitegin/index.js')
   } else {
@@ -11,6 +33,8 @@ const config = require('./sitegin/config')
       process.argv[0],
       [
         './node_modules/.bin/nodemon',
+        '--ignore',
+        'build-debug',
         'sitegin/index.js',
         ...process.argv.slice(2),
       ],

package.json

@@ -26,12 +26,19 @@
     "nodemon": "^1.19.4",
     "nunjucks": "^3.2.0",
     "nunjucks-date-filter": "^0.1.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
     "syntax-error": "^1.4.0",
     "toml": "^3.0.0",
     "toml-js": "0.0.8",
     "walk": "^2.3.14"
   },
   "devDependencies": {
+    "@babel/cli": "^7.7.7",
+    "@babel/core": "^7.7.7",
+    "@babel/preset-env": "^7.7.7",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.7",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.6.0",
     "eslint-config-airbnb-base": "^14.0.0",

sitegin/config.js

@@ -26,6 +26,12 @@ const options = cli.parse({
     'string',
     'theme',
   ],
+  themesourcedir: [
+    null,
+    'Allows to specify arbitrary theme source directory',
+    'string',
+    'theme-source',
+  ],
   builddir: [
     null,
     'Allows to specify arbitrary content directory.',
@@ -63,6 +69,7 @@ module.exports = () => {
     const config = {
       options,
       builddir,
+      themeSourceDir: options.themesourcedir,
       sourceDir: options.contentdir,
       staticDir: options.staticdir,
       themeDir: options.themedir,

sitegin/index.js

@@ -57,7 +57,7 @@ function sitegin(config) {
         doSync()
         if (!first) {
           first = true
-          copyStaticFiles(config.builddir, config.staticDir, config.themeDir)
+          copyStaticFiles(config.builddir, config.staticDir)
         }
         if (runAgain) run()
       })
@@ -78,7 +78,7 @@ function sitegin(config) {
   console.log('Sitegin successfully loaded')
   run()
 
-  rendersass(config.builddir, config.themeDir)
+  rendersass(config.builddir, config.themeSourceDir)
 
   if (!options.noserver) {
     const sync = require('browser-sync').create()
@@ -86,6 +86,7 @@ function sitegin(config) {
       sync.reload('*')
     }
     sync.init({
+      open: false,
       server: {
         baseDir: config.builddir,
       },
@@ -111,7 +112,7 @@ function sitegin(config) {
   }
 }
 
-function copyStaticFiles(builddir, staticdir, themedir) {
+function copyStaticFiles(builddir, staticdir) {
   // STATIC FILES
   const fsextra = require('node-fs-extra')
   fsextra.copy(
@@ -127,25 +128,18 @@ function copyStaticFiles(builddir, staticdir, themedir) {
   fsextra.copy(`${staticdir}/articles`, `${builddir}/clanek`, function() {
     console.log('copy static/articles done')
   })
-  fsextra.copy(
-    `${themedir}/static`,
-    builddir,
-    function(file) {
-      return !file.match('\\.git')
-    },
-    function() {
-      console.log(`copy ${themedir}/static done`)
-    },
-  )
 }
 
-function rendersass(builddir, themedir) {
+function rendersass(builddir, themesourcedir) {
   // SASS
   const sass = require('node-sass')
   const fs = require('fs')
   const mkdirp = require('mkdirp')
 
-  sass.render({ file: `${themedir}/sass/style.scss` }, function(err, result) {
+  sass.render({ file: `${themesourcedir}/sass/style.scss` }, function(
+    err,
+    result,
+  ) {
     if (err === null) {
       console.log('compiled sass')
       mkdirp(`${builddir}/theme`, () => {

sitegin/nunjucks.js

-/*
- * This job renders `data` using nunjucks template `type`
- */
-
-const nunjucks = require('nunjucks')
-const fs = require('fs')
-const dateFilter = require('nunjucks-date-filter')
-const util = require('util')
-const url = require('url')
-
-const config = require('./config')
-
-console.log(`watch: ${config.watch}`)
-const env = new nunjucks.Environment(
-  new nunjucks.FileSystemLoader(`${config.themeDir}/templates`, {
-    watch: config.watch,
-  }),
-)
-
-env.addFilter('date', dateFilter)
-
-env.addFilter('paginationList', (page, count) => {
-  let curPage = page
-  const pages = []
-  pages.push(curPage)
-  for (let i = 0; i < count; i += 1) {
-    curPage = curPage.metadata.prevpage
-    if (curPage === undefined) break
-    pages.unshift(curPage)
-  }
-
-  curPage = page
-  for (let i = 0; i < count; i += 1) {
-    curPage = curPage.metadata.nextpage
-    if (curPage === undefined) break
-    pages.push(curPage)
-  }
-  return pages
-})
-
-env.addFilter('inspect', obj => util.inspect(obj))
-
-env.addFilter('log', obj => console.log(obj))
-
-env.addFilter('relURL', (filename, dir_) => {
-  let dir = dir_
-  if (filename.substr(0, 1) === '/' || filename.match('://')) return filename
-  if (dir.substr(0, 1) !== '/') dir = `/${dir}`
-  if (filename.match(/\/$/)) return dir + filename
-  if (dir.match(/\/$/)) return dir + filename
-  return `${dir}/${filename}`
-})
-
-env.addFilter('absURL', (rel, base) => url.resolve(base, rel))
-
-let formats = {}
-
-module.exports = (data, type_) =>
-  new Promise((resolve, reject) => {
-    if (formats[type_]) resolve(formats[type_])
-    else {
-      fs.readdir(`${config.themeDir}/templates`, (err, files_) => {
-        if (err) {
-          console.log(config)
-          reject(
-            new Error(`Error listing files in ${config.themeDir}/templates`),
-          )
-          return
-        }
-
-        const files = files_.filter(file => file.match(`${type_}..*.nunj`))
-
-        const filteredFiles = []
-        let todo = 0
-        files.forEach(file => {
-          fs.stat(`${config.themeDir}/templates/${file}`, (err2, stat) => {
-            if (err2)
-              reject(
-                new Error(`Error stating ${config.themeDir}/templates${file}`),
-              )
-            if (stat.isFile()) filteredFiles.push(file)
-            todo -= 1
-            if (todo <= 0) {
-              formats[type_] = filteredFiles
-              resolve(filteredFiles)
-            }
-          })
-          todo += 1
-        })
-      })
-    }
-  })
-    .then(filelist => {
-      const promises = []
-      filelist.forEach(file => {
-        const type = file.replace(/^.*\.([a-z]+)\.nunj/, '$1')
-        promises.push(
-          new Promise((resolve, reject) => {
-            env.getTemplate(file, (err, tmpl) => {
-              if (err)
-                reject(new Error(`Failed to load template ${type}.html.nunj`))
-              resolve({ tmpl, type, file })
-            })
-          }),
-        )
-      })
-      return Promise.all(promises)
-    })
-    .then(tmpls => {
-      const promises = []
-      tmpls.forEach(o => {
-        promises.push(
-          new Promise((resolve, reject) => {
-            const param = {
-              ...data,
-              config: {
-                ...data.config,
-                baseurl: config ? config.options.baseurl : '',
-              },
-            }
-            o.tmpl.render(param, (err, val) => {
-              if (err) {
-                // reject(new Error('Error rendering template '+o.file));
-                reject(err)
-              }
-              resolve({ content: val, type: o.type })
-            })
-          }),
-        )
-      })
-      return Promise.all(promises)
-    })
-
-module.exports.reset = () => {
-  formats = {}
-}

sitegin/templates.js

+/*
+ * This job renders `data` using nunjucks template `type`
+ */
+const React = require('react')
+const ReactDOM = require('react-dom/server')
+const path = require('path')
+
+const config = require('./config')
+
+module.exports = async (data, type_) => {
+  try {
+    // eslint-disable-next-line import/no-dynamic-require,global-require
+    const Template = require(path.join(
+      process.cwd(),
+      config.themeDir,
+      'templates',
+      `${type_}.js`,
+    )).default
+    return [
+      {
+        content: ReactDOM.renderToStaticMarkup(
+          React.createElement(Template, {
+            ...data,
+            config: {
+              ...data.config,
+              baseurl: config ? config.options.baseurl : '',
+            },
+          }),
+        ),
+        type: 'html',
+      },
+    ]
+  } catch (e) {
+    // temporary until I implement all templates
+    if (e.code === 'MODULE_NOT_FOUND') return []
+    throw e
+  }
+}
+
+module.exports.reset = () => {}

sitegin/theme.js

-const nunjucks = require('./nunjucks')
+const templates = require('./templates')
 
 module.exports = function theme(_obj) {
   console.log('Build step: Theme')
@@ -11,7 +11,7 @@ module.exports = function theme(_obj) {
 
     const runJob = (obj, type) => {
       todo += 1
-      nunjucks(obj, type, _obj.config)
+      templates(obj, type, _obj.config)
         .then(data => {
           // eslint-disable-next-line no-param-reassign
           if (!obj.rendered) obj.rendered = []