Add Grav CMS, embed Quotes app into it

Dockerfile

@@ -8,13 +8,13 @@ RUN npm install && mkdir /ng-app && cp -r node_modules/ /ng-app
 WORKDIR /ng-app
 COPY frontend .
 
-RUN $(npm bin)/ng build --prod --build-optimizer
+RUN $(npm bin)/ng build --prod --build-optimizer --output-hashing=none
 
 FROM nginx:alpine
 
 COPY nginx/nginx.conf /etc/nginx/nginx.conf
 
-COPY --from=builder /ng-app/dist /srv/http
+COPY --from=builder /ng-app/dist /quotes/quotes/assets
 
 EXPOSE 80
 

cms/Dockerfile

@@ -0,0 +1,24 @@
+FROM alpine:latest
+
+RUN apk add --no-cache curl git yaml zip \
+    php7-fpm php7-json php7-zlib php7-simplexml php7-xml php7-pdo php7-phar \
+    php7-openssl php7-gd php7-iconv php7-mcrypt php7-session php7-zip \
+    php7-curl php7-opcache php7-ctype php7-apcu \
+    php7-intl php7-bcmath php7-dom php7-mbstring php7-xmlreader && \
+    apk add --no-cache --update musl && \
+    rm -rf /var/cache/apk/*
+
+RUN sed -i 's/;cgi.fix_pathinfo=1/cgi.fix_pathinfo=0/' /etc/php7/php.ini && \
+    sed -i 's/expose_php = On/expose_php = Off/' /etc/php7/php.ini
+
+COPY php-fpm.conf /etc/php7/php-fpm.d/zz-docker.conf
+
+COPY grav /app/
+
+WORKDIR /app
+RUN php7 bin/gpm install admin form login email
+RUN php7 bin/grav install
+
+EXPOSE 9000
+
+CMD ["php-fpm7", "--allow-to-run-as-root"]

cms/grav

@@ -0,0 +1 @@
+Subproject commit 40b475ecb988d358042ae0d33576fbce4ccda381

cms/php-fpm.conf

@@ -0,0 +1,11 @@
+[global]
+daemonize = no
+error_log = /proc/self/fd/2
+
+[www]
+user = root
+group = root
+listen = 9000
+clear_env = no
+catch_workers_output = yes
+access.log = /proc/self/fd/2

frontend/.angular-cli.json

@@ -19,7 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "styles.css"
+        "styles.css",
+        "theme.scss"
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

frontend/package.json

@@ -25,7 +25,7 @@
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "angular-file-saver": "^1.1.3",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.6",
     "hammerjs": "^2.0.8",
     "rxjs": "^5.5.6",
     "sockjs": "^0.3.19",
@@ -35,16 +35,16 @@
     "@angular/cli": "~1.7.3",
     "@angular/compiler-cli": "^5.2.0",
     "@angular/language-service": "^5.2.0",
-    "@types/jasmine": "~2.8.3",
+    "@types/jasmine": "^2.8.7",
     "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
+    "@types/node": "^6.0.109",
     "codelyzer": "^4.0.1",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~2.0.0",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
+    "karma-jasmine": "^1.1.2",
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",
     "ts-node": "~4.1.0",

frontend/src/app/quotes/quotes.component.css

@@ -12,7 +12,7 @@
 
 .spinner-container {
     width: 100%;
-    position: fixed;
+    position: absolute;
 }
 
 .spinner-container mat-spinner {

frontend/src/app/quotes/quotes.component.html

@@ -10,7 +10,7 @@
 
         <span class="spacer"></span>
 
-        <button class="export-button" mat-raised-button (click)="export()">Export</button>
+        <button class="export-button" color="primary" mat-raised-button (click)="export()">Export</button>
 
     </mat-toolbar>
 
@@ -61,7 +61,7 @@
 
     </mat-table>
 
-    <mat-paginator [length]="dataSource?.count$ | async" [pageSize]="10"
+    <mat-paginator [length]="dataSource?.count$ | async" [pageSize]="50"
-                   [pageSizeOptions]="[10, 20, 50, 100]"></mat-paginator>
+                   [pageSizeOptions]="[10, 20, 50, 100, 200]"></mat-paginator>
 
 </div>

frontend/src/app/quotes/quotes.component.ts

@@ -58,7 +58,7 @@ export class QuotesComponent implements OnInit, AfterViewInit {
 
     ngOnInit() {
         this.dataSource = new QuotesDataSource(this.quotesService);
-        this.dataSource.loadQuotes('', 'id', 'desc', 0, 10);
+        this.dataSource.loadQuotes('', 'id', 'desc', 0, 50);
     }
 
     ngAfterViewInit() {

frontend/src/app/services/quotes.service.ts

@@ -21,9 +21,9 @@ export class QuotesService {
 
     findQuotes(
         filter = '', sortBy = 'id', sortOrder = 'desc',
-        pageNumber = 0, pageSize = 10): Observable<Quotes> {
+        pageNumber = 0, pageSize = 50): Observable<Quotes> {
 
-        return this.http.get('/api/quotes', {
+        return this.http.get('/quotes/api/quotes', {
             observe: 'response',
             params: new HttpParams()
                 .set('filter', filter)

frontend/src/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>Quotes</title>
-  <base href="/">
+  <base href="/quotes/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico" sizes="16x16 32x32 48x48">

frontend/src/theme.scss

@@ -0,0 +1,48 @@
+@import '~@angular/material/theming';
+
+@include mat-core();
+
+$quotes-theme-foreground: (
+    base:              white,
+    divider:           rgba(#454d5d, 0.2),
+    dividers:          rgba(#454d5d, 0.2),
+    disabled:          $light-disabled-text,
+    disabled-button:   rgba(white, 0.3),
+    disabled-text:     $light-disabled-text,
+    hint-text:         $light-disabled-text,
+    secondary-text:    $light-secondary-text,
+    icon:              white,
+    icons:             white,
+    text:              white,
+    slider-min:        white,
+    slider-off:        rgba(white, 0.3),
+    slider-off-active: rgba(white, 0.3),
+);
+
+$quotes-theme-background: (
+    status-bar: black,
+    app-bar:    #303030,
+    background: #222,
+    hover:      rgba(white, 0.04),
+    card:       #222,
+    dialog:     lighten(#222, 1%),
+    disabled-button: rgba(white, 0.12),
+    raised-button: map-get($mat-grey, 800),
+    focused-button: $light-focused,
+    selected-button: map_get($mat-grey, 900),
+    selected-disabled-button: map_get($mat-grey, 800),
+    disabled-button-toggle: black,
+    unselected-chip: map_get($mat-grey, 700),
+    disabled-list-option: black,
+);
+
+$quotes-theme: (
+    primary: mat-palette($mat-blue),
+    accent: mat-palette($mat-pink),
+    warn: mat-palette($mat-red),
+    is-dark: true,
+    foreground: $quotes-theme-foreground,
+    background: $quotes-theme-background,
+);
+
+@include angular-material-theme($quotes-theme);

nginx/nginx.conf

@@ -32,12 +32,28 @@ http {
         server_name  localhost;
 
         location / {
-            root   /srv/http;
+            root        /app;
-            index  index.html;
+            index       index.php;
+            try_files   $uri $uri/ /index.php?$query_string;
         }
 
-        location /api {
+        location ~ ^/.+\.php$ {
-            rewrite             ^/api(/.*)$ $1 break;
+            root                    /app;
+            index                   index.php;
+            fastcgi_index           index.php;
+            fastcgi_split_path_info ^(.+\.php)(/.+)$;
+            fastcgi_param           SCRIPT_FILENAME $document_root$fastcgi_script_name;
+            fastcgi_param           PATH_INFO       $fastcgi_path_info;
+            include                 fastcgi_params;
+            fastcgi_pass            cms:9000;
+        }
+
+        location ^~ /quotes/assets/ {
+            root        /quotes;
+        }
+
+        location ^~ /quotes/api/ {
+            rewrite             ^/quotes/api(/.*)$ $1 break;
             proxy_set_header    Host        $host;
             proxy_set_header    X-Real-IP   $remote_addr;
             proxy_http_version  1.1;