feat: implement mvp

Author: d3lm

content/architecture/.category

@@ -0,0 +1,4 @@
+---
+title: Architecture
+summary: This category summarizes best practices regarding architecture.
+---

content/architecture/folder-structure.md

@@ -0,0 +1,10 @@
+---
+title: Folder Structure
+---
+### Folder Structure
+
+```ts
+const foo = (bar: string) => {
+  return bar;
+};
+```

content/architecture/smart-and-dumb-components.md

@@ -0,0 +1,4 @@
+---
+title: Smart and Dumb Components
+---
+### Smart and Dumb Components

content/performance/.category

@@ -0,0 +1,4 @@
+---
+title: Performance
+summary: This category contains a list of practices which will help us boost the performance of our Angular applications. It covers different topics - from server-side pre-rendering and bundling of our applications, to runtime performance and optimization of the change detection performed by the framework.
+---

content/performance/bundling.md

@@ -0,0 +1,27 @@
+---
+title: Bundling
+source: https://github.com/mgechev/angular-performance-checklist
+author:
+  name: Minko Gechev
+  url: https://twitter.com/mgechev
+---
+### Bundling
+
+Bundling is a standard practice aiming to reduce the number of requests that the browser needs to perform in order to deliver the application requested by the user. In essence, the bundler receives as an input a list of entry points and produces one or more bundles. This way, the browser can get the entire application by performing only a few requests, instead of requesting each individual resource separately.
+
+As your application grows bundling everything into a single large bundle would again be counter productive. Explore Code Splitting techniques using Webpack.
+
+**Additional http requests will not be a concern with HTTP/2 because of the server push feature.**
+
+#### Tooling
+
+Tools which allows us to bundle our applications efficiently are:
+
+- [Angular CLI](https://github.com/angular/angular-cli) - A command line interface for Angular which makes it easy to create an application that already works, right out of the box. It already follows many best practices and focuses on performance.
+- [Webpack](https://webpack.js.org) - provides efficient bundling by performing [tree-shaking](#tree-shaking).
+- [Webpack Code Splitting](https://webpack.js.org/guides/code-splitting/) - Techniques to split your code.
+- [Webpack & http2](https://medium.com/webpack/webpack-http-2-7083ec3f3ce6#.46idrz8kb) - Need for splitting with http2.
+- [Rollup](https://github.com/rollup/rollup) - provides bundling by performing efficient tree-shaking, taking advantage of the static nature of the ES2015 modules.
+- [Google Closure Compiler](https://github.com/google/closure-compiler) - performs plenty of optimizations and provides bundling support. Originally written in Java, since recently it also has a [JavaScript version](https://www.npmjs.com/package/google-closure-compiler-js) which can be [found here](https://www.npmjs.com/package/google-closure-compiler-js).
+- [SystemJS Builder](https://github.com/systemjs/builder) - provides a single-file build for SystemJS of mixed-dependency module trees.
+- [Browserify](http://browserify.org/).

content/performance/template-whitespace.md

@@ -0,0 +1,14 @@
+---
+title: Remove Template Whitespace
+source: https://github.com/mgechev/angular-performance-checklist
+author:
+  name: Minko Gechev
+  url: https://twitter.com/mgechev
+---
+### Remove Template Whitespace
+
+Although we don't see the whitespace character (a character matching the `\s` regex) it is still represented by bytes which are transfered over the network. If we reduce the whitespace from our templates to minimum we will be respectively able to drop the bundle size of the AoT code even further.
+
+Thankfully, we don't have to do this manually. The `ComponentMetadata` interface provides the property `preserveWhitespaces` which by default has value `true`, because removing the whitespace always may influence the DOM layout. In case we set the property to `false` Angular will trim the unnecessary whitespace which will lead to further reduction of the bundle size.
+
+- [preserveWhitespaces in the Angular docs](https://angular.io/api/core/Component#preserveWhitespaces)

content/rxjs/.category

@@ -0,0 +1,4 @@
+---
+title: RxJS
+summary: This category summarizes best practices regarding RxJS.
+---

content/rxjs/caching.md

@@ -0,0 +1,4 @@
+---
+title: Caching
+---
+# Caching

content/rxjs/pipeable-operators.md

@@ -0,0 +1,4 @@
+---
+title: Pipeable Operators
+---
+### Pipeable Operators

content/rxjs/subjects.md

@@ -0,0 +1,4 @@
+---
+title: Subjects
+---
+### Subjects

content/rxjs/subscriptions.md

@@ -0,0 +1,4 @@
+---
+title: Subscriptions
+---
+### Subscriptions

package.json

@@ -15,16 +15,26 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^6.0.0",
+    "@angular/cdk": "^6.0.2",
     "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
     "@angular/core": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
+    "@angular/material": "^6.0.2",
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
     "@angular/platform-server": "^6.0.0",
     "@angular/router": "^6.0.0",
+    "@ngrx/router-store": "^6.0.0-beta.3",
+    "@ngrx/store": "^6.0.0-beta.3",
+    "@ngrx/store-devtools": "^6.0.0-beta.3",
+    "@types/node": "^10.1.2",
     "core-js": "^2.5.4",
+    "highlight.js": "^9.12.0",
+    "immer": "^1.3.0",
+    "ngrx-store-localstorage": "^5.0.0",
+    "normalize.css": "^8.0.0",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.26"
   },
@@ -34,10 +44,13 @@
     "@angular/compiler-cli": "^6.0.0",
     "@angular/language-service": "^6.0.0",
     "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
+    "@types/highlight.js": "^9.12.2",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
+    "@types/markdown-it": "^0.0.4",
+    "chalk": "^2.4.1",
     "codelyzer": "~4.2.1",
+    "gray-matter": "^4.0.1",
     "http-server": "^0.11.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
@@ -46,7 +59,9 @@
     "karma-coverage-istanbul-reporter": "~1.4.2",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "markdown-it": "^8.4.1",
     "protractor": "~5.3.0",
+    "shorthash": "^0.0.2",
     "ts-node": "^6.0.3",
     "tslint": "~5.9.1",
     "typescript": "~2.7.2"

prerender.ts

@@ -1,12 +1,14 @@
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
 import 'zone.js/dist/zone-node';
-import 'reflect-metadata';
 
 import { enableProdMode } from '@angular/core';
 import { renderModuleFactory } from '@angular/platform-server';
 import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
 
 import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
 import { join } from 'path';
+import execa = require('execa');
 
 const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(`./dist/server/main`);
 
@@ -15,6 +17,7 @@ enableProdMode();
 const ROUTES = ['/', '/checklist'];
 const DIST_FOLDER = join(process.cwd(), 'dist');
 const BROWSER_FOLDER = join(DIST_FOLDER, 'browser');
+const PORT = 4200;
 
 const index = readFileSync(join(BROWSER_FOLDER, 'index.html'), 'utf8');
 

src/app/app-routing.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
-import { AppComponent } from './app.component';
 
 const routes: Routes = [
   { path: '', loadChildren: './landing-page/landing-page.module#LandingPageModule', pathMatch: 'full' },
@@ -9,7 +8,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

src/app/app.module.ts

@@ -1,17 +1,18 @@
+import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
     BrowserModule.withServerTransition({ appId: 'angular-checklist' }),
-    AppRoutingModule
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    HttpClientModule,
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/app.server.module.ts

@@ -10,6 +10,6 @@ import { AppModule } from './app.module';
     ServerModule,
     ModuleMapLoaderModule
   ],
-  bootstrap: [AppComponent],
+  bootstrap: [AppComponent]
 })
 export class AppServerModule {}

src/app/checklist/checklist-detail-view/checklist-detail-view.component.html

@@ -0,0 +1,13 @@
+<ng-container *ngIf="item$ | async as item">
+  <!-- <header>
+    <a mat-icon-button routerLink="../">
+      <mat-icon>
+        arrow_back_ios
+      </mat-icon>
+    </a>
+    <mat-checkbox color="primary" (click)="toggleItem(item)" [checked]="item.checked"></mat-checkbox>
+    <h2>{{ item.title }}</h2>
+  </header> -->
+  <app-checklist-metadata [author]="item.author" [source]="item.source"></app-checklist-metadata>
+  <main class="content" [innerHTML]="item.content"></main>
+</ng-container>

src/app/checklist/checklist-detail-view/checklist-detail-view.component.scss

@@ -0,0 +1,63 @@
+@import '../../../scss/variables';
+@import '~@angular/material/theming';
+
+header {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  border-bottom: 1px solid gainsboro;
+  padding-bottom: 0.2rem;
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    flex: 1 0 100%;
+  }
+
+  a {
+    margin-right: 1rem;
+  }
+
+  mat-checkbox {
+    margin-right: 0.7rem;
+  }
+
+  mat-icon {
+    padding-left: 13px;
+    margin-right: 1rem;
+  }
+
+  h2 {
+    margin: 0;
+  }
+}
+
+app-checklist-metadata {
+  justify-content: flex-end;
+  margin: 10px 0;
+}
+
+main {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-size: 16px;
+  line-height: 1.5;
+  margin-top: 1.5rem;
+
+  ::ng-deep {
+    :not(pre) code {
+      margin: 0;
+      padding: 0.2em 0.4em;
+      background-color: rgba(27, 31, 35, 0.05);
+      border-radius: 3px;
+    }
+
+    a {
+      color: mat-color($primary);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

src/app/checklist/checklist-detail-view/checklist-detail-view.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { ApplicationState } from '../state';
+import { Observable } from 'rxjs';
+import { ChecklistQueries } from '../state/checklist.reducer';
+import { ChecklistItem } from '../models/checklist';
+import { Toggle } from '../state/checklist.actions';
+
+@Component({
+  selector: 'app-checklist-detail-view',
+  templateUrl: './checklist-detail-view.component.html',
+  styleUrls: ['./checklist-detail-view.component.scss']
+})
+export class ChecklistDetailViewComponent implements OnInit {
+  item$: Observable<any>;
+
+  constructor(private store: Store<ApplicationState>) {}
+
+  ngOnInit() {
+    this.item$ = this.store.pipe(select(ChecklistQueries.getSelectedItem));
+  }
+
+  toggleItem(item: ChecklistItem) {
+    this.store.dispatch(new Toggle(item));
+  }
+}

src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.css

@@ -0,0 +1,3 @@
+<p>
+  checklist-favorites-view works!
+</p>

src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.html

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-checklist-favorites-view',
+  templateUrl: './checklist-favorites-view.component.html',
+  styleUrls: ['./checklist-favorites-view.component.css']
+})
+export class ChecklistFavoritesViewComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/checklist/checklist-favorites-view/checklist-favorites-view.component.ts

@@ -0,0 +1,2 @@
+<a class="info author" [href]="author.url" *ngIf="author">{{ author.name }}</a>
+<a class="info link" [href]="source" *ngIf="source">Source</a>

src/app/checklist/checklist-item-metadata/checklist-metadata.component.html

@@ -0,0 +1,28 @@
+@import '../../../scss/variables';
+@import '~@angular/material/theming';
+
+:host {
+  display: flex;
+  font-size: 0.8rem;
+}
+
+.info {
+  display: flex;
+  align-items: center;
+  border: 1px solid mat-color($primary);
+  color: mat-color($primary);
+  padding: 4px 7px;
+  transition: background-color 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+
+  &:hover {
+    background-color: mat-color($primary, lighter, 0.3);
+  }
+
+  & + & {
+    margin-left: 0.7rem;
+  }
+
+  a {
+    color: inherit;
+  }
+}