98.css - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

build.js

 #!/usr/bin/env node
+const dedent = require("dedent");
+const ejs = require("ejs");
 const fs = require("fs");
+const glob = require("glob");
+const hljs = require("highlight.js");
 const mkdirp = require("mkdirp");
+const path = require("path");
 const postcss = require("postcss");
 
-postcss()
-  .use(require("postcss-inline-svg"))
-  .use(require("postcss-css-variables"))
-  .use(require("postcss-calc"))
-  .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
-  .use(require("cssnano"))
-  .process(fs.readFileSync("style.css"), {
-    from: "style.css",
-    to: "dist/98.css",
-    map: { inline: false },
-  })
-  .then((result) => {
-    mkdirp.sync("dist");
-    fs.writeFileSync("dist/98.css", result.css);
-    fs.writeFileSync("dist/98.css.map", result.map);
+function buildCSS() {
+  return postcss()
+    .use(require("postcss-inline-svg"))
+    .use(require("postcss-css-variables"))
+    .use(require("postcss-calc"))
+    .use(require("postcss-copy")({ dest: "dist", template: "[name].[ext]" }))
+    .use(require("cssnano"))
+    .process(fs.readFileSync("style.css"), {
+      from: "style.css",
+      to: "dist/98.css",
+      map: { inline: false },
+    })
+    .then((result) => {
+      mkdirp.sync("dist");
+      fs.writeFileSync("dist/98.css", result.css);
+      fs.writeFileSync("dist/98.css.map", result.map);
+    });
+}
+
+function buildDocs() {
+  let id = 0;
+  function getNewId() {
+    return ++id;
+  }
+  function getCurrentId() {
+    return id;
+  }
+
+  const template = fs.readFileSync("docs/index.html.ejs", "utf-8");
+  function example(code) {
+    const magicBrackets = /\[\[(.*)\]\]/g;
+    const dedented = dedent(code);
+    const inline = dedented.replace(magicBrackets, "$1");
+    const escaped = hljs.highlight("html", dedented.replace(magicBrackets, ""))
+      .value;
+
+    return `<div class="example">
+      ${inline}
+      <details>
+        <summary>Show code</summary>
+        <pre><code>${escaped}</code></pre>
+      </details>
+    </div>`;
+  }
+
+  glob("docs/*", (err, files) => {
+    if (!err) {
+      files.forEach((srcFile) =>
+        fs.copyFileSync(srcFile, path.join("dist", path.basename(srcFile)))
+      );
+    } else throw "error globbing dist directory.";
   });
+  fs.writeFileSync(
+    path.join(__dirname, "/dist/index.html"),
+    ejs.render(template, { getNewId, getCurrentId, example })
+  );
+}
+
+function build() {
+  buildCSS()
+    .then(buildDocs)
+    .catch((err) => console.log(err));
+}
+module.exports = build;
+
+build();

package.json

 {
   "name": "98.css",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A design system for building faithful recreations of old UIs",
@@ -11,3 +11,3 @@ "main": "dist/98.css",
     "build": "node build.js",
-    "build:docs": "npm run build && node build-docs.js"
+    "deploy:docs": "npm run build && gh-pages -d dist"
   },
@@ -29,7 +29,10 @@ "repository": {
   "devDependencies": {
+    "chokidar": "^3.3.1",
     "cssnano": "^4.1.10",
     "dedent": "^0.7.0",
     "ejs": "^3.0.2",
+    "gh-pages": "^2.2.0",
     "glob": "^7.1.6",
     "highlight.js": "^9.18.1",
+    "live-server": "^1.2.1",
     "mkdirp": "^1.0.4",
@@ -36,0 +39,0 @@ "postcss-calc": "^7.0.2",

README.md

@@ -49,6 +49,10 @@ ## 98.css
 
+First, run `npm install`.
+
 [`style.css`](https://github.com/jdan/98.css/blob/master/style.css) is where everything happens.
 
-`npm run build:docs` will compile `style.css` (and all fonts/icons/etc) and rebuild the docs/ directory which powers http://jdan.github.io/98.css. It's a static directory so serve it with your server of choice (I am partial to `python -m SimpleHTTPServer 3000`) to see your changes.
+You can use `npm start` to start a development environment that will watch for file changes and rebuild 98.css, reloading your browser in the process.
 
+You can run a build manually with `npm run build`. This will write to the `dist/` directory.
+
 ### Issues, Contributing, etc.
@@ -55,0 +59,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

970

increased by20.05%

Number of lines in readme file

66

increased by6.45%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

253893

decreased by-9.72%

Dev dependency count

14

increased by27.27%

Number of package files

49

decreased by-2%

No dependency changes