Build README

data/snippet_data.json

@@ -120,6 +120,7 @@
     ],
     "expertise": 0,
     "tags": [
+      "visual",
       "functional"
     ],
     "notes": []

package.json

@@ -4,7 +4,8 @@
   "description": "Curated collection of useful React snippets that you can understand in 30 seconds or less.",
   "main": "index.js",
   "scripts": {
-    "extractor": "node ./scripts/extract.js"
+    "extractor": "node ./scripts/extract.js",
+    "builder": "node ./scripts/build.js"
   },
   "repository": {
     "type": "git",

scripts/build.js

@@ -0,0 +1,105 @@
+const fs = require("fs-extra");
+const path = require("path");
+const chalk = require("chalk");
+const util = require("./util.js");
+const markdown = require("markdown-builder");
+const snippets = require("../data/snippet_data.json")
+
+const { headers, misc, lists } = markdown;
+const TAG_NAMES = [...new Set(snippets.reduce((acc,v) => [...acc,v.tags[0]],[]))].sort((a,b) => a.localeCompare(b));
+console.log(TAG_NAMES);
+
+const STATIC_PARTS_PATH = "./static-parts";
+
+let startPart = "";
+let endPart = "";
+let output = "";
+
+const detailsTOC = (title, snippetsArray) =>
+  `\n${misc
+    .collapsible(
+      title,
+      lists
+        .ul(snippetsArray, snippet =>
+          misc.link(
+            snippet.title
+              .replace("\n", "")
+              .split("```")[0]
+              .trim(),
+            misc.anchor(
+              snippet.title
+                .replace("\n", "")
+                .split("```")[0]
+                .trim()
+            )
+          )
+        )
+        .trim()
+    )
+    .trim()}\n\n`;
+
+console.time("Builder");
+
+try {
+  startPart = fs.readFileSync(
+    path.join(STATIC_PARTS_PATH, "README-start.md"),
+    "utf8"
+  );
+  endPart = fs.readFileSync(
+    path.join(STATIC_PARTS_PATH, "README-end.md"),
+    "utf8"
+  );
+} catch (err) {
+  console.log(`${chalk.red("ERROR!")} During static part loading: ${err}`);
+  process.exit(1);
+}
+
+try {
+  // add static part for start
+  output += `${startPart}\n`;
+
+  const snippetsInTag = {};
+
+  TAG_NAMES.forEach(tag => snippetsInTag[tag] = snippets.filter(v => v.tags[0] == tag));
+
+  // write Table of Contents
+  TAG_NAMES.forEach(tag => {
+    const taggedSnippets = snippetsInTag[tag];
+    output += headers.h3(util.capitalize(tag));
+    output += detailsTOC("View contents", taggedSnippets);
+  });
+
+  // delimeter after TOC
+  output += misc.hr();
+
+  // write actual snippets
+  TAG_NAMES.forEach(tag => {
+    output += headers.h2(util.capitalize(tag));
+    const taggedSnippets = snippetsInTag[tag];
+    taggedSnippets.forEach(snippet => {
+      output += headers.h3(snippet.title).trim();
+      output += `\n\n${snippet.text}${snippet.codeBlocks.slice(0,-1)}`;
+      if (snippet.notes && snippet.notes.length) {
+        output += headers.h4('Notes');
+        output += `\n${snippet.notes}`;
+      }
+      output += misc.collapsible('Examples', snippet.codeBlocks.slice(-1));
+      //output += detailsQuestion("View answer", question)
+      output += `\n<br>${misc.link(
+        "⬆ Back to top",
+        misc.anchor("Table of Contents")
+      )}\n\n`
+    })
+  })
+
+  // add static part for end
+  output += `\n${endPart}\n`
+
+  fs.writeFileSync("README.md", output)
+} catch (err) {
+  console.log(`${chalk.red("ERROR!")} During README generation: ${err}`)
+  process.exit(1)
+}
+
+console.log(`${chalk.green("SUCCESS!")} README file generated!`)
+console.timeEnd("Builder")

snippets/Mailto.md

@@ -24,6 +24,6 @@ ReactDOM.render(
 );
 ```
 
-<!-- tags: functional -->
+<!-- tags: visual,functional -->
 
 <!-- expertise: 0 -->

static-parts/README-end.md

@@ -0,0 +1,5 @@
+-----
+
+*This repository is a work in progress. If you want to contribute, please check the open issues to see where and how you can help out!*
+
+*This README is built using [markdown-builder](https://github.com/30-seconds/markdown-builder).*

static-parts/README-start.md

@@ -0,0 +1,16 @@
+![Logo](/logo.png)
+
+# 30 seconds of React
+
+> Curated collection of useful React snippets that you can understand in 30 seconds or less.
+
+> *This README is built using [markdown-builder](https://github.com/30-seconds/markdown-builder).*
+
+
+#### Related projects
+
+* [30 Seconds of Code](https://30secondsofcode.org)
+* [30 Seconds of CSS](https://30-seconds.github.io/30-seconds-of-css/)
+* [30 Seconds of Interviews](https://30secondsofinterviews.org/)
+
+## Table of Contents