Add blog and first blog post

.gitlab-ci.yml

@@ -9,7 +9,12 @@ Staging:
     - sudo mkdir -p /opt/staging.webcaptioner.com /opt/staging.webcaptioner.com.previous
     - sudo rm -rf /opt/staging.webcaptioner.com.previous/*
     - sudo npm --prefix ./app install ./app
+    - sudo npm --prefix ./app/blog install ./app/blog
+    - sudo npm install -g hexo-cli
     - sudo gulp --gulpfile ./app/Gulpfile.js
+    - cd ./app/blog
+    - sudo hexo generate
+    - cd ../.. # back to repo root
     - sudo truncate -s 0 ./app/env/.env || true # clear env file
     - echo "COMMIT_ID=$CI_COMMIT_SHA" | sudo tee --append ./app/env/.env
     - echo "PORT=$PORT" | sudo tee --append ./app/env/.env

app/app.js

@@ -27,6 +27,8 @@ app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'static/favicon')));
 app.use(express.static(path.join(__dirname, 'static/sitemap')));
 app.use('/build', express.static(path.join(__dirname, 'build')));
+app.use('/blog', express.static(path.join(__dirname, 'blog/public')));
+app.use('/community', express.static(path.join(__dirname, 'blog/public/community')));
 app.use('/static/img', express.static(path.join(__dirname, 'static/img')));
 
 app.use('/', index);

app/scss/app.scss

@@ -15,6 +15,8 @@ $brand-danger: #A30821;
 $btn-primary-color: #000;
 $btn-primary-border: $brand-primary;
 
+$link-color: #274de6;
+
 $brand-info: #000;
 
 $border-radius: 0;
@@ -36,13 +38,23 @@ $dropdown-link-color: #ccc;
 $dropdown-link-hover-color: #fff;
 $dropdown-link-hover-bg: #666;
 
-$body-bg: $brand-primary;
-
 $nav-tabs-border-color: $modal-header-border-color;
 $nav-tabs-active-link-hover-border-color: $modal-header-border-color;
 $nav-tabs-link-hover-border-color: lighten($modal-header-border-color, 5%);
 $nav-tabs-active-link-hover-color: #000;
 
+$navbar-inverse-color:                 rgba(#000,.5) !default;
+$navbar-inverse-hover-color:           rgba(#000,.75) !default;
+$navbar-inverse-active-color:          rgba(#000,1) !default;
+$navbar-inverse-disabled-color:        rgba(#000,.25) !default;
+$navbar-inverse-toggler-border:        rgba(#000,.1) !default;
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px
+);
+
 $fa-font-path: '/build/font-awesome';
 @import "../node_modules/font-awesome/scss/font-awesome.scss";
 
@@ -171,9 +183,11 @@ a.nav-link.active {
 .screen-preview .screen {
   max-width:100%;
 }
-
-    html, body {
+    html {
       background: #000;
+    }
+
+    html, body {
       height:100%;
     }
 
@@ -219,4 +233,72 @@ a.nav-link.active {
 
     .final:focus {
       outline:0;
-    }
+    }
+
+
+/* Blog specific */
+
+html.blog, html.blog body {
+  background:#fafafa;
+}
+
+.bg-caption {
+  font-weight:normal;
+  background: $brand-inverse;
+  line-height:3rem;
+  color:#fff;
+  display:inline;
+  box-shadow: -7px 0 0 0 #292b2c, 7px 0 0 0 #292b2c, 0 0 0 7px #292b2c;
+}
+
+.blog-article-list a:hover {
+  text-decoration:none;
+}
+
+.blog-article-list a:hover h2 {
+  text-decoration:underline;
+}
+
+.blog-article-list h2 {
+  text-transform:none;
+  font-family:$font-family-sans-serif;
+  font-size: 2.2rem;
+  font-weight: normal;
+}
+
+.blog-article-list p {
+  color:#000;
+}
+
+.blog-article-date {
+  text-transform: uppercase;
+}
+
+html.blog h2,
+html.blog h3,
+html.blog h4,
+html.blog h5,
+html.blog h6 {
+  font-family:$font-family-sans-serif;
+  text-transform:none;
+}
+
+html.blog h2 {
+  margin:2rem 0 1.5rem 0;
+}
+
+@include media-breakpoint-down(sm) {
+  .jumbotron .display-3 {
+    font-size:4rem;
+  }
+}
+
+@include media-breakpoint-down(xs) {
+  .jumbotron .display-3 {
+    font-size:3rem;
+  }
+
+  .h2.bg-caption {
+    font-size:1.5rem;
+  }
+}