Webpage in master 1 (#78)

* Move webpage to master * Refactored dangerouslySetInnerHTML * Support for unknown values * Refactored table.js * Refactor parse_readme.js
MicheleBertoli · Jan 14, 2018 · 3f6e2b9 · 3f6e2b9
1 parent 3ffe8c0
commit 3f6e2b9
Show file tree

Hide file tree

Showing 17 changed files with 8,523 additions and 0 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,17 @@
+language: node_js
+node_js:
+  - "8"
+cache: yarn
+install:
+  - cd webpage
+  - yarn install
+script:
+  - yarn build-data
+  - yarn build
+deploy:
+  provider: pages
+  skip_cleanup: true
+  github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
+  on:
+    branch: master
+  local_dir: build
diff --git a/webpage/.gitignore b/webpage/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/webpage/package.json b/webpage/package.json
@@ -0,0 +1,29 @@
+{
+  "private": true,
+  "name": "css-in-js",
+  "version": "1.0.0",
+  "description": "Comparison of css-in-js solutions",
+  "license": "MIT",
+  "homepage": "https://michelebertoli.github.io/css-in-js/",
+  "dependencies": {
+    "react": "^16.1.1",
+    "react-dom": "^16.1.1",
+    "react-helmet": "^5.2.0"
+  },
+  "devDependencies": {
+    "gh-pages": "^1.0.0",
+    "marked": "^0.3.6",
+    "react-scripts": "^1.0.17",
+    "react-snap": "^1.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build-data": "./scripts/parse_readme.js",
+    "build": "react-scripts build && react-snap",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "prettier": "prettier --write '{src/*,src/**/*,*,scripts/*}.{js,json,css}'",
+    "predeploy": "npm run build-data && npm run build",
+    "deploy": "gh-pages -d build"
+  }
+}
diff --git a/webpage/public/favicon.ico b/webpage/public/favicon.ico
diff --git a/webpage/public/index.html b/webpage/public/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/webpage/public/manifest.json b/webpage/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "css-in-js",
+  "name": "Comparison of css-in-js solutions",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/webpage/scripts/parse_readme.js b/webpage/scripts/parse_readme.js
@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+
+const marked = require("marked");
+const fs = require("fs");
+const text = fs.readFileSync("../README.md", "utf8");
+
+const tokens = marked.lexer(text, {
+  gfm: true,
+  tables: true
+});
+
+const table = tokens.filter(x => x.type == "table")[0];
+const { header, cells } = table;
+
+const linkPattern = /\s?\[([^\]]+)\]\(([^\)]+)\)\s?/gi;
+const parseLinks = linkText => {
+  let result = [],
+    match;
+  do {
+    match = linkPattern.exec(linkText);
+    if (match) {
+      result.push({ text: match[1], href: match[2] });
+    }
+  } while (match);
+  return result;
+};
+
+const parseSymbol = value => value === "✓";
+
+const defaultFallback = (options, field) => options[field] || options.default;
+
+const tdParser = {
+  Package: parseLinks,
+  Version: value => value,
+  default: parseSymbol
+};
+
+const rows = cells.map(x => {
+  return header.reduce((result, key, i) => {
+    const parser = defaultFallback(tdParser, key);
+    result[key] = parser(x[i]);
+    return result;
+  }, {});
+});
+
+const json = {
+  headers: header,
+  rows: rows
+};
+
+fs.writeFileSync("src/data.json", JSON.stringify(json, null, 2), "utf8");
diff --git a/webpage/src/App.js b/webpage/src/App.js
@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import Navbar from "./components/Navbar";
+import Table from "./components/Table";
+import Filter from "./components/Filter";
+import Seo from "./components/Seo";
+import { default as data } from "./data.json";
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...data,
+      filters: data.headers.slice(2).map(x => ({
+        name: x,
+        checked: false
+      }))
+    };
+    this.onFilterChange = this.onFilterChange.bind(this);
+  }
+
+  onFilterChange(index) {
+    this.setState({
+      ...this.state,
+      filters: [
+        ...this.state.filters.slice(0, index),
+        {
+          ...this.state.filters[index],
+          checked: !this.state.filters[index].checked
+        },
+        ...this.state.filters.slice(index + 1)
+      ]
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Seo
+          title="CSS-in-JS"
+          description="Comparison of CSS-in-JS solutions"
+          path="/"
+          twitter="@michelebertoli"
+        />
+        <Navbar />
+        <div className="container">
+          <div className="row">
+            <Filter
+              filters={this.state.filters}
+              onChange={this.onFilterChange}
+            />
+          </div>
+          <div className="row">
+            <Table
+              headers={this.state.headers}
+              rows={this.state.rows}
+              filters={this.state.filters}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/webpage/src/App.test.js b/webpage/src/App.test.js
@@ -0,0 +1,8 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(<App />, div);
+});
diff --git a/webpage/src/components/Filter.js b/webpage/src/components/Filter.js
@@ -0,0 +1,25 @@
+import React from "react";
+
+const Filter = props => {
+  return (
+    <div className="form-row align-items-center" style={{ padding: "12px" }}>
+      {props.filters.map((x, index) => {
+        return (
+          <div className="form-check form-check-inline" key={x.name}>
+            <label className="form-check-label">
+              <input
+                className="form-check-input"
+                type="checkbox"
+                checked={x.checked}
+                onChange={props.onChange.bind(null, index)}
+              />
+              {` ${x.name}`}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Filter;
diff --git a/webpage/src/components/Navbar.js b/webpage/src/components/Navbar.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+const Navbar = () => {
+  return (
+    <nav className="navbar navbar-dark bg-primary">
+      <a
+        className="navbar-brand"
+        href="https://michelebertoli.github.io/css-in-js/"
+      >
+        CSS in JS
+      </a>
+      <div>
+        <ul className="navbar-nav mr-auto">
+          <li className="nav-item">
+            <a
+              className="nav-link"
+              href="https://github.com/MicheleBertoli/css-in-js"
+            >
+              Github
+            </a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/webpage/src/components/Seo.js b/webpage/src/components/Seo.js
@@ -0,0 +1,66 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Helmet from "react-helmet";
+
+const absoluteUrl = path => `https://michelebertoli.github.io/css-in-js${path}`;
+const seoImageURL = path => `https://michelebertoli.github.io${path}`;
+
+const getMetaTags = ({ title, description, url, twitter, image }) => {
+  const metaTags = [
+    { itemprop: "name", content: title },
+    { itemprop: "description", content: description },
+    { name: "description", content: description },
+    { name: "twitter:title", content: title },
+    { name: "twitter:description", content: description },
+    { name: "twitter:creator", content: twitter },
+    { name: "og:title", content: title },
+    { name: "og:type", content: "website" },
+    { name: "og:url", content: url },
+    { name: "og:description", content: description },
+    { name: "og:site_name", content: "CSS-in-JS" },
+    { name: "og:locale", content: "en_EN" }
+  ];
+
+  if (image) {
+    metaTags.push({ itemprop: "image", content: seoImageURL(image) });
+    metaTags.push({ name: "twitter:image:src", content: seoImageURL(image) });
+    metaTags.push({ name: "og:image", content: seoImageURL(image) });
+    metaTags.push({ name: "twitter:card", content: "summary_large_image" });
+  } else {
+    metaTags.push({ name: "twitter:card", content: "summary" });
+  }
+
+  return metaTags;
+};
+
+const getHtmlAttributes = () => {
+  let result = {
+    lang: "en"
+  };
+  return result;
+};
+
+const Seo = ({ title, description, path, twitter, image }) => (
+  <Helmet
+    htmlAttributes={getHtmlAttributes()}
+    title={title}
+    link={[{ rel: "canonical", href: absoluteUrl(path) }]}
+    meta={getMetaTags({
+      title,
+      description,
+      url: absoluteUrl(path),
+      twitter,
+      image
+    })}
+  />
+);
+
+Seo.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  path: PropTypes.string,
+  twitter: PropTypes.string,
+  image: PropTypes.string
+};
+
+export default Seo;