Configurable settings, themes changed, refactor 🐦

app.css

@@ -1,5 +1,15 @@
-#stack {
+#howManyWords {
-  white-space: normal;
+  width: 3.5em;
+}
+
+label {
+  display: inline;
+  margin-right: 1.5em;
+  text-transform: capitalize;
+}
+
+button {
+  cursor: pointer;
 }
 
 /* Thanks to http://projects.lukehaas.me/css-loaders */

index.html

@@ -6,7 +6,7 @@
 
   <title>Oh I Use...</title>
 
-  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
   <link rel="stylesheet" href="./vendor/css/normalize.css">
   <link rel="stylesheet" href="./vendor/css/skeleton.css">
   <link rel="stylesheet" href="./app.css">
@@ -54,18 +54,30 @@
         <h1>Oh I Use...</h1>
 
         <div v-if="loading" class="loader">Loading...</div>
-        <p v-else class="row">
+        <h4 v-else v-html="stackMarkdown" class="row"></h4>
-          <code id="stack" class="twelve column">
-            <br />
-            {{ stack }}
-            <br />
-            <br />
-          </code>
-        </p>
 
-        <button v-on:click="newStack" class="button-primary u-full-width">
+        <label>
+          <input id="howManyWords" type="number" step="1" min="1" max="15" v-model.number="howManyWords" />
+          <span class="label-body">
+            How many terms?
+          </span>
+        </label>
+
+        <label v-for="theme in defaultWordThemes">
+          <input type="checkbox" v-model="wordThemes" v-bind:value="theme" checked />
+          <span class="label-body">
+            {{ theme }}
+          </span>
+        </label>
+
+        <button
+          v-on:click="newStack"
+          v-bind:disabled="!validSettings"
+          v-bind:class="{ 'button-primary': validSettings }"
+          class="u-full-width">
           No that's stupid, try again.
-        </h1>
+        </button>
+
       </div>
     </div>
 
@@ -81,6 +93,7 @@
     ga('send', 'pageview');
   </script>
   <script src="./vendor/js/fetch.js"></script>
+  <script src="./vendor/js/marked.min.js"></script>
   <script src="./vendor/js/vue.min.js"></script>
   <script src="./dist/app.js"></script>
 </body>

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "npm run vendor && babel src --out-dir dist",
     "watch": "npm run vendor && babel src --watch --out-dir dist --source-maps inline",
-    "vendor": "mkdir -p ./vendor ./vendor/css ./vendor/js ./dist ./dist/favicon && cp -R ./src/favicon ./dist && cp -R ./node_modules/skeleton-css/css/ ./vendor/css && cp ./node_modules/vue/dist/vue.min.js ./vendor/js/vue.min.js && cp ./node_modules/whatwg-fetch/fetch.js ./vendor/js/fetch.js",
+    "vendor": "mkdir -p ./vendor ./vendor/css ./vendor/js ./dist ./dist/favicon && cp -R ./src/favicon ./dist && cp -R ./node_modules/skeleton-css/css/ ./vendor/css && cp ./node_modules/vue/dist/vue.min.js ./vendor/js/vue.min.js && cp ./node_modules/whatwg-fetch/fetch.js ./vendor/js/fetch.js && cp ./node_modules/marked/marked.min.js ./vendor/js/marked.min.js",
     "clean": "rm -rf ./vendor ./dist"
   },
   "author": "Joe Wroten <sharpshark28@gmail.com>",
@@ -16,6 +16,7 @@
     "babel-preset-es2015": "^6.16.0"
   },
   "dependencies": {
+    "marked": "^0.3.6",
     "skeleton-css": "^2.0.4",
     "vue": "^2.0.1",
     "whatwg-fetch": "^1.0.0"

src/app.js

@@ -2,9 +2,10 @@ Array.prototype.random = function() {
   return this[Math.floor(Math.random() * this.length)];
 }
 
-let wordThemes = ['candy', 'beer', 'coffee', 'car', 'liquor', 'mustache'];
+let defaultWordThemes = ['candy', 'coffee', 'speed', 'liquor', 'facial hair'];
+let defaultHowManyWords = 3;
+
 let suffixes = ['', 'JS', 'Script', '.js', '.io', 'DB'];
-let wordsToUse = 3;
 
 let stackPhrases = {
   intros: [
@@ -43,7 +44,18 @@ let app = new Vue({
   el: '#app',
   data: {
     loading: true,
-    stack: ''
+    stack: '',
+    defaultWordThemes,
+    wordThemes: defaultWordThemes,
+    howManyWords: defaultHowManyWords
+  },
+  computed: {
+    stackMarkdown() {
+      return marked(this.stack, { sanitize: true });
+    },
+    validSettings() {
+      return this.wordThemes.length && this.howManyWords > 0;
+    }
   },
   methods: {
     newStack() {
@@ -62,12 +74,14 @@ let app = new Vue({
   }
 });
 
-// Fire off a new stack request on load
+app.newStack(); // Fire off a new stack request on load
-app.newStack();
 
 function generateStack() {
-  return Promise.all(wordThemes.map(w => getWordsRelatedTo(w)))
+  return Promise.all(app.wordThemes.map(w => getWordsRelatedTo(w)))
-    .then(data => data.reduce((prev, cur) => [].concat(prev.length ? prev : [], cur.hasTypes)))
+    .then(data => {
+      data = data.map(d => d.hasTypes);
+      return [].concat.apply([], data);
+    })
     .then(wordsToStack);
 }
 
@@ -79,13 +93,13 @@ function getWordsRelatedTo(word) {
 function wordsToStack(allWords) {
   let stack = stackPhrases.intros.random();
 
-  for (let i = 1; i <= wordsToUse; i++) {
+  for (let i = 1; i <= app.howManyWords; i++) {
     let techWord = wordToTechTerm(allWords.random());
     let variety = stackPhrases.toolVarieties.random();
     let connection = stackPhrases.toolConnections.random();
     let outro = stackPhrases.outros.random();
-    let end = i < wordsToUse ? connection : outro;
+    let end = i < app.howManyWords ? connection : outro;
-    stack += ` ${techWord} ${variety} ${end}`;
+    stack += ` **${techWord}** ${variety} ${end}`;
   }
 
   return stack;