Fix demo & docs build

.ndocrc

@@ -2,6 +2,7 @@
 # Common nodeca config
 ################################################################################
 
+--alias mjs:js
 --index         "./README.md"
 --package       "./package.json"
 --gh-ribbon     "https://github.com/{package.repository}"
@@ -15,7 +16,7 @@
 # Paths with sources
 ################################################################################
 
-index.js
+index.mjs
 lib
 
 

package.json

@@ -17,28 +17,26 @@
   "scripts": {
     "lint": "eslint .",
     "test": "npm run lint && c8 -r text -r html -r lcov mocha",
-    "demo": "npm run lint && node support/build_demo.js",
-    "doc": "node support/build_doc.js",
+    "demo": "npm run lint && node support/build_demo.mjs",
+    "doc": "node support/build_doc.mjs",
     "gh-pages": "npm run demo && npm run doc && shx cp -R doc/ demo/ && gh-pages -d demo -f",
     "prepublishOnly": "npm run gh-pages"
   },
   "dependencies": {
     "uc.micro": "^1.0.1"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "ansi": "^0.3.0",
-    "autoprefixer-stylus": "^1.0.0",
     "benchmark": "^2.1.0",
-    "browserify": "^17.0.0",
     "c8": "^8.0.1",
     "eslint": "^8.54.0",
     "eslint-config-standard": "^17.1.0",
     "gh-pages": "^3.2.3",
     "mdurl": "^1.0.0",
     "mocha": "^9.1.2",
     "ndoc": "^6.0.0",
-    "nyc": "^15.0.1",
-    "pug-cli": "^1.0.0-alpha6",
+    "rollup": "^4.6.1",
     "shelljs": "^0.8.4",
     "shx": "^0.3.2",
     "stylus": "~0.55.0",

support/build_demo.mjs

@@ -1,21 +1,66 @@
 #!/usr/bin/env node
 
 import shell from 'shelljs'
+import { readFileSync, writeFileSync } from 'fs'
+
+function escape(input) {
+  return input
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    // .replaceAll("'", '&#039;');
+}
 
 shell.rm('-rf', 'demo')
 shell.mkdir('demo')
 
-shell.exec('support/demodata.js > support/demo_template/sample.json')
+shell.cp('support/demo_template/index.css', 'demo/')
+
+// Read html template and inject escaped sample
+const html = readFileSync('support/demo_template/index.html', 'utf8')
+
+let sample_links = readFileSync('test/fixtures/links.txt', 'utf8')
+
+// Cleanup
+const lines = sample_links.split(/\r?\n/g)
+const result = []
+function isComment(str) { return /^%.*/.test(str) }
+function isEmpty(str) { return !(str && str.trim()) }
+
+for (let i = 0; i < lines.length; i++) {
+  const line = lines[i]
+
+  if (isComment(line)) {
+    result.push(line)
+    continue
+  }
+
+  if (isEmpty(line)) {
+    if (isComment(lines[i + 1])) {
+      result.push('')
+    }
+    continue
+  }
+
+  result.push(line)
+
+  if (!isComment(lines[i + 1]) && !isEmpty(lines[i + 1])) {
+    i++
+  }
+}
+
+sample_links = result.join('\n')
+
+const sample_not_links = readFileSync('test/fixtures/not_links.txt', 'utf8')
+
+const sample =
+`${sample_links}
 
-shell.exec('node_modules/.bin/pug support/demo_template/index.pug --pretty \
---obj support/demo_template/sample.json \
---out demo')
 
-shell.exec('node_modules/.bin/stylus -u autoprefixer-stylus \
-< ./support/demo_template/index.styl \
-> ./demo/index.css')
+${sample_not_links}`
 
-shell.rm('-rf', 'support/demo_template/sample.json')
+const output = html.replace('<!--SAMPLE-->', escape(sample))
+writeFileSync('demo/index.html', output)
 
-shell.exec('node_modules/.bin/browserify ./support/demo_template/index.js \
-> ./demo/index.js')
+shell.exec('node_modules/.bin/rollup -c support/demo_template/rollup.config.mjs')

support/demo_template/index.css

@@ -0,0 +1,73 @@
+html,
+body,
+.full-height {
+  height: 100%;
+}
+
+body {
+  overflow-x: hidden;
+  padding-bottom: 160px;
+  background-color: #fbfbfb;
+}
+
+.source {
+  width: 100%;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 13px;
+  padding: 2px;
+}
+
+.result-html {
+  padding: 2px 10px;
+  overflow: auto;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+.result-html img {
+  max-width: 35%;
+}
+
+.demo-control {
+  position: absolute;
+  right: 15px;
+  top: -17px;
+  border-radius: 6px 6px 0 0;
+  font-size: 12px;
+  background-color: #ddd;
+}
+.demo-control a {
+  padding: 0 20px;
+}
+.demo-control a:first-child {
+  padding-left: 30px;
+}
+.demo-control a:last-child {
+  padding-right: 30px;
+}
+
+.gh-ribbon {
+  display: block;
+  position: absolute;
+  right: -60px;
+  top: 44px;
+  transform: rotate(45deg);
+  width: 230px;
+  z-index: 10000;
+  white-space: nowrap;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color: #686868;
+  box-shadow: 0 0 2px rgba(102,102,102,0.4);
+  padding: 1px 0;
+}
+.gh-ribbon a {
+  text-decoration: none !important;
+  border: 1px solid #ccc;
+  color: #fff;
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+  outline: medium none;
+  padding: 4px 50px 2px;
+  text-align: center;
+}

support/demo_template/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>linkify-it demo</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="https://cdn.jsdelivr.net/jquery/1.11.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/lodash/2.4.1/lodash.js"></script>
+    <script src="https://cdn.jsdelivr.net/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.2.0/css/bootstrap.css">
+    <link rel="stylesheet" href="index.css">
+    <script src="index.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <h1>
+        linkify-it <small>demo</small></h1>
+      <p>
+        Type text below to see linkified example.
+        See <a href="./doc/" target="_blank">API Docs</a> for usage details.
+      </p>
+      <p>&nbsp;</p>
+    </div>
+    <div class="container full-height">
+      <div class="row full-height">
+        <div class="col-xs-6 full-height">
+          <div class="demo-control"><a class="source-clear" href="#">clear</a><a id="permalink" href="./" title="Share this snippet as link"><strong>permalink</strong></a></div>
+          <textarea class="source full-height"><!--SAMPLE--></textarea>
+        </div>
+        <section class="col-xs-6 full-height">
+          <div class="result-html full-height"></div>
+        </section>
+      </div>
+    </div>
+    <div class="gh-ribbon"><a href="https://github.com/markdown-it/linkify-it" target="_blank">Fork me on GitHub</a></div>
+  </body>
+</html>

support/demo_template/index.js → support/demo_template/index.mjs

@@ -1,10 +1,9 @@
-'use strict'
-
 /*eslint-env browser*/
 /*global $, _*/
 
-const linkify = require('../../')({ fuzzyIP: true })
-const mdurl   = require('mdurl')
+import linkifyit from '../../index.mjs'
+import mdurl from 'mdurl'
+const linkify = linkifyit({ fuzzyIP: true })
 let permalink
 
 function escape(str) {

support/demo_template/rollup.config.mjs

@@ -0,0 +1,15 @@
+import resolve from '@rollup/plugin-node-resolve'
+
+export default [
+  {
+    input: 'support/demo_template/index.mjs',
+    output: {
+      file: 'demo/index.js',
+      format: 'iife',
+      name: 'demo'
+    },
+    plugins: [
+      resolve()
+    ]
+  }
+]