kiss-ssg 1.3.0 → 1.4.4

package/examples/5-helpers/pages/index.hbs

@@ -44,11 +44,17 @@
   {{/if}}
   </div>
 
-  {{#scripts}}
-  <p>not rendered</p>
-  <script src='/assets/js/sub/script2.js'></script>
-  <script src="assets/script3.js"></script>
-  <script src="/assets/js/script1.js"></script>
-  {{/scripts}}
+  {{#env is="development"}}
+    <p>Is Dev</p>
+  {{else}}
+    <p>Is NOT Dev</p>
+  {{/env}}
+
+  {{#env is="production"}}
+    <p>Is Production</p>
+  {{else}}
+    <p>Is NOT Production</p>
+  {{/env}}
+
 </body>
 </html>

package/examples/5-helpers.js

@@ -1,11 +1,13 @@
 const Kiss = require('../kiss-ssg')
 const kiss = new Kiss({
   folders: {
+    root: '..',
     src: './5-helpers',
     build: '../public/5-helpers',
   },
   verbose: true,
-  dev: false,
+  dev: true,
+  port: 8080,
 })
   .page({
     view: 'index.hbs',

package/kiss-serve.js

@@ -4,8 +4,10 @@ const static = require('serve-static')
 const colors = require('colors')
 const app = connect()
 
-module.exports = async (httpRoot) => {
+module.exports = async (httpRoot, port) => {
   if (!httpRoot) httpRoot = '/public'
+  if (!port) port = 3000
+
   app.use(function (req, res, next) {
     console.log(req.url)
     next()
@@ -26,9 +28,9 @@ module.exports = async (httpRoot) => {
 
   console.log(
     `Serving (${httpRoot}): `.grey,
-    colors.yellow('http://localhost:3000')
+    colors.yellow('http://localhost:' + port)
   )
-  app.listen(3000)
+  app.listen(port)
 
   const livereload = require('livereload')
   const server = livereload.createServer()

package/kiss-ssg.js

@@ -5,21 +5,23 @@ const sass = require('sass')
 const chokidar = require('chokidar')
 const path = require('path')
 const htmlMinify = require('html-minifier').minify // https://www.npmjs.com/package/html-minifier
-const { minify } = require('terser')
 const colors = require('colors')
 const fetch = require('node-fetch')
 const handlebars = require('handlebars') // https://handlebarsjs.com/
 const layouts = require('handlebars-layouts') // https://www.npmjs.com/package/handlebars-layouts
 handlebars.registerHelper(layouts(handlebars))
 
+const utils = require('./libs/utils.js')
+console.log(typeof utils.trimLines)
+
 const { Remarkable } = require('remarkable')
 var remarkable = new Remarkable({
   html: true, // Enable HTML tags in source
-  xhtmlOut: false, // Use '/' to close single tags (<br />)
-  breaks: false, // Convert '\n' in paragraphs into <br>
+  xhtmlOut: true, // Use '/' to close single tags (<br />)
+  breaks: true, // Convert '\n' in paragraphs into <br>
 })
 
-async function registerHandlebarsHelpers(config) {
+function registerHandlebarsHelpers(config) {
   handlebars.registerHelper('markdown', function (obj) {
     let returnVal = ''
     if (typeof obj === 'object') {
@@ -35,16 +37,21 @@ async function registerHandlebarsHelpers(config) {
         typeof obj
       )
     }
-    return new handlebars.SafeString(remarkable.render(returnVal))
+    const md = remarkable.render(utils.trimLines(returnVal))
+    return new handlebars.SafeString(md)
   })
 
   handlebars.registerHelper('sass', function (context, options) {
     // console.log('params: ', typeof options, options, context)
     let output = ''
+    let outputStyle = 'expanded'
+    if (!config.dev) outputStyle = 'compressed'
+
     if (typeof context === 'string') {
       const sassOutput = sass.renderSync({
         file: path.join(process.cwd(), context),
         includePaths: config.sass.includePaths,
+        outputStyle: outputStyle,
       })
       output = `${output} \n${sassOutput.css}`
     }
@@ -109,124 +116,24 @@ async function registerHandlebarsHelpers(config) {
     return options.fn(context)
   })
 
-  handlebars.registerHelper('scripts', function (context, options) {
-    const returnLines = ['<!--Dev Script Output-->']
-    const scripts = {}
-    let scriptFolder = ''
-    function stripStartingSlash(path) {
-      if (path.startsWith('/')) {
-        path = path.substring(1, path.length)
-        path = stripStartingSlash(path)
+  handlebars.registerHelper('env', function (options) {
+    if (options.hash.is) {
+      const envIs = options.hash.is.toLowerCase()
+      if (envIs.includes('dev') && config.dev) {
+        return options.fn(this)
+      } else if (envIs.includes('prod') && !config.dev) {
+        return options.fn(this)
+      } else {
+        return options.inverse(this)
       }
-      return path
-    }
-    context
-      .fn(this)
-      .split(/\r?\n/)
-      .filter((line) => line.includes('src'))
-      .forEach((line) => {
-        let script = line.substring(line.search(/src=[',\"]/) + 5, line.length)
-        script = script.substring(0, script.search(/[',\"]/))
-        scriptFolder = script.substring(0, script.lastIndexOf('/'))
-        scriptFolder = scriptFolder.replace('assets', '')
-        scriptFolder = stripStartingSlash(scriptFolder)
-        if (!scriptFolder) scriptFolder = 'bundles'
-
-        const scriptPath = path.join(
-          process.cwd(),
-          this.config.folders.src,
-          script
-        )
-
-        try {
-          if (fs.existsSync(scriptPath)) {
-            scripts[script] = fs.readFileSync(scriptPath, 'utf8')
-            returnLines.push(line)
-          } else {
-            console.error(`404: ${scriptPath}`.red)
-          }
-        } catch (err) {
-          console.error(err.yellow)
-        }
-      })
-
-    const genRandomHex = (size) =>
-      [...Array(size)]
-        .map(() => Math.floor(Math.random() * 16).toString(16))
-        .join('')
-
-    const scriptPath = `${
-      config.folders.build
-    }/${scriptFolder}/bundle-${genRandomHex(12)}.js`
-
-    if (config.dev) {
-      return returnLines.join('\n')
     } else {
-      console.log('Compressing scripts to:'.grey, scriptPath.green)
-      minify(scripts, {
-        output: {
-          comments: false,
-        },
-        compress: {
-          typeofs: false,
-        },
-        sourceMap: false,
-      })
-        .then((compressedScripts) => {
-          fs.writeFileSync(scriptPath, compressedScripts.code, 'utf8')
-        })
-        .catch((error) => {
-          console.error('Error compressing scripts'.red)
-          console.error(color.yellow(error.message))
-        })
-      return `<script src='${scriptPath}'></script>`
+      console.error(
+        'Environment helper missing "is" property'.red,
+        '{{#env}'.grey
+      )
+      return ''
     }
   })
-
-  // handlebars.registerHelper('helperMissing', function () {
-  //   var options = arguments[arguments.length - 1]
-  //   var args = Array.prototype.slice.call(arguments, 0, arguments.length - 1)
-  //   return new handlebars.SafeString(
-  //     `<!-- Missing: ${options.name} (${args}) -->`
-  //   )
-  // })
-}
-
-const utils = {
-  toSlug(slug) {
-    return slug
-      .toLowerCase()
-      .trim()
-      .replace(/[\W_]+/g, '-')
-  },
-  toTitleCase(str) {
-    return str
-      .toLowerCase()
-      .split(' ')
-      .map(function (word) {
-        return word.charAt(0).toUpperCase() + word.slice(1)
-      })
-      .join(' ')
-  },
-  trimPath(path) {
-    if (path.startsWith('/')) path = path.substring(1, path.length)
-    if (path.endsWith('/')) path = path.substring(0, path.length - 1)
-    return path
-  },
-  sanitizePath(path) {
-    if (path) {
-      path = this.trimPath(path)
-
-      let pathSegments = path.split('/')
-      const cleanedSegments = []
-      pathSegments.forEach((segment) => {
-        const slugifiedSegment = this.toSlug(segment)
-        cleanedSegments.push(slugifiedSegment.trim())
-      })
-      path = cleanedSegments.join('/')
-    }
-    return path
-  },
 }
 
 class KissPage {
@@ -331,8 +238,8 @@ class KissPage {
           conservativeCollapse: false,
           removeComments: true,
           removeEmptyAttributes: true,
-          minifyCSS: true,
-          minifyJS: true,
+          minifyCSS: !this._dev,
+          minifyJS: !this._dev,
         })
 
         fs.outputFile(this.buildTo, minifiedHtml, (err) => {
@@ -400,10 +307,12 @@ class Kiss {
     console.log('            Starting Kiss            \n'.zebra)
     // Setup defaults
     let folders = {
+      root: './',
       src: './src',
       pages: './src/pages',
       build: './public',
       assets: './src/assets',
+      static: './src/static',
       layouts: './src/layouts',
       partials: './src/partials',
       models: './src/models',
@@ -415,17 +324,16 @@ class Kiss {
       if (this.verbose)
         console.log(`Setting base src folder to: ${config.folders.src}`.grey)
 
-      folders = {
-        src: config.folders.src,
-        assets: `${config.folders.src}/assets`,
-        layouts: `${config.folders.src}/layouts`,
-        pages: `${config.folders.src}/pages`,
-        partials: `${config.folders.src}/partials`,
-        models: `${config.folders.src}/models`,
-        controllers: `${config.folders.src}/controllers`,
-        build: './public',
-      }
+      folders.src = config.folders.src
+      folders.assets = `${config.folders.src}/assets`
+      folders.static = `${config.folders.src}/static`
+      folders.layouts = `${config.folders.src}/layouts`
+      folders.pages = `${config.folders.src}/pages`
+      folders.partials = `${config.folders.src}/partials`
+      folders.models = `${config.folders.src}/models`
+      folders.controllers = `${config.folders.src}/controllers`
     }
+
     folders = { ...folders, ...config.folders }
     this.config = {
       ...{
@@ -436,6 +344,7 @@ class Kiss {
         sass: {
           includePaths: [],
         },
+        port: 3001,
       },
       ...config,
     }
@@ -456,7 +365,7 @@ class Kiss {
       const kissServe = require('./kiss-serve')
       var publicDir = path.resolve(this.config.folders.build)
       try {
-        kissServe(publicDir)
+        kissServe(publicDir, this.config.port)
       } catch (error) {
         console.error('Error running live reload server'.red)
         console.log(error.message)
@@ -518,10 +427,16 @@ class Kiss {
       let cssFile = sassFile.replace(sourceDir, targetDir)
       cssFile = cssFile.substr(0, cssFile.lastIndexOf('.'))
 
+      let outputStyle = 'expanded'
+      if (!this.config.dev) {
+        outputStyle = 'compressed'
+      }
+
       try {
         const sassOutput = sass.renderSync({
           file: sassFile,
           includePaths: this.config.sass.includePaths,
+          outputStyle: outputStyle,
         })
 
         fs.outputFile(`${cssFile}.css`, sassOutput.css, (err) => {
@@ -950,7 +865,7 @@ class Kiss {
       })
     }
     if (module.parent.filename) {
-      console.log('Caller: '.cyan, module.parent.filename)
+      // console.log('Caller: '.cyan, module.parent.filename)
       chokidar.watch(module.parent.filename).on('change', (path, stats) => {
         console.log(`Changed: ${path}: `.cyan)
         rebuildSite()

package/libs/on-ice/bundeler.txt

@@ -0,0 +1,114 @@
+  {{#script-bundler}}
+  <p>not rendered</p>
+  <script src='~~/node_modules/highlight.js/lib/highlight.js'></script>
+  <script src='~/assets/js/sub/script2.js'></script>
+  <script src="script3.js"></script>
+  <script src="/js/script1.js"></script>
+  {{/script-bundler}}
+
+const { minify } = require('terser')
+
+
+    handlebars.registerHelper('script-bundler', function (context, options) {
+//     const returnLines = ['<!--Dev Script Output-->']
+//     const scripts = {}
+//     // let scriptFolder = ''
+
+//     context
+//       .fn(this)
+//       .split(/\r?\n/)
+//       .filter((line) => line.includes('src'))
+//       .forEach((line) => {
+//         let script = line.substring(line.search(/src=[',\"]/) + 5, line.length)
+//         script = script.substring(0, script.search(/[',\"]/))
+//         // scriptFolder = script.substring(0, script.lastIndexOf('/'))
+//         const scriptPath = utils.resolve.alias(script, config)
+//         const fullScriptPath = path.join(process.cwd(), scriptPath)
+
+//         try {
+//           if (fs.existsSync(fullScriptPath)) {
+//             scripts[script] = fs.readFileSync(fullScriptPath, 'utf8')
+
+//             // Root Dir
+//             console.log('script', script)
+//             if (script.startsWith('~~/')) {
+//               const rootScriptPath = `${config.folders.root}/${script.substring(
+//                 3,
+//                 script.length
+//               )}`
+
+//               try {
+//                 const rootPubPath = 'kiss'
+//                 const rootScript = rootScriptPath.substr(
+//                   rootScriptPath.lastIndexOf('/') + 1,
+//                   rootScriptPath.length
+//                 )
+
+//                 fs.ensureDirSync(`${config.folders.build}/${rootPubPath}`)
+//                 fs.copyFileSync(
+//                   rootScriptPath,
+//                   `${config.folders.build}/${rootPubPath}/${rootScript}`
+//                 )
+
+//                 script = `/${rootPubPath}/${rootScript}`
+//               } catch (error) {
+//                 console.error('Error copying root script in bundler'.red)
+//                 console.error(error.message)
+//               }
+//             }
+
+//             returnLines.push(
+//               `<script src='${utils.resolve.deployAlias(
+//                 script,
+//                 config
+//               )}'></script>`
+//             )
+//           } else {
+//             console.error(`404: ${fullScriptPath}`.red)
+//           }
+//         } catch (err) {
+//           console.error(err.yellow)
+//         }
+//       })
+
+//     const genRandomHex = (size) =>
+//       [...Array(size)]
+//         .map(() => Math.floor(Math.random() * 16).toString(16))
+//         .join('')
+
+//     // const scriptPath = `${scriptFolder}/bundle-${genRandomHex(12)}.js`
+//     const scriptPath = `/kiss/bundle-${genRandomHex(12)}.js`
+
+//     if (config.dev) {
+//       return returnLines.join('\n')
+//     } else {
+//       console.log('Compressing scripts to:'.grey, scriptPath.green)
+//       minify(scripts, {
+//         output: {
+//           comments: false,
+//         },
+//         compress: {
+//           typeofs: false,
+//         },
+//         sourceMap: false,
+//       })
+//         .then((compressedScripts) => {
+//           fs.ensureDirSync(
+//             `${config.folders.build}/${scriptPath.substring(
+//               0,
+//               scriptPath.lastIndexOf('/')
+//             )}`
+//           )
+//           fs.writeFileSync(
+//             `${config.folders.build}/${scriptPath}`,
+//             compressedScripts.code,
+//             'utf8'
+//           )
+//         })
+//         .catch((error) => {
+//           console.error('Error compressing scripts'.red)
+//           console.error(color.yellow(error.message))
+//         })
+//       return `<script src='${scriptPath}'></script>`
+//     }
+//   })

package/libs/on-ice/helpers.js

@@ -0,0 +1,15 @@
+// handlebars.registerHelper('isDev', function (options) {
+//   if (config.dev) {
+//     return options.fn(this)
+//   } else {
+//     return options.inverse(this)
+//   }
+// })
+
+// handlebars.registerHelper('helperMissing', function () {
+//   var options = arguments[arguments.length - 1]
+//   var args = Array.prototype.slice.call(arguments, 0, arguments.length - 1)
+//   return new handlebars.SafeString(
+//     `<!-- Missing: ${options.name} (${args}) -->`
+//   )
+// })

package/libs/utils.js

@@ -0,0 +1,83 @@
+const utils = {
+  trimLines(lines) {
+    let text = ''
+    lines.split('\n').forEach((line) => {
+      text = text + line.trim() + '\n'
+    })
+    return text
+  },
+  toSlug(slug) {
+    return slug
+      .toLowerCase()
+      .trim()
+      .replace(/[\W_]+/g, '-')
+  },
+  toTitleCase(str) {
+    return str
+      .toLowerCase()
+      .split(' ')
+      .map(function (word) {
+        return word.charAt(0).toUpperCase() + word.slice(1)
+      })
+      .join(' ')
+  },
+  trimPath(path) {
+    if (path.startsWith('/')) path = path.substring(1, path.length)
+    if (path.endsWith('/')) path = path.substring(0, path.length - 1)
+    return path
+  },
+  sanitizePath(path) {
+    if (path) {
+      path = this.trimPath(path)
+
+      let pathSegments = path.split('/')
+      const cleanedSegments = []
+      pathSegments.forEach((segment) => {
+        const slugifiedSegment = this.toSlug(segment)
+        cleanedSegments.push(slugifiedSegment.trim())
+      })
+      path = cleanedSegments.join('/')
+    }
+    return path
+  },
+  resolve: {
+    alias: function (path, config) {
+      // console.log('Resolving Alias for: ', path)
+      // Root Dir
+      if (path.startsWith('~~/')) {
+        return `${config.folders.root}/${path.substring(3, path.length)}`
+      }
+      // Assets Dir
+      if (path.startsWith('~/assets')) {
+        return `${config.folders.assets}/${path.substring(8, path.length)}`
+      }
+      // Src Dir
+      if (path.startsWith('~/')) {
+        return `${config.folders.src}/${path.substring(2, path.length)}`
+      }
+
+      return `${config.folders.assets}/${utils.stripStartingSlash(path)}`
+    },
+    deployAlias: function (path, config) {
+      // Assets Dir
+      if (path.startsWith('~/assets')) {
+        return `${path.substring(8, path.length)}`
+      }
+      // Src Dir
+      if (path.startsWith('~/')) {
+        return `/${path.substring(2, path.length)}`
+      }
+      // console.log('No match for', path)
+      return path
+    },
+  },
+  stripStartingSlash: function (path) {
+    if (path.startsWith('/')) {
+      path = path.substring(1, path.length)
+      path = utils.stripStartingSlash(path)
+    }
+    return path
+  },
+}
+
+module.exports = utils

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kiss-ssg",
-  "version": "1.3.0",
+  "version": "1.4.4",
   "description": "Simple Static Website Generator",
   "main": "kiss-ssg.js",
   "scripts": {
@@ -36,8 +36,7 @@
     "pretty": "^2.0.0",
     "remarkable": "^2.0.1",
     "sass": "^1.32.8",
-    "serve-static": "^1.14.1",
-    "terser": "^5.6.0"
+    "serve-static": "^1.14.1"
   },
   "devDependencies": {
     "eslint-config-prettier": "^6.15.0",