Static site generation for GitHub pages

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["transform-react-jsx"]
+}

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules

README.md

@@ -2,19 +2,27 @@
 
 > Useful posts, articles, videos and podcasts related to development
 
+## How to use
 
-### Latest links
+Browse the directories for a summary and link to each article.
 
-- [Optimising React Apps in Production](https://github.com/times/learning/blob/master/react/optimising-react-apps-in.md) _submitted by [@elliotdavies](https://github.com/elliotdavies)_
-- [CS50 Introduction to Computer Science](https://github.com/times/learning/blob/master/general/cs50.md) _submitted by [@mattietk](https://github.com/MattieTK)_
-- [What does Lambda support?](https://github.com/times/learning/blob/master/aws/what-does-lambda-support.md) _submitted by [@chrishutchinson](https://github.com/chrishutchinson)_
+## Contributing
 
+Just create a PR adding the markdown file with the appropriate information. Fill
+in a copy of the `template.md` file and place it in the appropriate directory
+(create a new directory if necessary). See the `CONTRIBUTING.md` file for
+contribution guidelines.
 
-### How to use
+## To build the `index.html` page
 
-Browse the directories for a summary and link to each article.
+1. Install the dependencies
 
+```
+$ yarn
+```
 
-### Contributing
+2. Run the `index.js` Node.js script using the following command:
 
-Just create a PR adding the markdown file with the appropriate information. Fill in a copy of the `template.md` file and place it in the appropriate directory (create a new directory if necessary). See the `CONTRIBUTING.md` file for contribution guidelines.
+```
+$ yarn build
+```

app.js

@@ -0,0 +1,84 @@
+const React = require("react");
+const ReactMarkdown = require("react-markdown");
+
+const capitalise = string => {
+  if (string === "aws") return string.toUpperCase();
+
+  return `${string.charAt(0).toUpperCase()}${string.slice(1)}`;
+};
+
+const Sidebar = ({ files, latest }) => (
+  <aside className="sticky">
+    <a href="#">
+      <img src="./dual-masthead.svg" />
+    </a>
+    <ul className="categories">
+      {Object.keys(files).map((folder, index) => {
+        const documents = files[folder];
+        if (documents.length === 0) return null;
+
+        return (
+          <li key={index}>
+            <a href={`#${folder}`}>{folder}</a>
+          </li>
+        );
+      })}
+    </ul>
+
+    <div className="latestWrapper">
+      <h2>Latest additions</h2>
+      <ul className="latest">
+        {latest.map((f, index) => (
+          <li key={index}>
+            <a href={`#${f.name}`}>{f.headline}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  </aside>
+);
+
+const Content = ({ files }) => (
+  <main>
+    <header>
+      <a
+        className="github-button"
+        href="https://github.com/times/learning"
+        data-icon="octicon-star"
+        data-size="large"
+        data-show-count="true"
+        aria-label="Star times/learning on GitHub"
+      >
+        Star
+      </a>
+
+      <h1>🎓 Learning</h1>
+      <p>Useful posts, articles, videos and podcasts related to development</p>
+    </header>
+
+    {Object.keys(files).map((folder, index) => {
+      const documents = files[folder];
+      if (documents.length === 0) return null;
+
+      return (
+        <section key={index} id={folder}>
+          <h2>{capitalise(folder)}</h2>
+          {documents.map(({ name, content }, index) => (
+            <div className="markdown" key={index} id={name}>
+              <ReactMarkdown source={content} />
+            </div>
+          ))}
+        </section>
+      );
+    })}
+  </main>
+);
+
+const App = ({ files, latest }) => (
+  <div className="wrapper">
+    <Sidebar files={files} latest={latest} />
+    <Content files={files} />
+  </div>
+);
+
+module.exports = App;

index.js

@@ -0,0 +1,76 @@
+const fs = require("fs");
+const React = require("react");
+const ReactDOMServer = require("react-dom/server");
+
+const App = require("./app");
+
+const getDirectories = (path, ignore = []) =>
+  fs
+    .readdirSync(path)
+    .filter(a => fs.statSync(`${path}${a}`).isDirectory())
+    .filter(a => !ignore.includes(a));
+
+const getFiles = (path, extension, ignore = []) =>
+  fs
+    .readdirSync(path)
+    .filter(a => fs.statSync(`${path}${a}`).isFile())
+    .filter(a => a.endsWith(extension))
+    .filter(a => !ignore.includes(a))
+    .map(a => {
+      const content = fs.readFileSync(`${path}${a}`).toString();
+      return {
+        name: a,
+        content,
+        headline: content.match(/# \[(.*?)\]/)[1],
+        dateAdded: fs.statSync(`${path}${a}`).birthtime
+      };
+    });
+
+const directories = getDirectories("./", [".git", "node_modules"]);
+
+const markdownFiles = directories.reduce(
+  (acc, s) =>
+    Object.assign({}, acc, {
+      [s]: getFiles(`./${s}/`, ".md")
+    }),
+  {}
+);
+
+const latestFiles = directories
+  .reduce((acc, s) => [...acc, ...getFiles(`./${s}/`, ".md")], [])
+  .sort((a, b) => {
+    const diff = a.dateAdded - b.dateAdded;
+    if (diff === 0) return diff;
+    return diff > 0 ? -1 : 1;
+  })
+  .splice(0, 3);
+
+const html = ReactDOMServer.renderToStaticMarkup(
+  <App files={markdownFiles} latest={latestFiles} />
+);
+
+fs.writeFileSync(
+  "./index.html",
+  `<html>
+    <head>
+      <title>Learning!</title>
+
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+
+      <link rel="stylesheet" href="./style.css" />
+      <link rel="stylesheet" href="https://fonts.timesdev.tools/fonts/TimesModern-Bold.css" />
+      <link rel="stylesheet" href="https://fonts.timesdev.tools/fonts/TimesModern-Regular.css" />
+    </head>
+    <body>
+      ${html}
+
+      <script async defer src="https://buttons.github.io/buttons.js"></script>
+      <script src="node_modules/stickyfilljs/dist/stickyfill.min.js"></script>
+      <script type="text/javascript">
+        Stickyfill.add(document.querySelectorAll('.sticky'));
+      </script>
+    </body>
+  </html>`
+);
+
+process.exit();

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "learning",
+  "version": "1.0.0",
+  "description":
+    "Useful posts, articles, videos and podcasts related to development",
+  "main": "index.js",
+  "repository": "git@github.com:times/learning.git",
+  "author": "Chris Hutchinson <chris.hutchinson@thetimes.co.uk>",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "build": "./node_modules/babel-cli/bin/babel-node.js index.js"
+  },
+  "dependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
+    "react-markdown": "^3.0.1",
+    "stickyfilljs": "^2.0.3"
+  }
+}