init

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+/build
+/*.log
+*.lock
+
+package-lock.json

README.md

@@ -0,0 +1,25 @@
+# website
+
+## CLI Commands
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# test the production build locally
+npm run serve
+
+# run tests with jest and preact-render-spy 
+npm run test
+```
+
+For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).
+
+
+[Design](https://codepen.io/cssgirl/pen/qEKgaJ) by Lindsey Di Napoli - CSSgirl

package.json

@@ -0,0 +1,59 @@
+{
+  "private": true,
+  "name": "website",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
+    "build": "preact build",
+    "serve": "preact build && preact serve",
+    "dev": "preact watch",
+    "lint": "eslint src",
+    "test": "jest ./tests"
+  },
+  "eslintConfig": {
+    "extends": "eslint-config-synacor"
+  },
+  "eslintIgnore": [
+    "build/*"
+  ],
+  "devDependencies": {
+    "eslint": "^4.9.0",
+    "eslint-config-synacor": "^2.0.2",
+    "identity-obj-proxy": "^3.0.0",
+    "if-env": "^1.0.0",
+    "jest": "^21.2.1",
+    "preact-cli": "^2.1.0",
+    "preact-render-spy": "^1.2.1"
+  },
+  "dependencies": {
+    "node-sass": "^4.9.0",
+    "preact": "^8.2.6",
+    "preact-router": "^2.5.7",
+    "sass-loader": "^7.0.1"
+  },
+  "jest": {
+    "verbose": true,
+    "setupFiles": [
+      "<rootDir>/src/tests/__mocks__/browserMocks.js"
+    ],
+    "testURL": "http://localhost:8080",
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "moduleDirectories": [
+      "node_modules"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
+      "\\.(css|less|scss)$": "identity-obj-proxy",
+      "^./style$": "identity-obj-proxy",
+      "^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
+      "^react$": "preact-compat",
+      "^react-dom$": "preact-compat",
+      "^create-react-class$": "preact-compat/lib/create-react-class",
+      "^react-addons-css-transition-group$": "preact-css-transition-group"
+    }
+  }
+}

src/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [ 
+        ["preact-cli/babel", { "modules": "commonjs" }]
+    ]
+}

src/components/app.js

@@ -0,0 +1,50 @@
+import { h, Component } from 'preact';
+import { Router } from 'preact-router';
+
+import Header from './header';
+import NavBar from './navbar'
+import Footer from './footer'
+import Home from '../routes/home';
+import Demos from '../routes/demos';
+
+// import Home from 'async!../routes/home';
+// import Profile from 'async!../routes/profile';
+
+if (module.hot) {
+  require('preact/debug');
+}
+
+export default class App extends Component {
+  /** Gets fired when the route changes.
+   *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
+   *	@param {string} event.url	The newly routed URL
+   */
+  handleRoute = e => {
+    this.currentUrl = e.url;
+  };
+
+  render() {
+    return (
+      <div>
+        <Header />
+        <NavBar />
+        <Router onChange={this.handleRoute}>
+          <Home path="/" />
+          <Demos path="/demos" />
+        </Router>
+        <Footer />
+      </div>
+    )
+    /*
+    return (
+      <div id="app">
+        <Header />
+        <Router onChange={this.handleRoute}>
+          <Home path="/" />
+          <Profile path="/profile/" user="me" />
+          <Profile path="/profile/:user" />
+        </Router>
+      </div>
+    );*/
+  }
+}

src/components/footer.js

@@ -0,0 +1,16 @@
+
+
+
+import { h, Component } from 'preact';
+
+export default class Footer extends Component {
+  render() {
+    return (
+      <footer class="footer">
+        <div class="container">
+          <p>Footer Text, Yo. Made with love by <a href="http://cssgirl.com">Lindsey Di Napoli</a></p>
+        </div>
+      </footer>
+    )
+  }
+}

src/components/header.js

@@ -0,0 +1,15 @@
+
+import { h, Component } from 'preact';
+
+export default class Header extends Component {
+  render() {
+    return (
+      <header class="header">
+        <div class="container">
+          <h1 class="site-title">The Yjs Library</h1>
+          <span class="site-tagline">A small CRDT library with a powerful abstraction over shared data</span>
+        </div>
+      </header>
+    )
+  }
+}

src/components/navbar.js

@@ -0,0 +1,21 @@
+
+import { h, Component } from 'preact';
+
+export default class NavBar extends Component {
+  render() {
+    return (
+      <nav class="main-nav">
+        <div class="container">
+          <ul>
+            <li class="mobile-button"><a href="#">Menu</a></li>
+            <li><a href="/">About</a></li>
+            <li><a href="/tutorial">Tutorial</a></li>
+            <li><a href="/demos">Demos</a></li>
+            <li><a href="/docs">Docs</a></li>
+            <li><a href="https://github.com/y-js/yjs/" target='_blank'>GitHub</a></li>
+          </ul>
+        </div>
+      </nav>
+    )
+  }
+}

src/index.js

@@ -0,0 +1,4 @@
+import './style'
+import App from './components/app'
+
+export default App

src/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "website",
+  "short_name": "website",
+  "start_url": "/",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#D7F7FE",
+  "theme_color": "#FF6067",
+  "icons": [
+    {
+      "src": "/assets/icons/android-chrome-192x192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/assets/icons/android-chrome-512x512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ]
+}

src/routes/demos/index.js

@@ -0,0 +1,128 @@
+import { h, Component } from 'preact'
+import style from './style'
+
+export default class Home extends Component {
+  render () {
+    return (
+      <section class="content">
+        <article class="post">
+          <div class="container">
+            <h2>Demos</h2>
+            <div class="columns">
+              <div class="item">
+                <h4 class="item-title">This is the post title</h4>
+                <img src="http://y-js.org/images/yjs.png" alt="Sample Image" class="item-image" />
+                <p>Frankly, it's ludicrous to have these interlocking bodies and not...interlock. My Uncle Rory was the stodgiest taxidermist you've ever met by day. But I haven't spent any money! I was all... dead and frugal. The only way some people can find a purpose in life is by becoming obsessed with demons. Should I start this program over? It's a real burn, being right so often. Can't call to mom, can't say a word. Nobody could do that much decoupage without calling on the powers of darkness. I'll never leave. Not even if you kill me. If I could make you purtier, I would.</p>
+              </div>
+
+              <div class="item">
+                <h4 class="item-title">This is the post title</h4>
+                <p>Everybody started singing and dancing. I've got four brothers, none of them Democrats. They need to take seven and they might take yours. Any self-respecting demon should be living in a pit of filth or a nice crypt. Who's calling me? Everybody I know lives here. Can't even shout, can't even cry. And I'm a huge fan of the way you lose control and turn into an enormous green rage monster. I wanna hurt you, but I can't resist the sinister attraction of your cold and muscular body! In their resting state, our actives are as innocent and vulnerable as children.</p>
+                <img src="http://y-js.org/images/yjs.png" alt="Sample Image" class="item-image" />
+                <div class="social">
+                  <a href="#"><i class="fa">&lt;/&gt;</i></a>
+                </div>
+              </div>
+            </div>
+          </div>   
+        </article>  
+
+        <div class="full-bleed cool-photo2"></div>
+
+        <article class="post"> 
+          <div class="container">
+
+          <h3>This is another section sub-title</h3>
+
+          <div class="columns thirds">
+            <div class="item"> <h4 class="item-title">This is the post title</h4>
+                <img src="http://y-js.org/images/yjs.png" alt="Sample Image" class="item-image" />
+              <p>From beneath you, it devours. Y'all see the man hanging out of the spaceship with the really big gun? No, Angel, it's not you. If I was blind, I would see you. Yes, I'd forgotten you're moonlighting as a criminal mastermind now.</p>  
+            <p>The human body can be drained of blood in 8.6 seconds given adequate vacuuming systems. Actually, I was fired from a fry-cook opportunity. I'm a comfortador also. Oh my god, I find lentils completely incomprehensible. The human mind is like Van Halen; if you just pull out one piece and keep replacing it, it just degenerates.</p>
+              <div class="social">
+                <a href="#"><i class="fa fa-facebook"></i></a>
+                <a href="#"><i class="fa fa-twitter"></i></a>
+                <a href="#"><i class="fa fa-google"></i></a>
+                <a href="#"><i class="fa fa-envelope"></i></a>
+              </div>
+
+          </div>
+
+            <div class="item">
+                <h4 class="item-title">This is the post title</h4>
+              <p>I saw their production of 'Giselle' in 1890. I wept like a baby, and I was evil! And zombies don't eat brains anyway, unless instructed to by their zombie master. It's about power and it's about women and you just hate those two words in the same sentence, don't you? She is the slayer. I recognize the council has made a decision, but given that it's a stupid-ass decision, I've elected to ignore it.</p>
+              <p><img src="http://y-js.org/images/yjs.png" alt="Sample Image" class="item-image" />
+              </p>
+            <div class="social">
+                <a href="#"><i class="fa fa-facebook"></i></a>
+                <a href="#"><i class="fa fa-twitter"></i></a>
+                <a href="#"><i class="fa fa-google"></i></a>
+                <a href="#"><i class="fa fa-envelope"></i></a>
+              </div></div>
+
+            <div class="item">
+
+                <h4 class="item-title">This is the post title</h4>
+              <img src="http://y-js.org/images/yjs.png" alt="Sample Image" class="item-image" />
+              <p>Everybody started singing and dancing. I saw their production of 'Giselle' in 1890. I wept like a baby, and I was evil! So, are we gonna sing army songs or something? I am obsolete. This must be what old people feel like, and Blockbuster. In their resting state, our actives are as innocent and vulnerable as children. I'm a rogue demon hunter now. Hey I could whip up a love slave any day I wanted. Oh my god, I find lentils completely incomprehensible. Well we could grind our enemies into talcum powder with a sledgehammer but, gosh, we did that last night.</p>
+            <div class="social">
+                <a href="#"><i class="fa fa-facebook"></i></a>
+                <a href="#"><i class="fa fa-twitter"></i></a>
+                <a href="#"><i class="fa fa-google"></i></a>
+                <a href="#"><i class="fa fa-envelope"></i></a>
+              </div></div>
+
+            <div class="item">
+
+                <h4 class="item-title">This is the post title</h4>
+              <p>It's funny how the Earth never opens up and swallows you when you want it to. Why can't you just masturbate like the rest of us? It's a real burn, being right so often. They need to take seven and they might take yours. We're old friends from Navy. Friends from Old Navy. I worked retail, he'd come in, buy slacks My entire existence was constructed by a sociopath in a sweater vest; what do you suggest I do?</p>
+              <div class="social">
+                <a href="#"><i class="fa fa-facebook"></i></a>
+                <a href="#"><i class="fa fa-twitter"></i></a>
+                <a href="#"><i class="fa fa-google"></i></a>
+                <a href="#"><i class="fa fa-envelope"></i></a>
+              </div>
+            </div>
+
+            <div class="item">
+
+                <h4 class="item-title">This is the post title</h4>
+              <img src="http://y-js.org/images/yjs.png" alt="Sample Image" class="item-image" />
+              <p>Stay away from hyena people, or any loser athletes, or if you see anyone who's invisible. From beneath you, it devours. Somebody put her tiny little thinking cap on! We'll have to call it early quantum state phenomenon.</p> 
+            <p>Only way to fit 5000 species of mammal on the same boat. I've seen the best and the worst of you. The only thing Willow was ever good for, the only thing I ever had going for me were those moments, just moments, where Tara would look at me and I was wonderful. We've got a bunch of fighters with nothing to hit, a wicca who won't-a, and the brains of our operation wears oven mitts. They rampaged through half the known world until Angel got his soul.</p>
+            <div class="social">
+                <a href="#"><i class="fa fa-facebook"></i></a>
+                <a href="#"><i class="fa fa-twitter"></i></a>
+                <a href="#"><i class="fa fa-google"></i></a>
+                <a href="#"><i class="fa fa-envelope"></i></a>
+              </div></div>
+
+            <div class="item">
+
+                <h4 class="item-title">This is the post title</h4>
+              <p>Oh my god you will never believe what happened at school today. We're old friends from Navy. Friends from Old Navy. I worked retail, he'd come in, buy slacks I'm not planning on presiding over the end of Western Civilization. She is the slayer. Everyone's a hero in their own way, in their own not that heroic way. Stay away from hyena people, or any loser athletes, or if you see anyone who's invisible. These endless days are finally ending in a blaze. What, you think this isn't real just because of all the vampires, and demons, and ex-vengeance demons, and the sister that used to be a big ball of universe-destroying energy? They need to take seven and they might take yours. I swallowed a bug.</p>
+            <div class="social">
+                <a href="#"><i class="fa fa-facebook"></i></a>
+                <a href="#"><i class="fa fa-twitter"></i></a>
+                <a href="#"><i class="fa fa-google"></i></a>
+                <a href="#"><i class="fa fa-envelope"></i></a>
+              </div>
+            </div>
+
+            <div class="item">
+                <h4 class="item-title">This is the post title</h4>
+              <p>Love keeps her in the air when she ought to fall down. Bunnies aren't just cute like everybody supposes. And I understand with perfect clarity exactly what you are. Occasionally, I'm callous and strange. You can't spend the rest of your life waiting for Xander to wake up and smell the hottie.</p>
+            <div class="social">
+                <a href="#"><i class="fa fa-facebook"></i></a>
+                <a href="#"><i class="fa fa-twitter"></i></a>
+                <a href="#"><i class="fa fa-google"></i></a>
+                <a href="#"><i class="fa fa-envelope"></i></a>
+              </div>
+            </div>
+          </div>
+        </div>
+        </article>
+      </section>
+    )
+  }
+}