Landing page (#36)

* Landing page

Adds the landing page and a preview.

Gulpfile.js

@@ -41,6 +41,11 @@ const projects = [
         copy: {
             "src/index.html": { to: [""], base: "src/" },
         },
+    }, {
+        id: "landing",
+        cwd: "packages/landing/",
+        dependencies: ["core"],
+        sass: true,
     },
 ];
 

circle.yml

@@ -1,8 +1,9 @@
 general:
   artifacts:
-    - "packages/core/coverage"
-    - "packages/datetime/coverage"
-    - "packages/docs"
+    - packages/core/coverage
+    - packages/datetime/coverage
+    - packages/docs
+    - packages/landing
 machine:
   node:
     version: 6.1.0
@@ -11,6 +12,7 @@ dependencies:
     - packages/core/node_modules
     - packages/datetime/node_modules
     - packages/docs/node_modules
+    - packages/landing/node_modules
   # non-zero exit codes in dependencies will fail the build early
   # so these following commands will block the build and prevent tests
   post:

packages/landing/README.md

@@ -0,0 +1,8 @@
+# Blueprint landing page
+
+Landing page for Blueprint Open Source site.
+
+## Quickstart
+
+1. `npm install`
+1. `npm start`

packages/landing/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "blueprint-landing",
+  "version": "0.0.0",
+  "description": "Blueprint landing page",
+  "author": "Blueprint Team <pd-blueprint-team@palantir.com>",
+  "public": false,
+  "license": "Apache-2.0",
+  "keywords": [
+    "blueprint",
+    "landing",
+    "open source"
+  ],
+  "scripts": {
+    "build:copy": "mkdir -p dist/resources && cp ./src/index.html dist/. && cp -r ./src/resources/img dist/resources/.",
+    "build:webpack": "webpack --config webpack.config.js",
+    "build": "npm-run-all clean build:copy build:webpack",
+
+    "check:typescript": "$(cd ..; npm bin)/tslint src/**/*.tsx",
+    "check:sass": "$(cd ..; npm bin)/stylelint src/**/*.scss",
+    "check": "npm-run-all -p check:typescript check:sass",
+
+    "clean": "rm -rf dist",
+
+    "deploy:copy": "cp -r dist/* ../../docs/.",
+    "deploy": "npm-run-all build deploy:copy",
+
+    "optimize:img-svgs": "svgo --disable=collapseGroups --pretty -f src/resources/img",
+    "optimize:inline-svgs": "svgo --disable=collapseGroups --pretty -f src/resources/inline && node scripts/dedupe-svg-ids.js",
+
+    "serve": "http-server dist",
+    "start": "npm-run-all -s clean build -p serve watch",
+    "watch": "onchange 'src/**' -- npm-run-all build:copy build:webpack"
+  },
+  "devDependencies": {
+    "@blueprint/core": "*",
+    "autoprefixer": "^6.5.1",
+    "classnames": "2.2.5",
+    "css-loader": "0.23.1",
+    "extract-text-webpack-plugin": "1.0.1",
+    "file-loader": "^0.9.0",
+    "http-server": "^0.9.0",
+    "imports-loader": "0.6.5",
+    "json-loader": "0.5.4",
+    "node-sass": "3.8.0",
+    "npm-run-all": "2.3.0",
+    "onchange": "^3.0.2",
+    "postcss-loader": "^1.1.0",
+    "raw-loader": "0.5.1",
+    "react": "15.2.1",
+    "react-addons-css-transition-group": "15.2.1",
+    "react-dom": "15.2.1",
+    "sass-loader": "4.0.0",
+    "style-loader": "0.13.1",
+    "svgo": "0.7.1",
+    "ts-loader": "0.8.2",
+    "typescript": "2.0.6",
+    "webpack": "1.13.1"
+  }
+}

packages/landing/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+};

packages/landing/scripts/dedupe-svg-ids.js

@@ -0,0 +1,16 @@
+var fs = require("fs");
+var path = require("path");
+
+function rewriteIds(contents, id){
+  return contents
+      .replace(/\bhref="#/g, `href="#${id}-`)
+      .replace(/url\(#/g, `url(#${id}-`)
+      .replace(/\bid="/g, `id="${id}-`);
+}
+
+var svgs = require("../src/svgs.json");
+svgs.forEach(function(svg) {
+    var filePath = path.join(__dirname, "..", "src/resources/inline", svg + ".svg");
+    console.log("Rewriting IDs:", filePath);
+    fs.writeFileSync(filePath, rewriteIds(fs.readFileSync(filePath, "UTF8"), svg));
+});

packages/landing/src/_overrides.scss

@@ -0,0 +1,31 @@
+@import "../node_modules/@blueprint/core/dist/blueprint.css";
+@import "../node_modules/@blueprint/core/dist/variables";
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.pt-button {
+  text-transform: none;
+  font-family: -apple-system,
+               BlinkMacSystemFont,
+               "Segoe UI",
+               "Roboto",
+               "Helvetica",
+               "Arial",
+               sans-serif,
+               "Apple Color Emoji",
+               "Segoe UI Emoji",
+               "Segoe UI Symbol";
+}
+
+.pt-dark {
+  pre {
+    box-shadow: none;
+    background-color: transparent;//rgba($dark-gray2, 0.8);
+    padding: 0;
+  }
+}

packages/landing/src/_svgs.scss

@@ -0,0 +1,126 @@
+$initial-delay: 2s;
+
+.pt-wireframes {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.pt-wireframe {
+  position: absolute;
+
+  svg g {
+    path,
+    line,
+    circle,
+    use {
+      animation: pt-sketch-wireframe 7s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
+      stroke-dasharray: 1000;
+      stroke-dashoffset: 1000;
+      stroke-linecap: butt;
+    }
+  }
+}
+
+@keyframes pt-sketch-wireframe {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@mixin pt-wireframe-mixin($delay) {
+  svg g {
+    path,
+    line,
+    circle,
+    use {
+      animation-delay: $initial-delay + $delay;
+    }
+  }
+}
+
+.pt-logo-wireframe-alert {
+  @include pt-wireframe-mixin(1s);
+  top: 186px;
+  right: 280px;
+}
+
+.pt-logo-wireframe-buttons {
+  @include pt-wireframe-mixin(0s);
+  top: 32px;
+  right: 252px;
+}
+
+.pt-logo-wireframe-calendar {
+  @include pt-wireframe-mixin(3s);
+  top: 389px;
+  right: 238px;
+}
+
+.pt-logo-wireframe-checkboxes {
+  @include pt-wireframe-mixin(5s);
+  top: 434px;
+  left: 300px;
+}
+
+.pt-logo-wireframe-file-upload {
+  @include pt-wireframe-mixin(1s);
+  top: 550px;
+  left: 3px;
+}
+
+.pt-logo-wireframe-input-groups {
+  @include pt-wireframe-mixin(1s);
+  top: 34px;
+  left: -197px;
+}
+
+.pt-logo-wireframe-inputs {
+  @include pt-wireframe-mixin(1s);
+  top: 34px;
+  left: 130px;
+}
+
+.pt-logo-wireframe-labels {
+  @include pt-wireframe-mixin(1s);
+  top: 150px;
+  left: 500px;
+}
+
+.pt-logo-wireframe-radios {
+  @include pt-wireframe-mixin(5s);
+  top: 284px;
+  left: 300px;
+}
+
+.pt-logo-wireframe-select-menus {
+  @include pt-wireframe-mixin(1s);
+  top: 30px;
+  left: 500px;
+}
+
+.pt-logo-wireframe-sliders {
+  @include pt-wireframe-mixin(1s);
+  top: 300px;
+  left: 500px;
+}
+
+.pt-logo-wireframe-switches {
+  @include pt-wireframe-mixin(5s);
+  top: 354px;
+  left: 300px;
+}
+
+.pt-logo-wireframe-time-selections {
+  @include pt-wireframe-mixin(1s);
+  top: 450px;
+  left: 500px;
+}
+
+.pt-logo-wireframe-toggles {
+  @include pt-wireframe-mixin(3s);
+  top: 250px;
+  left: -201px;
+}