New seed data and minor style changes

assets/document-preview.scss

@@ -12,6 +12,10 @@ $font-weight-bold: 700;
   & > *:last-child {
     margin-bottom: 0 !important;
   }
+  p:empty {
+    // Hide empty paragraphs to prevent unnecessary margins
+    display: none;
+  }
 }
 
 /*
@@ -170,12 +174,8 @@ $font-weight-bold: 700;
     -webkit-line-clamp: 2;
 
     // The combination of these two keeps vertical rhythm for both 1 and 2 lines
-    margin-bottom: rem-calc(18);
-    margin-top: rem-calc(2);
-  }
-  & > h1:first-child,
-  & > h2:first-child {
-    margin-top: rem-calc(2) !important;
+    margin-bottom: $base-height;
+    margin-top: 0;
   }
   h1 {
     font-weight: $font-weight-bold;
@@ -205,6 +205,13 @@ $font-weight-bold: 700;
     margin-top: 0;
     margin-bottom: $base-height;
   }
+  blockquote {
+    margin: $base-height;
+    margin-right: 0;
+  }
+  pre {
+    margin: $base-height 0;
+  }
   hr {
     border: none;
     border-bottom: 1px solid;
@@ -215,4 +222,23 @@ $font-weight-bold: 700;
     // Try to keep the vertical rhythm
     margin-top: -1 * ($base-height/2 + rem-calc(1));
   }
+  & > p:only-child {
+    // If there is only one paragraph, make the text slightly bigger
+    font-size: rem-calc(16);
+  }
+
+  /* Remove common styles (for a less distracting look) */
+
+  strong {
+    font-weight: normal;
+  }
+  em {
+    font-style: normal;
+  }
+  s {
+    text-decoration: none;
+  }
+  pre, code {
+    font-family: inherit;
+  }
 }

assets/vendor/twemoji.scss

@@ -5,5 +5,5 @@ img.emoji {
 
   /* Add space before & after each emoji and pull them upwards for better optical alignment */
   margin: 0 .05em 0 .1em;
-  vertical-align: -0.1em;
+  vertical-align: -0.15em;
 }

components/card-component.jsx

@@ -42,6 +42,7 @@ let Card = React.createClass({
         color: "inherit",
         display: "block",
         maxHeight: maxHeight,
+        minHeight: this.remCalc(40),
         overflow: "hidden",
         padding: this.remCalc(8, 10, 0),
         textDecoration: "none",

components/card-list-component.jsx

@@ -74,7 +74,7 @@ let CardList = React.createClass({
         background: "white",
         border: "none",
         fontSize: this.remCalc(14),
-        height: this.remCalc(60),
+        height: this.remCalc(74),
         lineHeight: this.remCalc(20),
         marginTop: 1,
         outline: "none",

components/document-component.jsx

@@ -44,11 +44,14 @@ export default React.createClass({
     let content = this.state.card.content;
 
     let styles = {
+      alignItems: "center",
       boxSizing: "border-box",
+      display: "flex",
+      justifyContent: "center",
       margin: "0 auto",
       maxWidth: this.remCalc(700),
       minHeight: "100vh",
-      padding: this.remCalc(80)
+      padding: this.remCalc(80, 80, 120)
     };
     return (
       <div style={styles} onClick={this.handleClick}>

helpers/markdown.js

@@ -34,8 +34,9 @@ let Markdown = {
       return "";
     };
 
-    // Don't render images
+    // Don't render images and emoji
     rules.image = emptyRule;
+    rules.emoji = emptyRule;
 
     // Display links as text
     rules.link_open = emptyRule;

helpers/styling-mixin.js

@@ -16,13 +16,13 @@ let StylingMixin = {
   mergeStyles(...args) {
     return Object.assign({}, ...args);
   },
-  /*
-   * Convert a list of values in pixels to rems. For example:
-   *    remCalc(16, 18, 32) # returns "1rem 1.125rem 2rem"
-   * @param {Integer} remBase — The base body font size value in pixels
-   * @param {Array} values — One or more values in pixels to be converted to rem
-   * @return {String} Space delimited values that can be used in css styles
-   */
+  //
+  // Convert a list of values in pixels to rems. For example:
+  //    remCalc(16, 18, 32) # returns "1rem 1.125rem 2rem"
+  // @param {Integer} remBase — The base body font size value in pixels
+  // @param {Array} values — One or more values in pixels to be converted to rem
+  // @return {String} Space delimited values that can be used in css styles
+  //
   remCalc(...values) {
     let remBase = 16; // The base body font size value in pixels
     return values.map((value) => `${value/remBase}rem`).join(" ");

seeds/1af15de5a440.md

@@ -1,6 +1 @@
----
-id: 1af15de5a440
-sample: Hello, World!
----
-
-Second card in the first list!
+:notebook: **Welcome to your digital notebook.**

seeds/4176d2c77535.md

@@ -1 +1,42 @@
-First card in the first list!
+# Dear Hume,
+
+You ask advice: ah, what a very human and very dangerous thing to do! For to give advice to a man who asks what to do with his life implies something very close to egomania. To presume to point a man to the right and ultimate goal -- to point with a trembling finger in the **right** direction is something only a fool would take upon himself.
+
+I am not a fool, but I respect your sincerity in asking my advice. I ask you though, in listening to what I say, to remember that all advice can only be a product of the man who gives it. What is truth to one may be disaster to another. I do not see life through your eyes, nor you through mine. If I were to attempt to give you specific advice, it would be too much like the blind leading the blind.
+
+> To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles ...  _(Shakespeare)_
+
+And indeed, that **is** the question: whether to float with the tide, or to swim for a goal. It is a choice we must all make consciously or unconsciously at one time in our lives. So few people understand this! Think of any decision you've ever made which had a bearing on your future: I may be wrong, but I don't see how it could have been anything but a choice however indirect -- between the two things I've mentioned: the floating or the swimming.
+
+But why not float if you have no goal? That is another question. It is unquestionably better to enjoy the floating than to swim in uncertainty. So how does a man find a goal? Not a castle in the stars, but a real and tangible thing. How can a man be sure he's not after the "big rock candy mountain," the enticing sugar-candy goal that has little taste and no substance?
+
+The answer -- and, in a sense, the tragedy of life -- is that we seek to understand the goal and not the man. We set up a goal which demands of us certain things: and we do these things. We adjust to the demands of a concept which **cannot** be valid. When you were young, let us say that you wanted to be a fireman. I feel reasonably safe in saying that you no longer want to be a fireman. Why? Because your perspective has changed. It's not the fireman who has changed, but you. Every man is the sum total of his reactions to experience. As your experiences differ and multiply, you become a different man, and hence your perspective changes. This goes on and on. Every reaction is a learning process; every significant experience alters your perspective.
+
+So it would seem foolish, would it not, to adjust our lives to the demands of a goal we see from a different angle every day? How could we ever hope to accomplish anything other than galloping neurosis?
+
+The answer, then, must not deal with goals at all, or not with tangible goals, anyway. It would take reams of paper to develop this subject to fulfillment. God only knows how many books have been written on "the meaning of man" and that sort of thing, and god only knows how many people have pondered the subject. (I use the term "god only knows" purely as an expression.) There's very little sense in my trying to give it up to you in the proverbial nutshell, because I'm the first to admit my absolute lack of qualifications for reducing the meaning of life to one or two paragraphs.
+
+I'm going to steer clear of the word "existentialism," but you might keep it in mind as a key of sorts. You might also try something called Being and Nothingness by Jean-Paul Sartre, and another little thing called Existentialism: From Dostoyevsky to Sartre. These are merely suggestions. If you're genuinely satisfied with what you are and what you're doing, then give those books a wide berth. (Let sleeping dogs lie.) But back to the answer. As I said, to put our faith in tangible goals would seem to be, at best, unwise. So we do not strive to be firemen, we do not strive to be bankers, nor policemen, nor doctors. **we strive to be ourselves**.
+
+But don't misunderstand me. I don't mean that we can't **be** firemen, bankers, or doctors -- but that we must make the goal conform to the individual, rather than make the individual conform to the goal. In every man, heredity and environment have combined to produce a creature of certain abilities and desires -- including a deeply ingrained need to function in such a way that his life will be **meaningful**. A man has to **be** something; he has to matter.
+
+As I see it then, the formula runs something like this: a man must choose a path which will let his **abilities** function at maximum efficiency toward the gratification of his **desires**. In doing this, he is fulfilling a need (giving himself identity by functioning in a set pattern toward a set goal), he avoids frustrating his potential (choosing a path which puts no limit on his self-development), and he avoids the terror of seeing his goal wilt or lose its charm as he draws closer to it (rather than bending himself to meet the demands of that which he seeks, he has bent his goal to conform to his own abilities and desires).
+
+In short, he has not dedicated his life to reaching a pre-defined goal, but he has rather chosen a way of life he **knows** he will enjoy. The goal is absolutely secondary: it is the functioning toward the goal which is important. And it seems almost ridiculous to say that a man **must** function in a pattern of his own choosing; for to let another man define your own goals is to give up one of the most meaningful aspects of life -- the definitive act of will which makes a man an individual.
+
+Let's assume that you think you have a choice of eight paths to follow (all pre-defined paths, of course). And let's assume that you can't see any real purpose in any of the eight. **Then** -- and here is the essence of all I've said -- you **must find a ninth path**.
+
+Naturally, it isn't as easy as it sounds. You've lived a relatively narrow life, a vertical rather than a horizontal existence. So it isn't any too difficult to understand why you seem to feel the way you do. But a man who procrastinates in his **choosing** will inevitably have his choice made for him by circumstance.
+
+So if you now number yourself among the disenchanted, then you have no choice but to accept things as they are, or to seriously seek something else. But beware of looking for goals: look for a way of life. Decide how you want to live and then see what you can do to make a living **within** that way of life. But you say, "I don't know where to look; I don't know what to look for."
+
+And there's the crux. Is it worth giving up what I have to look for something better? I don't know -- is it? Who can make that decision but you? But even by **deciding to look**, you go a long way toward making the choice.
+
+If I don't call this to a halt, I'm going to find myself writing a book. I hope it's not as confusing as it looks at first glance. Keep in mind, of course, that this is **my way** of looking at things. I happen to think that it's pretty generally applicable, but you may not. Each of us has to create our own credo -- this merely happens to be mine.
+
+If any part of it doesn't seem to make sense, by all means call it to my attention. I'm not trying to send you out "on the road" in search of Valhalla, but merely pointing out that it is not necessary to accept the choices handed down to you by life as you know it. There is more to it than that -- no one **has** to do something he doesn't want to do for the rest of his life. But then again, if that's what you wind up doing, by all means convince yourself that you **had** to do it. You'll have lots of company.
+
+And that's it for now. Until I hear from you again, I remain,
+
+your friend,
+_Hunter_

seeds/7ead6dd5d126.md

@@ -1 +1,48 @@
-Fourth card in the first list
+![spacehorse](https://gc.david.tools/spacehorse.svg)
+
+This is a work in progress. It's something I want for myself but also a place to experiment with ES6 features, Isomorphic JavaScript, the [React library](https://facebook.github.io/react/) and [Flux](https://facebook.github.io/flux/), the [SUIT CSS naming conventions](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) and some unconventional practices recently proposed by Facebook (like using [inline CSS styles](https://speakerdeck.com/vjeux/react-css-in-js) again).
+
+##### Dependencies
+
+You can install the dependencies with `npm install`. For running the server and tests, checkout the *scripts* section in the *package.json* file (for eg: `npm run live`). I use [jsxhint](https://github.com/STRML/JSXHint/) to analyze the code.
+
+##### Packaging
+
+To build the desktop app, check out the [official nw.js documentation](https://github.com/nwjs/nw.js/wiki/How-to-package-and-distribute-your-apps). For Mac OS X, you can simply copy the entire directory (`rsync desktop/ app.nw -a --copy-links`) or create a compressed archive (`cd desktop && zip -r app.nw *`). Then download the official `nwjs.app` file, click "Show Package Contents" and move the generated archive or directory into `Contents/Resources/`.
+
+---
+
+##### Initial Idea
+
+There's a new note-taking app each day. Almost as many as weather apps. Each one more minimalistic than the last. On average, a 30-year-old programmer has built at least four during his professional life, [study shows](https://t.co/hiz5ePHMTi). To each his own, I suppose.
+
+I always had the habit of taking notes. In part because I have a sucky memory, and I'm afraid of forgetting what I discover in my daily life. The way I do notes is as follows.
+
+Though I only realized this recently, they take two forms, which result from distinct activities:
+
+- Lots of small **loose notes** added when I stumble upon something new or have an idea
+- A reasonable number of **detailed notes**, which are the outcome of taking some time to really research something and add my thoughts on the subject
+
+In the first situation, my goal is to capture something freely and rapidly with a few words and links. It can't require much effort, otherwise I may not feel like doing it.
+The second kind of notes emerge from necessity, or from the urge to learn something deeper. They become longer, with sections and subsections.
+
+For this to work properly, the interface should reflect these two use cases.
+
+For **loose notes**, the text editor should be a simple `textarea`. It can't be too big, otherwise I may feel that what I am adding isn't worth it. These notes could be visualized using Index Cards, where only the title (sometimes an image would work better) is displayed until I click it and a small modal pops-up. The font could be a standard 16px Helvetica.
+
+For **detailed notes**, I would like a text editor that gives me more writing space, with some formatting options. It would also be important to be able to embed HTML with external content and custom CSS. For the visualization, a bigger serifed font would be preferable.
+
+Additionally, I think this tool should meet the following requirements:
+
+- High-level view of all my content
+- Support multiple categorizations of the same content
+- Product branding should not get in the way of user's personal tastes
+- Allow customization and extensibility
+- Require minimal setup for development, with the data being stored in files (maybe with the option of generating a static site for production).
+- Probably include some basic authentication or encryption option (like [TiddlyWiki](http://tiddlywiki.com/static/EncryptionMechanism.html) has)
+
+In the absence of a tool with these features, I have been using simultaneously Trello and Private Gists on GitHub (lately, I've been experimenting with TiddlyWiki instead of the later).
+
+---
+
+Additional ideas and mockups available [here](https://gc.david.tools/spacehorse-150b874b689d/mockups/).

seeds/config.json

@@ -1,5 +1,5 @@
 {
-  "appName": "Spark Board",
+  "appName": "Notes",
   "storageLocation": "./seeds",
   "documentExtension": "md"
 }

seeds/data.json

@@ -2,42 +2,26 @@
   "boards": [
     {
       "id": "3551dbaf6a52a",
-      "name": "Example Board"
-    }, {
-      "id": "a25a6fabd1553",
-      "name": "Another Board"
+      "name": "General"
     }
   ],
   "lists": [
     {
       "boardId": "3551dbaf6a52a",
       "id": "3b88d1cb3884",
-      "name": "First list"
-    }, {
-      "boardId": "3551dbaf6a52a",
-      "id": "966d3fb872d1",
-      "name": "Second list"
+      "name": "Inbox"
     }
   ],
   "cards": [
     {
-      "listId": "3b88d1cb3884",
-      "id": "4176d2c77535"
-    }, {
       "listId": "3b88d1cb3884",
       "id": "1af15de5a440"
     }, {
       "listId": "3b88d1cb3884",
-      "id": "4eb49d52d7b4"
+      "id": "4176d2c77535"
     }, {
       "listId": "3b88d1cb3884",
       "id": "7ead6dd5d126"
-    }, {
-      "listId": "966d3fb872d1",
-      "id": "95277025e2cf"
-    }, {
-      "listId": "966d3fb872d1",
-      "id": "d5f5eb2873cd"
     }
   ]
 }