AllType card line splitting and scaling

example/index.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8" />
 
   <title>This is an example</title>
-  
+
   <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700' rel='stylesheet' type='text/css'>
   <script>
   window.repoFiles = {
@@ -16,6 +16,15 @@
     _faqs: {
       "what-is-netlify-cms.md": {
         content: "---\ntitle: What is netlify CMS?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Netlify CMS is Content Manager for Static Site Generators\n\nStatic sites are many times faster, cheaper and safer and traditional dynamic websites.\n\nModern static site generators like Jekyll, Middleman, Roots or Hugo are powerful publishing and development systems, but when we build sites for non-technical users, we need a layer on top of them.\n\nNetlify CMS is there to let your marketing team push new content to your public site, or to let technical writers work on your documentation.\n\nNetlify CMS integrates with Git and turns normal content editors into git comitters.\n\n"
+      },
+      "what-is-jam-stack.md": {
+        content: "---\ntitle: What is the “JAM Stack”?\ndate: 2015-11-02T00:00.000Z\n---\n\n# The JAM stack is a new way of building websites and apps that are fast, secure and simple to work with.\n\nJAM stands for JavaScript, APIs and Markup. It's the fastest growing new stack for building websites and apps: no more servers, host all your front-end on a CDN and use APIs for any moving parts.\n\n"
+      },
+      "sll-support.md": {
+        content: "---\ntitle: What about Cache Invalidation?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Netlify handles cache invalidation automatically\n\nWhen your changes go live, they go live.\n\nNo waiting for cache purges, no cumbersome varnish setup, no API calls to clean your distribution. Netlify handles cache purges within an average of 250ms from your deploy!\n\n"
+      },
+      "continuous-deployment.md": {
+        content: "---\ntitle: Does Netlify support Continuous Deployment?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Yes, Netlify let you Integrate your site or web-app to GitHub, GitLab or BitBucket and run your build tool on our servers.\n\nAutomatically rebuild your site every time your content changes: trigger builds by pushing to git or via webhooks.\n\n"
       }
     },
     _data: {
@@ -30,7 +39,7 @@
 
   var ONE_DAY = 60 * 60 * 24 * 1000;
 
-  for (var i= 0; i<10; i++) {
+  for (var i=1; i<=10; i++) {
     var date = new Date();
 
     date.setTime(date.getTime() + ONE_DAY);
@@ -38,7 +47,19 @@
     var slug = dateString + "-post-number-" + i + ".md";
 
     window.repoFiles._posts[slug] = {
-      content: "---\ntitle: \"This is post # " + (10-i) + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# The post is number " + i + "\n\nAnd this is yet another identical post body"
+      content: "---\ntitle: \"This is post #" + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# The post is number " + i + "\n\nAnd this is yet another identical post body"
+    }
+  }
+
+  for (var i=1; i<=5; i++) {
+    var date = new Date();
+
+    date.setTime(date.getTime() + ONE_DAY);
+    var dateString = '' + date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
+    var slug = dateString + "-faq-number-" + i + ".md";
+
+    window.repoFiles._faqs[slug] = {
+      content: "---\ntitle: \"This a FAQ item #" + i + "\"\ndate: " + dateString + "T00:99:99.999Z\n---\n\n# Loren ipsum dolor sit amet"
     }
   }
   </script>

src/components/Cards/AlltypeCard.js

@@ -1,14 +1,82 @@
 import React, { PropTypes } from 'react';
 import { Card } from '../UI';
+import ScaledLine from './ScaledLine';
 
-export default function AlltypeCard({ onClick, text }) {
-  return (
-    <Card onClick={onClick}>
-      <p>{text}</p>
-    </Card>
-  );
+
+export default class AlltypeCard extends React.Component {
+
+  // Based on the Slabtype Algorithm by Erik Loyer
+  // http://erikloyer.com/index.php/blog/the_slabtype_algorithm_part_1_background/
+  renderInscription(inscription) {
+
+    var idealCharPerLine = 20;
+
+    // segment the text into lines
+    var words = inscription.split(' ');
+    var preText, postText, finalText;
+    var preDiff, postDiff;
+    var wordIndex = 0;
+    var lineText = [];
+
+    // while we still have words left, build the next line
+    while (wordIndex < words.length) {
+      postText = '';
+
+      // build two strings (preText and postText) word by word, with one
+      // string always one word behind the other, until
+      // the length of one string is less than the ideal number of characters
+      // per line, while the length of the other is greater than that ideal
+      while (postText.length < idealCharPerLine) {
+        preText = postText;
+        postText += words[wordIndex] + ' ';
+        wordIndex++;
+        if (wordIndex >= words.length) {
+          break;
+        }
+      }
+
+      // calculate the character difference between the two strings and the
+      // ideal number of characters per line
+      preDiff = idealCharPerLine - preText.length;
+      postDiff = postText.length - idealCharPerLine;
+
+      // if the smaller string is closer to the length of the ideal than
+      // the longer string, and doesn’t contain just a single space, then
+      // use that one for the line
+      if ((preDiff < postDiff) && (preText.length > 2)) {
+        finalText = preText;
+        wordIndex--;
+
+        // otherwise, use the longer string for the line
+      } else {
+        finalText = postText;
+      }
+
+      lineText.push(finalText.substr(0, finalText.length - 1));
+    }
+    return lineText.map(text => (
+      <ScaledLine toWidth={216}>
+        {text}
+      </ScaledLine>
+    ));
+  }
+
+  render() {
+    const { onClick, text } = this.props;
+    return (
+      <Card onClick={onClick}>
+        <div>{this.renderInscription(text)}</div>
+      </Card>
+    );
+  }
 }
 
+
 AlltypeCard.propTypes = {
+  onClick: PropTypes.func,
   text: PropTypes.string.isRequired
 };
+
+AlltypeCard.defaultProps = {
+  onClick: function() {},
+};

src/components/Cards/ScaledLine.js

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+
+export default class ScaledLine extends React.Component {
+  constructor(props) {
+    super(props);
+    this._content = null;
+    this.state = {
+      contentWidth: 0,
+      ratio: 1,
+    };
+  }
+
+  componentDidMount() {
+    const actualContent = this._content.children[0];
+
+    this.setState({
+      contentWidth: actualContent.offsetWidth,
+      ratio: this.props.toWidth / actualContent.offsetWidth,
+    });
+  }
+
+  render() {
+    const { ratio } = this.state;
+    const { children } = this.props;
+
+    var baseFontSize = 15;
+
+    var styles = {
+      whiteSpace: 'nowrap',
+      textAlign: 'center'
+    };
+    styles.fontSize = Math.round((baseFontSize * ratio)*1000)/1000
+
+    return (
+      <div ref={(c) => this._content = c} style={styles}>
+        <span>{children}</span>
+      </div>
+    )
+  }
+};
+
+ScaledLine.propTypes = {
+  toWidth: PropTypes.number.isRequired,
+  children: PropTypes.node.isRequired
+};