refactor: Refactor build to use webpack

2019-11-24 22:44:26 +00:00 · 2019-11-24 22:44:26 +00:00 · 7b1727dc74
commit 7b1727dc74
parent 4200bd7a3b
41 changed files with 6204 additions and 1751 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,7 +1,10 @@
 # Skip build results
+_target/**
 coverage/**
-build/**
+bundles/**
 docs/**
+lib/**
+lib-esm/**
 node_modules/**
 src/diff2html-templates.*
 typings/**
--- a/.gitignore
+++ b/.gitignore
@ -29,7 +29,9 @@ bower_components/
 # Terraform
 /terraform/.terraform

-/docs/
-/dist/
-/build/
+/_target
 /src/diff2html-templates.*
+/docs/
+/bundles/
+/lib/
+/lib-esm/
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}
--- a/website/CNAME
+++ b/website/CNAME
--- a/README.md
+++ b/README.md
@ -48,10 +48,11 @@ diff2html generates pretty HTML diffs from git or unified diff output.
 - [Node CLI](https://www.npmjs.org/package/diff2html-cli)
 - Manually download and import:
  - Browser
-    - [build/browser/diff2html.min.js](./build/browser/diff2html.min.js) - includes the diff parser and html generator
-    - [build/browser/diff2html-ui.min.js](./build/browser/diff2html-ui.min.js) - includes the wrapper of diff2html that adds highlight, synchronized scroll, and other nice features
+    - [bundles/js/diff2html.min.js](./bundles/js/diff2html.min.js) - includes the diff parser and html generator
+    - [bundles/js/diff2html-ui.min.js](./bundles/js/diff2html-ui.min.js) - includes the wrapper of diff2html that adds highlight, synchronized scroll, and other nice features
  - Node.js
-    - [build/commonjs-node/diff2html.js](./build/commonjs-node/diff2html.js) - includes the diff parser and html generator
+    - [lib/diff2html.js](./lib/diff2html.js) - targeted for es5, includes the diff parser and html generator
+    - [lib-esm/diff2html.js](./lib-esm/diff2html.js) - targeted for es6 - includes the diff parser and html generator

 ## How to use

@ -61,7 +62,7 @@ Import the stylesheet

 ```html
 <!-- CSS -->
-<link rel="stylesheet" type="text/css" href="dist/diff2html.css" />
+<link rel="stylesheet" type="text/css" href="bundles/css/diff2html.min.css" />
 ```

 You can also refer to it from a CDN like [CDNJS](https://cdnjs.com/libraries/diff2html).
@ -72,13 +73,13 @@ Import the stylesheet and the library code

 ```html
 <!-- CSS -->
-<link rel="stylesheet" type="text/css" href="build/css/diff2html.min.css" />
+<link rel="stylesheet" type="text/css" href="bundles/css/diff2html.min.css" />

 <!-- Javascripts -->
-<script type="text/javascript" src="build/browser/diff2html.min.js"></script>
+<script type="text/javascript" src="bundles/js/diff2html.min.js"></script>
 ```

-It will now be available as a global variable named `global.Diff2Html`.
+It will now be available as a global variable named `Diff2Html`.

 ```js
 document.addEventListener("DOMContentLoaded", () => {
@ -156,7 +157,7 @@ export class AppDiffComponent implements OnInit {

 <script>
 import * as Diff2Html from "diff2html";
-import "diff2html/build/css/diff2html.min.css";
+import "diff2html/bundles/css/diff2html.min.css";

 export default {
  data() {
@ -230,10 +231,10 @@ The HTML output accepts a Javascript object with configuration. Possible options

 ```html
 <!-- CSS -->
-<link rel="stylesheet" type="text/css" href="build/css/diff2html.min.css" />
+<link rel="stylesheet" type="text/css" href="bundles/css/diff2html.min.css" />

 <!-- Javascripts -->
-<script type="text/javascript" src="build/browser/diff2html-ui.min.js"></script>
+<script type="text/javascript" src="bundles/js/diff2html-ui.min.js"></script>
 ```

 #### Init
@ -242,9 +243,9 @@ The HTML output accepts a Javascript object with configuration. Possible options
 const targetElement = document.getElementById("destination-elem-id");
 const configuration = { drawFileList: true, matching: "lines" };

-const diff2htmlUi = new global.Diff2HtmlUI(diffString, targetElement, configuration);
+const diff2htmlUi = new Diff2HtmlUI(diffString, targetElement, configuration);
 // or
-const diff2htmlUi = new global.Diff2HtmlUI(diffJson, targetElement, configuration);
+const diff2htmlUi = new Diff2HtmlUI(diffJson, targetElement, configuration);
 ```

 #### Draw
@ -258,10 +259,10 @@ diff2htmlUi.draw();
 ```html
 <!-- Stylesheet -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css" />
-<link rel="stylesheet" type="text/css" href="build/css/diff2html.min.css" />
+<link rel="stylesheet" type="text/css" href="bundles/css/diff2html.min.css" />

 <!-- Javascripts -->
-<script type="text/javascript" src="build/browser/diff2html-ui.min.js"></script>
+<script type="text/javascript" src="bundles/js/diff2html-ui.min.js"></script>
 ```

 > Pass the option `highlight` with value true or invoke `diff2htmlUi.highlightCode()` after `diff2htmlUi.draw()`.
@ -277,7 +278,7 @@ index 0000001..0ddf2ba
 +console.log("Hello from Diff2Html!")`;
  const targetElement = document.getElementById("myDiffElement");
  const configuration = { inputFormat: "json", drawFileList: true, matching: "lines", highlight: true };
-  const diff2htmlUi = new global.Diff2HtmlUI(diffString, targetElement, configuration);
+  const diff2htmlUi = new Diff2HtmlUI(diffString, targetElement, configuration);
  diff2htmlUi.draw();
  diff2htmlUi.highlightCode();
 });
@ -289,7 +290,7 @@ index 0000001..0ddf2ba

 ```html
 <!-- Javascripts -->
-<script type="text/javascript" src="build/browser/diff2html-ui.min.js"></script>
+<script type="text/javascript" src="bundles/js/diff2html-ui.min.js"></script>
 ```

 > Invoke the Diff2HtmlUI helper
@ -298,7 +299,7 @@ index 0000001..0ddf2ba
 ```js
 document.addEventListener("DOMContentLoaded", () => {
  const targetElement = document.getElementById("myDiffElement");
-  var diff2htmlUi = new global.Diff2HtmlUI(lineDiffExample, targetElement, { drawFileList: true, matching: "lines" });
+  var diff2htmlUi = new Diff2HtmlUI(lineDiffExample, targetElement, { drawFileList: true, matching: "lines" });
  diff2htmlUi.draw();
  diff2htmlUi.fileListToggle(false);
 });
--- a/package.json
+++ b/package.json
@ -37,62 +37,87 @@
  "scripts": {
    "lint": "eslint '*/**/*.{js,jsx,ts,tsx}'",
    "style": "yarn run lint",
-    "test": "yarn run build-scripts && yarn run build-templates && jest",
+    "test": "yarn run build-templates && jest",
    "coverage": "jest --collectCoverage",
    "coverage-html": "yarn run coverage && open ./coverage/index.html",
    "codacy": "cat ./coverage/lcov.info | codacy-coverage",
-    "build": "rm -rf build docs; yarn run build-scripts && yarn run build-css && yarn run build-templates && yarn run build-library && yarn run build-browser-bundle && yarn run build-website",
-    "build-scripts": "tsc -p tsconfig.scripts.json",
-    "build-css": "./scripts/build-css.sh",
-    "build-templates": "./scripts/build-templates.sh",
-    "build-library": "tsc -p tsconfig.json",
-    "build-browser-bundle": "./scripts/build-browser-bundle.sh",
-    "build-website": "./scripts/build-website.sh",
+    "build": "yarn run build-css && yarn run build-templates && yarn run build-es5 && yarn run build-esm && yarn run build-bundles && yarn run build-website",
+    "build-es5": "rm -rf lib; tsc -p tsconfig.json --outDir lib",
+    "build-esm": "rm -rf lib-esm; tsc -p tsconfig.json -m es6 --outDir lib-esm",
+    "build-bundles": "rm -rf ./bundles/js; NODE_ENV=production WEBPACK_MINIMIZE=true webpack --mode production --config webpack.bundles.ts",
+    "build-css": "rm -rf ./bundles/css; postcss --use autoprefixer postcss-import postcss-preset-env cssnano -o ./bundles/css/diff2html.min.css ./src/ui/css/diff2html.css",
+    "build-templates": "ts-node ./scripts/hulk.ts --wrapper ts --variable 'defaultTemplates' ./src/templates/*.mustache > ./src/diff2html-templates.ts",
+    "build-website": "rm -rf docs; NODE_ENV=production WEBPACK_MINIMIZE=true webpack --mode production --config webpack.website.ts",
+    "start-website": "WEBPACK_MINIFY=false NODE_ENV=dev webpack-dev-server --mode dev --config webpack.website.ts",
    "preversion": "yarn run build && yarn run lint && yarn test",
    "version": "git add -A package.json",
    "postversion": "git push && git push --tags"
  },
-  "main": "./build/commonjs-node/diff2html.js",
-  "browser": {
-    "fs": false
-  },
+  "main": "./lib/diff2html.js",
  "dependencies": {
    "diff": "4.0.1",
    "hogan.js": "3.0.2"
  },
+  "optionalDependencies": {
+    "highlight.js": "9.16.2"
+  },
  "devDependencies": {
+    "@types/autoprefixer": "9.6.1",
+    "@types/clipboard": "2.0.1",
+    "@types/copy-webpack-plugin": "5.0.0",
    "@types/diff": "4.0.2",
    "@types/highlight.js": "9.12.3",
-    "@types/hogan.js": "^3.0.0",
-    "@types/jest": "24.0.18",
+    "@types/hogan.js": "3.0.0",
+    "@types/html-webpack-plugin": "3.2.1",
+    "@types/jest": "24.0.23",
+    "@types/mini-css-extract-plugin": "0.8.0",
    "@types/mkdirp": "0.5.2",
-    "@types/node": "12.7.2",
+    "@types/node": "12.12.12",
    "@types/nopt": "3.0.29",
-    "@typescript-eslint/eslint-plugin": "2.0.0",
-    "@typescript-eslint/parser": "2.0.0",
-    "autoprefixer": "9.6.0",
-    "browserify": "16.5.0",
-    "clean-css-cli": "4.3.0",
+    "@types/webpack": "4.41.0",
+    "@typescript-eslint/eslint-plugin": "2.8.0",
+    "@typescript-eslint/parser": "2.8.0",
+    "autoprefixer": "9.7.2",
+    "bootstrap": "3.4.1",
+    "clipboard": "2.0.4",
    "codacy-coverage": "3.4.0",
-    "eslint": "6.2.2",
-    "eslint-config-prettier": "6.1.0",
-    "eslint-config-standard": "14.0.1",
+    "copy-webpack-plugin": "5.0.5",
+    "css-loader": "3.2.0",
+    "cssnano": "4.1.10",
+    "eslint": "6.7.0",
+    "eslint-config-prettier": "6.7.0",
+    "eslint-config-standard": "14.1.0",
    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jest": "22.15.2",
-    "eslint-plugin-node": "9.1.0",
-    "eslint-plugin-prettier": "3.1.0",
+    "eslint-plugin-jest": "23.0.4",
+    "eslint-plugin-node": "10.0.0",
+    "eslint-plugin-prettier": "3.1.1",
    "eslint-plugin-promise": "4.2.1",
    "eslint-plugin-standard": "4.0.1",
    "fast-html-parser": "1.0.1",
-    "highlight.js": "9.15.10",
+    "file-loader": "4.3.0",
+    "handlebars": "4.5.3",
+    "handlebars-loader": "1.7.1",
+    "html-webpack-plugin": "3.2.0",
+    "image-webpack-loader": "6.0.0",
    "jest": "24.9.0",
+    "mini-css-extract-plugin": "0.8.0",
    "mkdirp": "0.5.1",
    "nopt": "4.0.1",
    "postcss-cli": "6.1.3",
-    "prettier": "1.18.2",
-    "terser": "4.3.8",
-    "ts-jest": "24.1.0",
-    "typescript": "3.6.4",
+    "postcss-import": "12.0.1",
+    "postcss-loader": "3.0.0",
+    "postcss-normalize": "8.0.1",
+    "postcss-preset-env": "6.7.0",
+    "prettier": "1.19.1",
+    "style-loader": "1.0.0",
+    "ts-jest": "24.2.0",
+    "ts-loader": "6.2.1",
+    "ts-node": "8.5.2",
+    "typescript": "3.7.2",
+    "url-loader": "2.3.0",
+    "webpack": "4.41.2",
+    "webpack-cli": "3.3.10",
+    "webpack-dev-server": "3.9.0",
    "whatwg-fetch": "3.0.0"
  },
  "resolutions": {
@ -100,8 +125,8 @@
  },
  "license": "MIT",
  "files": [
-    "build/commonjs-node",
-    "build/browser",
-    "build/css"
+    "bundles",
+    "lib",
+    "lib-esm"
  ]
 }
--- a/scripts/build-browser-bundle.sh
+++ b/scripts/build-browser-bundle.sh
@ -1,36 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-SCRIPT_DIRECTORY="$( cd "$( dirname "$0" )" && pwd )"
-
-INPUT_DIR=${SCRIPT_DIRECTORY}/../build/commonjs-node
-INPUT_UI_DIR=${INPUT_DIR}/ui
-INPUT_JS_FILE=${INPUT_DIR}/diff2html.js
-INPUT_JS_UI_FILE=${INPUT_UI_DIR}/js/diff2html-ui.js
-
-OUTPUT_DIR=${SCRIPT_DIRECTORY}/../build/browser
-OUTPUT_JS_FILE=${OUTPUT_DIR}/diff2html.js
-OUTPUT_MIN_JS_FILE=${OUTPUT_DIR}/diff2html.min.js
-OUTPUT_JS_UI_FILE=${OUTPUT_DIR}/diff2html-ui.js
-OUTPUT_MIN_JS_UI_FILE=${OUTPUT_DIR}/diff2html-ui.min.js
-
-echo "Creating diff2html browser bundle ..."
-
-echo "Cleaning previous versions ..."
-rm -rf ${OUTPUT_DIR}
-mkdir -p ${OUTPUT_DIR}
-
-echo "Generating js aggregation file in ${OUTPUT_JS_FILE}"
-browserify -e ${INPUT_JS_FILE} -o ${OUTPUT_JS_FILE} -s global
-
-echo "Minifying ${OUTPUT_JS_FILE} to ${OUTPUT_MIN_JS_FILE}"
-terser ${OUTPUT_JS_FILE} -c -o ${OUTPUT_MIN_JS_FILE}
-
-echo "Generating js ui aggregation file in ${OUTPUT_JS_UI_FILE}"
-browserify -e ${INPUT_JS_UI_FILE} -o ${OUTPUT_JS_UI_FILE} -s global
-
-echo "Minifying ${OUTPUT_JS_UI_FILE} to ${OUTPUT_MIN_JS_UI_FILE}"
-terser ${OUTPUT_JS_UI_FILE} -c -o ${OUTPUT_MIN_JS_UI_FILE}
-
-echo "diff2html browser bundle created successfully!"
--- a/scripts/build-css.sh
+++ b/scripts/build-css.sh
@ -1,25 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-SCRIPT_DIRECTORY="$( cd "$( dirname "$0" )" && pwd )"
-
-INPUT_DIR=${SCRIPT_DIRECTORY}/../src
-INPUT_UI_DIR=${INPUT_DIR}/ui
-INPUT_CSS_FILE=${INPUT_UI_DIR}/css/diff2html.css
-
-OUTPUT_DIR=${SCRIPT_DIRECTORY}/../build/css
-OUTPUT_CSS_FILE=${OUTPUT_DIR}/diff2html.css
-OUTPUT_MIN_CSS_FILE=${OUTPUT_DIR}/diff2html.min.css
-
-echo "Creating diff2html css ..."
-
-echo "Cleaning previous versions ..."
-rm -rf ${OUTPUT_DIR}
-mkdir -p ${OUTPUT_DIR}
-
-echo "Minifying ${OUTPUT_CSS_FILE} to ${OUTPUT_MIN_CSS_FILE}"
-postcss --use autoprefixer -o ${OUTPUT_CSS_FILE} ${INPUT_CSS_FILE}
-cleancss --advanced --compatibility=ie8 -o ${OUTPUT_MIN_CSS_FILE} ${OUTPUT_CSS_FILE}
-
-echo "diff2html css created successfully!"
--- a/scripts/build-templates.sh
+++ b/scripts/build-templates.sh
@ -1,10 +0,0 @@
-#!/usr/bin/env bash
-
-set -e
-
-SCRIPT_DIRECTORY="$( cd "$( dirname "$0" )" && pwd )"
-
-node ${SCRIPT_DIRECTORY}/../build/scripts/hulk.js \
-    --wrapper ts \
-    --variable 'defaultTemplates' \
-    ${SCRIPT_DIRECTORY}/../src/templates/*.mustache > ${SCRIPT_DIRECTORY}/../src/diff2html-templates.ts
--- a/scripts/build-website.sh
+++ b/scripts/build-website.sh
@ -1,48 +0,0 @@
-#!/bin/bash
-
-set -e
-
-SCRIPT_DIRECTORY="$( cd "$( dirname "$0" )" && pwd )"
-
-INPUT_DIR=${SCRIPT_DIRECTORY}/../website
-INPUT_DEMO_JS=${INPUT_DIR}/templates/pages/demo/demo.js
-INPUT_CSS_FILE=${INPUT_DIR}/main.css
-
-OUTPUT_DIR=${SCRIPT_DIRECTORY}/../docs
-OUTPUT_DEMO_JS=${OUTPUT_DIR}/demo.js
-OUTPUT_DEMO_MIN_JS=${OUTPUT_DIR}/demo.min.js
-OUTPUT_CSS_FILE=${OUTPUT_DIR}/main.css
-OUTPUT_MIN_CSS_FILE=${OUTPUT_DIR}/main.min.css
-
-echo "Creating diff2html website release ..."
-
-echo "Cleaning previous versions ..."
-rm -rf ${OUTPUT_DIR}
-mkdir -p ${OUTPUT_DIR}/assets
-
-echo "Minifying ${OUTPUT_CSS_FILE} to ${OUTPUT_MIN_CSS_FILE}"
-postcss --use autoprefixer -o ${OUTPUT_CSS_FILE} ${INPUT_CSS_FILE}
-cleancss --advanced --compatibility=ie8 -o ${OUTPUT_MIN_CSS_FILE} ${OUTPUT_CSS_FILE}
-
-echo "Generating website js aggregation file in ${OUTPUT_DEMO_JS}"
-browserify -e ${INPUT_DEMO_JS} -o ${OUTPUT_DEMO_JS}
-
-echo "Minifying ${OUTPUT_DEMO_JS} to ${OUTPUT_DEMO_MIN_JS}"
-terser ${OUTPUT_DEMO_JS} -c -o ${OUTPUT_DEMO_MIN_JS}
-
-echo "Generating HTMLs from templates ..."
-node ${SCRIPT_DIRECTORY}/../build/scripts/build-website.js
-
-echo "Copying static files ..."
-cp -rf ${INPUT_DIR}/img ${OUTPUT_DIR}/
-cp -f ${INPUT_DIR}/CNAME ${OUTPUT_DIR}/
-cp -f ${INPUT_DIR}/favicon.ico ${OUTPUT_DIR}/
-cp -f ${INPUT_DIR}/robots.txt ${OUTPUT_DIR}/
-cp -f ${INPUT_DIR}/sitemap.xml ${OUTPUT_DIR}/
-
-echo "Copying diff2html resources ..."
-cp ${SCRIPT_DIRECTORY}/../build/browser/diff2html.min.js ${SCRIPT_DIRECTORY}/../docs/assets/
-cp ${SCRIPT_DIRECTORY}/../build/browser/diff2html-ui.min.js ${SCRIPT_DIRECTORY}/../docs/assets/
-cp ${SCRIPT_DIRECTORY}/../build/css/diff2html.min.css ${SCRIPT_DIRECTORY}/../docs/assets/
-
-echo "diff2html website release created successfully!"
--- a/scripts/build-website.ts
+++ b/scripts/build-website.ts
@ -1,52 +0,0 @@
-#!/usr/bin/env node
-
-import * as fs from "fs";
-
-import * as hogan from "hogan.js";
-
-type OptionsType = {
-  all: object;
-  [page: string]: object;
-};
-
-const templatesRoot = "website/templates";
-const pagesRoot = `${templatesRoot}/pages`;
-const options: OptionsType = {
-  all: {},
-  demo: {
-    extraClass: "template-index-min"
-  }
-};
-
-function readFile(filePath: string): string {
-  try {
-    return fs.readFileSync(filePath, "utf8");
-  } catch (_ignore) {}
-
-  return "";
-}
-
-function writeFile(filePath: string, content: string): void {
-  return fs.writeFileSync(filePath, content);
-}
-
-const websitePages = fs.readdirSync(pagesRoot);
-
-const template = hogan.compile(readFile(`${templatesRoot}/template.mustache`));
-
-websitePages.map(page => {
-  const baseOptions = { ...(options.all || {}), ...(options[page] || {}) };
-
-  const pagePartialTemplate = hogan.compile(readFile(`${pagesRoot}/${page}/${page}.partial.mustache`));
-  const pageAssetsTemplate = hogan.compile(readFile(`${pagesRoot}/${page}/${page}-assets.partial.mustache`));
-  const pageScriptsTemplate = hogan.compile(readFile(`${pagesRoot}/${page}/${page}-scripts.partial.mustache`));
-
-  const pagePartial = pagePartialTemplate.render(baseOptions);
-  const pageAssets = pageAssetsTemplate.render(baseOptions);
-  const pageScripts = pageScriptsTemplate.render(baseOptions);
-
-  const pageOptions = { ...baseOptions, assets: pageAssets, scripts: pageScripts, content: pagePartial };
-
-  const pageHtml = template.render(pageOptions);
-  writeFile(`docs/${page}.html`, pageHtml);
-});
--- a/src/tests/diff-parser-tests.ts
+++ b/src/tests/diff-parser-tests.ts
@ -13,6 +13,7 @@ function checkDiffSample(diff: string): void {

 describe("DiffParser", () => {
  describe("generateDiffJson", () => {
+    // eslint-disable-next-line jest/expect-expect
    it("should parse unix with \n diff", () => {
      const diff =
        "diff --git a/sample b/sample\n" +
@ -25,6 +26,7 @@ describe("DiffParser", () => {
      checkDiffSample(diff);
    });

+    // eslint-disable-next-line jest/expect-expect
    it("should parse windows with \r\n diff", () => {
      const diff =
        "diff --git a/sample b/sample\r\n" +
@ -37,6 +39,7 @@ describe("DiffParser", () => {
      checkDiffSample(diff);
    });

+    // eslint-disable-next-line jest/expect-expect
    it("should parse old os x with \r diff", () => {
      const diff =
        "diff --git a/sample b/sample\r" +
@ -49,6 +52,7 @@ describe("DiffParser", () => {
      checkDiffSample(diff);
    });

+    // eslint-disable-next-line jest/expect-expect
    it("should parse mixed eols diff", () => {
      const diff =
        "diff --git a/sample b/sample\n" +
--- a/src/diff-parser.ts
+++ b/src/diff-parser.ts
@ -291,10 +291,10 @@ export function parse(diffInput: string, config: DiffParserConfig = {}): DiffFil
      !currentFile || // If we do not have a file yet, we should crete one
      (!currentFile.isGitDiff &&
      currentFile && // If we already have some file in progress and
-        (line.startsWith(oldFileNameHeader) && // If we get to an old file path header line
-          // And is followed by the new file path header line and the hunk header line
-          nxtLine.startsWith(newFileNameHeader) &&
-          afterNxtLine.startsWith(hunkHeaderPrefix)))
+      line.startsWith(oldFileNameHeader) && // If we get to an old file path header line
+        // And is followed by the new file path header line and the hunk header line
+        nxtLine.startsWith(newFileNameHeader) &&
+        afterNxtLine.startsWith(hunkHeaderPrefix))
    ) {
      startFile();
    }
--- a/src/side-by-side-renderer.ts
+++ b/src/side-by-side-renderer.ts
@ -124,7 +124,10 @@ export default class SideBySideRenderer {

        const comparisons = oldLines.length * newLines.length;

-        const maxLineSizeInBlock = Math.max.apply(null, oldLines.concat(newLines).map(elem => elem.content.length));
+        const maxLineSizeInBlock = Math.max.apply(
+          null,
+          oldLines.concat(newLines).map(elem => elem.content.length)
+        );

        const doMatching =
          comparisons < this.config.matchingMaxComparisons &&
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,15 +1,13 @@
 {
  "compilerOptions": {
-    "outDir": "./build/commonjs-node",
+    "outDir": "./_target",
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
-    "lib": ["es5", "es6", "es7", "esnext", "dom", "dom.iterable"],
-    // TODO: Change to true after migration to TS is complete
-    "allowJs": true,
-    "declaration": false,
-    "declarationMap": false,
-    /////////////////////////////////////////////////////////
+    "lib": ["es2015", "dom"],
+    "allowJs": false,
+    "declaration": true,
+    "declarationMap": true,
    "strictNullChecks": true,
    "removeComments": true,
    "preserveConstEnums": true,
--- a/tsconfig.scripts.json
+++ b/tsconfig.scripts.json
@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./build/scripts",
-    "declaration": false,
-    "declarationMap": false,
-    "sourceMap": false
-  },
-  "include": ["./scripts/**/*", "./typings/**/*"]
-}
--- a/webpack.bundles.ts
+++ b/webpack.bundles.ts
@ -0,0 +1,60 @@
+import path from "path";
+
+import webpack from "webpack";
+
+const minimize = process.env.WEBPACK_MINIFY === "true";
+
+const diff2htmlBrowserConfig: webpack.Configuration = {
+  mode: "production",
+  optimization: { minimize: minimize },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".jsx", ".js"]
+  },
+  entry: "./src/diff2html.ts",
+  output: {
+    path: path.resolve(__dirname, "bundles/js"),
+    libraryTarget: "umd",
+    globalObject: "this",
+    library: "Diff2Html",
+    filename: `diff2html${minimize ? ".min" : ""}.js`,
+    umdNamedDefine: true
+  }
+};
+
+const diff2htmlUIBrowserConfig: webpack.Configuration = {
+  mode: "production",
+  optimization: { minimize: minimize },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".jsx", ".js"]
+  },
+  entry: "./src/ui/js/diff2html-ui.ts",
+  output: {
+    path: path.resolve(__dirname, "bundles/js"),
+    libraryTarget: "umd",
+    globalObject: "this",
+    filename: `diff2html-ui${minimize ? ".min" : ""}.js`,
+    umdNamedDefine: true
+  }
+};
+
+const config: webpack.Configuration[] = [diff2htmlBrowserConfig, diff2htmlUIBrowserConfig];
+
+export default config;
--- a/webpack.website.ts
+++ b/webpack.website.ts
@ -0,0 +1,170 @@
+import path from "path";
+
+import webpack from "webpack";
+import { Plugin } from "postcss";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
+import autoprefixer from "autoprefixer";
+import CopyWebpackPlugin from "copy-webpack-plugin";
+
+const isDevelopment = process.env.NODE_ENV !== "production";
+const minimize = process.env.WEBPACK_MINIFY === "true";
+
+const pages = ["index", "demo"];
+
+const config: webpack.Configuration[] = pages.map(page => {
+  return {
+    devServer: {
+      port: 3000,
+      open: true,
+      contentBase: path.join(__dirname, "./website")
+    },
+    entry: {
+      [page]: `./website/templates/pages/${page}/${page}.ts`
+    },
+    output: {
+      path: path.resolve(__dirname, "./docs")
+    },
+    resolve: {
+      extensions: [".tsx", ".ts", ".jsx", ".js"]
+    },
+    optimization: { minimize },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: "ts-loader",
+          exclude: /node_modules/
+        },
+        {
+          test: /\.handlebars$/,
+          loader: "handlebars-loader",
+          options: {
+            precompileOptions: {
+              knownHelpersOnly: false
+            },
+            helperDirs: [path.join(__dirname, "website/templates/helpers")],
+            partialDirs: [path.join(__dirname, "website/templates")]
+          }
+        },
+        {
+          test: /\.(css)$/,
+          use: [
+            MiniCssExtractPlugin.loader,
+            {
+              loader: "css-loader",
+              options: {
+                sourceMap: isDevelopment
+              }
+            },
+            {
+              loader: "postcss-loader",
+              options: {
+                autoprefixer: {
+                  browsers: ["last 2 versions"]
+                },
+                sourceMap: isDevelopment,
+                plugins: (): Plugin<object>[] => [autoprefixer]
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(html)$/,
+          use: {
+            loader: "html-loader",
+            options: {
+              attrs: ["img:src"]
+            }
+          }
+        },
+        {
+          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          use: [
+            {
+              loader: "url-loader",
+              options: {
+                limit: 1000,
+                mimetype: "application/font-woff"
+              }
+            }
+          ]
+        },
+        {
+          test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+          loader: "file-loader"
+        },
+        {
+          test: /\.(jpeg|jpg|png|gif)$/,
+          use: [
+            {
+              loader: "file-loader",
+              options: {
+                name: "[name].[ext]",
+                outputPath: "images/",
+                useRelativePath: true
+              }
+            },
+            {
+              loader: "image-webpack-loader",
+              options: {
+                mozjpeg: {
+                  progressive: true,
+                  quality: 65
+                },
+                optipng: {
+                  enabled: true
+                },
+                pngquant: {
+                  quality: [0.65, 0.9],
+                  speed: 4
+                },
+                gifsicle: {
+                  interlaced: false
+                },
+                webp: {
+                  quality: 75
+                }
+              }
+            }
+          ]
+        }
+      ]
+    },
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: "[name].css",
+        chunkFilename: "[id].css"
+      }),
+      new HtmlWebpackPlugin({
+        hash: true,
+        inject: true,
+        title: `${page} page`,
+        filename: `${page}.html`,
+        template: `./website/templates/pages/${page}/${page}.handlebars`,
+        minify: !isDevelopment && {
+          html5: true,
+          collapseWhitespace: true,
+          caseSensitive: true,
+          removeEmptyElements: false,
+          removeComments: true,
+          removeRedundantAttributes: true,
+          useShortDoctype: true,
+          removeEmptyAttributes: true,
+          removeStyleLinkTypeAttributes: true,
+          keepClosingSlash: true,
+          minifyJS: true,
+          minifyCSS: true,
+          minifyURLs: true
+        }
+      }),
+      new CopyWebpackPlugin([
+        { from: "website/favicon.ico", to: "favicon.ico" },
+        { from: "website/robots.txt", to: "robots.txt" },
+        { from: "website/sitemap.xml", to: "sitemap.xml" }
+      ])
+    ]
+  };
+});
+
+export default config;
--- a/website/main.css
+++ b/website/main.css
@ -255,94 +255,6 @@

 }

-.screenshot {
-  display: block;
-  overflow: hidden;
-}
-
-.screenshot > img {
-  width: 100%
-}
-
-.screenshots-fan {
-  margin-top: 50px
-}
-
-.screenshots-fan .screenshot {
-  position: relative;
-  width: auto;
-  display: inline-block;
-  text-align: center;
-}
-
-.screenshots-fan .screenshot:last-child, .screenshots-fan .screenshot:first-child {
-  z-index: 2
-}
-
-.screenshots-fan .screenshot {
-  z-index: 3
-}
-
-@media (min-width: 768px) {
-  .screenshots-fan {
-    position: relative;
-    overflow: hidden;
-    margin-top: 60px;
-    height: 200px
-  }
-
-  .screenshots-fan .screenshot {
-    height: auto;
-    top: 10px;
-    width: 350px
-  }
-
-  .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
-    width: 250px;
-    position: absolute;
-    top: 65px
-  }
-
-  .screenshots-fan .screenshot:first-child {
-    left: 10px
-  }
-
-  .screenshots-fan .screenshot:last-child {
-    left: auto;
-    right: 10px
-  }
-}
-
-@media (min-width: 992px) {
-  .screenshots-fan {
-    margin-top: 60px;
-    height: 240px
-  }
-
-  .screenshots-fan .screenshot {
-    width: 400px
-  }
-
-  .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
-    width: 300px
-  }
-}
-
-@media (min-width: 1200px) {
-  .screenshots-fan {
-    margin-top: 80px;
-    height: 380px
-  }
-
-  .screenshots-fan .screenshot {
-    width: 550px
-  }
-
-  .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
-    width: 450px
-  }
-}
-
 body {
  font-size: 16px;
  font-family: Roboto, sans-serif;
--- a/website/main.ts
+++ b/website/main.ts
@ -0,0 +1 @@
+import "bootstrap/dist/css/bootstrap.css";
--- a/website/templates/helpers/block.ts
+++ b/website/templates/helpers/block.ts
@ -0,0 +1,15 @@
+import handlebars, { HelperOptions } from "handlebars";
+
+const loadPartial = <T>(name: string): handlebars.Template<T> => {
+  let partial = handlebars.partials[name];
+  if (typeof partial === "string") {
+    partial = handlebars.compile(partial);
+    handlebars.partials[name] = partial;
+  }
+  return partial;
+};
+
+export default (name: string, options: HelperOptions): string => {
+  const partial = loadPartial(name) || options.fn;
+  return partial(this, { data: options.hash });
+};
--- a/website/templates/helpers/partial.ts
+++ b/website/templates/helpers/partial.ts
@ -0,0 +1,5 @@
+import handlebars, { HelperOptions } from "handlebars";
+
+export default (name: string, options: HelperOptions): void => {
+  handlebars.registerPartial(name, options.fn);
+};
--- a/website/templates/pages/demo/content.handlebars
+++ b/website/templates/pages/demo/content.handlebars
@ -0,0 +1,95 @@
+<h1>Diff Prettifier <a href="#help">
+    <svg height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64" aria-hidden="true">
+      <path
+        d="M15.67 7.06l-1.08-1.34c-.17-.22-.28-.48-.31-.77l-.19-1.7a1.51 1.51 0 0 0-1.33-1.33l-1.7-.19c-.3-.03-.56-.16-.78-.33L8.94.32c-.55-.44-1.33-.44-1.88 0L5.72 1.4c-.22.17-.48.28-.77.31l-1.7.19c-.7.08-1.25.63-1.33 1.33l-.19 1.7c-.03.3-.16.56-.33.78L.32 7.05c-.44.55-.44 1.33 0 1.88l1.08 1.34c.17.22.28.48.31.77l.19 1.7c.08.7.63 1.25 1.33 1.33l1.7.19c.3.03.56.16.78.33l1.34 1.08c.55.44 1.33.44 1.88 0l1.34-1.08c.22-.17.48-.28.77-.31l1.7-.19c.7-.08 1.25-.63 1.33-1.33l.19-1.7c.03-.3.16-.56.33-.78l1.08-1.34c.44-.55.44-1.33 0-1.88zM9 11.5c0 .28-.22.5-.5.5h-1c-.27 0-.5-.22-.5-.5v-1c0-.28.23-.5.5-.5h1c.28 0 .5.22.5.5v1zm1.56-4.89c-.06.17-.17.33-.3.47-.13.16-.14.19-.33.38-.16.17-.31.3-.52.45-.11.09-.2.19-.28.27-.08.08-.14.17-.19.27-.05.1-.08.19-.11.3-.03.11-.03.13-.03.25H7.13c0-.22 0-.31.03-.48.03-.19.08-.36.14-.52.06-.14.14-.28.25-.42.11-.13.23-.25.41-.38.27-.19.36-.3.48-.52.12-.22.2-.38.2-.59 0-.27-.06-.45-.2-.58-.13-.13-.31-.19-.58-.19-.09 0-.19.02-.3.05-.11.03-.17.09-.25.16-.08.07-.14.11-.2.2a.41.41 0 0 0-.09.28h-2c0-.38.13-.56.27-.83.16-.27.36-.5.61-.67.25-.17.55-.3.88-.38.33-.08.7-.13 1.09-.13.44 0 .83.05 1.17.13.34.09.63.22.88.39.23.17.41.38.55.63.13.25.19.55.19.88 0 .22 0 .42-.08.59l-.02-.01z">
+      </path>
+    </svg>
+  </a>
+</h1>
+<p>GitHub, Bitbucket and GitLab commit and pull request compatible</p>
+<p>Just paste the GitHub, Bitbucket or GitLab commit, pull request or merge request url
+  or any other git or unified compatible diff and we will render a pretty html representation of it
+  with code syntax highlight and line similarity matching for better code reviews.
+</p>
+<h2>Options:</h2>
+<div class="row">
+  <div class="col-md-2 col-xs-12 col-15">
+    <label title="Output format of the HTML, either line by line or side by side">Output Format
+      <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
+        <option value="line-by-line" selected>Line by Line</option>
+        <option value="side-by-side">Side by Side</option>
+      </select>
+    </label>
+  </div>
+  <div class=" col-md-2 col-xs-12 col-15">
+    <label title="Show the file list summary before the diff">File Summary
+      <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="drawFileList" checked />
+    </label>
+  </div>
+  <div class=" col-md-2 col-xs-12 col-15">
+    <label title="Level of matching for the comparison algorithm">Matching Type
+      <select class="options-label-value" id="diff-url-options-matching" name="matching">
+        <option value="lines">Lines</option>
+        <option value="words" selected>Words</option>
+        <option value="none">None</option>
+      </select>
+    </label>
+  </div>
+  <div class=" col-md-2 col-xs-12 col-15">
+    <label title="Similarity threshold for the matching algorithm">Words Threshold
+      <input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
+        name="matchWordsThreshold" value="0.25" step="0.05" min="0" max="1" />
+    </label>
+  </div>
+  <div class=" col-md-2 col-xs-12 col-15">
+    <label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max
+      Comparisons
+      <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
+        name="matchingMaxComparisons" value="2500" step="100" min="0" />
+    </label>
+  </div>
+</div>
+<br>
+<div class="diff-url-wrapper">
+  <input id="url" class="diff-url-input" type="text" name="url" placeholder="URL" />
+  <a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
+</div>
+<br>
+<div id="url-diff-container" style="margin: 0 auto;">
+</div>
+<br>
+<h3 id="help">Help:</h3>
+<ul>
+  <li>
+    <b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
+    <p>Code Syntax Highlight</p>
+    <p>Line similarity match (similar lines are together)</p>
+    <p>Line by Line and Side by Side diffs</p>
+    <p>Supports any git and unified compatible diffs</p>
+    <p>Easy code selection</p>
+  </li>
+  <li>
+    <b>What urls are supported?</b>
+    <p>Any GitHub, Bitbucket or GitLab Commit, Pull Request or Merge Request urls.</p>
+    <p>Any Git or Unified Raw Diff or Patch urls.</p>
+  </li>
+  <li>
+    <b>Can I send a custom url for a friend, colleague or co-worker?</b>
+    <p>Just add a url parameter called diff to current url using as value your Commit, Pull Request, Merge Request, Diff
+      or Patch url.</p>
+    <p>ex: <a href="demo.html">https://diff2html.xyz/demo.html</a>
+    </p>
+  </li>
+  <li>
+    <b>Why can't I paste a diff?</b>
+    <p><a href="https://diffy.org/">diffy.org</a> is an amazing tool created by <a
+        href="https://github.com/pbu88">pbu88</a>
+      to share your diffs and uses diff2html under the hood.</p>
+    <p>Also, diff2html cli can directly publish diffs to <a href="https://diffy.org/">diffy.org</a></p>
+  </li>
+</ul>
+<br>
+<h3>Thank you</h3>
+<p>I want to thank <a href="https://github.com/kevinsimper">kevinsimper</a> for this great idea,
+  providing better diff support for existing online services.
+</p>
--- a/website/templates/pages/demo/demo-assets.partial.mustache
+++ b/website/templates/pages/demo/demo-assets.partial.mustache
@ -1,5 +0,0 @@
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css">
-
-    <!-- diff2html -->
-    <link rel="stylesheet" type="text/css" href="assets/diff2html.min.css">
-    <!-- -->
--- a/website/templates/pages/demo/demo-scripts.partial.mustache
+++ b/website/templates/pages/demo/demo-scripts.partial.mustache
@ -1,5 +0,0 @@
-<!-- diff2html -->
-<script type="text/javascript" src="assets/diff2html-ui.min.js"></script>
-<!-- -->
-
-<script type="text/javascript" src="demo.min.js"></script>
--- a/website/templates/pages/demo/demo.css
+++ b/website/templates/pages/demo/demo.css
@ -0,0 +1 @@
+@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css");
--- a/website/templates/pages/demo/demo.handlebars
+++ b/website/templates/pages/demo/demo.handlebars
@ -0,0 +1,4 @@
+{{#partial "content"}}
+{{> content}}
+{{/partial}}
+{{> ../../template}}
--- a/website/templates/pages/demo/demo.partial.mustache
+++ b/website/templates/pages/demo/demo.partial.mustache
@ -1,96 +0,0 @@
-        <h1>Diff Prettifier <a href="#help">
-          <svg height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64" aria-hidden="true">
-            <path
-              d="M15.67 7.06l-1.08-1.34c-.17-.22-.28-.48-.31-.77l-.19-1.7a1.51 1.51 0 0 0-1.33-1.33l-1.7-.19c-.3-.03-.56-.16-.78-.33L8.94.32c-.55-.44-1.33-.44-1.88 0L5.72 1.4c-.22.17-.48.28-.77.31l-1.7.19c-.7.08-1.25.63-1.33 1.33l-.19 1.7c-.03.3-.16.56-.33.78L.32 7.05c-.44.55-.44 1.33 0 1.88l1.08 1.34c.17.22.28.48.31.77l.19 1.7c.08.7.63 1.25 1.33 1.33l1.7.19c.3.03.56.16.78.33l1.34 1.08c.55.44 1.33.44 1.88 0l1.34-1.08c.22-.17.48-.28.77-.31l1.7-.19c.7-.08 1.25-.63 1.33-1.33l.19-1.7c.03-.3.16-.56.33-.78l1.08-1.34c.44-.55.44-1.33 0-1.88zM9 11.5c0 .28-.22.5-.5.5h-1c-.27 0-.5-.22-.5-.5v-1c0-.28.23-.5.5-.5h1c.28 0 .5.22.5.5v1zm1.56-4.89c-.06.17-.17.33-.3.47-.13.16-.14.19-.33.38-.16.17-.31.3-.52.45-.11.09-.2.19-.28.27-.08.08-.14.17-.19.27-.05.1-.08.19-.11.3-.03.11-.03.13-.03.25H7.13c0-.22 0-.31.03-.48.03-.19.08-.36.14-.52.06-.14.14-.28.25-.42.11-.13.23-.25.41-.38.27-.19.36-.3.48-.52.12-.22.2-.38.2-.59 0-.27-.06-.45-.2-.58-.13-.13-.31-.19-.58-.19-.09 0-.19.02-.3.05-.11.03-.17.09-.25.16-.08.07-.14.11-.2.2a.41.41 0 0 0-.09.28h-2c0-.38.13-.56.27-.83.16-.27.36-.5.61-.67.25-.17.55-.3.88-.38.33-.08.7-.13 1.09-.13.44 0 .83.05 1.17.13.34.09.63.22.88.39.23.17.41.38.55.63.13.25.19.55.19.88 0 .22 0 .42-.08.59l-.02-.01z"></path>
-          </svg>
-        </a>
-        </h1>
-        <p>GitHub, Bitbucket and GitLab commit and pull request compatible</p>
-        <p>Just paste the GitHub, Bitbucket or GitLab commit, pull request or merge request url
-          or any other git or unified compatible diff and we will render a pretty html representation of it
-          with code syntax highlight and line similarity matching for better code reviews.
-        </p>
-        <h2>Options:</h2>
-        <div class="row">
-          <div class="col-md-2 col-xs-12 col-15">
-            <label title="Output format of the HTML, either line by line or side by side">Output Format
-              <select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
-                <option value="line-by-line" selected>Line by Line</option>
-                <option value="side-by-side">Side by Side</option>
-              </select>
-            </label>
-          </div>
-          <div class=" col-md-2 col-xs-12 col-15">
-            <label title="Show the file list summary before the diff">File Summary
-              <input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="drawFileList" checked/>
-            </label>
-          </div>
-          <div class=" col-md-2 col-xs-12 col-15">
-            <label title="Level of matching for the comparison algorithm">Matching Type
-              <select class="options-label-value" id="diff-url-options-matching" name="matching">
-                <option value="lines">Lines</option>
-                <option value="words" selected>Words</option>
-                <option value="none">None</option>
-              </select>
-            </label>
-          </div>
-          <div class=" col-md-2 col-xs-12 col-15">
-            <label title="Similarity threshold for the matching algorithm">Words Threshold
-              <input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
-                     name="matchWordsThreshold" value="0.25" step="0.05"
-                     min="0" max="1"/>
-            </label>
-          </div>
-          <div class=" col-md-2 col-xs-12 col-15">
-            <label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max
-              Comparisons
-              <input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
-                     name="matchingMaxComparisons" value="2500"
-                     step="100" min="0"/>
-            </label>
-          </div>
-        </div>
-        <br>
-        <div class="diff-url-wrapper">
-          <input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
-          <a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
-        </div>
-        <br>
-        <div id="url-diff-container" style="margin: 0 auto;">
-        </div>
-        <br>
-        <h3 id="help">Help:</h3>
-        <ul>
-          <li>
-            <b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
-            <p>Code Syntax Highlight</p>
-            <p>Line similarity match (similar lines are together)</p>
-            <p>Line by Line and Side by Side diffs</p>
-            <p>Supports any git and unified compatible diffs</p>
-            <p>Easy code selection</p>
-          </li>
-          <li>
-            <b>What urls are supported?</b>
-            <p>Any GitHub, Bitbucket or GitLab Commit, Pull Request or Merge Request urls.</p>
-            <p>Any Git or Unified Raw Diff or Patch urls.</p>
-          </li>
-          <li>
-            <b>Can I send a custom url for a friend, colleague or co-worker?</b>
-            <p>Just add a url parameter called diff to current url using as value your Commit, Pull Request, Merge Request, Diff
-              or Patch url.</p>
-            <p>ex: <a href="demo.html">https://diff2html.xyz/demo.html</a>
-            </p>
-          </li>
-          <li>
-            <b>Why can't I paste a diff?</b>
-            <p><a href="https://diffy.org/">diffy.org</a> is an amazing tool created by <a
-              href="https://github.com/pbu88">pbu88</a>
-              to share your diffs and uses diff2html under the hood.</p>
-            <p>Also, diff2html cli can directly publish diffs to <a href="https://diffy.org/">diffy.org</a></p>
-          </li>
-        </ul>
-        <br>
-        <h3>Thank you</h3>
-        <p>I want to thank <a href="https://github.com/kevinsimper">kevinsimper</a> for this great idea,
-          providing better diff support for existing online services.
-        </p>
--- a/website/templates/pages/demo/demo.ts
+++ b/website/templates/pages/demo/demo.ts
@ -1,5 +1,9 @@
-/* global global */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { Diff2HtmlUI, defaultDiff2HtmlUIConfig, Diff2HtmlUIConfig } from "../../../../src/ui/js/diff2html-ui";
+
+import "../../../main.ts";
+import "../../../main.css";
+import "./demo.css";
+import "../../../../src/ui/css/diff2html.css";

 /*
 * Example URLs:
@ -14,33 +18,46 @@
 * https://bitbucket.org/atlassian/amps/pull-requests/236
 */

+type URLParams = {
+  diff?: string;
+  [key: string]: string | boolean | number | undefined;
+};
+
 const searchParam = "diff";

-function getParamsFromSearch(search) {
-  const map = {};
+function getParamsFromSearch(search: string): URLParams {
  try {
-    search
+    return search
      .split("?")[1]
      .split("&")
-      .forEach(e => {
+      .reduce((urlParams, e) => {
        const values = e.split("=");
-        map[values[0]] = values[1];
-      });
-  } catch (_ignore) {}
-
-  return map;
+        return {
+          ...urlParams,
+          [values[0]]: values[1]
+        };
+      }, {});
+  } catch (_ignore) {
+    return {};
+  }
 }

-function validateUrl(url) {
+function validateUrl(url: string): boolean {
  return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
    url
  );
 }

-function prepareRequest(url) {
+type Request = {
+  url: string;
+  headers: Headers;
+};
+
+function prepareRequest(url: string): Request {
  if (!validateUrl(url)) {
-    console.error("Invalid url provided!");
-    return;
+    const errorMsg = "Invalid url provided!";
+    console.error(errorMsg);
+    throw new Error(errorMsg);
  }

  let fetchUrl;
@ -55,18 +72,18 @@ function prepareRequest(url) {
  const bitbucketCommitUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/commits\/(.*?)(?:\/raw)?(?:\/.*)?$/;
  const bitbucketPrUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/pull-requests\/(.*?)(?:\/.*)?$/;

-  function gitLabUrlGen(userName, projectName, type, value) {
+  function gitLabUrlGen(userName: string, projectName: string, type: string, value: string): string {
    return (
      "https://crossorigin.me/https://gitlab.com/" + userName + "/" + projectName + "/" + type + "/" + value + ".diff"
    );
  }

-  function gitHubUrlGen(userName, projectName, type, value) {
+  function gitHubUrlGen(userName: string, projectName: string, type: string, value: string): string {
    headers.append("Accept", "application/vnd.github.v3.diff");
    return "https://api.github.com/repos/" + userName + "/" + projectName + "/" + type + "/" + value;
  }

-  function bitbucketUrlGen(userName, projectName, type, value) {
+  function bitbucketUrlGen(userName: string, projectName: string, type: string, value: string): string {
    const baseUrl = "https://bitbucket.org/api/2.0/repositories/";
    if (type === "pullrequests") {
      return baseUrl + userName + "/" + projectName + "/pullrequests/" + value + "/diff";
@ -98,40 +115,42 @@ function prepareRequest(url) {
  };
 }

-function getConfiguration(urlParams) {
+function getConfiguration(urlParams: URLParams): Diff2HtmlUIConfig {
  // Removing `diff` form `urlParams` to avoid being inserted
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { diff, ...urlParamsRest } = urlParams;
-  const config = {
-    ...global.defaultDiff2HtmlUIConfig,
+  const config: URLParams = {
+    ...defaultDiff2HtmlUIConfig,
    ...urlParamsRest
  };

  return Object.entries(config).reduce((object, [k, v]) => {
    const newObject = !Number.isNaN(Number(v))
      ? { [k]: Number(v) }
-      : v === "true" && v === "false"
+      : v === "true" || v === "false"
      ? { [k]: Boolean(v) }
      : { [k]: v };
    return { ...object, ...newObject };
  }, {});
 }

-function getDiff(request) {
-  return fetch(request.url, {
-    method: "GET",
-    headers: request.headers,
-    mode: "cors",
-    cache: "default"
-  })
-    .then(res => {
-      return res.text();
-    })
-    .catch(error => console.error("Failed to retrieve diff", error));
+async function getDiff(request: Request): Promise<string> {
+  try {
+    const result = await fetch(request.url, {
+      method: "GET",
+      headers: request.headers,
+      mode: "cors",
+      cache: "default"
+    });
+    return result.text();
+  } catch (error) {
+    console.error("Failed to retrieve diff", error);
+    throw error;
+  }
 }

-function draw(diffString, config, elements) {
-  const diff2htmlUi = new global.Diff2HtmlUI(diffString, elements.structure.diffTarget, config);
+function draw(diffString: string, config: Diff2HtmlUIConfig, elements: Elements): void {
+  const diff2htmlUi = new Diff2HtmlUI(diffString, elements.structure.diffTarget, config);

  if (config.outputFormat === "side-by-side") {
    elements.structure.container.style.width = "100%";
@ -142,7 +161,7 @@ function draw(diffString, config, elements) {
  diff2htmlUi.draw();
 }

-async function prepareInitialState(elements) {
+async function prepareInitialState(elements: Elements): Promise<[Diff2HtmlUIConfig, string]> {
  const urlParams = getParamsFromSearch(window.location.search);
  const currentUrl = (urlParams && urlParams[searchParam]) || "https://github.com/rtfpessoa/diff2html/pull/106";

@ -156,7 +175,7 @@ async function prepareInitialState(elements) {
  return [initialConfiguration, initialDiff];
 }

-function updateBrowserUrl(config, newDiffUrl) {
+function updateBrowserUrl(config: Diff2HtmlUIConfig, newDiffUrl: string): void {
  if (history.pushState) {
    const paramString = Object.entries(config)
      .map(([k, v]) => k + "=" + v)
@ -176,56 +195,82 @@ function updateBrowserUrl(config, newDiffUrl) {
  }
 }

+type Elements = {
+  structure: {
+    container: HTMLElement;
+    diffTarget: HTMLElement;
+  };
+  url: {
+    input: HTMLInputElement;
+    button: HTMLElement;
+  };
+  options: {
+    outputFormat: HTMLInputElement;
+    matching: HTMLInputElement;
+    wordsThreshold: HTMLInputElement;
+    matchingMaxComparisons: HTMLInputElement;
+  };
+  checkboxes: {
+    drawFileList: HTMLInputElement;
+  };
+};
+
 document.addEventListener("DOMContentLoaded", async () => {
  // Improves browser compatibility
  require("whatwg-fetch");

-  const drawAndUpdateUrl = async (diffUrl, diffString, config, elements) => {
+  const drawAndUpdateUrl = async (
+    diffUrl: string,
+    diffString: string,
+    config: Diff2HtmlUIConfig,
+    elements: Elements
+  ): Promise<void> => {
    updateBrowserUrl(config, diffUrl);
    const newRequest = prepareRequest(diffUrl);
    diffString = await getDiff(newRequest);
    draw(diffString, config, elements);
  };

-  const elements = {
+  const elements: Elements = {
    structure: {
-      container: document.getElementsByClassName("container")[0],
-      diffTarget: document.getElementById("url-diff-container")
+      container: document.getElementsByClassName("container")[0] as HTMLElement,
+      diffTarget: document.getElementById("url-diff-container") as HTMLElement
    },
    url: {
-      input: document.getElementById("url"),
-      button: document.getElementById("url-btn")
+      input: document.getElementById("url") as HTMLInputElement,
+      button: document.getElementById("url-btn") as HTMLElement
    },
    options: {
-      outputFormat: document.getElementById("diff-url-options-output-format"),
-      matching: document.getElementById("diff-url-options-matching"),
-      wordsThreshold: document.getElementById("diff-url-options-match-words-threshold"),
-      matchingMaxComparisons: document.getElementById("diff-url-options-matching-max-comparisons")
+      outputFormat: document.getElementById("diff-url-options-output-format") as HTMLInputElement,
+      matching: document.getElementById("diff-url-options-matching") as HTMLInputElement,
+      wordsThreshold: document.getElementById("diff-url-options-match-words-threshold") as HTMLInputElement,
+      matchingMaxComparisons: document.getElementById("diff-url-options-matching-max-comparisons") as HTMLInputElement
    },
    checkboxes: {
-      drawFileList: document.getElementById("diff-url-options-show-files")
+      drawFileList: document.getElementById("diff-url-options-show-files") as HTMLInputElement
    }
  };

  let [config, diffString] = await prepareInitialState(elements);

  // Update HTML inputs from any changes in URL
-  elements.options.outputFormat.value = config.outputFormat;
-  elements.checkboxes.drawFileList.checked = config.drawFileList;
-  elements.options.matching.value = config.matching;
-  elements.options.wordsThreshold.value = config.wordsThreshold;
-  elements.options.matchingMaxComparisons.value = config.matchingMaxComparisons;
+  config.outputFormat && (elements.options.outputFormat.value = config.outputFormat);
+  config.drawFileList && (elements.checkboxes.drawFileList.checked = config.drawFileList);
+  config.matching && (elements.options.matching.value = config.matching);
+  config.matchWordsThreshold && (elements.options.wordsThreshold.value = config.matchWordsThreshold.toString());
+  config.matchingMaxComparisons &&
+    (elements.options.matchingMaxComparisons.value = config.matchingMaxComparisons.toString());

  Object.entries(elements.options).forEach(([option, element]) =>
    element.addEventListener("change", () => {
-      config[option] = element.value;
+      config = { ...config, [option]: element.value };
      drawAndUpdateUrl(elements.url.input.value, diffString, config, elements);
    })
  );

  Object.entries(elements.checkboxes).forEach(([option, checkbox]) =>
    checkbox.addEventListener("change", () => {
-      config[option] = checkbox.checked;
+      config = { ...config, [option]: checkbox.checked };
      drawAndUpdateUrl(elements.url.input.value, diffString, config, elements);
    })
  );
@ -240,5 +285,3 @@ document.addEventListener("DOMContentLoaded", async () => {

  return drawAndUpdateUrl(elements.url.input.value, diffString, config, elements);
 });
-
-/* eslint-enable @typescript-eslint/explicit-function-return-type */
--- a/website/templates/pages/index/content.handlebars
+++ b/website/templates/pages/index/content.handlebars
@ -0,0 +1,295 @@
+<div class="hero hero-homepage">
+    <span class="hero-booticon">
+        <span class="hero-green">diff</span><span class="hero-black">2</span><span class="hero-red">html</span>
+    </span>
+    <h1 class="hero-header">Diff parser and pretty html generator</h1>
+    <h4 class="text-muted">Better diffs, unmatched reviews.</h4>
+    <h2><a class="btn btn-lg" href="demo.html">Demo</a></h2>
+
+    <div class="screenshots screenshots-fan clearfix">
+
+        <img class="screenshot hidden-xs" src="images/snapshot-2.png">
+
+        <a class="screenshot" href="demo.html">
+            <img src="images/snapshot-3.png">
+        </a>
+
+        <a class="screenshot hidden-xs" href="demo.html">
+            <img src="images/snapshot-1.png">
+        </a>
+
+    </div>
+</div>
+
+<div>
+    <div class="row  row-padded-small row-bordered">
+        <div class="col-sm-8 col-sm-offset-2 text-center">
+            <h2 class="m-b-md">Each diff provides a comprehensive visualization of the code changes,
+                helping developers identify problems and better understand the changes.</h2>
+        </div>
+    </div>
+
+    <div class="row  row-padded-small homepage-grid row-bordered p-t text-center">
+        <div class="col-sm-4">
+            <span class="svg-icon-large">
+                <svg aria-hidden="true" class="octicon octicon-diff" height="16" version="1.1" viewBox="0 0 14 16"
+                    width="14">
+                    <path
+                        d="M6 7h2v1H6v2h-1V8H3v-1h2V5h1v2zM3 13h5v-1H3v1z m4.5-11l3.5 3.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h6.5z m2.5 4L7 3H1v12h9V6zM8.5 0S3 0 3 0v1h5l4 4v8h1V4.5L8.5 0z">
+                    </path>
+                </svg>
+            </span>
+            <h5><strong>Line by Line and Side by Side changes</strong></h5>
+            <p class="text-muted">Each diff features a line by line and side by side preview of your
+                changes.</p>
+        </div>
+
+        <div class="col-sm-4">
+            <span class="svg-icon-large">
+                <svg aria-hidden="true" class="octicon octicon-tasklist" height="16" version="1.1" viewBox="0 0 16 16"
+                    width="16">
+                    <path
+                        d="M15.41 9H7.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h7.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1zM9.59 4c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h5.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H9.59zM0 3.91l1.41-1.3 1.59 1.59L7.09 0l1.41 1.41-5.5 5.5L0 3.91z m7.59 8.09h7.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H7.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1z">
+                    </path>
+                </svg>
+            </span>
+            <h5><strong>Code syntax highlight</strong></h5>
+            <p class="text-muted">All the code changes are syntax highlighted using <a
+                    href="https://highlightjs.org/">highlight.js</a>,
+                providing more readability.</p>
+        </div>
+
+        <div class="col-sm-4">
+            <span class="svg-icon-large">
+                <svg aria-hidden="true" class="octicon octicon-clippy" height="16" version="1.1" viewBox="0 0 14 16"
+                    width="14">
+                    <path
+                        d="M2 12h4v1H2v-1z m5-6H2v1h5v-1z m2 3V7L6 10l3 3V11h5V9H9z m-4.5-1H2v1h2.5v-1zM2 11h2.5v-1H2v1z m9 1h1v2c-0.02 0.28-0.11 0.52-0.3 0.7s-0.42 0.28-0.7 0.3H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h3C4 0.89 4.89 0 6 0s2 0.89 2 2h3c0.55 0 1 0.45 1 1v5h-1V5H1v9h10V12zM2 4h8c0-0.55-0.45-1-1-1h-1c-0.55 0-1-0.45-1-1s-0.45-1-1-1-1 0.45-1 1-0.45 1-1 1h-1c-0.55 0-1 0.45-1 1z">
+                    </path>
+                </svg>
+            </span>
+            <h5><strong>Line similarity matching</strong></h5>
+            <p class="text-muted">Similar lines are paired, allowing for easier change tracking.</p>
+        </div>
+    </div>
+
+    <div id="install" class="row-padded-small row-centered row-bordered">
+        <div class="col-md-12">
+            <div class="row">
+                <div class="col-md-12">
+                    <h3><strong>Install with Bower</strong></h3>
+                    <p>You can install and manage diff2html's CSS and JS using Bower:</p>
+                    <div class="homepage-code-example">
+                        <p><span class="unselectable">&gt; $ </span><span class="text-muted">bower install
+                                diff2html</span></p>
+                        <span class="btn-clipboard" data-clipboard-text="bower install diff2html"
+                            title="Copy">Copy</span>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-12">
+                    <h3><strong>Install with npm</strong></h3>
+                    <p>You can also install diff2html using npm:</p>
+                    <div class="homepage-code-example">
+                        <p><span class="unselectable">&gt; $ </span><span class="text-muted">npm install
+                                diff2html</span></p>
+                        <span class="btn-clipboard" data-clipboard-text="npm install diff2html" title="Copy">Copy</span>
+                    </div>
+                </div>
+            </div>
+            <div class="row row-padded-small">
+                <div class="col-md-12">
+                    <a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
+                        Find usage examples in the Docs
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="cli" class="row row-padded-small row-centered row-bordered">
+        <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
+            <h3><strong>With command line integration</strong></h3>
+            <h4 class="m-b-md">We work hard to make sure you can have your diffs in a simple and flexible
+                way. Go <a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank">here full
+                    documentation</a>.</h4>
+        </div>
+        <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
+            <div class="homepage-terminal-example">
+                <p class="m-b-md">
+                    <span class="unselectable">&gt; $ </span><span class="text-muted">npm install -g
+                        diff2html-cli</span><br>
+                    <span class="unselectable">diff2html cli installed!</span>
+                </p>
+                <p class="m-b-md">
+                    <span class="unselectable">&gt; $ </span><span class="text-muted">diff2html</span><br>
+                    <span class="unselectable">Previous commit changes on your browser</span>
+                </p>
+                <p>
+                    <span class="unselectable">&gt; $ <span class="text-muted">is that it?</span><br>
+                        Yup, it's that simple.</span>
+                </p>
+            </div>
+        </div>
+    </div>
+
+    <div id="users" class="row row-padded-small row-centered row-bordered">
+        <div class="col-md-12">
+            <div class="row">
+                <div class="col-md-12">
+                    <h3><strong>Projects using diff2html</strong></h3>
+                </div>
+            </div>
+            <div class="row row-eq-height">
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">diff2html-cli</h5>
+                            <p class="m-b">diff2html from your terminal to the browser.</p>
+                            <a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> View GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">Codacy</h5>
+                            <p class="m-b">Check code style, security, duplication, complexity and coverage on every
+                                change.</p>
+                            <a href="https://www.codacy.com" target="_blank" class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> Website
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">Ungit</h5>
+                            <p class="m-b">The easiest way to use git. On any platform. Anywhere.</p>
+                            <a href="https://github.com/FredrikNoren/ungit" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> View GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">Diffy</h5>
+                            <p class="m-b">Share your diffs and explain your ideas without committing.</p>
+                            <a href="https://diffy.org/" target="_blank" class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> Website
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">diff-pane</h5>
+                            <p class="m-b">Atom - Diff two panes.</p>
+                            <a href="https://github.com/t-ari/diff-pane" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> View GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">node-giff</h5>
+                            <p class="m-b">Display git diff on browser.</p>
+                            <a href="https://github.com/do7be/node-giff" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> View GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">edgar-monitor</h5>
+                            <p class="m-b">A module that processes new Edgar filings and sends out
+                                notifications.</p>
+                            <a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> View GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">node-git</h5>
+                            <p class="m-b">Execute Git Command by Node.js.</p>
+                            <a href="https://github.com/liangshuai/node-git" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> View GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">Jenkins</h5>
+                            <p class="m-b">Show diffs between builds</p>
+                            <a href="https://wiki.jenkins-ci.org/display/JENKINS/Last+Changes+Plugin" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> Website
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">Light Review</h5>
+                            <p class="m-b">Code Reviews with maximum control for the leading developers</p>
+                            <a href="http://light-review.com/" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> Website
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
+                    <div class="panel panel-default panel-profile m-b-0">
+                        <div class="panel-body text-center">
+                            <h5 class="panel-title">Simple Git</h5>
+                            <p class="m-b">A simple package to be able to drive GIT</p>
+                            <a href="https://github.com/mauricioszabo/simple-git" target="_blank"
+                                class="btn btn-primary-outline btn-sm m-b">
+                                <span class="icon icon-add-user"></span> View GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row row-padded-small text-center">
+        <div class="col-sm-8 col-sm-offset-2 text-center">
+            <h3><strong>Open Source</strong></h3>
+            <h4 class="m-b-md">diff2html is open source.
+                If you'd like to be part of the diff2html community or help us improve,
+                find us on <a href="https://github.com/rtfpessoa/diff2html" target="_blank">GitHub</a> and
+                <a href="https://gitter.im/rtfpessoa/diff2html" target="_blank">Gitter</a>. Need any help?
+            </h4>
+            <a class="btn btn-md" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
+                Read more in the Docs
+            </a>
+        </div>
+    </div>
+
+</div>
--- a/website/templates/pages/index/images/snapshot-1.png
+++ b/website/templates/pages/index/images/snapshot-1.png
--- a/website/templates/pages/index/images/snapshot-2.png
+++ b/website/templates/pages/index/images/snapshot-2.png
--- a/website/templates/pages/index/images/snapshot-3.png
+++ b/website/templates/pages/index/images/snapshot-3.png
--- a/website/templates/pages/index/index-scripts.partial.mustache
+++ b/website/templates/pages/index/index-scripts.partial.mustache
@ -1,5 +0,0 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
-
-<script>
-    new Clipboard(document.getElementsByClassName("btn-clipboard"));
-</script>
--- a/website/templates/pages/index/index.css
+++ b/website/templates/pages/index/index.css
@ -0,0 +1,111 @@
+.screenshot {
+    display: block;
+    overflow: hidden;
+  }
+  
+  .screenshot > img {
+    width: 100%
+  }
+  
+  .screenshots-fan {
+    margin-top: 50px
+  }
+  
+  .screenshots-fan .screenshot {
+    position: relative;
+    width: auto;
+    display: inline-block;
+    text-align: center;
+  }
+  
+  .screenshots-fan .screenshot:last-child, .screenshots-fan .screenshot:first-child {
+    z-index: 2
+  }
+  
+  .screenshots-fan .screenshot {
+    z-index: 3
+  }
+  
+  @media (min-width: 768px) {
+    .screenshots-fan {
+      position: relative;
+      overflow: hidden;
+      margin-top: 60px;
+      height: 200px
+    }
+  
+    .screenshots-fan .screenshot {
+      height: auto;
+      top: 10px;
+      width: 350px
+    }
+  
+    .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
+      width: 250px;
+      position: absolute;
+      top: 65px
+    }
+  
+    .screenshots-fan .screenshot:first-child {
+      left: 10px
+    }
+  
+    .screenshots-fan .screenshot:last-child {
+      left: auto;
+      right: 10px
+    }
+  }
+  
+  @media (min-width: 992px) {
+    .screenshots-fan {
+      margin-top: 60px;
+      height: 240px
+    }
+  
+    .screenshots-fan .screenshot {
+      width: 400px
+    }
+  
+    .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
+      width: 300px
+    }
+  }
+  
+  @media (min-width: 1200px) {
+    .screenshots-fan {
+      margin-top: 80px;
+      height: 380px
+    }
+  
+    .screenshots-fan .screenshot {
+      width: 550px
+    }
+  
+    .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
+      width: 450px
+    }
+  }
+
+.img-snapshot1 {
+  background-image: url("./images/snapshot-1.png");
+  background-repeat: no-repeat;
+  /* height: 50px;
+  width: 50px; */
+  display: inline-block;
+}
+
+.img-snapshot2 {
+  background-image: url("./images/snapshot-2.png");
+  background-repeat: no-repeat;
+  /* height: 50px;
+  width: 50px; */
+  display: inline-block;
+}
+
+.img-snapshot3 {
+  background-image: url("./images/snapshot-3.png");
+  background-repeat: no-repeat;
+  /* height: 50px;
+  width: 50px; */
+  display: inline-block;
+}
--- a/website/templates/pages/index/index.handlebars
+++ b/website/templates/pages/index/index.handlebars
@ -0,0 +1,4 @@
+{{#partial "content"}}
+{{> content}}
+{{/partial}}
+{{> ../../template}}
--- a/website/templates/pages/index/index.partial.mustache
+++ b/website/templates/pages/index/index.partial.mustache
@ -1,286 +0,0 @@
-        <div class="hero hero-homepage">
-                        <span class="hero-booticon">
-                            <span class="hero-green">diff</span><span class="hero-black">2</span><span
-                                class="hero-red">html</span>
-                        </span>
-            <h1 class="hero-header">Diff parser and pretty html generator</h1>
-            <h4 class="text-muted">Better diffs, unmatched reviews.</h4>
-            <h2><a class="btn btn-lg" href="demo.html">Demo</a></h2>
-
-            <div class="screenshots screenshots-fan clearfix">
-
-                <img class="screenshot hidden-xs" src="img/snapshot-2.png">
-
-                <a class="screenshot" href="demo.html">
-                    <img src="img/snapshot-3.png">
-                </a>
-
-                <a class="screenshot hidden-xs" href="demo.html">
-                    <img src="img/snapshot-1.png">
-                </a>
-
-            </div>
-        </div>
-
-        <div>
-            <div class="row  row-padded-small row-bordered">
-                <div class="col-sm-8 col-sm-offset-2 text-center">
-                    <h2 class="m-b-md">Each diff provides a comprehensive visualization of the code changes,
-                        helping developers identify problems and better understand the changes.</h2>
-                </div>
-            </div>
-
-            <div class="row  row-padded-small homepage-grid row-bordered p-t text-center">
-                <div class="col-sm-4">
-                                <span class="svg-icon-large">
-                                    <svg aria-hidden="true" class="octicon octicon-diff" height="16" version="1.1"
-                                         viewBox="0 0 14 16" width="14"><path
-                                            d="M6 7h2v1H6v2h-1V8H3v-1h2V5h1v2zM3 13h5v-1H3v1z m4.5-11l3.5 3.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h6.5z m2.5 4L7 3H1v12h9V6zM8.5 0S3 0 3 0v1h5l4 4v8h1V4.5L8.5 0z"></path></svg>
-                                </span>
-                    <h5><strong>Line by Line and Side by Side changes</strong></h5>
-                    <p class="text-muted">Each diff features a line by line and side by side preview of your
-                        changes.</p>
-                </div>
-
-                <div class="col-sm-4">
-                                <span class="svg-icon-large">
-                                    <svg aria-hidden="true" class="octicon octicon-tasklist" height="16" version="1.1"
-                                         viewBox="0 0 16 16" width="16"><path
-                                            d="M15.41 9H7.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h7.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1zM9.59 4c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h5.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H9.59zM0 3.91l1.41-1.3 1.59 1.59L7.09 0l1.41 1.41-5.5 5.5L0 3.91z m7.59 8.09h7.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H7.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1z"></path></svg>
-                                 </span>
-                    <h5><strong>Code syntax highlight</strong></h5>
-                    <p class="text-muted">All the code changes are syntax highlighted using <a
-                            href="https://highlightjs.org/">highlight.js</a>,
-                        providing more readability.</p>
-                </div>
-
-                <div class="col-sm-4">
-                                <span class="svg-icon-large">
-                                    <svg aria-hidden="true" class="octicon octicon-clippy" height="16" version="1.1"
-                                         viewBox="0 0 14 16"
-                                         width="14">
-                                        <path d="M2 12h4v1H2v-1z m5-6H2v1h5v-1z m2 3V7L6 10l3 3V11h5V9H9z m-4.5-1H2v1h2.5v-1zM2 11h2.5v-1H2v1z m9 1h1v2c-0.02 0.28-0.11 0.52-0.3 0.7s-0.42 0.28-0.7 0.3H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h3C4 0.89 4.89 0 6 0s2 0.89 2 2h3c0.55 0 1 0.45 1 1v5h-1V5H1v9h10V12zM2 4h8c0-0.55-0.45-1-1-1h-1c-0.55 0-1-0.45-1-1s-0.45-1-1-1-1 0.45-1 1-0.45 1-1 1h-1c-0.55 0-1 0.45-1 1z"></path>
-                                    </svg>
-                                </span>
-                    <h5><strong>Line similarity matching</strong></h5>
-                    <p class="text-muted">Similar lines are paired, allowing for easier change tracking.</p>
-                </div>
-            </div>
-
-            <div id="install" class="row-padded-small row-centered row-bordered">
-                <div class="col-md-12">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <h3><strong>Install with Bower</strong></h3>
-                            <p>You can install and manage diff2html's CSS and JS using Bower:</p>
-                            <div class="homepage-code-example">
-                                <p><span class="unselectable">&gt; $ </span><span class="text-muted">bower install diff2html</span></p>
-                                <span class="btn-clipboard" data-clipboard-text="bower install diff2html" title="Copy">Copy</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-12">
-                            <h3><strong>Install with npm</strong></h3>
-                            <p>You can also install diff2html using npm:</p>
-                            <div class="homepage-code-example">
-                                <p><span class="unselectable">&gt; $ </span><span class="text-muted">npm install diff2html</span></p>
-                                <span class="btn-clipboard" data-clipboard-text="npm install diff2html" title="Copy">Copy</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="row row-padded-small">
-                        <div class="col-md-12">
-                            <a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
-                                Find usage examples in the Docs
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div id="cli" class="row row-padded-small row-centered row-bordered">
-                <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
-                    <h3><strong>With command line integration</strong></h3>
-                    <h4 class="m-b-md">We work hard to make sure you can have your diffs in a simple and flexible
-                        way. Go <a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank">here full
-                            documentation</a>.</h4>
-                </div>
-                <div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
-                    <div class="homepage-terminal-example">
-                        <p class="m-b-md">
-                            <span class="unselectable">&gt; $ </span><span class="text-muted">npm install -g diff2html-cli</span><br>
-                            <span class="unselectable">diff2html cli installed!</span>
-                        </p>
-                        <p class="m-b-md">
-                            <span class="unselectable">&gt; $ </span><span class="text-muted">diff2html</span><br>
-                            <span class="unselectable">Previous commit changes on your browser</span>
-                        </p>
-                        <p>
-                            <span class="unselectable">&gt; $ <span class="text-muted">is that it?</span><br>
-                            Yup, it's that simple.</span>
-                        </p>
-                    </div>
-                </div>
-            </div>
-
-            <div id="users" class="row row-padded-small row-centered row-bordered">
-                <div class="col-md-12">
-                    <div class="row">
-                        <div class="col-md-12">
-                            <h3><strong>Projects using diff2html</strong></h3>
-                        </div>
-                    </div>
-                    <div class="row row-eq-height">
-                        <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                            <div class="panel panel-default panel-profile m-b-0">
-                                <div class="panel-body text-center">
-                                    <h5 class="panel-title">diff2html-cli</h5>
-                                    <p class="m-b">diff2html from your terminal to the browser.</p>
-                                    <a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank"
-                                       class="btn btn-primary-outline btn-sm m-b">
-                                        <span class="icon icon-add-user"></span> View GitHub
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                      <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                            <div class="panel panel-default panel-profile m-b-0">
-                                <div class="panel-body text-center">
-                                    <h5 class="panel-title">Codacy</h5>
-                                    <p class="m-b">Check code style, security, duplication, complexity and coverage on every change.</p>
-                                    <a href="https://www.codacy.com" target="_blank"
-                                       class="btn btn-primary-outline btn-sm m-b">
-                                        <span class="icon icon-add-user"></span> Website
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                            <div class="panel panel-default panel-profile m-b-0">
-                                <div class="panel-body text-center">
-                                    <h5 class="panel-title">Ungit</h5>
-                                    <p class="m-b">The easiest way to use git. On any platform. Anywhere.</p>
-                                    <a href="https://github.com/FredrikNoren/ungit" target="_blank"
-                                       class="btn btn-primary-outline btn-sm m-b">
-                                        <span class="icon icon-add-user"></span> View GitHub
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                            <div class="panel panel-default panel-profile m-b-0">
-                                <div class="panel-body text-center">
-                                    <h5 class="panel-title">Diffy</h5>
-                                    <p class="m-b">Share your diffs and explain your ideas without committing.</p>
-                                    <a href="https://diffy.org/" target="_blank"
-                                       class="btn btn-primary-outline btn-sm m-b">
-                                        <span class="icon icon-add-user"></span> Website
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                            <div class="panel panel-default panel-profile m-b-0">
-                                <div class="panel-body text-center">
-                                    <h5 class="panel-title">diff-pane</h5>
-                                    <p class="m-b">Atom - Diff two panes.</p>
-                                    <a href="https://github.com/t-ari/diff-pane" target="_blank"
-                                       class="btn btn-primary-outline btn-sm m-b">
-                                        <span class="icon icon-add-user"></span> View GitHub
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                            <div class="panel panel-default panel-profile m-b-0">
-                                <div class="panel-body text-center">
-                                    <h5 class="panel-title">node-giff</h5>
-                                    <p class="m-b">Display git diff on browser.</p>
-                                    <a href="https://github.com/do7be/node-giff" target="_blank"
-                                       class="btn btn-primary-outline btn-sm m-b">
-                                        <span class="icon icon-add-user"></span> View GitHub
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                            <div class="panel panel-default panel-profile m-b-0">
-                                <div class="panel-body text-center">
-                                    <h5 class="panel-title">edgar-monitor</h5>
-                                    <p class="m-b">A module that processes new Edgar filings and sends out
-                                        notifications.</p>
-                                    <a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank"
-                                       class="btn btn-primary-outline btn-sm m-b">
-                                        <span class="icon icon-add-user"></span> View GitHub
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                            <div class="panel panel-default panel-profile m-b-0">
-                                <div class="panel-body text-center">
-                                    <h5 class="panel-title">node-git</h5>
-                                    <p class="m-b">Execute Git Command by Node.js.</p>
-                                    <a href="https://github.com/liangshuai/node-git" target="_blank"
-                                       class="btn btn-primary-outline btn-sm m-b">
-                                        <span class="icon icon-add-user"></span> View GitHub
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                      <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                        <div class="panel panel-default panel-profile m-b-0">
-                          <div class="panel-body text-center">
-                            <h5 class="panel-title">Jenkins</h5>
-                            <p class="m-b">Show diffs between builds</p>
-                            <a href="https://wiki.jenkins-ci.org/display/JENKINS/Last+Changes+Plugin" target="_blank"
-                               class="btn btn-primary-outline btn-sm m-b">
-                              <span class="icon icon-add-user"></span> Website
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                        <div class="panel panel-default panel-profile m-b-0">
-                          <div class="panel-body text-center">
-                            <h5 class="panel-title">Light Review</h5>
-                            <p class="m-b">Code Reviews with maximum control for the leading developers</p>
-                            <a href="http://light-review.com/" target="_blank"
-                               class="btn btn-primary-outline btn-sm m-b">
-                              <span class="icon icon-add-user"></span> Website
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                      <div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
-                        <div class="panel panel-default panel-profile m-b-0">
-                          <div class="panel-body text-center">
-                            <h5 class="panel-title">Simple Git</h5>
-                            <p class="m-b">A simple package to be able to drive GIT</p>
-                            <a href="https://github.com/mauricioszabo/simple-git" target="_blank"
-                               class="btn btn-primary-outline btn-sm m-b">
-                              <span class="icon icon-add-user"></span> View GitHub
-                            </a>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="row row-padded-small text-center">
-                <div class="col-sm-8 col-sm-offset-2 text-center">
-                    <h3><strong>Open Source</strong></h3>
-                    <h4 class="m-b-md">diff2html is open source.
-                        If you'd like to be part of the diff2html community or help us improve,
-                        find us on <a href="https://github.com/rtfpessoa/diff2html" target="_blank">GitHub</a> and
-                        <a href="https://gitter.im/rtfpessoa/diff2html" target="_blank">Gitter</a>. Need any help?
-                    </h4>
-                    <a class="btn btn-md" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
-                        Read more in the Docs
-                    </a>
-                </div>
-            </div>
-
-        </div>
--- a/website/templates/pages/index/index.ts
+++ b/website/templates/pages/index/index.ts
@ -0,0 +1,8 @@
+import Clipboard from "clipboard";
+
+import "../../../main.ts";
+import "../../../main.css";
+import "./index.css";
+
+// eslint-disable-next-line no-new
+new Clipboard(document.getElementsByClassName("btn-clipboard")[0]);
--- a/website/templates/template.handlebars
+++ b/website/templates/template.handlebars
@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en" class="js">
+
+<head>
+    <meta charset="utf-8">
+    <!--[if IE]>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
+    <![endif]-->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <meta name="description" content="Diff parser and pretty html generator">
+    <meta name="keywords" content="diff2html,git,diff,unified,pretty,html,css,javaccript">
+    <meta name="author" content="Rodrigo Fernandes (rtfpessoa)">
+
+    <title>diff2html</title>
+
+    <!-- search engine -->
+    <link rel="canonical" href="https://diff2html.xyz">
+
+    <!-- open graph -->
+    <meta property="og:title" content="diff2html">
+    <meta property="og:type" content="website">
+
+    <meta property="og:description" content="Diff parser and pretty html generator.">
+
+    <meta property="og:url" content="https://diff2html.xyz">
+    <meta property="og:site_name" content="diff2html">
+
+    <script>
+        (function (i, s, o, g, r, a, m) {
+            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
+                (i[r].q = i[r].q || []).push(arguments)
+            }, i[r].l = 1 * new Date(); a = s.createElement(o),
+                m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
+        })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
+
+        ga('create', 'UA-78351861-2', 'auto');
+        ga('send', 'pageview');
+    </script>
+</head>
+
+<body class="template-index">
+    <div class="swag-line">
+
+        <div class="container">
+            <nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
+                        data-target="#global-nav">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand" href="index.html">diff2html</a>
+                </div>
+
+                <div class="collapse navbar-collapse" id="global-nav">
+                    <div class="navbar-right">
+                        <ul class="nav navbar-nav">
+
+                            <li>
+                                <a href="index.html#install">Getting Started</a>
+                            </li>
+
+                            <li>
+                                <a href="index.html#cli">CLI</a>
+                            </li>
+
+                            <li>
+                                <a href="demo.html">Demo</a>
+                            </li>
+
+                            <li>
+                                <a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">Docs</a>
+                            </li>
+
+                            <li>
+                                <a href="https://github.com/rtfpessoa/diff2html/issues/new" target="_blank">Support</a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+
+            {{#block "content"}}{{/block}}
+        </div>
+
+        <footer class="footer clearfix">
+            <p class="col-xs-10 col-xs-offset-1">
+                Website originally designed and built by
+                <a href="https://twitter.com/mdo" target="_blank">@mdo</a>,
+                <a href="https://twitter.com/fat" target="_blank">@fat</a>, and
+                <a href="https://twitter.com/dhg" target="_blank">@dhg</a>,
+                adapted with <span class="hero-red">❤</span> by
+                <a href="https://twitter.com/rtfpessoa" target="_blank">@rtfpessoa</a>.
+            </p>
+            <ul class="footer-list col-xs-10 col-xs-offset-1">
+
+                <li class="footer-list-item">
+                    <a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#how-to-use"
+                        target="_blank">FAQ</a>
+                </li>
+
+                <li class="footer-list-item">
+                    <a class="footer-list-link" href="https://diff2html.xyz">diff2html</a>
+                </li>
+
+            </ul>
+        </footer>
+
+    </div>
+
+    <!-- General JavaScript -->
+    <script type="application/ld+json">
+{
+  "@context": "http://schema.org/",
+  "@type": "SoftwareSourceCode",
+  "name": "diff2html",
+  "author": "Rodrigo Fernandes",
+  "image": "https://diff2html.xyz/img/snapshot-3.png",
+  "description": "Diff parser and pretty html generator.",
+  "codeRepository": "https://github.com/rtfpessoa/diff2html",
+  "programmingLanguage": "JavaScript",
+  "runtimePlatform": "Node >= 0.12",
+  "mainEntityOfPage": "https://diff2html.xyz/"
+}
+</script>
+
+</body>
+
+</html>
--- a/website/templates/template.mustache
+++ b/website/templates/template.mustache
@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="js">
-<head>
-    <meta charset="utf-8">
-    <!--[if IE]>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
-    <![endif]-->
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <meta name="description" content="Diff parser and pretty html generator">
-    <meta name="keywords" content="diff2html,git,diff,unified,pretty,html,css,javaccript">
-    <meta name="author" content="Rodrigo Fernandes (rtfpessoa)">
-
-    <title>diff2html</title>
-
-    <!-- search engine -->
-    <link rel="canonical" href="https://diff2html.xyz">
-
-    <!-- open graph -->
-    <meta property="og:title" content="diff2html">
-    <meta property="og:type" content="website">
-
-    <meta property="og:description"
-          content="Diff parser and pretty html generator.">
-
-    <meta property="og:url" content="https://diff2html.xyz">
-    <meta property="og:site_name" content="diff2html">
-
-    <!-- Bootstrap -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
-          integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
-
-    <!-- Custom styles for this template -->
-    <link href="main.min.css" rel="stylesheet">
-
-{{#assets}}
-{{{assets}}}
-
-{{/assets}}
-    <script>
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-      ga('create', 'UA-78351861-2', 'auto');
-      ga('send', 'pageview');
-    </script>
-</head>
-<body class="template-index {{extraClass}}">
-<div class="swag-line">
-
-    <div class="container">
-        <nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">
-            <div class="navbar-header">
-                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#global-nav">
-                    <span class="sr-only">Toggle navigation</span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="index.html">diff2html</a>
-            </div>
-
-            <div class="collapse navbar-collapse" id="global-nav">
-                <div class="navbar-right">
-                    <ul class="nav navbar-nav">
-
-                        <li>
-                            <a href="index.html#install">Getting Started</a>
-                        </li>
-
-                        <li>
-                            <a href="index.html#cli">CLI</a>
-                        </li>
-
-                        <li>
-                            <a href="demo.html">Demo</a>
-                        </li>
-
-                        <li>
-                            <a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">Docs</a>
-                        </li>
-
-                        <li>
-                            <a href="https://github.com/rtfpessoa/diff2html/issues/new" target="_blank">Support</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </nav>
-
-{{{content}}}
-
-    </div>
-
-    <footer class="footer clearfix">
-        <p class="col-xs-10 col-xs-offset-1">
-            Website originally designed and built by
-            <a href="https://twitter.com/mdo" target="_blank">@mdo</a>,
-            <a href="https://twitter.com/fat" target="_blank">@fat</a>, and
-            <a href="https://twitter.com/dhg" target="_blank">@dhg</a>,
-            adapted with <span class="hero-red">❤</span> by
-            <a href="https://twitter.com/rtfpessoa" target="_blank">@rtfpessoa</a>.
-        </p>
-        <ul class="footer-list col-xs-10 col-xs-offset-1">
-
-            <li class="footer-list-item">
-                <a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#how-to-use"
-                   target="_blank">FAQ</a>
-            </li>
-
-            <li class="footer-list-item">
-                <a class="footer-list-link" href="https://diff2html.xyz">diff2html</a>
-            </li>
-
-        </ul>
-    </footer>
-
-</div>
-
-<!-- General JavaScript -->
-<script type="application/ld+json">
-{
-  "@context": "http://schema.org/",
-  "@type": "SoftwareSourceCode",
-  "name": "diff2html",
-  "author": "Rodrigo Fernandes",
-  "image": "https://diff2html.xyz/img/snapshot-3.png",
-  "description": "Diff parser and pretty html generator.",
-  "codeRepository": "https://github.com/rtfpessoa/diff2html",
-  "programmingLanguage": "JavaScript",
-  "runtimePlatform": "Node >= 0.12",
-  "mainEntityOfPage": "https://diff2html.xyz/"
-}
-</script>
-
-{{#scripts}}
-{{{scripts}}}
-
-{{/scripts}}
-</body>
-</html>
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				`@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/github.min.css");`