refactor: possible release of v0.2.0

BREAKING CHANGE: Complete Overhaul of App. New Design and Functionality

.github/workflow/ci.yml

@@ -0,0 +1,117 @@
+name: Continuous Integration
+
+on:
+  push:
+  pull_request:
+    branches: [main]
+    types: ['closed']
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  prettier:
+    name: 💅 - Prettier
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.head_ref }}
+
+      - name: Prettify code
+        uses: creyD/[email protected]
+        with:
+          prettier_options: --write src/**/*.{js,ts,json,css,scss,html}
+          same_commit: true
+
+  lint:
+    needs: [prettier]
+    name: 🚧 - Linter
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 19
+
+      - name: Install & Lint
+        uses: actions/cache@v3
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-
+
+      - run: npm ci
+      - run: npm run lint
+
+  release:
+    if: ${{ github.event.pull_request.merged }}
+    needs: [prettier, lint]
+    name: 🏷️ - Release
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Semantic Release
+        run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  package:
+    if: ${{ github.event.pull_request.merged }}
+    needs: [prettier, lint, release]
+    name: 📦 - Package
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+  deploy:
+    if: ${{ github.event.pull_request.merged }}
+    needs: [prettier, lint, release, package]
+    name: 🚀 - Deploy
+    runs-on: ubuntu-latest

package.json

@@ -6,7 +6,8 @@
   "author": "Christoph Merck",
   "type": "module",
   "scripts": {
-    "start": "webpack-dev-server --config webpack.development.cjs --client-logging error",
+    "start": "webpack-dev-server --host 0.0.0.0 --config webpack.development.cjs --client-logging error",
+    "start:ssl": "webpack-dev-server --host 0.0.0.0 --https --watch --config webpack.development.cjs --client-logging error",
     "build": "webpack --config webpack.production.cjs"
   },
   "devDependencies": {
@@ -20,6 +21,7 @@
     "html-webpack-plugin": "5.5.0",
     "mini-css-extract-plugin": "2.7.5",
     "prettier": "2.8.7",
+    "resolve-url-loader": "^5.0.0",
     "sass": "^1.61.0",
     "sass-loader": "13.2.2",
     "ts-loader": "9.4.2",

src/components/message.html

@@ -1,7 +1,12 @@
-<div class="message">
-  <div class="message__title">
-    <h3 class="message__title__name"></h3>
-    <p class="message__title__time"></p>
+<div class="message myself same_sender">
+  <div class="message__header">
+    <div class="message__header__sender"></div>
+  </div>
+  <div class="message__body">
+    <img class="message__body__image" />
+    <div class="message__body__text">
+      <span class="message__body__text__content"></span>
+      <span class="message__body__text__time"></span>
+    </div>
   </div>
-  <p class="message__content"></p>
 </div>

src/components/messageDivider.html

@@ -0,0 +1 @@
+<div class="chat__window__divider"></div>

src/index.html

@@ -1,43 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Required meta tags -->
     <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="PWA Chat" />
-    <meta name="theme-color" content="#8b9e70" />
+
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="#8b9e70" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="theme-color" content="#121212" />
 
-    <!-- Icons -->
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="assets/images/apple-touch-icon.png"
-    />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="assets/images/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="assets/images/favicon-16x16.png"
-    />
-    <link
-      rel="mask-icon"
-      href="assets/icons/safari-pinned-tab.svg"
-      color="#8b9e70"
+    <meta name="title" content="PWA-Chat" />
+    <meta
+      name="description"
+      content="PWA-Chat is a simple chat application built with PWA technology to give the look and feel of a native application."
     />
 
-    <!-- Imports -->
+    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
+
     <title>PWA Chat</title>
-    <link rel="manifest" href="manifest.webmanifest" />
+    <link rel="manifest" href="manifest.json" />
   </head>
   <body></body>
 </html>