Updated documentation and fixes

.vscode/settings.json

@@ -3,5 +3,11 @@
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
-  }
+  },
+  "i18n-ally.localesPaths": [
+    "locales",
+    "legacy/app/src/locales",
+    "legacy/electron/dist_electron/win-unpacked/locales",
+    "legacy/internal/briefing-internal/src/locales"
+  ]
 }

Dockerfile

@@ -1,9 +1,10 @@
-# Please read https://github.com/holtwick/briefing/blob/master/docs/docker.md for proper use of Docker
+# Please read https://github.com/holtwick/briefing/blob/master/docs/installation/docker.md for proper use of Docker
 
-FROM node:16-alpine
+FROM node:18-alpine
 COPY . /app
+# COPY docker-package.json /app/package.json
 WORKDIR /app
-RUN cd /app; npm install --production
+# RUN cd /app && npm install --omit=dev
 CMD ["node", "dist/main.cjs"]
 EXPOSE 8080
 

README-de.md

@@ -17,14 +17,24 @@ npm install
 npm run start
 ```
 
-## Verwendung in eigenen Projekten
+## Alles enthalten
 
-Es gibt aber auch die Möglichkeit, die App in eigenen Projekte zu verwenden. Folgende Optionen stehen zur Verfügung:
+Eine WebRTC-Videochat-Anwendung benötigt mehrere Komponenten, um richtig zu funktionieren. Briefing enthält alles, was Sie für den Start benötigen: Benutzeroberfläche, Signalisierung und STUN. 
 
-1. Erstelle über [Brie.fi/ng](https://brie.fi/ng) einen Raum und kopiere den Link in deine Website.
-2. Bette Briefing per `iframe` in deine eigene Seite ein. Verwende dazu den [praktischen Konfigurator](https://brie.fi/ng/embed-demo).
-3. Starte Briefing auf deinem eigenen Server z.B. [via Docker](docs/docker.md)
-4. Passe den Source Code nach deinen Bedürfnissen. Details dazu in der [Dokumentation](docs/README.md).
+Erfahre mehr darüber in der [**→ Dokumentation**](./docs/README.md).
+
+![Verbindung](./docs/assets/connection.svg)
+
+## Anpassung / Whitelabeling
+
+Um Briefing für Ihr eigenes Projekt zu nutzen, stehen Ihnen die folgenden Optionen für alle Erfahrungsstufen zur Verfügung:
+
+1. **Erstelle einen Raum** über [Brie.fi/ng](https://brie.fi/ng) und kopiere den Link in deine Website.
+2. Briefing per `iframe` **in deine eigene Seite einbetten**. Verwende dazu den [praktischen Konfigurator](https://brie.fi/ng/embed-demo).
+3. Starte Briefing auf deinem **eigenen Server** z.B. [via Docker](docs/installation/docker.md)
+4. **Source Code anpassen**, genau nach deinen Bedürfnissen. Details dazu in der [Dokumentation](docs/README.md).
+
+Erfahre mehr untert [**→ Installation**](./docs/installation/README.md).
 
 ## Lizenzen
 
@@ -50,22 +60,21 @@ Mein Name ist Dirk Holtwick. Ich bin ein unabhängiger Softwareentwickler mit Si
 
 Beiträge sind immer willkommen. Am besten fängst du an [Issues](https://github.com/holtwick/briefing/issues) hinzuzufügen oder darauf zu antworten.
 
-Um Übersetzungen hinzuzufügen oder zu korrigieren, starte hier: [src/locales](src/locales/).
+Um Übersetzungen hinzuzufügen oder zu korrigieren, starte hier: [→ locales](locales/).
 
 
 ## Hauptversionen
 
 ### Version 3.0
 
-Vollständige Migration auf Vue3 und Typescript. Lokalisierung mit vue-i18n Standardbibliothek. Modernisierung von vielen Teilen des Projekts. Siehe [Artikel](docs/version3-de.md) ([en](docs/version3-en.md))
+Vollständige Migration auf Vue3 und Typescript. Lokalisierung mit vue-i18n Standardbibliothek. Modernisierung von vielen Teilen des Projekts. Siehe [→ Artikel](docs/blog/version3-de.md) ([en](docs/blog/version3-en.md))
 
 ### Version 2.0
 
-Einführung von Typescript-Unterstützung. Umstellung auf Vite. Ersetzen von socket.io durch zuverlässiges [Zerva](https://github.com/holtwick/zerva). Docker-Images. Reduktion auf die wesentlichen Teile des Projekts. Siehe [Artikel](docs/version2-de.md) 
-([en](docs/version2-en.md))
+Einführung von Typescript-Unterstützung. Umstellung auf Vite. Ersetzen von socket.io durch zuverlässiges [Zerva](https://github.com/holtwick/zerva). Docker-Images. Reduktion auf die wesentlichen Teile des Projekts. Siehe [→ Artikel](docs/blog/version2-de.md) ([en](docs/blog/version2-en.md))
 
 ### Version 1.0
 
-Basierte auf Webpack und hatte Beispiele für iOS, Android, Windows und Electron sowie einen separaten Signal-Server. Sie bot auch Hintergrundunschärfe und Bildhintergründe über Unsplash. Alle diese Implementierungen wurden veraltet. Der Code ist jedoch weiterhin über den [legacy branch](https://github.com/holtwick/briefing/tree/legacy) zugänglich, wird aber nicht mehr gepflegt oder unterstützt.
+Basierte auf Webpack und hatte Beispiele für iOS, Android, Windows und Electron sowie einen separaten Signal-Server. Sie bot auch Hintergrundunschärfe und Bildhintergründe über Unsplash. Alle diese Implementierungen sind mittlerweile veraltet. Der Code ist jedoch weiterhin über den [legacy branch](https://github.com/holtwick/briefing/tree/legacy) zugänglich, wird aber nicht mehr gepflegt oder unterstützt.
 
 

README.md

@@ -17,14 +17,24 @@ npm install
 npm run start
 ```
 
-## Use in your own projects
+## Batteries included
 
-However, there is also the possibility to use the app in your own projects. The following options are available:
+A WebRTC video chat application requires multiple components to work properly. Briefing includes everything you need to get started: User Interface, Signaling and STUN. 
 
-1. create a room via [Brie.fi/ng](https://brie.fi/ng) and copy the link into your website.
-2. embed Briefing via 'frame' into your own site. Use the [handy configurator](https://brie.fi/ng/embed-demo).
-3. start Briefing on your own server e.g. [via Docker](docs/docker.md) or use a service like [fly.io](docs/fly.io.md), [render.com](docs/render.com.md), Google Cloud, AWS, Azure ... you name it.
-4. customize the source code according to your needs. See the [documentation](docs/README.md) for details.
+Learn more about it in the [**→ documentation**](./docs/README.md).
+
+![connection](./docs/assets/connection.svg)
+
+## Customization / Whitelabeling
+
+To use Briefing for your own project, the following options for all levels of experience are available:
+
+1. **create a room** via [Brie.fi/ng](https://brie.fi/ng) and copy the link into your website.
+2. **embed** Briefing via 'frame' into your own site. Use the [handy configurator](https://brie.fi/ng/embed-demo).
+3. start Briefing on your **own server** e.g. [via Docker](docs/installation/docker.md) or use a service like [fly.io](docs/fly.io.md), [render.com](docs/render.com.md), Google Cloud, AWS, Azure ... you name it.
+4. **customize** the source code according to your needs. See the [documentation](docs/README.md) for details.
+
+Learn more at [**→ installation**](./docs/installation/README.md).
 
 ## Licenses
 
@@ -50,18 +60,17 @@ My name is Dirk Holtwick. I am an independent software developer based in German
 
 Contributions are always welcome. The best place to start is to add or respond to [Issues](https://github.com/holtwick/briefing/issues).
 
-To add or correct translations, start here: [/locales](locales/).
+To add or correct translations, start here: [→ locales](locales/).
 
 ## Major Releases
 
 ### Version 3.0
 
-Full migration to Vue3 and Typescript. Localization using vue-i18n standard library. Modernization of many parts of the project. See [blog post](docs/version3-en.md) ([de](docs/version3-de.md))
+Full migration to Vue3 and Typescript. Localization using vue-i18n standard library. Modernization of many parts of the project. See [→ blog post](docs/blog/version3-en.md) ([de](docs/blog/version3-de.md))
 
 ### Version 2.0
 
-Introduced Typescript support. Migration to Vite. Replacing socket.io with reliable [Zerva](https://github.com/holtwick/zerva). Docker images. Reduction to the essential parts of the project. See [blog post](docs/version2-en.md) 
-([de](docs/version2-de.md))
+Introduced Typescript support. Migration to Vite. Replacing socket.io with reliable [Zerva](https://github.com/holtwick/zerva). Docker images. Reduction to the essential parts of the project. See [→ blog post](docs/blog/version2-en.md) ([de](docs/blog/version2-de.md))
 
 ### Version 1.0
 

docker-package.json

@@ -13,6 +13,6 @@
   },
   "dependencies": {},
   "engines": {
-    "node": ">=16.0.0"
+    "node": ">=18.0.0"
   }
 }

docs/README.md

@@ -9,26 +9,16 @@ npm install
 npm start
 ```
 
-To adopt the look and feel to your needs, follow this guide. Please consider purchasing a [commercial license to support the project](/README.md#commercial-license). Thanks.
+To adopt the look and feel to your needs, follow this guide:
 
-- [**Development, Customization and White Label**](development.md)
-
-To get it running on a server, you can do the same or use one of the following services:
-
-- [Installation via Docker](docker.md)
-- [Installation on fly.io](fly.io.md)
-- [Installation on render.com](render.com.md)
-- [Installation on repl.it](https://replit.com/@holtwick/briefing?v=1)
-
-For full access behind firewalls you will also need to run a TURN server:
-
-- [TURN via coturn](coturn.md)
+- [**Development, Installation, Customization and White-Label**](installation/README.md)
 
 ## Posts
 
-- [Briefing 2.0](version2-en.md) ([de](version2-de.md))
+- [Briefing 3.0](blog/version3-en.md) ([de](blog/version3-de.md))
+- [Briefing 2.0](blog/version2-en.md) ([de](blog/version2-de.md))
 
 ## Other Resources for Maintainers
 
-- [Marketing](marketing-en.md) ([de](marketing-de.md)) - Describes Briefing in a few words
-- [Internal](internal.md) - Details for repository maintainers
+- [Marketing](internal/marketing-en.md) ([de](internal/marketing-de.md)) - Describes Briefing in a few words.
+- [Internal](internal/internal.md) - Details for repository maintainers.

docs/assets/connection.drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2023-02-24T10:37:29.258Z" agent="5.0 (Macintosh)" etag="nQLKBN0Y5_A-AO2mm1hu" version="20.5.1" type="device"><diagram id="4tuTAy4_cqGyjgB7p1wb" name="Seite-1">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</diagram></mxfile>

docs/configuration.md

@@ -0,0 +1,41 @@
+# User Interface Configuration 
+
+All settings are **optional**! By default standard values are used.
+
+Environment variables can be set on build or runtime, e.g. by using [.env](../.env) files. But then these need to be prefixed by `BRIEFING_`. So for example `ROOM_PATH` becomes `BRIEIFING_ROOM_PATH`.
+
+If used in a [static website](installation/website.md) these values go into the `briefing-config.js` file.
+
+### Rooms
+
+- `ROOM_URL`: URL used in the share dialog. Default is the current location. Example: `https://example.com/room/`
+- `ROOM_PATH`: The path to prefix the room names, default is `/`. Example: `/room/`
+- `ROOM_DOMAIN`: If you use the public signaling server, you can choose a unique domain to not get in conflict with brie.fi/ng's rooms. By default the hostname is used here.
+
+### Server Bindings
+
+By default Briefing comes with STUN build in. But if also TURN is required, the installation of [coturn.md](installation/coturn.md) is recommended.
+
+- `SIGNAL_URL`: Signal server, default is the same as the web site URL. Example: `wss://example.com`
+- `STUN_URL`: TURN server to be used. Please set up your own, if you expect heavy traffic.  Example: `stun:turn01.brie.fi:5349` 
+- `TURN_URL`: STUN server to be used. Please set up your own, if you expect heavy traffic. See [coturn.md](installation/coturn.md). Example: `turn:turn01.brie.fi:5349`
+- `TURN_USER`: Username
+- `TURN_PASSWORD`: Password
+
+### UI Defaults
+
+Boolean values may be set as `0` or `1`
+
+- `MUTE_VIDEO`: Start with video off.
+- `MUTE_AUDIO`: Start with audio muted.
+- `SHOW_FULLSCREEN`: Show fullscreen button.
+- `SHOW_INVITATION`: Show invitation button.
+- `SHOW_INVITATION_HINT`: Show invitation hint if only one peer is in the room.
+- `SHOW_SETTINGS`: Show settings button.
+- `SHOW_SHARE`: Show share button.
+- `SHOW_CHAT`: Show chat button.
+
+### Debugging
+
+- `DEFAULT_ROOM`: For development it is nice to always have a static room name preset, otherwise it is randomly generated.
+- `SENTRY_DSN`: Lazy error message handling using a <sentry.io> service. Enter your projects DSN here.

docs/development.md

@@ -11,7 +11,9 @@ Access the local server via [http://localhost:8080](http://localhost:8080).
 
 ## Customization
 
-Most customization can be done by setting env variables, see [.env](../.env) for examples.
+Most customization can be done by setting env variables. See [**→ configuration**](configuration.md) 
+
+To get started with changing the code directly you might want to begin with the landing page at [→ src/components/app-whitelabel.vue](../src/components/app-whitelabel.vue).
 
 ## Debugging
 
@@ -21,8 +23,12 @@ Enable logging by entering the following in the browsers console:
 localStorage.zeed = '*'
 ```
 
+In production it is possible to connect to <sentry.io> via [**→ configuration**](configuration.md). 
+
 ## Technology stack
 
+Just the most up to date frameworks:
+
 - [vite](https://vitejs.dev/)
 - [vue3](https://vuejs.org/)
 - [vue-i18n](https://vue-i18n.intlify.dev/)

docs/installation/README.md

@@ -0,0 +1,25 @@
+# Customization / White Label
+
+You can take this project as a basis and modify it to be used on your own website, as long as you respect the conditions of the [AGPL like licenese](../LICENSE.txt). We kindly ask you to consider [purchasing a commercial license](../README.md#commercial-license) to support the project and benefit from a personal license.
+
+There are diffent stages of customization:
+
+1. **Embedding:** Put brie.fi/ng itself into your website using an IFRAME. Use the [Embed Configurator](https://brie.fi/ng/embed-demo) to find the right settings. No installation required!
+2. **Website:** Just use the HTML, CSS and JS from Briefing and put it on your own hosting. You can easily customize. Signaling and STUN are used from brie.fi/ng or you point to your own services. [→ Details](website.md)
+3. **Docker:** Use a container with everything prepared. Just some modifications are required. It is also possible to use other hosting options. This way you have your own Signaling and STUN running quickly.  [→ Details](#docker)
+4. **Source Code:** Modify the project directly. You've got the full scale of possibilities. [→ Details](#docker)
+
+Additionally:
+
+- **TURN Server**: In case you need a TURN server, learn [how to install "coturn"](coturn.md)
+
+Service providers:
+
+- [Installation on fly.io](fly.io.md)
+- [Installation on render.com](render.com.md)
+- [Installation on repl.it](https://replit.com/@holtwick/briefing?v=1)
+
+This illustration shows the different functional parts of Briefing:
+
+![connection](../assets/connection.svg)
+

docs/coturn.md → docs/installation/coturn.md

@@ -1,4 +1,4 @@
-# coturn for STUN / TURN
+# Installation of STUN / TURN server: "coturn"
 
 > This is only required if you want to set up your own COTURN server.
 > Briefing already is connected to an instance of such a server, which is located in Germany at [Hetzner](https://hetzner.cloud/?ref=thK9VpOJK5Sg).

docs/docker.md → docs/installation/docker.md

@@ -20,7 +20,7 @@ Video with a quick walkthrough:
 
 ## Configuration
 
-Further configuration is currently not required ;)
+Fine tuning by setting environment variables. See [**→ configuration**](../configuration.md)
 
 ## Alternative: Build locally
 

docs/installation/website.md

@@ -0,0 +1,25 @@
+# Static Website
+
+If you are fine with using brie.fi/ng Signaling and STUN you may also just host the HTML, CSS and JS files of the project. 
+
+Run the following to build the website data:
+
+```
+npm install
+npm run build
+```
+
+You will find the result in the folder `www`.
+
+Modify the file `briefing-config.js` according to these [**→ configuration options**](../configuration.md).
+
+Example
+
+```js
+window.briefingConfig = {
+  ROOM_URL: 'https://example.com/room/',
+  ROOM_PATH: '/room/'
+}
+```
+
+Now copy this folder to your hosting service.