feat: Build nginx-enabled Docker images for easy deployment

Signed-off-by: Christoph Heiss <contact@christoph-heiss.at>

.dockerignore

@@ -0,0 +1 @@
+/node_modules

.editorconfig

@@ -5,11 +5,8 @@ end_of_line = lf
 insert_final_newline = true
 charset = utf-8
 indent_style = space
-indent_size = 4
+indent_size = 2
 trim_trailing_whitespace = true
 
 [*.md]
 trim_trailing_whitespace = false
-
-[*.html]
-indent_size = 2

.gitattributes

@@ -0,0 +1 @@
+package-lock.json     merge=binary

.github/workflows/build.yml

@@ -0,0 +1,36 @@
+name: Lint and build
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  lint-and-build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 17
+      - run: npm clean-install
+      - run: npm run lint:scss
+      - run: npm run build
+
+  docker-image:
+    needs: lint-and-build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: docker/setup-buildx-action@v2
+      - uses: docker/login-action@v2
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - uses: docker/build-push-action@v3
+        with:
+          context: .
+          tags: |
+            ghcr.io/${{ github.repository }}:latest
+          push: ${{ github.ref == 'refs/heads/main' }}

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "declaration-empty-line-before": "never",
+    "scss/dollar-variable-colon-space-before": null,
+    "selector-class-pattern": "[a-z][a-zA-Z0-9]+",
+    "string-quotes": "single"
+  }
+}

Dockerfile

@@ -3,8 +3,7 @@ WORKDIR /app
 RUN apk add --no-cache libc6-compat
 
 COPY . .
-ENV NODE_ENV production
+RUN npm clean-install && npm run build
-RUN npm clean-install && npm run prod
 
 FROM nginx:1.23-alpine AS runner
 
@@ -21,7 +20,7 @@ server {\
     root /var/www/html;\
     try_files /index.html =404;\
 \
-    location ~ ^/(robots.txt)$ {\
+    location ~ ^/(favicon.ico|robots.txt)$ {\
         access_log off;\
     }\
 }\

deploy.sh

@@ -1,12 +0,0 @@
-#!/usr/bin/env bash
-
-set -euo pipefail
-
-npm run prod
-
-rsync \
-    --compress --compress-choice=zstd \
-    --partial --progress \
-    --recursive \
-    --verbose \
-    ./dist/* n001.fsn.p:/storage/christoph-heiss-at/public

gulpfile.js

@@ -40,6 +40,11 @@ function buildProdHtml() {
         .pipe(gulp.dest('dist/'))
 }
 
+function copyProdPublic() {
+    return gulp.src('public/*')
+        .pipe(gulp.dest('dist/'));
+}
+
 function buildDevCss() {
     return gulp.src('src/*.scss')
         .pipe(sass.sync().on('error', sass.logError))
@@ -67,4 +72,4 @@ function startDevServer() {
 };
 
 exports.dev = gulp.series(cleanDist, buildDevCss, buildDevHtml, startDevServer);
-exports.default = gulp.series(cleanDist, buildProdHtml);
+exports.default = gulp.series(cleanDist, buildProdHtml, copyProdPublic);

package.json

@@ -24,16 +24,17 @@
     "gulp-purgecss": "^4.1.3",
     "gulp-sass": "^5.1.0",
     "merge-stream": "^2.0.0",
-    "sass": "^1.52.2"
+    "sass": "^1.52.2",
+    "stylelint": "^14.11.0",
+    "stylelint-config-standard-scss": "^5.0.0"
   },
   "engines": {
     "node": ">=16"
   },
   "scripts": {
     "dev": "gulp dev",
-    "prod": "gulp",
+    "build": "gulp",
-    "lint:sass": "sass-lint -v -q",
+    "lint:scss": "stylelint src/*.scss"
-    "deploy": "./deploy.sh"
   },
   "target": "web"
 }

src/app.scss

@@ -1,35 +1,37 @@
 @import 'sp';
 
+$white: #fff;
+
 body {
-    font-family: monospace;
+  font-family: monospace;
-    font-size: 1.3em;
+  font-size: 1.3em;
-    max-width: 45em;
+  max-width: 45em;
 }
 
 @media only screen and (max-width: 768px) {
-    body {
+  body {
-        font-size: 1em;
+    font-size: 1em;
-    }
+  }
 }
 
 ul {
-    list-style-type: '*';
+  list-style-type: '*';
 }
 
 li {
-    padding-left: 10px;
+  padding-left: 10px;
 }
 
 footer {
-    margin-top: 4em;
+  border-top: 1px $white;
-    border-top: 1px #fff;
+  float: right;
-    float: right;
+  margin-top: 4em;
 }
 
 a:visited {
-    color: #9bf;
+  color: #9bf;
 }
 
 code {
-    font-size: 0.8em;
+  font-size: 0.8em;
 }