(docs) Migrating to Eleventy (#505)

* Changed folder structure, did a bunch of cleanup and introduce a doc helper to compose markdown in markdown.

* Added basic rome styling.

* Added some more styling.

* Added hero.

* Added more padding at bottom

* Added permalinks.

* Made border radius consistent.

* Added basic mobile view.

* npm instead of yarn, which we already use in @romejs-web/frontend

* Removed yarn-error.log from gitignore due to npm

* Migrated to sass

* Cleanup from migrating to sass

* Rewrote parts in sass

* Formatted sass

* Do not bundle unused resources.

* Split sass components in separate files.

* Added config for HTML meta tags.

website/.eleventy.js

@@ -1,43 +1,52 @@
 const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
-const CleanCSS = require("clean-css");
 const markdownIt = require("markdown-it");
-const markdownItAnchor = require('markdown-it-anchor');
-const Terser = require("terser");
+const markdownItAnchor = require("markdown-it-anchor");
+const fs = require("fs");
 
-module.exports = function(eleventyConfig) {
-
-  eleventyConfig.addFilter("cssmin", function(code) {
-    return new CleanCSS({}).minify(code).styles;
-  });
+const Options = {
+  dirInput: "src",
+  staticPath: "static",
+  docsPath: "docs",
+  dirOutput: "build",
+};
 
+module.exports = function (eleventyConfig) {
+  // Aything listed in .gitignore will be ignored by the watch process,
+  // workaround to let eleventry rebuild when the css stylesheet gets rebuild.
+  eleventyConfig.setUseGitIgnore(false);
 
-  eleventyConfig.addFilter("jsmin", function(code) {
-    let minified = Terser.minify(code);
-    if( minified.error ) {
-        console.log("Terser error: ", minified.error);
-        return code;
-    }
-
-    return minified.code;
-  });
+  eleventyConfig.addPassthroughCopy(Options.staticPath);
 
   eleventyConfig.addPlugin(syntaxHighlight);
 
-  let options = {
+  const md = markdownIt({
     html: true,
     linkify: true,
     typographer: true,
-  };
+  }).use(markdownItAnchor, {
+    permalink: true,
+    permalinkSymbol: '#',
+  });
 
-  eleventyConfig.setLibrary("md", markdownIt(options).use(markdownItAnchor, {}));
+  eleventyConfig.setLibrary("md", md);
+  eleventyConfig.addShortcode("doc", function (file) {
+    const relativeFilePath = `./${Options.dirInput}/${Options.docsPath}/${file}`;
+    const data = fs.readFileSync(relativeFilePath, function (err, contents) {
+      if (err) {
+        throw new Error(err);
+      }
+      return contents;
+    });
+    return md.render(data.toString());
+  });
 
   return {
     dir: {
-      input: "src",
-      output: "build",
-      includes: "includes"
-    }
-
+      input: Options.dirInput,
+      output: Options.dirOutput,
+    },
+    passthroughFileCopy: true,
+    templateFormats: ["njk", "md", "css", "html", "yml"],
+    htmlTemplateEngine: "njk",
   };
-
-};
+};

website/.eleventyignore

@@ -0,0 +1,2 @@
+node_modules
+src/docs

website/.gitignore

@@ -1,3 +1,6 @@
 node_modules
 build
-yarn-error.log
+
+# Auto generated
+static/styles.css
+static/styles.css.map