init commit (#1)

.dockerignore

@@ -0,0 +1,16 @@
+# Ignore everything by default
+*
+
+# Allow explicitly
+!src/
+!config/
+!public/
+!packages/
+!.eslint.config.mjs
+!index.html
+!LICENSE
+!package-lock.json
+!package.json
+!postcss.config.mjs
+!tsconfig.json
+!vite.config.ts

.github/dependabot.yml

@@ -0,0 +1,21 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 15
+    groups:
+      production-dependencies:
+        dependency-type: "production"
+      development-dependencies:
+        dependency-type: "development"
+  - package-ecosystem: "github-actions"
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.github/workflows/on_pr_run_tests.yml

@@ -0,0 +1,52 @@
+# https://docs.github.com/en/packages/managing-github-packages-using-github-actions-workflows/publishing-and-installing-a-package-with-github-actions#upgrading-a-workflow-that-accesses-ghcrio
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning.
+
+name: Validate and test
+
+on: 
+  push:
+    branches: [main]
+  # See https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#onpushpull_requestbranchestags
+  pull_request:
+    # Only branches and tags on the base are evaluated
+    branches: [main]
+
+env:
+  NODE_VERSION: "22"
+
+jobs:
+  npm_test:
+    runs-on: ubuntu-latest
+    env: 
+      VITE_HOCUSPOCUS_SERVER_URL: "http://localhost:3000"
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm test
+
+  npm_lint_check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run lint-check

.github/workflows/on_release_build_image.yml

@@ -0,0 +1,61 @@
+# https://docs.github.com/en/packages/managing-github-packages-using-github-actions-workflows/publishing-and-installing-a-package-with-github-actions#upgrading-a-workflow-that-accesses-ghcrio
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# GitHub recommends pinning actions to a commit SHA.
+# To get a newer version, you will need to update the SHA.
+# You can also reference a tag or branch, but the action may change without warning.
+
+name: Create and publish a Docker image
+
+on:
+  push:
+    branches:
+      - main
+  release:
+    types: [published]
+
+env:
+  REGISTRY: ghcr.io
+  IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  build-and-push-image:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          platforms: linux/amd64,linux/arm64
+          target: production
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          provenance: false
+          build-args: VITE_HOCUSPOCUS_SUBDOMAIN=write-backend

.gitignore

@@ -0,0 +1,30 @@
+# Ignore all
+/*
+
+# Now whitelist:
+!/.github/
+!/packages
+/packages/**/dist/
+/packages/**/node_modules/
+!/config/
+!/public/
+!/src/
+!.dockerignore
+!.gitignore
+!.prettierrc
+!docker-compose-prod.yml
+!docker-compose.yml
+!Dockerfile
+!eslint.config.mjs
+!index.html
+!LICENSE
+!package.json
+!package-lock.json
+!postcss.config.mjs
+!README.md
+!tsconfig.json
+!vite.config.ts
+!vitest.config.ts
+!vitest.setup.ts
+
+.DS_Store

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 80
+}

Dockerfile

@@ -0,0 +1,44 @@
+# Base:
+FROM node:22-alpine AS base
+
+RUN apk add --no-cache bash
+
+USER node
+
+ENV APP_PATH=/home/node/app
+
+RUN mkdir -p $APP_PATH
+WORKDIR $APP_PATH
+
+COPY --chown=node:node package.json package-lock.json tsconfig.json $APP_PATH/
+
+# Development:
+FROM base AS development
+USER node
+
+RUN npm install
+
+# Production builder:
+FROM base AS production_builder
+ARG VITE_HOCUSPOCUS_SERVER_URL
+ARG VITE_HOCUSPOCUS_SUBDOMAIN
+
+USER node
+
+# first, copy packages as these are built during the install step
+COPY  --chown=node:node packages $APP_PATH/packages
+
+RUN npm ci
+
+COPY  --chown=node:node src $APP_PATH/src
+COPY  --chown=node:node public $APP_PATH/public
+COPY  --chown=node:node config $APP_PATH/config
+COPY  --chown=node:node postcss.config.mjs vite.config.ts index.html $APP_PATH/
+
+RUN npm run build
+
+# Production:
+FROM nginxinc/nginx-unprivileged:stable-alpine-slim AS production
+
+COPY --from=production_builder --chown=nginx:nginx /home/node/app/dist /usr/share/nginx/html
+COPY --from=production_builder --chown=nginx:nginx /home/node/app/config/nginx/default.conf /etc/nginx/conf.d/default.conf

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 b310-digital
+Copyright (c) 2024 b310 digital gmbh
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1 +1,62 @@
-# groupwriter-frontend
+# GroupWriter: Frontend
+
+GroupWriter's frontend is a React application served via Nginx. It synchronizes data with a Hocuspocus-based Node.js backend using the Yjs framework for real-time collaboration.
+
+## Setup
+
+### Development
+
+Clone the backend first in the parental folder: `git clone [email protected]:b310-digital/groupwriter-backend.git`.
+
+```
+docker compose build
+docker compose up -d
+docker compose exec editor npm run dev # server starts on 5173 by default
+docker compose exec backend npm run start:dev # start the backend
+```
+Requests are proxied to the backend with the `/backend` path in dev, see `vite.config.ts`.
+
+Browse to `http://localhost:5173`
+
+
+### Production
+Currently, the app is expected to run as a subdomain `write` and the backend under the subdomain `write-backend`.
+
+### Options
+Attention: Options need to be passed during build time.
+
+- `VITE_HOCUSPOCUS_SUBDOMAIN`: Name of the subdomain where the backend resides and where requests are routed to. Default: `write-backend`
+- `VITE_HOCUSPOCUS_SERVER_URL`: Backend Server URL, in case the subdomain is not used. If set, overwrites the subdomain connection option. Undefined by default.
+- `VITE_LEGAL_URL`: URL to legal statement. Undefined by default.
+- `VITE_PRIVACY_STATEMENT_URL`: URL to privacy statement. Undefined by default.
+
+## Design Decisions
+
+### [TipTap](https://tiptap.dev) / [ProseMirror](https://prosemirror.net)
+The editor is based on TipTap which is itself based on the popular ProseMirror Editor. The editor is extended with a couple of plugins.
+
+### [hocuspocus](https://tiptap.dev/docs/hocuspocus/introduction) / [yjs](https://yjs.dev)
+The sync the data, yjs and a compatible server is being used.
+
+### Comments & Suggestions
+
+Comments are added as marks, meaning they are inlined in nodes. A comment id is generated and saved along with the color of the comment (which is identical to the user's color) in the attributes of the mark (span element). The raw data of comments, meaning text and other meta data, are saved in a different yjs map but inside the same document to ensure both data structures are synced together. If a comment is deleted, first the marking inside the editor is deleted and then the comment itself in the yjs map is deleted.
+
+Its gets more interesting for redo/undo operations: When undoing, the marking disappears but the user might redo this operation. Therefore, the comment is NOT deleted from the yjs map. This means eventually storing unused / deleted comments but ensures successful redoing and undoing operations. 
+
+## Testimonials / Sponsors
+
+<img src="https://www.nibis.de/img/nlq-medienbildung.png" align="left" style="margin-right:20px">
+<img src="https://kits.blog/wp-content/uploads/2021/03/kits_logo.svg" width=100px align="left" style="margin-right:20px">
+
+kits is a project platform hosted by a public institution for quality
+development in schools (Lower Saxony, Germany) and focusses on digital tools
+and media in language teaching. GroupWriter can
+be found on https://kits.blog/tools and can be used by schools for free.
+
+Logos and text provided with courtesy of kits.
+
+## Acknowledgements
+- Background image by [Jessica Lewis](https://www.pexels.com/de-de/foto/gelbe-orange-rosa-und-blaue-malstifte-auf-weissem-notizbuch-998591/)
+- Main icons: [Hero Icons](https://github.com/tailwindlabs/heroicons)
+- Additional icons: [Tabler Icons](https://github.com/tabler/tabler-icons)

config/nginx/default.conf

@@ -0,0 +1,30 @@
+server {
+    listen       8080;
+    server_name  _;
+    charset utf-8;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+        try_files $uri /index.html;
+
+
+
+        location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|webp)$ {
+            expires 1y;
+            access_log off;
+            add_header Cache-Control "public, max-age=31536000, immutable";
+
+            gzip on;
+            gzip_types image/svg+xml image/webp text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss font/woff2;
+            gzip_proxied any;
+            gzip_min_length 256;
+            gzip_vary on;
+            gzip_comp_level 5;
+
+        }
+    }
+
+    error_page 404 /index.html;
+    error_page 500 502 503 504  /50x.html;
+}