⓵ commit

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+charset = utf-8
+max_line_length = 80
+indent_brace_style = 1TBS
+spaces_around_operators = true
+quote_type = auto

.gitignore

@@ -0,0 +1,43 @@
+# Logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Sass cache folder
+.sass-cache
+
+# Users Environment Variables
+.lock-wscript
+.idea/
+*~
+\#*#
+.#*
+*.keystore
+*.sw*
+.DS_Store
+._*
+Thumbs.db
+.cache
+*.sublime-project
+*.sublime-workspace
+*swp
+*swo
+*swn
+build
+dist
+temp
+node_modules
+bower_components
+.module-cache
+
+keys.md
+.env
+
+.publish
+fermat-point-proof.svg

README.md

@@ -0,0 +1,8 @@
+# Fermat Point Calculator
+
+A Fermat Point calculator built with ReactJS and SVG
+
+Based on Brent Jackson's: Building SVG Icons with React.
+
+http://jxnblk.com/react-icons
+

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "fermat-point",
+  "title": "Fermat Point",
+  "version": "1.0.0",
+  "description": "A fermat point calculator built using SVG and ReactJS",
+  "main": "index.html",
+  "scripts": {
+    "build": "node build",
+    "jsx": "jsx -x jsx src .",
+    "watch:jsx": "jsx -w -x jsx src .",
+    "webpack": "webpack -p --progress --colors",
+    "dev": "webpack-dev-server --progress --colors",
+    "start": "npm run dev"
+  },
+  "contributors": [
+    "Varun Vachhar",
+    "Brent Jackson"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "svg",
+    "fermat-point",
+    "fermat"
+  ],
+  "devDependencies": {
+    "basscss": "^7.0.0-beta.1",
+    "basscss-base-forms": "^2.0.0-beta.2",
+    "basscss-color-forms": "^2.2.1",
+    "basscss-color-input-range": "^1.0.0-beta.0",
+    "basscss-highlight": "^0.1.0",
+    "basscss-input-range": "^2.0.0-beta.0",
+    "colors.css": "^2.3.0",
+    "cssnext": "^1.5.2",
+    "htmltidy": "0.0.6",
+    "js-beautify": "^1.5.6",
+    "json-loader": "^0.5.2",
+    "jsx-loader": "^0.13.2",
+    "lodash": "^3.9.3",
+    "marked": "^0.3.3",
+    "node-libs-browser": "^0.5.2",
+    "ramda": "^0.14.0",
+    "react": "^0.13.3",
+    "react-to-jsx": "^1.3.1",
+    "react-tools": "^0.13.3",
+    "static-site-generator-webpack-plugin": "^1.0.0",
+    "webpack": "^1.9.10",
+    "webpack-dev-server": "^1.9.0"
+  }
+}

src/content.jsx

@@ -0,0 +1,26 @@
+
+var React = require('react');
+var FermatPoint = require('./fermat-point.jsx');
+
+var Content = React.createClass({
+
+  render: function() {
+    return (
+      <div className="prose">
+
+        <blockquote className="italic"
+          cite="https://en.wikipedia.org/wiki/Tetrahedron">
+          <p>The Fermat point of a triangle with largest angle at most 120° is simply its first isogonic center or X(13), which is constructed as follows: Construct an equilateral triangle on each of two arbitrarily chosen sides of the given triangle.</p>
+          <footer>&mdash; <a href="https://en.wikipedia.org/wiki/Tetrahedron"> Fermat point (wikipedia)</a></footer>
+        </blockquote>
+
+        <div className="py4">
+          <FermatPoint />
+        </div>
+      </div>
+    );
+  }
+
+});
+
+module.exports = Content;

src/data.js

@@ -0,0 +1,51 @@
+
+var fs = require('fs');
+var path = require('path');
+var pkg = require('../package.json');
+var cssnext = require('cssnext');
+
+
+module.exports = {
+  name: pkg.name,
+  title: pkg.title,
+  description: pkg.description,
+  keywords: pkg.keywords,
+  created: '06/16/2015',
+  modified: new Date().toLocaleDateString(),
+  css: cssnext([
+    '@import "basscss";',
+    '@import "basscss-input-range";',
+    '@import "basscss-color-input-range";',
+    '@import "basscss-base-forms";',
+    '@import "basscss-color-forms";',
+    '@import "basscss-highlight";',
+    '@import "src/style.css";',
+    '@import "./node_modules/colors.css/css/colors.css";'
+  ].join(''), {
+    compress: true,
+    features: {
+      rem: false,
+      colorRgba: false,
+      customProperties: {
+        variables: {
+          'font-family': '"Avenir Next", "Helvetica Neue", Helvetica, sans-serif',
+          'heading-font-weight': '600',
+          'bold-font-weight': '600',
+          'button-font-weight': '600',
+          'button-font-size': 'var(--h6)',
+          'h1': '2.5rem',
+          'h2': '1.75rem',
+          'h3': '1.375rem',
+          'h4': '1.25rem',
+          'h5': '1rem',
+          'h6': '.875rem',
+          'pre-font-size': 'var(--h5)',
+          'container-width': '48em',
+          'black': '#134',
+          'pre-background-color': 'var(--darken-1)',
+        }
+      }
+    }
+  })
+};
+

src/entry.js

@@ -0,0 +1,33 @@
+
+var React = require('react');
+var Root = require('./root.jsx');
+
+if (typeof document !== 'undefined') {
+
+  // React
+  var initialProps = JSON.parse(document.getElementById('initial-props').innerHTML);
+  React.render(React.createElement(Root, initialProps), document);
+
+  // GA
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-22315045-15', 'auto');ga('send', 'pageview');
+
+  // Source Code Pro
+  WebFontConfig = {
+    google: { families: [ 'Source+Code+Pro::latin' ] }
+  };
+  (function() {
+    var wf = document.createElement('script');
+    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
+      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
+    wf.type = 'text/javascript';
+    wf.async = 'true';
+    var s = document.getElementsByTagName('script')[0];
+    s.parentNode.insertBefore(wf, s);
+  })();
+
+}
+
+module.exports = function render(locals, callback) {
+  var html = React.renderToString(React.createElement(Root, locals));
+  callback(null, '<!DOCTYPE html>' + html);
+};

src/fermat-point.jsx

@@ -0,0 +1,93 @@
+
+var React = require('react');
+var R = require('ramda');
+var Line = require('./line.jsx');
+var clrs = require('colors.css');
+
+
+var FermatPoint = React.createClass({
+
+  getDefaultProps: function() {
+    return {
+      size: 512,
+      vertices: [{
+        r: 64,
+        a: 90
+      }, {
+        r: 64,
+        a: 210
+      }, {
+        r: 64,
+        a: 330
+      }]
+    };
+  },
+
+  render: function() {
+
+    var size = this.props.size;
+    var viewBox = [0, 0, size, size].join(' ');
+    var rotation = this.props.rotation;
+    var v = this.props.vertices;
+    var c = size / 2;
+
+    // The vertices are generated through
+    // radial coordinates (r and θ)
+    var pts = [
+      [rx(v[0].r, v[0].a, c), ry(v[0].r, v[0].a, c)],
+      [rx(v[1].r, v[1].a, c), ry(v[1].r, v[1].a, c)],
+      [rx(v[2].r, v[2].a, c), ry(v[2].r, v[2].a, c)]
+    ];
+
+    var sides = [
+      [pts[0], pts[1]],
+      [pts[1], pts[2]],
+      [pts[2], pts[0]]
+    ];
+
+    // Utility method to generate line segments
+    var getSegments = R.mapIndexed(function(vertices, idx) {
+      return (
+        <Line key={ idx }
+          pts={ vertices }
+          styles={ { stroke: clrs.navy } } />
+      );
+    });
+
+    // The triangle
+    var segments = getSegments(R.slice(0, 3, sides));
+
+    return (
+      <svg xmlns="http://www.w3.org/svg/2000"
+        viewBox={ viewBox }
+        width={ size }
+        height={ size }>
+
+        <g className="fermat-point">
+          { segments }
+        </g>
+
+      </svg>
+    );
+
+  }
+
+});
+
+
+/**
+ * Utilities
+ */
+function rad(a) {
+  return Math.PI * a / 180;
+};
+
+function rx(r, a, c) {
+  return c - r * Math.cos(rad(a));
+};
+
+function ry(r, a, c) {
+  return c - r * Math.sin(rad(a));
+};
+
+module.exports = FermatPoint;

src/footer.jsx

@@ -0,0 +1,18 @@
+
+var React = require('react');
+
+var Footer = React.createClass({
+
+  render: function() {
+    return (
+      <footer className="mt3 py1 border-top border--gray">
+        <a href="http://jxnblk.com/react-icons" className="gray">
+          Based on Jxnblk&rsquo;s React Icons
+        </a>
+      </footer>
+    );
+  }
+
+});
+
+module.exports = Footer;

src/head.jsx

@@ -0,0 +1,21 @@
+
+var React = require('react');
+
+var Head = React.createClass({
+
+  render: function() {
+    return (
+      <head>
+        <meta charSet="utf-8" />
+        <title>{this.props.title}</title>
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta name="description" content={this.props.description} />
+        <meta name="keywords" content={this.props.keywords.map(function(keyword) { return keyword }).join(', ')} />
+        <style dangerouslySetInnerHTML={{ __html: this.props.css }} />
+      </head>
+    );
+  }
+
+});
+
+module.exports = Head;