Added a simple web builder

docs/prism.css

@@ -0,0 +1,140 @@
+/* PrismJS 1.9.0
+http://prismjs.com/download.html?themes=prism&languages=clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+

package.json

@@ -18,6 +18,7 @@
     "builder": "node ./scripts/build-script.js",
     "linter": "node ./scripts/lint-script.js",
     "tagger": "node ./scripts/tag-script.js",
+    "webber": "node ./scripts/web-script.js",
     "start": "concurrently --kill-others \"nodemon -e js,md -i README.md -x \\\"npm run build-list\\\"\" \"live-server ./build\""
   },
   "repository": {

scripts/web-script.js

@@ -0,0 +1,81 @@
+/*
+  This is the builder script that generates the README file.
+  Run using `npm run builder`.
+*/
+// Load modules
+const fs = require('fs-extra'), path = require('path'), chalk = require('chalk'),
+  md = require('markdown-it')();
+// Set variables for paths
+const snippetsPath = './snippets',  staticPartsPath = './static-parts', docsPath = './docs';
+// Set variables for script
+let snippets = {}, startPart = '', endPart = '', output = '', tagDbData = {};
+// Load helper functions (these are from existing snippets in 30 seconds of code!)
+const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {});
+const capitalize = (str, lowerRest = false) => str.slice(0, 1).toUpperCase() + (lowerRest ? str.slice(1).toLowerCase() : str.slice(1));
+// Start the timer of the script
+console.time('Builder');
+// Synchronously read all snippets and sort them as necessary (case-insensitive)
+try {
+  let snippetFilenames = fs.readdirSync(snippetsPath);
+  snippetFilenames.sort((a, b) => {
+    a = a.toLowerCase();
+    b = b.toLowerCase();
+    if (a < b) return -1;
+    if (a > b) return 1;
+    return 0;
+  });
+  // Store the data read from each snippet in the appropriate object
+  for(let snippet of snippetFilenames)  snippets[snippet] = fs.readFileSync(path.join(snippetsPath,snippet),'utf8');
+}
+catch (err){  // Handle errors (hopefully not!)
+  console.log(`${chalk.red('ERROR!')} During snippet loading: ${err}`);
+  process.exit(1);
+}
+// Load static parts for the index.html file
+try {
+  startPart = fs.readFileSync(path.join(staticPartsPath,'index-start.html'),'utf8');
+  endPart = fs.readFileSync(path.join(staticPartsPath,'index-end.html'),'utf8');
+}
+catch (err){ // Handle errors (hopefully not!)
+  console.log(`${chalk.red('ERROR!')} During static part loading: ${err}`);
+  process.exit(1);
+}
+// Load tag data from the database
+try {
+  tagDbData = objectFromPairs(fs.readFileSync('tag_database','utf8').split('\n').slice(0,-1).map(v => v.split(':').slice(0,2)));
+}
+catch (err){  // Handle errors (hopefully not!)
+  console.log(`${chalk.red('ERROR!')} During tag database loading: ${err}`);
+  process.exit(1);
+}
+// Create the output for the index.html file
+try {
+  // Add the start static part
+  output += `${startPart+'\n'}`;
+  // Loop over tags and snippets to create the table of contents
+  for(let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))].filter(v => v).sort((a,b) => a.localeCompare(b))){
+    output +=`<h3>`+md.render(`${capitalize(tag, true)}\n`).replace(/<p>/g,'').replace(/<\/p>/g,'')+`</h3>`;
+    for(let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag))
+      output += md.render(`[${taggedSnippet[0]}](#${taggedSnippet[0].toLowerCase()})\n`).replace(/<p>/g,'').replace(/<\/p>/g,'').replace(/<a/g,'<a class="sublink-1"');
+    output += '\n';
+  }
+  output += `</nav><main class="col-sm-12 col-md-8 col-lg-9" style="height: 100%;overflow-y: auto; background: #eee;">`;
+  // Loop over tags and snippets to create the list of snippets
+  for(let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))].filter(v => v).sort((a,b) => a.localeCompare(b))){
+    output +=md.render(`## ${capitalize(tag, true)}\n`).replace(/<h2>/g,'<h2 style="text-align:center;">');
+    for(let taggedSnippet of Object.entries(tagDbData).filter(v => v[1] === tag))
+      output += '<div class="card fluid"><div class="section double-padded">' + md.render(`\n${snippets[taggedSnippet[0]+'.md']}`).replace(/<h3/g,`<h3 id="${taggedSnippet[0].toLowerCase()}"`).replace(/<\/h3>/g,'</h3></div><div class="section double-padded">') + '</div></div><br/>';
+  }
+  // Add the ending static part
+  output += `\n${endPart+'\n'}`;
+  // Write to the index.html file
+  fs.writeFileSync(path.join(docsPath,'index.html'), output);
+}
+catch (err){  // Handle errors (hopefully not!)
+  console.log(`${chalk.red('ERROR!')} During index.html generation: ${err}`);
+  process.exit(1);
+}
+// Log a success message
+console.log(`${chalk.green('SUCCESS!')} index.html file generated!`);
+// Log the time taken
+console.timeEnd('Builder');

static-parts/index-end.html

@@ -0,0 +1,6 @@
+        <footer><p><strong>30 seconds of code</strong> is licensed under the <a href="https://github.com/Chalarangelo/30-seconds-of-code/blob/master/LICENSE">CC0-1.0</a> license.<br/>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/">CC 3.0 BY</a>.</p></footer>
+      </main>
+    </div>    
+    <script src="prism.js"></script>
+  </body>
+</html>

static-parts/index-start.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/3.0.0-alpha.1/mini-default.css">
+    <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Poppins:400,400i,500,700,700i&amp;subset=latin-ext" rel="stylesheet">
+    <title>30 seconds of code</title>
+    <meta charset="utf-8">
+    <meta name="description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.">
+    <meta name="keywords" content="javascript, snippets, code, programming">
+    <meta name="author" content="Angelos Chalaris (chalarangelo@gmail.com)">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta property="og:title" content="30 seconds of code">
+    <meta property="og:description" content="Curated collection of useful Javascript snippets that you can understand in 30 seconds or less." />
+    <meta property="og:type" content="website" /><meta property="og:image" content="favicon.png">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <style>
+      html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
+      code, pre, kbd, code *, pre *, kbd * { font-family: 'Inconsolata', Menlo, Consolas, monospace; }
+      code, kbd { font-size: 1em; }
+      pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
+    </style>
+    <link rel="stylesheet" href="prism.css">
+  </head>
+  <body>
+    <header>
+      <h1 class="logo" style="margin-top: -1rem; text-align:center;"><img src="favicon.png" style="height: 4rem;"/><span style="position:relative; top: -1rem;">&nbsp;30 seconds of code</span></h1>
+      <label for="doc-drawer-checkbox" class="button drawer-toggle" style="position: absolute; right: 0; top: 0;"></label>
+    </header>
+    <div class="row" style="height: calc(100vh - 3.5625rem);overflow: hidden;">
+      <input id="doc-drawer-checkbox" class="drawer" value="on" type="checkbox">
+        <nav class="col-md-4 col-lg-3" style="border-top: 0">
+          <label for="doc-drawer-checkbox" class="button drawer-close"></label>
+          <!-- <div><input style="width: 100%; margin: 0px;" placeholder="Search..." id="search-bar" oninput="search()" type="search"></div> -->