Merge pull request #19 from skycoin/develop

Merge to master

CONTRIBUTING.md

@@ -2,13 +2,15 @@
 
 ## Markdown content
 
-Content of the CX website (except for homepage) is generated from Markdown files.
+Content of the CX website is generated from Markdown files.
 
 These files are stored in [./src/assets/content](./src/assets/content) directory.
 
 After you create a file, you can access it by going to `http://localhost:4200/<name of the file>`.
 You can also create sub pages by moving the files into directories.
 
+Content on the homepage is generated from file `home.md`.
+
 **Examples:**
 
 - Simple page
@@ -18,7 +20,6 @@ You can also create sub pages by moving the files into directories.
   - Create file `./src/assets/content/tutorial/hello-world.md`
   - It is accessible from `http://localhost:4200/tutorial/hello-world`
 
-
 ### Headers
 
 You should always start a page with `h1 (#)` header which will act as a page title.

Dockerfile

@@ -0,0 +1,17 @@
+# STEP 1, build dist
+FROM node:11-alpine as node
+
+WORKDIR /usr/src/app
+
+COPY . ./
+
+RUN npm install
+RUN npm run build
+
+# STEP 2, run it with nginx
+FROM nginx:1.15.8-alpine
+
+WORKDIR /usr/share/nginx/html
+
+COPY --from=node /usr/src/app/nginx.conf /etc/nginx/nginx.conf
+COPY --from=node /usr/src/app/dist/cx-website/ ./

nginx.conf

@@ -0,0 +1,25 @@
+worker_processes  1;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+    server {
+        listen 80;
+        server_name  localhost;
+
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        include /etc/nginx/mime.types;
+
+        gzip on;
+        gzip_min_length 1000;
+        gzip_proxied expired no-cache no-store private auth;
+        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

src/app/app-routing.module.ts

@@ -9,9 +9,9 @@ import { EditorComponent } from './components/pages/editor/editor.component';
 import { BookComponent } from './components/pages/book/book.component';
 
 export const routes: Routes = [
-  { path: '', component: HomeComponent },
+  { path: '', component: HomeComponent, canActivate: [ContentGuard] },
   { path: 'editor', component: EditorComponent },
-  { path: 'book', component: BookComponent },
+  { path: 'books/:book', component: BookComponent },
   { path: '**', component: ContentComponent, canActivate: [ContentGuard] },
 ];
 

src/app/app.component.html

@@ -1,3 +1,5 @@
 <app-header></app-header>
 
 <router-outlet></router-outlet>
+
+<app-footer></app-footer>

src/app/app.module.ts

@@ -2,8 +2,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
-  MAT_DIALOG_DEFAULT_OPTIONS, MatButtonModule,
-  MatDialogModule, MatInputModule,
+  MAT_DIALOG_DEFAULT_OPTIONS, MAT_SNACK_BAR_DEFAULT_OPTIONS, MatButtonModule,
+  MatDialogModule, MatInputModule, MatSnackBarModule,
   MatTooltipModule
 } from '@angular/material';
 import { HttpClientModule } from '@angular/common/http';
@@ -20,6 +20,7 @@ import { ExamplesComponent } from './components/pages/editor/examples/examples.c
 import { DialogComponent } from './components/layout/dialog/dialog.component';
 import { BookComponent } from './components/pages/book/book.component';
 import { SafePipe } from './pipes/safe.pipe';
+import { FooterComponent } from './components/layout/footer/footer.component';
 
 
 @NgModule({
@@ -33,7 +34,8 @@ import { SafePipe } from './pipes/safe.pipe';
     ExamplesComponent,
     DialogComponent,
     BookComponent,
-    SafePipe
+    SafePipe,
+    FooterComponent
   ],
   imports: [
     BrowserModule,
@@ -45,14 +47,16 @@ import { SafePipe } from './pipes/safe.pipe';
     MatDialogModule,
     MatInputModule,
     MatButtonModule,
+    MatSnackBarModule,
   ],
   entryComponents: [
     DialogComponent,
     ShareComponent,
     ExamplesComponent,
   ],
   providers: [
-    { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { width: '500px', hasBackdrop: true }}
+    { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { width: '500px', hasBackdrop: true }},
+    { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 3000 }},
   ],
   bootstrap: [AppComponent]
 })

src/app/components/layout/footer/footer.component.html

@@ -0,0 +1,28 @@
+<footer>
+  <div class="container">
+    <div class="links">
+      <a href="https://www.skycoin.net" target="_blank" rel="noreferrer nofollow">
+        <img src="../../assets/img/skycoin-logo.svg" alt="Skycoin" width="157">
+      </a>
+
+      <nav>
+        <a routerLink="/docs">Docs</a>
+        <a routerLink="/examples">Examples</a>
+        <a routerLink="/about">About</a>
+        <a href="https://www.skycoin.net/blog/tags/cx/" target="_blank" rel="noreferrer nofollow">Blog</a>
+      </nav>
+    </div>
+    <div class="separator"></div>
+    <div class="social">
+      <span>&copy; Skycoin.net 2019</span>
+      <div>
+        <a href="https://t.me/skycoin_cx" target="_blank" rel="noreferrer nofollow">
+          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><use xlink:href="#path0_fill" transform="translate(.04 .4)" fill="#0072FF"/><defs><path id="path0_fill" d="M6.78 14.209l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L4.74 8.86l-4.1-1.3c-.88-.25-.89-.86.2-1.3L16.81.1c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L9.6 11.86l-1.99 1.93c-.23.23-.42.42-.83.42z"/></defs></svg>
+        </a>
+        <a href="https://github.com/skycoin/cx" target="_blank" rel="noreferrer nofollow">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
+        </a>
+      </div>
+    </div>
+  </div>
+</footer>

src/app/components/layout/footer/footer.component.scss

@@ -0,0 +1,64 @@
+@import 'variables';
+
+footer {
+  background: $blue-dark;
+  padding: 90px 0 60px;
+  margin-top: -30px;
+
+  .links, .social {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .separator {
+    border-top: 1px solid hsla(0, 0%, 100%, .12);
+    margin: 30px 0;
+  }
+
+  svg {
+    margin-left: 60px;
+    width: 20px;
+    height: 20px;
+    fill: $blue;
+  }
+
+  nav {
+    a {
+      margin-left: 30px;
+      color: #616d7c;
+      text-decoration: none;
+      font-size: 14px;
+    }
+  }
+
+  .social span {
+    color: #616d7c;
+    font-size: 14px;
+  }
+}
+
+@media (max-width: map-get($bp, sm)) {
+  footer {
+    padding: 60px 0 30px;
+  }
+
+  .links {
+    padding: 0 30px;
+    flex-direction: column;
+    align-items: flex-start !important;
+
+    img {
+      margin-bottom: 30px;
+    }
+
+    a {
+      margin-left: 0 !important;
+      margin-right: 30px;
+    }
+  }
+
+  .social {
+    padding: 0 30px;
+  }
+}

src/app/components/layout/footer/footer.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/layout/footer/footer.component.ts

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

src/app/components/pages/book/book.component.html

@@ -1,3 +1,9 @@
 <div class="container">
-  <iframe src="../../../../assets/books/cx-programming-language.pdf" frameborder="0"></iframe>
+  <main *ngIf="book">
+    <div class="heading">
+      <h1>{{ book.title }}</h1>
+      <a [href]="path(book.file)" download="">Download</a>
+    </div>
+    <iframe [src]="path(book.file)" frameborder="0"></iframe>
+  </main>
 </div>

src/app/components/pages/book/book.component.scss

@@ -1,5 +1,24 @@
-iframe {
-  width: 100%;
-  height: 100vh;
-  border: none;
+@import 'variables';
+
+main {
+  padding-bottom: 0;
+
+  .heading {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+
+    h1 {
+      margin: 0;
+      font-weight: normal;
+    }
+  }
+
+  iframe {
+    width: calc(100% + 60px);
+    height: 100vh;
+    border: none;
+    margin: 0 -30px;
+  }
 }

src/app/components/pages/book/book.component.ts

@@ -1,15 +1,42 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-book',
   templateUrl: './book.component.html',
   styleUrls: ['./book.component.scss']
 })
 export class BookComponent implements OnInit {
+  book;
 
-  constructor() { }
+  readonly books = [
+    {
+      title: 'CX Programming Language',
+      route: 'cx-programming-language',
+      file: 'cx-programming-language.pdf'
+    },
+  ];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private sanitizer: DomSanitizer,
+  ) { }
 
   ngOnInit() {
+    this.route.paramMap.subscribe(map => {
+      const book = this.books.find(b => b.route === map.get('book'));
+
+      if (!book) {
+        this.router.navigate(['/']);
+      } else {
+        this.book = book;
+      }
+    });
   }
 
+  path(file: string) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(`../../../../assets/books/${file}`);
+  }
 }