├── .gitignore ├── app ├── api │ ├── index.js │ ├── index-old.js │ ├── hnapi.js │ ├── firebase-rest.js │ └── firebase.js ├── routes │ ├── index.scss │ ├── user │ │ ├── Controller.js │ │ ├── index.js │ │ └── index.scss │ ├── index.js │ ├── item │ │ ├── Controller.js │ │ ├── index.scss │ │ └── index.js │ └── default │ │ ├── index.scss │ │ ├── Controller.js │ │ └── index.js ├── polyfill.js ├── layout │ ├── Controller.js │ ├── index.js │ └── index.scss ├── entry.js ├── index.scss ├── components │ └── InfiniteScrollAnchor.js ├── index.js ├── index.html └── manifest.scss ├── config ├── netlify.redirects ├── babel.config.js ├── webpack.dev.js ├── webpack.config.js └── webpack.prod.js ├── assets ├── logo1024.png ├── logo144.png ├── logo512.png ├── manifest.json └── logo.svg ├── LICENSE.md ├── .editorconfig ├── README.md ├── package.json └── LICENSE-THIRD-PARTY.md /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | /dist 3 | node_modules 4 | -------------------------------------------------------------------------------- /app/api/index.js: -------------------------------------------------------------------------------- 1 | export * from './hnapi'; 2 | -------------------------------------------------------------------------------- /config/netlify.redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /app/routes/index.scss: -------------------------------------------------------------------------------- 1 | @import 'default/index'; 2 | -------------------------------------------------------------------------------- /app/polyfill.js: -------------------------------------------------------------------------------- 1 | import "whatwg-fetch"; 2 | import "babel-polyfill"; 3 | -------------------------------------------------------------------------------- /assets/logo1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codaxy/cxjs-hackernews/HEAD/assets/logo1024.png -------------------------------------------------------------------------------- /assets/logo144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codaxy/cxjs-hackernews/HEAD/assets/logo144.png -------------------------------------------------------------------------------- /assets/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codaxy/cxjs-hackernews/HEAD/assets/logo512.png -------------------------------------------------------------------------------- /app/layout/Controller.js: -------------------------------------------------------------------------------- 1 | import { Controller } from "cx/ui"; 2 | 3 | export default class extends Controller { 4 | onInit() {} 5 | } 6 | -------------------------------------------------------------------------------- /app/entry.js: -------------------------------------------------------------------------------- 1 | import start from './index'; 2 | import "core-js/fn/promise"; 3 | 4 | if (window.fetch && Object.assign) 5 | start(); 6 | else 7 | System.import("./polyfill").then(start); 8 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | This application is a part of the CxJS framework, which is available under different licensing options depending on the nature of your project. 2 | 3 | For more information, please refer to https://cxjs.io. -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | # Unix-style newlines with a newline ending every file 4 | [*] 5 | end_of_line = lf 6 | insert_final_newline = true 7 | 8 | [app/**.js] 9 | indent_style = tab 10 | indent_size = 3 11 | 12 | [app/**.scss] 13 | indent_style = tab 14 | indent_size = 3 15 | -------------------------------------------------------------------------------- /app/index.scss: -------------------------------------------------------------------------------- 1 | $cx-include-global-rules: true; 2 | 3 | @import "~cx/src/variables"; 4 | 5 | $cx-excluded: map-merge($cx-excluded, ( 6 | 'cx/widgets/Dropdown': true, 7 | 'cx/widgets/Overlay': true, 8 | 'cx/widgets/Tooltip': true, 9 | 'cx/widgets/Button': true, 10 | )); 11 | 12 | @import "manifest"; 13 | 14 | @import "~cx/src/index"; 15 | 16 | @import "layout/index"; 17 | @import "routes/index"; 18 | -------------------------------------------------------------------------------- /assets/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "CxJS Hacker News PWA", 3 | "short_name": "CxJS HN", 4 | "icons": [ 5 | { 6 | "src": "/assets/logo144.png", 7 | "sizes": "144x144", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/assets/logo512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "start_url": "/", 17 | "display": "standalone", 18 | "background_color": "#ffffff", 19 | "theme_color": "#ff6600" 20 | } -------------------------------------------------------------------------------- /app/api/index-old.js: -------------------------------------------------------------------------------- 1 | // const methods = System.import("./methods"); 2 | // 3 | // export default function(callback) { 4 | // return methods.then(module => callback(module)); 5 | // } 6 | // 7 | // export const watchStories = (...args) => 8 | // methods.then(m => m.watchStories(...args)); 9 | // 10 | // export const fetchItem = (...args) => methods.then(m => m.fetchItem(...args)); 11 | // 12 | // export const fetchStories = (...args) => methods.then(m => m.fetchStories(...args)); 13 | 14 | 15 | export * from './methods'; 16 | -------------------------------------------------------------------------------- /app/routes/user/Controller.js: -------------------------------------------------------------------------------- 1 | import { Controller } from "cx/ui"; 2 | import { fetchUser } from "../../api"; 3 | 4 | export default class extends Controller { 5 | onInit() { 6 | this.load(); 7 | } 8 | 9 | scrollToTop() { 10 | let scrollEl = document.scrollingElement || document.documentElement; 11 | scrollEl.scrollTop = 0; 12 | } 13 | 14 | load() { 15 | let id = this.store.get("$root.url").substring("~/user/".length); 16 | 17 | fetchUser(id).then(user => { 18 | this.scrollToTop(); 19 | this.store.set("user", user); 20 | }); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /config/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | cacheDirectory: true, 3 | cacheIdentifier: "v2", 4 | presets: [ 5 | ["cx-env", { 6 | targets: { 7 | chrome: 50, 8 | ie: 11, 9 | ff: 30, 10 | edge: 12, 11 | safari: 9 12 | }, 13 | modules: false, 14 | loose: true, 15 | useBuiltIns: true, 16 | cx: { 17 | imports: { 18 | useSrc: true 19 | } 20 | } 21 | }] 22 | ], 23 | "plugins": [] 24 | }; 25 | 26 | -------------------------------------------------------------------------------- /app/api/hnapi.js: -------------------------------------------------------------------------------- 1 | const baseURL = 'https://api.hackerwebapp.com'; 2 | 3 | const fetchJSON = path => { 4 | return fetch(`${baseURL}/${path}`) 5 | .then(r => { 6 | if (!r.ok) 7 | throw new Error(`Invalid response received. Status ${r.status} - ${r.statusText}`); 8 | return r; 9 | }) 10 | .then(x => x.json()); 11 | }; 12 | 13 | export function fetchStories(channel = "news", page = 1) { 14 | return fetchJSON(`${channel}?page=${page}`); 15 | } 16 | 17 | export function fetchItem(id) { 18 | return fetchJSON(`item/${id}`); 19 | } 20 | 21 | export function fetchUser(user) { 22 | return fetchJSON(`user/${user}`); 23 | } 24 | -------------------------------------------------------------------------------- /app/routes/index.js: -------------------------------------------------------------------------------- 1 | import { Sandbox, Rescope } from "cx/widgets"; 2 | import { FirstVisibleChildLayout } from "cx/ui"; 3 | 4 | import Default from "./default"; 5 | import Item from "./item"; 6 | import User from "./user"; 7 | 8 | import AppLayout from "../layout"; 9 | 10 | export default ( 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /app/routes/user/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | HtmlElement, 3 | Link, 4 | Repeater, 5 | Text, 6 | Icon, 7 | PureContainer 8 | } from "cx/widgets"; 9 | import { Format } from "cx/util"; 10 | import { TreeAdapter } from "cx/ui"; 11 | 12 | import Controller from "./Controller"; 13 | 14 | export default ( 15 | 16 | 17 |
18 | Loading... 19 |
20 |
21 |

22 | 23 |

24 |

25 |

26 |

27 | 28 | 29 | ); 30 | -------------------------------------------------------------------------------- /app/routes/item/Controller.js: -------------------------------------------------------------------------------- 1 | import { Controller } from "cx/ui"; 2 | import { fetchItem } from "../../api"; 3 | 4 | export default class extends Controller { 5 | onInit() { 6 | this.load(); 7 | this.scrollToTop(); 8 | } 9 | 10 | scrollToTop() { 11 | let scrollEl = document.scrollingElement || document.documentElement; 12 | scrollEl.scrollTop = 0; 13 | } 14 | 15 | load(e) { 16 | if (e) 17 | e.preventDefault(); 18 | 19 | let id = this.store.get("$root.url").substring("~/item/".length); 20 | if (this.store.get('item.status') != 'ok') 21 | this.store.set('status', 'loading'); 22 | 23 | fetchItem(id) 24 | .then(item => { 25 | this.store.set("item", item); 26 | this.store.set('status', 'ok'); 27 | }) 28 | .catch(e => { 29 | console.error(e); 30 | this.store.set('status', 'error'); 31 | }) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /config/webpack.dev.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'), 2 | merge = require('webpack-merge'), 3 | common = require('./webpack.config'); 4 | 5 | var specific = { 6 | module: { 7 | loaders: [{ 8 | test: /\.scss$/, 9 | loaders: ["style-loader", "css-loader", "sass-loader"] 10 | }, { 11 | test: /\.css$/, 12 | loader: ["style-loader", "css-loader"] 13 | }] 14 | }, 15 | plugins: [ 16 | new webpack.DefinePlugin({ 17 | 'process.env.NODE_ENV': JSON.stringify('development') 18 | }), 19 | new webpack.HotModuleReplacementPlugin() 20 | ], 21 | output: { 22 | publicPath: '/' 23 | }, 24 | devtool: 'eval', 25 | devServer: { 26 | hot: true, 27 | port: 8088, 28 | noInfo: false, 29 | inline: true, 30 | historyApiFallback: true 31 | } 32 | }; 33 | 34 | module.exports = merge(common, specific); 35 | -------------------------------------------------------------------------------- /app/layout/index.js: -------------------------------------------------------------------------------- 1 | import { HtmlElement, Link, Icon } from "cx/widgets"; 2 | import { ContentPlaceholder } from "cx/ui"; 3 | import Controller from "./Controller"; 4 | 5 | export default ( 6 | 7 |
8 |
9 |
10 | 11 |
12 |
13 |
14 |
15 |
16 |

HN

17 | Top 18 | New 19 | Show 20 | Ask 21 | Jobs 22 | 31 |
32 |
33 |
34 |
35 | 36 | ); 37 | -------------------------------------------------------------------------------- /app/api/firebase-rest.js: -------------------------------------------------------------------------------- 1 | let baseUrl ='https://hacker-news.firebaseio.com/v0'; 2 | 3 | const fetchJSON = path => { 4 | return fetch(`${baseUrl}/${path}.json`) 5 | .then(r => { 6 | if (!r.ok) 7 | throw new Error(`Invalid response received. Status ${r.status} - ${r.statusText}`); 8 | return r; 9 | }) 10 | .then(x => x.json()); 11 | }; 12 | 13 | export function fetchItem(id) { 14 | return fetchJSON(`item/${id}`); 15 | } 16 | 17 | export function fetchStories(channel = "top", page = 1, pageSize = 30) { 18 | return fetchJSON(channel + `stories?limitToFirst=${page * pageSize}`) 19 | .then(snapshot => 20 | snapshot 21 | .val() 22 | .map(id => ({ 23 | id, 24 | title: "Loading" 25 | })) 26 | .slice((page - 1) * pageSize) 27 | ); 28 | } 29 | 30 | export function watchStories(channel = "top", callback) { 31 | fetchJSON(channel + "stories") 32 | .then(callback); 33 | 34 | let timer = setInterval(() => { 35 | fetchJSON(channel + "stories") 36 | .then(callback); 37 | }, 60 * 1000); 38 | 39 | return () => { 40 | clearInterval(timer); 41 | }; 42 | } 43 | -------------------------------------------------------------------------------- /app/api/firebase.js: -------------------------------------------------------------------------------- 1 | import Firebase from "firebase/app"; 2 | import "firebase/database"; 3 | 4 | Firebase.initializeApp({ 5 | databaseURL: "https://hacker-news.firebaseio.com" 6 | }); 7 | 8 | let api = Firebase.database().ref("/v0"); 9 | 10 | export function fetchItem(id) { 11 | return api 12 | .child(`item/${id}`) 13 | .once("value") 14 | .then(x => x.val()); 15 | } 16 | 17 | export function fetchStories(channel = "top", page = 1, pageSize = 30) { 18 | return api 19 | .child(channel + "stories") 20 | .limitToFirst(page * pageSize) 21 | .once("value") 22 | .then(snapshot => 23 | snapshot 24 | .val() 25 | .map(id => ({ 26 | id, 27 | title: "Loading" 28 | })) 29 | .slice((page - 1) * pageSize) 30 | ); 31 | } 32 | 33 | export function watchStories(channel = "top", callback) { 34 | let subscribedCallback = snapshot => callback(snapshot.val()); 35 | let ref = api.child(channel + "stories"); 36 | 37 | //ref.limitToFirst(30).once('value', subscribedCallback); 38 | ref.on("value", subscribedCallback); 39 | return () => { 40 | ref.off("value", subscribedCallback); 41 | }; 42 | } 43 | -------------------------------------------------------------------------------- /app/components/InfiniteScrollAnchor.js: -------------------------------------------------------------------------------- 1 | import { VDOM, Widget } from "cx/ui"; 2 | import { 3 | findScrollableParent, 4 | throttle, 5 | browserSupportsPassiveEventHandlers 6 | } from "cx/util"; 7 | 8 | //Calculates height of the content below the bottom edge of the screen 9 | 10 | export class InfiniteScrollAnchor extends Widget { 11 | render(context, instance, key) { 12 | return ( 13 | instance.invoke("onMeasure", depth, instance)} 16 | /> 17 | ); 18 | } 19 | } 20 | 21 | class InfiniteScrollAnchorComponent extends VDOM.Component { 22 | render() { 23 | return ( 24 |
{ 26 | this.el = el; 27 | }} 28 | /> 29 | ); 30 | } 31 | 32 | componentDidMount() { 33 | const scrollableParent = findScrollableParent(this.el); 34 | 35 | this.onScroll = throttle(() => { 36 | let depth = 37 | scrollableParent.scrollHeight - 38 | scrollableParent.scrollTop - 39 | scrollableParent.offsetHeight; 40 | this.props.onMeasure(depth); 41 | }, 100); 42 | 43 | window.addEventListener( 44 | "scroll", 45 | this.onScroll, 46 | browserSupportsPassiveEventHandlers() ? { passive: true } : false 47 | ); 48 | } 49 | 50 | componentWillUnmount() { 51 | window.removeEventListener("scroll", this.onScroll); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /app/index.js: -------------------------------------------------------------------------------- 1 | import { Store } from "cx/data"; 2 | import { History, Widget, startAppLoop } from "cx/ui"; 3 | import { Timing, Debug } from "cx/util"; 4 | //css 5 | import "./index.scss"; 6 | 7 | import App from './routes'; 8 | 9 | export default function () { 10 | //store 11 | const store = new Store(); 12 | 13 | //webpack (HMR) 14 | if (module.hot) { 15 | // accept itself 16 | module.hot.accept(); 17 | 18 | // remember data on dispose 19 | module.hot.dispose(function (data) { 20 | data.state = store.getData(); 21 | if (stop) stop(); 22 | }); 23 | 24 | //apply data on hot replace 25 | if (module.hot.data) store.load(module.hot.data.state); 26 | } 27 | 28 | //routing 29 | //Url.setBaseFromScript("app.js"); 30 | History.connect(store, "url"); 31 | 32 | //debug 33 | Widget.resetCounter(); 34 | Timing.enable("app-loop"); 35 | Debug.enable("app-data"); 36 | 37 | //app loop 38 | //import Routes from "./routes"; 39 | //import AppLayout from "./layout"; 40 | 41 | // let app = 42 | // System.import("./routes").then(m=>m.default)} 46 | // /> 47 | // ; 48 | 49 | 50 | let stop = startAppLoop(document.getElementById("app"), store, App); 51 | 52 | // service worker 53 | if (location.protocol == "https:" && navigator.serviceWorker) { 54 | navigator.serviceWorker.register("/service-worker.js"); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CxJS Hacker News 2 | 3 | This is a sample Progressive Web Application (PWA) built using 4 | CxJS, preact, firebase, Babel and webpack. 5 | CxJS is commonly used 6 | to build large web applications which might be slow to start due to 7 | large amount of JavaScript that needs to be loaded. This application 8 | demonstrates the application shell architecture which allows fast startup 9 | due to incremental code loading. 10 | 11 | ## Hosting 12 | 13 | Live at https://hn.cxjs.io. 14 | 15 | Hosting is provided by [Netlify](https://www.netlify.com/), which also provides a free https certificate. 16 | 17 | ## Getting Started 18 | 19 | Node.js 6+ is required. 20 | 21 | 1. Install packages using `yarn install` or `npm install`. 22 | 23 | 2. Start the app using `yarn start` or `npm start` 24 | 25 | 3. Use `yarn run build` to create a deployment package 26 | 27 | ## App Features 28 | 29 | * Top stories in multiple categories 30 | * Infinite scrolling of stories beyond top 30 31 | * Comments with an option to expand replies 32 | 33 | ## Stack 34 | 35 | * preact-compat - small-size React replacement 36 | * firebase - HN API access and real-time updates 37 | * CxJS: 38 | * app layout 39 | * state management 40 | * controllers 41 | * pushState navigation 42 | * custom components (infinite scrolling) 43 | 44 | ## Tools 45 | 46 | * babel - ES transpilation 47 | * webpack - code-splitting, production bundling, service-worker 48 | * prettier - code formatting 49 | 50 | ## License 51 | 52 | This application is a part of [the CxJS framework](https://cxjs.io). Please visit our website for more information 53 | on [CxJS licensing](https://cxjs.io). 54 | -------------------------------------------------------------------------------- /app/layout/index.scss: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | height: 100%; 7 | overflow-y: scroll; 8 | } 9 | 10 | main { 11 | margin-top: 50px; 12 | display: block; 13 | } 14 | 15 | header { 16 | position: fixed; 17 | top: 0; 18 | left: 0; 19 | right: 0; 20 | background: #ff6600; 21 | padding: 5px; 22 | color: white; 23 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); 24 | 25 | h1 { 26 | margin: 0 5px 0 0; 27 | display: block; 28 | 29 | .cxb-link { 30 | font-size: 24px; 31 | line-height: 32px; 32 | color: white; 33 | padding: 0; 34 | 35 | &:hover { 36 | text-decoration: none; 37 | } 38 | } 39 | } 40 | 41 | .cxb-link { 42 | color: rgba(255, 255, 255, 1); 43 | font-size: 16px; 44 | line-height: 22px; 45 | //margin: 0 5px; 46 | padding: 5px; 47 | 48 | &:hover { 49 | text-decoration: none; 50 | color: rgba(255, 255, 255, 0.9); 51 | } 52 | 53 | &.cxs-active { 54 | color: white; 55 | font-weight: 500; 56 | } 57 | } 58 | 59 | .content { 60 | display: flex; 61 | align-items: center; 62 | } 63 | 64 | .cx-logo { 65 | color: white; 66 | display: block; 67 | margin-left: auto; 68 | margin-right: 5px; 69 | line-height: 32px; 70 | 71 | .cxb-icon { 72 | width: 32px; 73 | height: 32px; 74 | } 75 | } 76 | } 77 | 78 | .center { 79 | max-width: 1000px; 80 | margin: auto; 81 | 82 | @media screen and (max-width: 1000px) { 83 | margin: 4px; 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cxjs-hn", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "start": "webpack-dev-server --config config/webpack.dev.js --open", 8 | "build": "webpack --config config/webpack.prod.js", 9 | "format": "prettier \"+(app)/**/*.js\" --write --use-tabs" 10 | }, 11 | "keywords": [], 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "babel-polyfill": "^6.23.0", 16 | "cx": "^17.7.10", 17 | "cx-preact": "^17.7.1", 18 | "cx-react": "^17.4.1", 19 | "firebase": "^4.1.3", 20 | "preact": "^8.2.1", 21 | "preact-compat": "^3.16.0", 22 | "react": "^15.6.1", 23 | "react-dom": "^15.6.1", 24 | "whatwg-fetch": "^2.0.3" 25 | }, 26 | "devDependencies": { 27 | "babel-core": "^6.25.0", 28 | "babel-loader": "^7.1.1", 29 | "babel-plugin-syntax-jsx": "^6.8.0", 30 | "babel-preset-cx-env": "^17.6.2", 31 | "copy-webpack-plugin": "^4.0.1", 32 | "css-loader": "^0.28.4", 33 | "cx-scss-manifest-webpack-plugin": "^17.6.0", 34 | "extract-text-webpack-plugin": "^3.0.0", 35 | "file-loader": "^0.11.2", 36 | "html-webpack-plugin": "^2.29.0", 37 | "json-loader": "^0.5.7", 38 | "node-sass": "^4.14.1", 39 | "prettier": "^1.5.3", 40 | "sass-loader": "^6.0.6", 41 | "script-ext-html-webpack-plugin": "^1.8.5", 42 | "style-ext-html-webpack-plugin": "^3.4.1", 43 | "style-loader": "^0.18.2", 44 | "sw-precache-webpack-plugin": "^0.11.4", 45 | "webpack": "^3.3.0", 46 | "webpack-bundle-analyzer": "^2.8.3", 47 | "webpack-dev-server": "^2.6.1", 48 | "webpack-merge": "^4.1.0" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /config/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'), 2 | HtmlWebpackPlugin = require('html-webpack-plugin'), 3 | CxScssManifestPlugin = require('cx-scss-manifest-webpack-plugin'), 4 | merge = require('webpack-merge'), 5 | path = require('path'), 6 | babelCfg = require("./babel.config"), 7 | p = p => path.join(__dirname, '../', p || '') 8 | 9 | module.exports = { 10 | resolve: { 11 | //uncomment if linked npm deps are used 12 | // symlinks: false, 13 | // modules: [p('node_modules')], 14 | 15 | alias: { 16 | app: p("app"), 17 | //uncomment the line below to alias cx-react to cx-preact or some other React replacement library 18 | 'cx-react': 'cx-preact' 19 | } 20 | }, 21 | 22 | module: { 23 | loaders: [{ 24 | test: /\.js$/, 25 | //add here any ES6 based library 26 | include: /(app|cx|cx-preact|cx-react)[\\\/]/, 27 | loader: 'babel-loader', 28 | query: babelCfg 29 | }, { 30 | test: /\.(png|jpg)/, 31 | loader: 'file-loader' 32 | }] 33 | }, 34 | entry: { 35 | //vendor: ['cx-react', p('app/polyfill.js')], 36 | app: [ 37 | p('app/entry.js') 38 | ] 39 | }, 40 | output: { 41 | path: p("dist"), 42 | filename: "[name].js" 43 | }, 44 | plugins: [ 45 | // new webpack.optimize.CommonsChunkPlugin({ 46 | // name: "vendor" 47 | // }), 48 | new HtmlWebpackPlugin({ 49 | template: p('app/index.html') 50 | }), 51 | // new CxScssManifestPlugin({ 52 | // outputPath: path.join(__dirname, '../app/manifest.scss') 53 | // }), 54 | ] 55 | }; 56 | 57 | 58 | -------------------------------------------------------------------------------- /app/routes/item/index.scss: -------------------------------------------------------------------------------- 1 | .articles { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .article { 8 | background: white; 9 | padding: 20px 100px 20px 20px; 10 | box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1); 11 | transition: all 0.2s; 12 | position: relative; 13 | //opacity: 0; 14 | animation: appear 0.1s; 15 | animation-fill-mode: both; 16 | 17 | &:hover { 18 | box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1); 19 | //margin-top: -3px; 20 | //padding-bottom: 23px; 21 | } 22 | 23 | h3 { 24 | font-weight: 500; 25 | font-size: 16px; 26 | margin: 0; 27 | } 28 | 29 | a { 30 | color: black; 31 | 32 | } 33 | 34 | p { 35 | margin: 5px 0 0; 36 | color: gray; 37 | } 38 | 39 | .comments-no { 40 | position: absolute; 41 | right: 0; 42 | top: 50%; 43 | margin-top: -24px; 44 | width: 100px; 45 | text-align: center; 46 | 47 | span { 48 | font-size: 20px; 49 | font-weight: 500; 50 | } 51 | 52 | a { 53 | color: gray; 54 | 55 | &:hover { 56 | color: inherit; 57 | text-decoration: none; 58 | } 59 | } 60 | } 61 | 62 | //@for $i from 1 through 30 { 63 | // &:nth-child(#{$i}) { 64 | // animation-delay: $i * 0.05s; 65 | // } 66 | //} 67 | } 68 | 69 | @keyframes appear { 70 | 0% { 71 | opacity: 0; 72 | transform: scale(0.9); 73 | } 74 | 75 | 100% { 76 | opacity: 1; 77 | transform: none; 78 | } 79 | } 80 | 81 | @keyframes appear-top { 82 | 0% { 83 | opacity: 0; 84 | transform: translateY(-100px); 85 | } 86 | 87 | 100% { 88 | opacity: 1; 89 | transform: none; 90 | } 91 | } 92 | 93 | .loading { 94 | padding: 20px; 95 | } 96 | 97 | .comments { 98 | list-style: none; 99 | margin: 0; 100 | padding: 0; 101 | overflow-anchor: none; 102 | } 103 | 104 | .comment { 105 | background: white; 106 | padding: 20px; 107 | border-top: 1px solid rgba(0, 0, 0, 0.05); 108 | 109 | transition: all 0.4s; 110 | position: relative; 111 | } -------------------------------------------------------------------------------- /app/routes/user/index.scss: -------------------------------------------------------------------------------- 1 | .articles { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .article { 8 | background: white; 9 | padding: 20px 100px 20px 20px; 10 | box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1); 11 | transition: all 0.2s; 12 | position: relative; 13 | //opacity: 0; 14 | animation: appear 0.1s; 15 | animation-fill-mode: both; 16 | 17 | &:hover { 18 | box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1); 19 | //margin-top: -3px; 20 | //padding-bottom: 23px; 21 | } 22 | 23 | h3 { 24 | font-weight: 500; 25 | font-size: 16px; 26 | margin: 0; 27 | } 28 | 29 | a { 30 | color: black; 31 | 32 | } 33 | 34 | p { 35 | margin: 5px 0 0; 36 | color: gray; 37 | } 38 | 39 | .comments-no { 40 | position: absolute; 41 | right: 0; 42 | top: 50%; 43 | margin-top: -24px; 44 | width: 100px; 45 | text-align: center; 46 | 47 | span { 48 | font-size: 20px; 49 | font-weight: 500; 50 | } 51 | 52 | a { 53 | color: gray; 54 | 55 | &:hover { 56 | color: inherit; 57 | text-decoration: none; 58 | } 59 | } 60 | } 61 | 62 | //@for $i from 1 through 30 { 63 | // &:nth-child(#{$i}) { 64 | // animation-delay: $i * 0.05s; 65 | // } 66 | //} 67 | } 68 | 69 | @keyframes appear { 70 | 0% { 71 | opacity: 0; 72 | transform: scale(0.9); 73 | } 74 | 75 | 100% { 76 | opacity: 1; 77 | transform: none; 78 | } 79 | } 80 | 81 | @keyframes appear-top { 82 | 0% { 83 | opacity: 0; 84 | transform: translateY(-100px); 85 | } 86 | 87 | 100% { 88 | opacity: 1; 89 | transform: none; 90 | } 91 | } 92 | 93 | .loading { 94 | padding: 20px; 95 | } 96 | 97 | .comments { 98 | list-style: none; 99 | margin: 0; 100 | padding: 0; 101 | overflow-anchor: none; 102 | } 103 | 104 | .comment { 105 | background: white; 106 | padding: 20px; 107 | border-top: 1px solid rgba(0, 0, 0, 0.05); 108 | 109 | transition: all 0.4s; 110 | position: relative; 111 | } -------------------------------------------------------------------------------- /app/routes/default/index.scss: -------------------------------------------------------------------------------- 1 | .articles { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .article { 8 | background: white; 9 | padding: 20px 100px 20px 20px; 10 | box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1); 11 | transition: all 0.2s; 12 | position: relative; 13 | @media screen and (min-width: 700px) { 14 | animation: appear 0.1s; 15 | animation-fill-mode: both; 16 | } 17 | 18 | &:hover { 19 | box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1); 20 | //margin-top: -3px; 21 | //padding-bottom: 23px; 22 | } 23 | 24 | h3 { 25 | font-weight: 500; 26 | font-size: 16px; 27 | margin: 0; 28 | } 29 | 30 | a { 31 | color: black; 32 | } 33 | 34 | p { 35 | margin: 5px 0 0; 36 | } 37 | 38 | .comments-no { 39 | position: absolute; 40 | right: 0; 41 | top: 50%; 42 | margin-top: -24px; 43 | width: 100px; 44 | text-align: center; 45 | 46 | span { 47 | font-size: 20px; 48 | font-weight: 500; 49 | } 50 | 51 | a { 52 | opacity: 0.9; 53 | 54 | &:hover { 55 | opacity: 1; 56 | //color: inherit; 57 | text-decoration: none; 58 | } 59 | } 60 | } 61 | } 62 | 63 | @keyframes appear { 64 | 0% { 65 | opacity: 0; 66 | transform: scale(0.9) translateY(-200px); 67 | } 68 | 69 | 100% { 70 | opacity: 1; 71 | transform: none; 72 | } 73 | } 74 | 75 | @keyframes appear-top { 76 | 0% { 77 | opacity: 0; 78 | transform: translateY(-100px); 79 | } 80 | 81 | 100% { 82 | opacity: 1; 83 | transform: none; 84 | } 85 | } 86 | 87 | .loading { 88 | padding: 20px; 89 | } 90 | 91 | .comments { 92 | list-style: none; 93 | margin: 0; 94 | padding: 0; 95 | overflow-anchor: none; 96 | } 97 | 98 | .comment { 99 | background: white; 100 | padding: 20px; 101 | border-top: 1px solid rgba(0, 0, 0, 0.05); 102 | overflow-x: auto; 103 | 104 | transition: all 0.4s; 105 | position: relative; 106 | } 107 | 108 | .user { 109 | font-style: italic; 110 | color: inherit; 111 | } 112 | 113 | .error { 114 | padding: 1rem; 115 | border-left: 2px solid red; 116 | background: white; 117 | } 118 | -------------------------------------------------------------------------------- /app/routes/default/Controller.js: -------------------------------------------------------------------------------- 1 | import { Controller } from "cx/ui"; 2 | import { fetchStories } from "../../api"; 3 | 4 | let scrollState = null; 5 | 6 | export default class extends Controller { 7 | onInit() { 8 | let now = Date.now(); 9 | //bust cache every 10 minutes 10 | if ( 11 | !this.store.get("cached") || 12 | now - this.store.get("cached") > 10 * 60 * 1000 13 | ) { 14 | this.store.set("stories", []); 15 | this.store.set("page", 0); 16 | this.store.set("nextPage", 1); 17 | this.store.set("cached", now); 18 | } 19 | this.scrollToTop(); 20 | this.addTrigger("load", ["nextPage"], ::this.load, true); 21 | } 22 | 23 | scrollToTop() { 24 | let scrollEl = document.scrollingElement || document.documentElement; 25 | 26 | if (scrollState && scrollState.url == this.store.get("$root.url")) 27 | scrollEl.scrollTop = scrollState.top; 28 | else scrollEl.scrollTop = 0; 29 | } 30 | 31 | saveScrollState() { 32 | let scrollEl = document.scrollingElement || document.documentElement; 33 | scrollState = { 34 | top: scrollEl.scrollTop, 35 | url: this.store.get("$root.url"), 36 | }; 37 | } 38 | 39 | reload(e) { 40 | if (e) e.preventDefault(); 41 | 42 | this.load(); 43 | } 44 | 45 | load() { 46 | let channel = this.store.get("$root.url").substring(2) || "news"; 47 | let page = this.store.get("nextPage"); 48 | if (page == this.store.get("page")) return; 49 | 50 | if (this.store.get("status") != "ok") this.store.set("status", "loading"); 51 | 52 | fetchStories(channel, page) 53 | .then((moreStories) => { 54 | this.store.update("stories", (stories) => [ 55 | ...stories, 56 | ...moreStories, 57 | ]); 58 | this.store.set("status", "ok"); 59 | this.store.set("page", page); 60 | }) 61 | .catch((e) => { 62 | console.error(e); 63 | if (this.store.get("status") != "ok") 64 | this.store.set("status", "error"); 65 | else { 66 | //display an error overlay? 67 | } 68 | }); 69 | } 70 | 71 | loadMore(depth) { 72 | //let status = this.store.get("status"); 73 | let stories = this.store.get("stories"); 74 | if (stories.length > 0 && depth < 2000) 75 | this.store.set("nextPage", this.store.get("page") + 1); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /config/webpack.prod.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'), 2 | ExtractTextPlugin = require("extract-text-webpack-plugin"), 3 | CopyWebpackPlugin = require('copy-webpack-plugin'), 4 | SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin'), 5 | StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin'), 6 | ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'), 7 | BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin, 8 | merge = require('webpack-merge'), 9 | common = require('./webpack.config'), 10 | path = require('path'); 11 | 12 | var sass = new ExtractTextPlugin({ 13 | filename: "app.css", 14 | allChunks: true 15 | }); 16 | 17 | var specific = { 18 | module: { 19 | loaders: [{ 20 | test: /\.scss$/, 21 | loaders: sass.extract(['css-loader', 'sass-loader']) 22 | }, { 23 | test: /\.css$/, 24 | loaders: sass.extract(['css-loader']) 25 | }] 26 | }, 27 | 28 | plugins: [ 29 | new webpack.DefinePlugin({ 30 | 'process.env.NODE_ENV': JSON.stringify('production') 31 | }), 32 | new SWPrecacheWebpackPlugin({ 33 | staticFileGlobsIgnorePatterns: [/_redirects/], 34 | runtimeCaching: [{ 35 | urlPattern: /^https:\/\/api\.hackerwebapp\.com/, 36 | handler: 'networkFirst' 37 | }] 38 | }), 39 | new webpack.optimize.ModuleConcatenationPlugin(), 40 | new webpack.optimize.UglifyJsPlugin(), 41 | sass, 42 | new StyleExtHtmlWebpackPlugin({ 43 | minify: true 44 | }), 45 | new ScriptExtHtmlWebpackPlugin({ 46 | // defaultAttribute: 'async', 47 | // async: /\.js$/, 48 | // preload: { 49 | // test: /\.js$/, 50 | // chunks: 'async' 51 | // }, 52 | inline: ['app.js'] 53 | }), 54 | new CopyWebpackPlugin([{ 55 | from: path.join(__dirname, '../assets'), 56 | to: path.join(__dirname, '../dist/assets'), 57 | }, { 58 | from: path.resolve(__dirname, './netlify.redirects'), 59 | to: '_redirects', 60 | toType: 'file' 61 | }]), 62 | //new BundleAnalyzerPlugin() 63 | ], 64 | 65 | output: { 66 | publicPath: '/' 67 | } 68 | }; 69 | 70 | module.exports = merge(common, specific); 71 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CxJS Hacker News PWA 8 | 9 | 10 | 11 | 12 |
13 | Logo 18 |
19 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /app/routes/default/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | HtmlElement, 3 | Link, 4 | Repeater, 5 | Text, 6 | Icon, 7 | PureContainer 8 | } from "cx/widgets"; 9 | import { Format } from "cx/util"; 10 | import { InfiniteScrollAnchor } from "../../components/InfiniteScrollAnchor"; 11 | 12 | Format.register("age", v => { 13 | let value = Date.now() / 1000 - v; 14 | if (value > 1.5 * 86400) 15 | return `${Math.round(value / 86400).toFixed(0)} days ago`; 16 | 17 | if (value > 86400) return `a day ago`; 18 | 19 | if (value > 5400) return `${Math.round(value / 3600).toFixed(0)} hours ago`; 20 | 21 | if (value > 3600) return `an hour ago`; 22 | 23 | if (value > 90) return `${Math.round(value / 60).toFixed(0)} minutes ago`; 24 | 25 | if (value > 60) return `a minute ago`; 26 | 27 | return `${value.toFixed(0)} seconds ago`; 28 | }); 29 | 30 | import Controller from "./Controller"; 31 | 32 | export default ( 33 | 34 | 35 |
36 | Loading... 37 |
38 |
39 | Error occurred while loading article. Please verify your Internet connection and 40 | retry. 41 |
42 | 90 | 91 | 92 | 93 | ); 94 | -------------------------------------------------------------------------------- /app/manifest.scss: -------------------------------------------------------------------------------- 1 | //THIS FILE IS AUTO-GENERATED USING cx-scss-manifest-webpack-plugin 2 | 3 | $cx-include-all: false; 4 | 5 | @include cx-widgets( 6 | "cx/data/Binding", 7 | "cx/data/ExposedRecordView", 8 | "cx/data/ExposedValueView", 9 | "cx/data/Expression", 10 | "cx/data/ReadOnlyDataView", 11 | "cx/data/Store", 12 | "cx/data/StringTemplate", 13 | "cx/data/StructuredSelector", 14 | "cx/data/View", 15 | "cx/data/ZoomIntoPropertyView", 16 | "cx/data/computable", 17 | "cx/data/createStructuredSelector", 18 | "cx/data/expression", 19 | "cx/data/getSelector", 20 | "cx/data/sorter", 21 | "cx/ui/ArrayAdapter", 22 | "cx/ui/CSSHelper", 23 | "cx/ui/Component", 24 | "cx/ui/ContentPlaceholder", 25 | "cx/ui/Controller", 26 | "cx/ui/Cx", 27 | "cx/ui/DataAdapter", 28 | "cx/ui/History", 29 | "cx/ui/Instance", 30 | "cx/ui/Layout", 31 | "cx/ui/PureContainer", 32 | "cx/ui/RenderingContext", 33 | "cx/ui/Repeater", 34 | "cx/ui/Rescope", 35 | "cx/ui/StaticText", 36 | "cx/ui/Text", 37 | "cx/ui/TreeAdapter", 38 | "cx/ui/Url", 39 | "cx/ui/VDOM", 40 | "cx/ui/Widget", 41 | "cx/ui/batchUpdates", 42 | "cx/ui/batchUpdatesAndNotify", 43 | "cx/ui/contentAppend", 44 | "cx/ui/exploreChildren", 45 | "cx/ui/getContent", 46 | "cx/ui/getContentArray", 47 | "cx/ui/isBatchingUpdates", 48 | "cx/ui/notifyBatchedUpdateCompleted", 49 | "cx/ui/notifyBatchedUpdateStarting", 50 | "cx/ui/preventFocus", 51 | "cx/ui/startAppLoop", 52 | "cx/util/Console", 53 | "cx/util/Debug", 54 | "cx/util/Format", 55 | "cx/util/GlobalCacheIdentifier", 56 | "cx/util/SubscriberList", 57 | "cx/util/Timing", 58 | "cx/util/appDataFlag", 59 | "cx/util/appLoopFlag", 60 | "cx/util/browserSupportsPassiveEventHandlers", 61 | "cx/util/cleanupFlag", 62 | "cx/util/closest", 63 | "cx/util/closestParent", 64 | "cx/util/debounce", 65 | "cx/util/debug", 66 | "cx/util/deprecatedFlag", 67 | "cx/util/destroyFlag", 68 | "cx/util/expandFatArrows", 69 | "cx/util/findFirst", 70 | "cx/util/findScrollableParent", 71 | "cx/util/innerTextTrim", 72 | "cx/util/isDigit", 73 | "cx/util/isFocusable", 74 | "cx/util/isSelfOrDescendant", 75 | "cx/util/isTouchDevice", 76 | "cx/util/isTouchEvent", 77 | "cx/util/now", 78 | "cx/util/parseStyle", 79 | "cx/util/prepareFlag", 80 | "cx/util/processDataFlag", 81 | "cx/util/quoteStr", 82 | "cx/util/renderFlag", 83 | "cx/util/shouldUpdateFlag", 84 | "cx/util/throttle", 85 | "cx/util/vdomRenderFlag", 86 | "cx/widgets/Button", 87 | "cx/widgets/HtmlElement", 88 | "cx/widgets/Icon", 89 | "cx/widgets/Link", 90 | "cx/widgets/LinkButton", 91 | "cx/widgets/Sandbox", 92 | "cx/widgets/clearIcons", 93 | "cx/widgets/registerIcon", 94 | "cx/widgets/registerIconFactory", 95 | "cx/widgets/renderIcon", 96 | "cx/widgets/restoreDefaultIcons", 97 | "cx/widgets/tooltipMouseLeave", 98 | "cx/widgets/tooltipMouseMove", 99 | "cx/widgets/tooltipParentDidMount", 100 | "cx/widgets/tooltipParentWillReceiveProps", 101 | "cx/widgets/tooltipParentWillUnmount", 102 | "cx/widgets/unregisterIcon", 103 | "cx/widgets/yesNo" 104 | ); 105 | -------------------------------------------------------------------------------- /app/routes/item/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | HtmlElement, 3 | Link, 4 | Repeater, 5 | Text, 6 | Icon, 7 | PureContainer 8 | } from "cx/widgets"; 9 | import { Format } from "cx/util"; 10 | import { TreeAdapter } from "cx/ui"; 11 | 12 | import Controller from "./Controller"; 13 | 14 | export default ( 15 | 16 | 17 |
18 | Loading... 19 |
20 |
21 | Error occurred while loading article. Please verify your Internet connection and 22 | retry. 23 |
24 |
25 | 61 |
62 | 102 | 103 | 104 | ); 105 | -------------------------------------------------------------------------------- /LICENSE-THIRD-PARTY.md: -------------------------------------------------------------------------------- 1 | # Third-Party Software Licenses 2 | 3 | ### React 4 | 5 | https://github.com/facebook/react/blob/master/LICENSE 6 | 7 | BSD License 8 | 9 | For React software 10 | 11 | Copyright (c) 2013-present, Facebook, Inc. 12 | All rights reserved. 13 | 14 | Redistribution and use in source and binary forms, with or without modification, 15 | are permitted provided that the following conditions are met: 16 | 17 | * Redistributions of source code must retain the above copyright notice, this 18 | list of conditions and the following disclaimer. 19 | 20 | * Redistributions in binary form must reproduce the above copyright notice, 21 | this list of conditions and the following disclaimer in the documentation 22 | and/or other materials provided with the distribution. 23 | 24 | * Neither the name Facebook nor the names of its contributors may be used to 25 | endorse or promote products derived from this software without specific 26 | prior written permission. 27 | 28 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 29 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 30 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 31 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 32 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 33 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 34 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 35 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 36 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 37 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 38 | 39 | 40 | ### webpack 41 | 42 | https://github.com/webpack/webpack/blob/master/LICENSE 43 | 44 | (The MIT License) 45 | 46 | Copyright (c) 2012-2016 Tobias Koppers 47 | 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of this software and associated documentation files (the 50 | 'Software'), to deal in the Software without restriction, including 51 | without limitation the rights to use, copy, modify, merge, publish, 52 | distribute, sublicense, and/or sell copies of the Software, and to 53 | permit persons to whom the Software is furnished to do so, subject to 54 | the following conditions: 55 | 56 | The above copyright notice and this permission notice shall be 57 | included in all copies or substantial portions of the Software. 58 | 59 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, 60 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 61 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 62 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 63 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 64 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 65 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 66 | 67 | ### babel 68 | 69 | https://github.com/babel/babel/blob/master/LICENSE 70 | 71 | Copyright (c) 2014-2016 Sebastian McKenzie 72 | 73 | MIT License 74 | 75 | Permission is hereby granted, free of charge, to any person obtaining 76 | a copy of this software and associated documentation files (the 77 | "Software"), to deal in the Software without restriction, including 78 | without limitation the rights to use, copy, modify, merge, publish, 79 | distribute, sublicense, and/or sell copies of the Software, and to 80 | permit persons to whom the Software is furnished to do so, subject to 81 | the following conditions: 82 | 83 | The above copyright notice and this permission notice shall be 84 | included in all copies or substantial portions of the Software. 85 | 86 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 87 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 88 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 89 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 90 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 91 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 92 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 93 | 94 | ### route-parser 95 | 96 | https://github.com/rcs/route-parser/blob/master/LICENSE.md 97 | 98 | The MIT License (MIT) 99 | 100 | Copyright (c) 2014 Ryan Sorensen 101 | 102 | Permission is hereby granted, free of charge, to any person obtaining a copy 103 | of this software and associated documentation files (the "Software"), to deal 104 | in the Software without restriction, including without limitation the rights 105 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 106 | copies of the Software, and to permit persons to whom the Software is 107 | furnished to do so, subject to the following conditions: 108 | 109 | The above copyright notice and this permission notice shall be included in all 110 | copies or substantial portions of the Software. 111 | 112 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 113 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 114 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 115 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 116 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 117 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 118 | SOFTWARE. 119 | 120 | ### Preact 121 | 122 | https://github.com/developit/preact/blob/master/LICENSE 123 | 124 | The MIT License (MIT) 125 | 126 | Copyright (c) 2016 Jason Miller 127 | 128 | Permission is hereby granted, free of charge, to any person obtaining a copy 129 | of this software and associated documentation files (the "Software"), to deal 130 | in the Software without restriction, including without limitation the rights 131 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 132 | copies of the Software, and to permit persons to whom the Software is 133 | furnished to do so, subject to the following conditions: 134 | 135 | The above copyright notice and this permission notice shall be included in all 136 | copies or substantial portions of the Software. 137 | 138 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 139 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 140 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 141 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 142 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 143 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 144 | SOFTWARE. -------------------------------------------------------------------------------- /assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 22 | 24 | 43 | 47 | 48 | 50 | 51 | 53 | image/svg+xml 54 | 56 | 57 | 58 | 59 | 60 | 65 | 73 | HN 85 | 89 | 95 | 101 | 107 | 113 | 119 | 125 | 131 | 137 | 143 | 149 | 155 | 161 | 167 | 173 | 179 | 185 | 191 | 197 | 203 | 209 | 215 | 221 | 227 | 233 | 234 | 241 | 242 | 270 | 278 | 284 | 285 | --------------------------------------------------------------------------------