Added project page:

* Improve project page (based on fittext.js) * Added LICENSE file * Added license header to src * Added prism to highlight example on project page * Improve code
gianu · Dec 31, 2014 · a318975 · a318975
1 parent 0a24ea4
commit a318975
Show file tree

Hide file tree

Showing 15 changed files with 2,513 additions and 3,496 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules/
-public /
+public/
+.DS_Store
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright © 2014 Sergio Rafael Gianazza
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/client/img/arrow.png b/client/img/arrow.png
diff --git a/client/index.html b/client/index.html
@@ -1,3 +1,37 @@
 <!DOCTYPE html>
-<title>ReactFitText Test Page</title>
-<script type="text/javascript" src="{%=o.htmlWebpackPlugin.assets.main%}" async></script>
+<html>
+  <head>
+    <title>ReactFitText Test Page</title>
+    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
+    <link href='/assets/prism.css' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+  <div class="container">
+    <header class="js-fittext">
+    </header>
+    <p>
+      This component is a port of <a href="https://github.com/davatron5000/FitText.js">FitText</a>.
+    </p>
+    <section id="features">
+      <p>FitText make font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.</p>
+      <p>This port is 100% jQuery free, you only need React to use it.</p>
+    </section>
+    <section id="example">
+      <h2>Usage</h2>
+      <p>If you want to use this component on your React project you only need to add react-fittext to your dependencies</p>
+      <pre>
+        <code class="language-bash">npm install react-fittext --save</code>
+      </pre>
+      <p>There is an excelent use example in this very same page. To use React-Fittext on the title and subtitle of this page you only need to do this:</p>
+      <pre data-src="/assets/examples/index.js"></pre>
+    </section>
+    <footer>
+      <p>React-FitText is brought to you by <a href="http://softwarepsychonaut.com">gianu</a> (<a href="http://www.twitter.com/sgianazza">@sgianazza</a>)</p>
+      <p>The Original jQuery Plugin is brought to you by <a href="http://paravelinc.com">Paravel</a></p>
+    </footer>
+  </div>
+  <script type="text/javascript" src="{%=o.htmlWebpackPlugin.assets.main%}" async></script>
+  <script src="/assets/prism.js"></script>
+  </body>
+</html>
diff --git a/client/scripts/index.js b/client/scripts/index.js
@@ -1,20 +1,26 @@
 "use strict";
 require("../styles/index.styl");
 
-var React = require("react/addons");
-// var ReactFitTextBase = require("../../src");
-// var {ReactFitText} = ReactFitTextBase;
+var React = require("react");
 var ReactFitText = require('../../src/ReactFitText');
 
 var Body = React.createClass({
   render: function() {
     return <div id="react-root">
-      <ReactFitText>
-        <h2>Testing React FitText</h2>
+      <ReactFitText compressor={0.5}>
+        <h1>React FitText</h1>
+      </ReactFitText>
+      <ReactFitText compressor={3.5}>
+        <p className="download">
+          A React component for inflating web type
+          <a className="download__link" href="http://github.com/gianu/react-fittext">
+            Fork it from Github
+          </a>
+        </p>
       </ReactFitText>
     </div>;
   }
 });
 
 
-React.render(<Body />, document.body);
+React.render(<Body />, document.querySelector('.js-fittext'));
diff --git a/client/styles/index.styl b/client/styles/index.styl
@@ -1,7 +1,87 @@
+@import 'nib'
+
 body
   top 0
   margin 0
   padding 0
+  background #c44032
+  color #f4f1de
+  font-size 100%
+  font-family "Montserrat", 'Arial', 'san-serif'
+
+header
+  margin 3.5% 0 4%
+
+h1
+  text-align center
+  text-indent -.12em
+  color #faf1de
+  font-family "Arvo", 'sans-serif'
+  font-weight 900
+  display inline-block
+  margin 0 auto
+  line-height 1
+  width 100%
+  text-shadow #863027 .01em .01em 0, #863027 .02em .02em 0, #863027 .03em .03em 0, #863027 .04em .04em 0, #863027 .05em .05em 0, #863027 .06em .06em 0, #863027 .07em .07em 0, #863027 .08em .08em 0, #863027 .09em .09em 0, #863027 .1em .1em 0
+
+a
+  color #f4f1de
+
+p
+  font-size 1.2em
+
+footer
+  border-top .12em solid #f4f1de
+  padding-top 2%
+  margin-top 3%
+  display block
+  font-size .8em
+
+.container
+  width 75%
+  margin 0 auto
+
+.download
+  font-family "Arvo", 'sans-serif'
+  text-align left
+  margin-bottom 0px
+
+.download a
+  text-decoration none
+
+.download__link
+  padding 0.3em .8em
+  background url('../img/arrow.png') no-repeat
+  background-size 100%
+  margin-left .4em
+  transition margin .15s ease-out
+  text-decoration none
+  &:hover
+    color #f4f1de
+    margin-left .6em
+    margin-right -.2em
+
+// test
+pre
+    font-family "Courier 10 Pitch", Courier, monospace
+    font-size 95%
+    line-height 140%
+    white-space pre
+    white-space pre-wrap
+    white-space -moz-pre-wrap
+    white-space -o-pre-wrap
+
+code
+    font-family Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace
+    font-size 95%
+    line-height 140%
+    white-space pre
+    white-space pre-wrap
+    white-space -moz-pre-wrap
+    white-space -o-pre-wrap
+    background #faf8f0
 
-h2
-  margin-top 0
+#content code
+    display block
+    padding 0.5em 1em
+    border 1px solid #bebab0
diff --git a/client/vendor/prism.css b/client/vendor/prism.css
@@ -0,0 +1,173 @@
+/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash&plugins=line-numbers+file-highlight */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: black;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', monospace;
+	direction: ltr;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	code[class*="language-"],
+	pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #999;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+	color: #a67f59;
+	background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+	color: #07a;
+}
+
+.token.function {
+	color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+	color: #e90;
+}
+
+.token.important {
+	font-weight: bold;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+pre.line-numbers {
+	position: relative;
+	padding-left: 3.8em;
+	counter-reset: linenumber;
+}
+
+pre.line-numbers > code {
+	position: relative;
+}
+
+.line-numbers .line-numbers-rows {
+	position: absolute;
+	pointer-events: none;
+	top: 0;
+	font-size: 100%;
+	left: -3.8em;
+	width: 3em; /* works for line-numbers below 1000 lines */
+	letter-spacing: -1px;
+	border-right: 1px solid #999;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+	.line-numbers-rows > span {
+		pointer-events: none;
+		display: block;
+		counter-increment: linenumber;
+	}
+
+		.line-numbers-rows > span:before {
+			content: counter(linenumber);
+			color: #999;
+			display: block;
+			padding-right: 0.8em;
+			text-align: right;
+		}
diff --git a/client/vendor/prism.js b/client/vendor/prism.js
diff --git a/client/webpack.config.js b/client/webpack.config.js
@@ -7,8 +7,6 @@ var Path = require("path"),
     IS_PRODUCTION = "production" === process.env.NODE_ENV,
     JSX_WITH_HOT_LOEADERS = ["react-hot-loader", "jsx-loader?harmony"],
     CSS_LOADER = "style-loader!css-loader?root=../",
-    // SCSS_LOADER = "style-loader!css-loader?root=../!sass-loader?includePaths[]=" +
-    //     Path.resolve(__dirname, "../bower_components/bootstrap-sass-official/assets/stylesheets");
 
 webpackConfig = module.exports = {
   entry: "./client/scripts/index.js",
@@ -22,9 +20,9 @@ webpackConfig = module.exports = {
       { test: require.resolve("react/addons"), loader: "expose-loader?React" },
       { test: /\.js(x?)$/, loaders: JSX_WITH_HOT_LOEADERS },
       { test: /\.jpg$/, loader: "file-loader" },
+      { test: /\.png$/, loader: "url-loader?prefix=/public/&limit=10000&mimetype=image/png"},
       { test: /\.css$/, loader: CSS_LOADER },
       { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'},
-      // { test: /\.scss$/, loader: SCSS_LOADER },
     ]
   },
   plugins: [