import fs from "fs"
import path from "path"

import cssnext from "cssnext"

import metalsmith from "metalsmith"
import markdown from "metalsmith-markdown"
import collections from "metalsmith-collections"
import feed from "metalsmith-feed"
import reactTemplates from "./metalsmith/react-templates"

//dev
import watch from "./metalsmith/server/watcher"
import serve from "metalsmith-serve"
import opn from "opn"

import contributions from "../scripts/contributors"
import i18n from "../src/modules/i18n"

import pkg from "../package"

var production = process.argv.indexOf("--production") !== -1

function build(error, contributors) {
  if (error) {throw error}

  var smith = metalsmith(path.join(__dirname, ".."))
  .source("./content")
  .destination("./dist")

  // for feed
  .metadata({
    site: {
      title: i18n.title,
      url: pkg.homepage,
    },
  })

  // add default values for md metadata
  .use(
    (files, metadata, cb) => {
      Object.keys(files)
        .filter((file) => file.match(/\.md$/))
        .forEach((file) => {
          const filedata = files[file]
          files[file] = {
            ...filedata,
            template: filedata.template || "Post",
            collection: filedata.collection || (file.indexOf("posts") === 0 ? "posts" : undefined),
            comments: filedata.comments || true,
          }
        })
      cb()
    }
  )

  // first, convert .md to .html
  .use(
    markdown({
      smartypants: true,
      gfm: true,
      tables: true,
    })
  )

  // allow looping on post for listing
  .use(
    collections({
      posts: {
        sortBy: "date",
        reverse: true,
      },
    })
  )

  .use(
    feed({
      collection: "posts",
      destination: "feed.xml",
    })
  )

  // wrap .html into react `template:`
  .use(
    reactTemplates({
      directory: "./src/modules",
      defaultTemplate: "DefaultTemplate",
      baseFile: `base-${production ? "prod" : "dev"}.html`,
      pattern: "**/*.html", // not .md because markdown() plugin rename those already
      data: {
        pkg: pkg,
        production,
        i18n,
        contributors,
      },
    })
  )

  // build css
  .use(
    (files, metadata, cb) => {
      files["index.css"] = {
        contents: new Buffer(
          cssnext(
            fs.readFileSync("./src/css/index.css", {encoding: "utf-8"}),
            {
              from: "./src/css/index.css",
              to: "./dist/index.css",
            }
          )
        ),
      }
      cb()
    }
  )

  if (production) {
    // ignore for prod only
    // so we can get watch & reload for those files too
    smith
      .build((err) => {if (err) {throw err}})
  }

  // dev server
  else {
    smith
      .use(
        watch({
          livereload: 4243,
          paths: {
            "**/*": true,
            "src/modules/**/*": "**/*.md",
          },
        })
      )
      .use(
        serve({
          port: 4242,
        })
      )
      .build((err) => {if (err) {throw err}})

    setTimeout(() => opn("http://localhost:4242"), 2000)
  }
}

contributions(build)

@@ -148,16 +148,60 @@
 rkdown%22%0A
+import highlight from %22metalsmith-metallic%22%0A
 import c
@@ -540,17 +540,16 @@
 s/i18n%22%0A
-%0A
 import p
@@ -1427,14 +1427,108 @@
  // 
-first,
+convert md code to html code highlighted with highlight.js%0A  .use(%0A    highlight(%7B%0A%0A    %7D)%0A  )%0A%0A  //
  con

Add code highlight