diff --git a/basic/.angular-cli.json b/basic/.angular-cli.json
deleted file mode 100755
index 2b54e0e..0000000
--- a/basic/.angular-cli.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
- "project": {
- "name": "Instagram"
- },
- "apps": [
- {
- "root": "src",
- "outDir": "dist",
- "assets": [
- "assets",
- "favicon.ico"
- ],
- "index": "index.html",
- "main": "main.ts",
- "polyfills": "polyfills.ts",
- "test": "test.ts",
- "tsconfig": "tsconfig.app.json",
- "prefix": "app",
- "styles": [
- "styles.css"
- ],
- "scripts": [],
- "environmentSource": "environments/environment.ts",
- "environments": {
- "prod": "environments/environment.prod.ts",
- "dev": "environments/environment.ts"
- }
- }
- ],
- "lint": [{
- "project": "src/tsconfig.app.json"
- }],
- "defaults": {
- "styleExt": "css",
- "component": {}
- }
-}
diff --git a/basic/.editorconfig b/basic/.editorconfig
new file mode 100644
index 0000000..6e87a00
--- /dev/null
+++ b/basic/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/basic/.gitignore b/basic/.gitignore
old mode 100755
new mode 100644
index df3cf84..ee5c9d8
--- a/basic/.gitignore
+++ b/basic/.gitignore
@@ -3,34 +3,37 @@
# compiled output
/dist
/tmp
+/out-tsc
# dependencies
/node_modules
-/bower_components
# IDEs and editors
/.idea
.project
.classpath
+.c9/
*.launch
.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
-/coverage/*
+/coverage
/libpeerconnection.log
npm-debug.log
+yarn-error.log
testem.log
/typings
-# e2e
-/e2e/*.js
-/e2e/*.map
-
-#System Files
+# System Files
.DS_Store
Thumbs.db
-
-# Deploy
-.netlify
diff --git a/basic/.npmrc b/basic/.npmrc
new file mode 100644
index 0000000..cffe8cd
--- /dev/null
+++ b/basic/.npmrc
@@ -0,0 +1 @@
+save-exact=true
diff --git a/basic/LICENSE b/basic/LICENSE
deleted file mode 100755
index 0bb0bbb..0000000
--- a/basic/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2016 Graphcool Examples
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/basic/README.md b/basic/README.md
old mode 100755
new mode 100644
index 2587525..3c9c292
--- a/basic/README.md
+++ b/basic/README.md
@@ -1,103 +1,76 @@
-# angulars-fullstack-apollo-basic
+Boilerplate for a Basic Fullstack GraphQL App with Angular 🚀 Bootstrap your fullstack GraphQL app within seconds
+Basic starter kit for a fullstack GraphQL app with Angular and Node.js - based on best practices from the GraphQL community.
-## TODO
+## Features
-- [ ] update to Apollo 2.0
-- [ ] add automatic UI updates after `createPost` mutation was performed
-- [ ] enable in [https://github.com/graphql-cli/graphql-cli/blob/master/src/cmds/create/boilerplates.ts](https://github.com/graphql-cli/graphql-cli/blob/master/src/cmds/create/boilerplates.ts)
-
-## Technologies
-
-* **Frontend**
- * [Angular](https://github.com/angular/angular): Frontend framework for building mobile and desktop web applications
- * [Apollo Client](https://github.com/apollographql/apollo-client): Fully-featured, production ready caching GraphQL client
-* **Backend**
- * [Graphcool](https://www.graph.cool): Powerful GraphQL database
- * [`graphql-yoga`](https://github.com/graphcool/graphql-yoga/): Fully-featured GraphQL server with focus on easy setup, performance & great developer experience
- * [`graphcool-binding`](https://github.com/graphcool/graphcool-binding): GraphQL binding for Graphcool services
+- **Scalable GraphQL server:** The server uses [`graphql-yoga`](https://github.com/prisma/graphql-yoga) which is based on Apollo Server & Express
+- **Pre-configured Apollo Client:** The project comes with a preconfigured setup for Apollo Client
+- **GraphQL database:** Includes GraphQL database binding to [Prisma](https://www.prismagraphql.com) (running on MySQL)
+- **Tooling**: Out-of-the-box support for [GraphQL Playground](https://github.com/prisma/graphql-playground) & [query performance tracing](https://github.com/apollographql/apollo-tracing)
+- **Extensible**: Simple and flexible [data model](./database/datamodel.graphql) – easy to adjust and extend
+- **No configuration overhead**: Preconfigured [`graphql-config`](https://github.com/prisma/graphql-config) setup
## Requirements
-You need to have the following things installed:
-
-* Node 8+
-* Graphcool CLI: `npm i -g graphcool@beta`
-* GraphQL CLI: `npm i -g graphql-cli`
-* GraphQL Playground desktop app (optional): [Download](https://github.com/graphcool/graphql-playground/releases)
+You need to have the [GraphQL CLI](https://github.com/graphql-cli/graphql-cli) installed to bootstrap your GraphQL server using `graphql create`:
-## Preview
-
-
+```sh
+npm install -g graphql-cli
+```
## Getting started
```sh
-# Bootstrap GraphQL server in directory `my-app`, based on `angular-fullstack-basic` boilerplate
+# 1. Bootstrap GraphQL server in directory `my-app`, based on `angular-fullstack-basic` boilerplate
graphql create my-app --boilerplate angular-fullstack-basic
-# Navigate into the new project's `server` directory
+# 2. When prompted, deploy the Prisma service to a _public cluster_
+
+# 3. Navigate into the `server` directory of the new project
cd my-app/server
-# Deploy the Graphcool database & start the server (runs on http://localhost:4000)
-yarn start
+# 4. Start the server
+yarn dev # runs server on http://localhost:4000, and opens GraphQL PLayground
-# Navigate back into the project's root directory and launch the Angular app
+# 5. Open a new tab in the terminal and navigate back into my-app;
+# then run the app
cd ..
-yarn start # open http://localhost:3000 in your browser
-```
-
-
-
-Alternative: Clone repo
-
-```sh
-TODO
+yarn start
```
-
-
-## Docs
-
-### Project structure
-
-#### `/server`
+## Documentation
-- [`.graphqlconfig.yml`](./server/.graphqlconfig.yml) GraphQL configuration file containing the endpoints and schema configuration. Used by the [`graphql-cli`](https://github.com/graphcool/graphql-cli) and the [GraphQL Playground](https://github.com/graphcool/graphql-playground). See [`graphql-config`](https://github.com/graphcool/graphql-config) for more information.
-- [`graphcool.yml`](./server/graphcool.yml): The root configuration file for your database service ([documentation](https://www.graph.cool/docs/1.0/reference/graphcool.yml/overview-and-example-foatho8aip)).
+### Commands
-#### `/server/database`
+* `yarn start` starts GraphQL server on `http://localhost:4000`
+* `yarn dev` starts GraphQL server on `http://localhost:4000` _and_ opens GraphQL Playground
+* `yarn playground` opens the GraphQL Playground for the `projects` from [`.graphqlconfig.yml`](./.graphqlconfig.yml)
+* `yarn prisma ` gives access to local version of Prisma CLI (e.g. `yarn prisma deploy`)
-- [`database/datamodel.graphql`](./server/database/datamodel.graphql) contains the data model that you define for the project (written in [SDL](https://blog.graph.cool/graphql-sdl-schema-definition-language-6755bcb9ce51)).
-- [`database/schema.generated.graphql`](./server/database/schema.generated.graphql) defines the **database schema**. It contains the definition of the CRUD API for the types in your data model and is generated based on your `datamodel.graphql`. **You should never edit this file manually**, but introduce changes only by altering `datamodel.graphql` and run `graphcool deploy`.
+> **Note**: We recommend that you're using `yarn dev` during development as it will give you access to the GraphQL API or your server (defined by the [application schema](./src/schema.graphql)) as well as to the Prisma API directly (defined by the [Prisma database schema](./generated/prisma.graphql)). If you're starting the server with `yarn start`, you'll only be able to access the API of the application schema.
-#### `/server/src`
+### Server structure
-- [`src/schema.graphql`](src/schema.graphql) defines your **application schema**. It contains the GraphQL API that you want to expose to your client applications.
-- [`src/index.js`](src/index.js) is the entry point of your server, pulling everything together and starting the `GraphQLServer` from [`graphql-yoga`](https://github.com/graphcool/graphql-yoga).
+
-### Common questions
-
-#### I'm getting a 'Schema could not be fetched.' error after deploying, what gives?
-
-Access to the Graphcool API is secured by a secret. This also applies to the introspection query. Using the latest version of GraphQL Playground, the `Authorization` header should automatically be setup with a proper JWT signing the secret. If that's not the case, you can follow these steps to access your API:
-
-1. Visit http://jwtbuilder.jamiekurtz.com/
-1. Replace the `Key` at the bottom of the page with your `secret` from the [`graphcool.yml`](./server/graphcool.yml#L5)
-1. Click `Create signed JWT` and copy the obtained token
-1. Now, to access the schema, use the `Authorization: Bearer ` header, or in the GraphQL Playground set it as JSON:
- ```json
- {
- "Authorization": "Bearer "
- }
- ```
-1. Reload the schema in the Playground (the _refresh_-button is located right next to the URL of the server)
-
-> Note: Currently, no content of the signed JWT is verified by the database! This will be implemented [according to this proposal](https://github.com/graphcool/framework/issues/1365) at a later stage.
+| File name 　　　　　　　　　　　　　　| Description 　　　　　　　　
+
+ Blog
+
+
+ Feed
+
+
+ Drafts
+
+
+ + Create Draft
+
+
+
+
+
diff --git a/basic/src/app/app.component.ts b/basic/src/app/app.component.ts
old mode 100755
new mode 100644
index fef5fea..c6472be
--- a/basic/src/app/app.component.ts
+++ b/basic/src/app/app.component.ts
@@ -1,11 +1,10 @@
-import { Component } from '@angular/core'
+import { Component } from '@angular/core';
@Component({
selector: 'app-root',
- template: `
-
-
- `,
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css']
})
-export class AppComponent {}
+export class AppComponent {
+ title = 'basic';
+}
diff --git a/basic/src/app/app.module.ts b/basic/src/app/app.module.ts
old mode 100755
new mode 100644
index bc92f48..ecb0b72
--- a/basic/src/app/app.module.ts
+++ b/basic/src/app/app.module.ts
@@ -1,25 +1,35 @@
-import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { RouterModule } from '@angular/router'
-import { ApolloModule } from 'apollo-angular'
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { AppComponent } from './app.component'
-import { FeedComponent } from './feed.component'
-import { NewPostComponent } from './new-post.component'
-import { routes } from './routes'
-import { provideClient } from './client'
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { GraphQLModule } from './graphql.module';
+import { HttpClientModule } from '@angular/common/http';
+import { PostComponent } from './post/post.component';
+import { FeedComponent } from './feed/feed.component';
+import { DraftsComponent } from './drafts/drafts.component';
+import { DetailComponent } from './detail/detail.component';
+import { CreateComponent } from './create/create.component';
@NgModule({
- declarations: [AppComponent, FeedComponent, NewPostComponent],
- entryComponents: [AppComponent],
+ declarations: [
+ AppComponent,
+ PostComponent,
+ FeedComponent,
+ DraftsComponent,
+ DetailComponent,
+ CreateComponent
+ ],
imports: [
BrowserModule,
- FormsModule,
ReactiveFormsModule,
- RouterModule.forRoot(routes),
- ApolloModule.forRoot(provideClient),
+ FormsModule,
+ AppRoutingModule,
+ GraphQLModule,
+ HttpClientModule
],
- bootstrap: [AppComponent],
+ providers: [],
+ bootstrap: [AppComponent]
})
-export class AppModule {}
+export class AppModule { }
diff --git a/basic/src/app/client.ts b/basic/src/app/client.ts
deleted file mode 100755
index 6a8b89f..0000000
--- a/basic/src/app/client.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { ApolloClient, createNetworkInterface } from 'apollo-client'
-
-const networkInterface = createNetworkInterface({
- uri: 'http://localhost:4000',
-})
-
-const client = new ApolloClient({ networkInterface })
-
-export function provideClient(): ApolloClient {
- return client
-}
diff --git a/basic/src/app/create/create.component.html b/basic/src/app/create/create.component.html
new file mode 100644
index 0000000..ff7d65a
--- /dev/null
+++ b/basic/src/app/create/create.component.html
@@ -0,0 +1,12 @@
+
diff --git a/basic/src/app/create/create.component.ts b/basic/src/app/create/create.component.ts
new file mode 100644
index 0000000..883bca8
--- /dev/null
+++ b/basic/src/app/create/create.component.ts
@@ -0,0 +1,58 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { Apollo } from 'apollo-angular';
+import gql from 'graphql-tag';
+
+import { DRAFTS_QUERY } from '../drafts/drafts.component';
+
+const CREATE_DRAFT_MUTATION = gql`
+ mutation CreateDraftMutation($title: String!, $text: String!) {
+ createDraft(title: $title, text: $text) {
+ id
+ title
+ text
+ }
+ }
+`;
+
+@Component({
+ selector: 'app-create',
+ templateUrl: './create.component.html',
+ styleUrls: ['./create.component.css'],
+})
+export class CreateComponent implements OnInit {
+ draftForm = new FormGroup({
+ title: new FormControl('', [Validators.required, Validators.minLength(3)]),
+ text: new FormControl('', [Validators.required, Validators.minLength(3)]),
+ });
+
+ constructor(private router: Router, private apollo: Apollo) {}
+
+ ngOnInit() {}
+
+ create() {
+ if (!this.draftForm.valid) {
+ return;
+ }
+
+ this.apollo
+ .mutate({
+ mutation: CREATE_DRAFT_MUTATION,
+ variables: {
+ title: this.draftForm.get('title').value,
+ text: this.draftForm.get('text').value,
+ },
+ update: (cache, { data }) => {
+ const { drafts } = cache.readQuery({ query: DRAFTS_QUERY });
+ cache.writeQuery({
+ query: DRAFTS_QUERY,
+ data: { drafts: drafts.concat([data.createDraft]) },
+ });
+ },
+ })
+ .subscribe(() => {
+ this.router.navigate(['/drafts']);
+ });
+ }
+}
diff --git a/basic/src/app/detail/detail.component.html b/basic/src/app/detail/detail.component.html
new file mode 100644
index 0000000..215c8c7
--- /dev/null
+++ b/basic/src/app/detail/detail.component.html
@@ -0,0 +1,19 @@
+
+ {{post.title}}
+ {{post.text}}
+
+
+ Publish
+
+
+ Delete
+
+
+
+
+
+
+
An unexpected error occured.
+
;
+ postQuery: QueryRef;
+ error$: Observable;
+ loading$: Observable;
+
+ constructor(private router: Router, private apollo: Apollo) {}
+
+ ngOnInit() {
+ this.postQuery = this.apollo.watchQuery({
+ query: POST_QUERY,
+ });
+
+ const source = this.postQuery.valueChanges.pipe(share());
+
+ this.post$ = source.pipe(pluck('data', 'post'));
+ this.loading$ = source.pipe(
+ pluck('loading'),
+ startWith(true),
+ );
+ this.error$ = source.pipe(pluck('error'));
+ }
+
+ publish(post: any) {
+ this.apollo
+ .mutate({
+ mutation: PUBLISH_MUTATION,
+ variables: {
+ id: post.id,
+ },
+ update: (cache, { data }) => {
+ const { drafts } = cache.readQuery({ query: DRAFTS_QUERY });
+ const { feed } = cache.readQuery({ query: FEED_QUERY });
+
+ cache.writeQuery({
+ query: FEED_QUERY,
+ data: { feed: feed.concat([data.publish]) },
+ });
+
+ cache.writeQuery({
+ query: DRAFTS_QUERY,
+ data: {
+ drafts: drafts.filter(draft => draft.id !== data.publish.id),
+ },
+ });
+ },
+ })
+ .subscribe(() => {
+ this.router.navigate(['/']);
+ });
+ }
+
+ delete(post: any) {
+ this.apollo
+ .mutate({
+ mutation: DELETE_MUTATION,
+ variables: {
+ id: post.id,
+ },
+ update: (cache, { data }) => {
+ if (post.isPublished) {
+ const { feed } = cache.readQuery({ query: FEED_QUERY });
+ cache.writeQuery({
+ query: FEED_QUERY,
+ data: {
+ feed: feed.filter(p => p.id !== data.deletePost.id),
+ },
+ });
+ } else {
+ const { drafts } = cache.readQuery({ query: DRAFTS_QUERY });
+ cache.writeQuery({
+ query: DRAFTS_QUERY,
+ data: {
+ drafts: drafts.filter(d => d.id !== data.deletePost.id),
+ },
+ });
+ }
+ },
+ })
+ .subscribe(() => {
+ this.router.navigate(['/']);
+ });
+ }
+}
diff --git a/basic/src/app/drafts/drafts.component.html b/basic/src/app/drafts/drafts.component.html
new file mode 100644
index 0000000..0d27c54
--- /dev/null
+++ b/basic/src/app/drafts/drafts.component.html
@@ -0,0 +1,12 @@
+
+ Drafts
+
+
+
+
+
+
An unexpected error occured.
+
;
+ draftsQuery: QueryRef;
+ error$: Observable;
+ loading$: Observable;
+
+ constructor(private apollo: Apollo) {}
+
+ ngOnInit() {
+ this.draftsQuery = this.apollo.watchQuery({
+ query: DRAFTS_QUERY,
+ });
+
+ const source = this.draftsQuery.valueChanges.pipe(share());
+
+ this.drafts$ = source.pipe(pluck('data', 'drafts'));
+ this.loading$ = source.pipe(
+ pluck('loading'),
+ startWith(true),
+ );
+ this.error$ = source.pipe(pluck('error'));
+ }
+
+ refresh() {
+ this.draftsQuery.refetch();
+ }
+}
diff --git a/basic/src/app/feed.component.ts b/basic/src/app/feed.component.ts
deleted file mode 100755
index e2e218e..0000000
--- a/basic/src/app/feed.component.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core'
-import { Apollo } from 'apollo-angular'
-import { Subscription } from 'rxjs/Subscription'
-
-import gql from 'graphql-tag'
-
-import 'rxjs/add/operator/toPromise'
-
-const FEED_QUERY = gql`
- query FeedQuery {
- feed {
- id
- description
- imageUrl
- }
- }
-`
-
-@Component({
- selector: 'app-feed',
- template: `
- + New Post
-
-
-
-
- {{post.description}}
- Delete
-
-
-
+ Feed
+
+
+
+
+
+
An unexpected error occured.
+
;
+ feedQuery: QueryRef;
+ error$: Observable;
+ loading$: Observable;
+
+ constructor(private apollo: Apollo) {}
+
+ ngOnInit() {
+ this.feedQuery = this.apollo.watchQuery({
+ query: FEED_QUERY,
+ });
+
+ const source = this.feedQuery.valueChanges.pipe(share());
+
+ this.feed$ = source.pipe(pluck('data', 'feed'));
+ this.loading$ = source.pipe(
+ pluck('loading'),
+ startWith(true),
+ );
+ this.error$ = source.pipe(pluck('error'));
+ }
+
+ refresh() {
+ this.feedQuery.refetch();
+ }
+}
diff --git a/basic/src/app/graphql.module.ts b/basic/src/app/graphql.module.ts
new file mode 100644
index 0000000..5b857b2
--- /dev/null
+++ b/basic/src/app/graphql.module.ts
@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
+import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';
+import {InMemoryCache} from 'apollo-cache-inmemory';
+
+const uri = 'http://localhost:4000';
+export function createApollo(httpLink: HttpLink) {
+ return {
+ link: httpLink.create({uri}),
+ cache: new InMemoryCache(),
+ };
+}
+
+@NgModule({
+ exports: [ApolloModule, HttpLinkModule],
+ providers: [
+ {
+ provide: APOLLO_OPTIONS,
+ useFactory: createApollo,
+ deps: [HttpLink],
+ },
+ ],
+})
+export class GraphQLModule {}
diff --git a/basic/src/app/index.ts b/basic/src/app/index.ts
deleted file mode 100755
index 24ddd9c..0000000
--- a/basic/src/app/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './app.component'
-export * from './app.module'
diff --git a/basic/src/app/new-post.component.ts b/basic/src/app/new-post.component.ts
deleted file mode 100755
index c3a059a..0000000
--- a/basic/src/app/new-post.component.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Component } from '@angular/core'
-import { Router } from '@angular/router'
-import { Apollo } from 'apollo-angular'
-
-import gql from 'graphql-tag'
-
-@Component({
- selector: 'app-new-post',
- template: `
-
-
- Post
-
-
- `,
-})
-export class NewPostComponent {
- description: string
- imageUrl: string
-
- constructor(private router: Router, private apollo: Apollo) {}
-
- postImage(): void {
- this.apollo
- .mutate({
- mutation: gql`
- mutation($description: String!, $imageUrl: String!) {
- createPost(description: $description, imageUrl: $imageUrl) {
- id
- }
- }
- `,
- variables: {
- description: this.description,
- imageUrl: this.imageUrl,
- },
- })
- .toPromise()
- .then(() => {
- this.router.navigate(['/'])
- })
- }
-}
diff --git a/basic/src/app/post/post.component.ts b/basic/src/app/post/post.component.ts
new file mode 100644
index 0000000..8e68fc3
--- /dev/null
+++ b/basic/src/app/post/post.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'app-post',
+ template: `
+
+ {{title}}
+ {{post.text}}
+
+ `,
+})
+export class PostComponent {
+ @Input()
+ post: any;
+
+ @Input()
+ isDraft = false;
+
+ get title(): string {
+ const title = this.post && this.post.title.title;
+
+ return this.isDraft ? `${title} (Draft)` : title;
+ }
+}
diff --git a/basic/src/app/routes.ts b/basic/src/app/routes.ts
deleted file mode 100755
index 18ab73c..0000000
--- a/basic/src/app/routes.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Routes } from '@angular/router'
-
-import { FeedComponent } from './feed.component'
-import { NewPostComponent } from './new-post.component'
-
-export const routes: Routes = [
- { path: '', component: FeedComponent },
- { path: 'create', component: NewPostComponent },
-]
diff --git a/basic/src/assets/.gitkeep b/basic/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/basic/src/assets/close.svg b/basic/src/assets/close.svg
new file mode 100644
index 0000000..f7f07f0
--- /dev/null
+++ b/basic/src/assets/close.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/basic/src/assets/plus.svg b/basic/src/assets/plus.svg
new file mode 100644
index 0000000..6485210
--- /dev/null
+++ b/basic/src/assets/plus.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/basic/src/browserslist b/basic/src/browserslist
new file mode 100644
index 0000000..37371cb
--- /dev/null
+++ b/basic/src/browserslist
@@ -0,0 +1,11 @@
+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11
\ No newline at end of file
diff --git a/basic/src/environments/environment.prod.ts b/basic/src/environments/environment.prod.ts
old mode 100755
new mode 100644
diff --git a/basic/src/environments/environment.ts b/basic/src/environments/environment.ts
old mode 100755
new mode 100644
index ef48989..7b4f817
--- a/basic/src/environments/environment.ts
+++ b/basic/src/environments/environment.ts
@@ -1,8 +1,16 @@
-// The file for the current environment will overwrite this one during build.
-// Different environments can be found in ./environment.{dev|prod}.ts, and
-// you can create your own and use it with the --env flag.
-// The build system defaults to the dev environment.
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
export const environment = {
- production: false,
-}
+ production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
diff --git a/basic/src/favicon.ico b/basic/src/favicon.ico
old mode 100755
new mode 100644
diff --git a/basic/src/index.html b/basic/src/index.html
old mode 100755
new mode 100644
index 6dfb002..fc9a3eb
--- a/basic/src/index.html
+++ b/basic/src/index.html
@@ -1,13 +1,14 @@
-
-
- Instacat
- Basic
+