Brand new documentation website (#312)

.github/workflows/alpha.yml

@@ -2,7 +2,7 @@ name: 'Alpha Build'
 
 on:
   push:
-    branches: [v470/material-ui]
+    branches: [v490/docs]
 
 jobs:
   build:
@@ -35,6 +35,16 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Build and push Documentation
+        uses: docker/build-push-action@v2
+        with:
+          builder: ${{ steps.buildx.outputs.name }}
+          file: docs/Dockerfile
+          context: docs
+          tags: antoinejaussoin/retro-board-docs:alpha
+          platforms: linux/amd64
+          push: true
+
       - name: Build and push Backend
         uses: docker/build-push-action@v2
         with:

.github/workflows/canary.yml

@@ -35,6 +35,16 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Build and push Documentation
+        uses: docker/build-push-action@v2
+        with:
+          builder: ${{ steps.buildx.outputs.name }}
+          file: docs/Dockerfile
+          context: docs
+          tags: antoinejaussoin/retro-board-docs:canary
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: true
+
       - name: Build and push Backend
         uses: docker/build-push-action@v2
         with:

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: 14
+          node-version: 16
       - run: yarn
       - run: yarn ci-test
       - run: yarn lint

.github/workflows/master.yml

@@ -35,6 +35,16 @@ jobs:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
 
+      - name: Build and push Documentation
+        uses: docker/build-push-action@v2
+        with:
+          builder: ${{ steps.buildx.outputs.name }}
+          file: docs/Dockerfile
+          context: docs
+          tags: antoinejaussoin/retro-board-docs:latest,antoinejaussoin/retro-board-docs:${{ steps.package.outputs.current-version }}
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: true
+
       - name: Build and push Backend
         uses: docker/build-push-action@v2
         with:

docs/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/Dockerfile

@@ -0,0 +1,37 @@
+# This must be run with the Docker context set to the root folder of the repository
+# (the one with the yarn.lock file)
+
+# FROM --platform=$BUILDPLATFORM node:16-alpine as Node
+FROM node:16-alpine as Node
+
+ENV NODE_ENV=production
+
+WORKDIR /home/node/app
+RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
+
+COPY ./package.json ./
+COPY ./babel.config.js ./
+COPY ./docusaurus.config.js ./
+COPY ./sidebars.js ./
+COPY ./yarn.lock ./
+COPY ./tsconfig.json ./
+
+RUN chown -R node:node /home/node/app
+
+USER node
+
+RUN yarn --network-timeout 1000000 install
+
+COPY --chown=node:node ./src ./src
+COPY --chown=node:node ./blog ./blog
+COPY --chown=node:node ./docs ./docs
+COPY --chown=node:node ./static ./static
+
+RUN yarn build
+
+FROM nginx:alpine
+
+COPY --from=Node /home/node/app/build /usr/share/nginx/html
+COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf
+
+CMD ["nginx", "-g", "daemon off;"]

docs/Makefile

@@ -0,0 +1,8 @@
+build-container:
+	docker build -t retrodoc .
+
+build-no-cache:
+	docker build --no-cache -t retrodoc .
+
+run: build-container
+	docker run -p 5100:80 retrodoc

docs/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/blog/2019-05-28-first-blog-post.md

@@ -0,0 +1,12 @@
+---
+slug: first-blog-post
+title: First Blog Post
+authors:
+  name: Gao Wei
+  title: Docusaurus Core Team
+  url: https://github.com/wgao19
+  image_url: https://github.com/wgao19.png
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

docs/blog/2019-05-29-long-blog-post.md

@@ -0,0 +1,44 @@
+---
+slug: long-blog-post
+title: Long Blog Post
+authors: endi
+tags: [hello, docusaurus]
+---
+
+This is the summary of a very long blog post,
+
+Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
+
+<!--truncate-->
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

docs/blog/2021-08-01-mdx-blog-post.mdx

@@ -0,0 +1,20 @@
+---
+slug: mdx-blog-post
+title: MDX Blog Post
+authors: [slorber]
+tags: [docusaurus]
+---
+
+Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
+
+:::tip
+
+Use the power of React to create interactive blog posts.
+
+```js
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+```
+
+<button onClick={() => alert('button clicked!')}>Click me!</button>
+
+:::

docs/blog/2021-08-26-welcome/index.md

@@ -0,0 +1,25 @@
+---
+slug: welcome
+title: Welcome
+authors: [slorber, yangshun]
+tags: [facebook, hello, docusaurus]
+---
+
+[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
+
+Simply add Markdown files (or folders) to the `blog` directory.
+
+Regular blog authors can be added to `authors.yml`.
+
+The blog post date can be extracted from filenames, such as:
+
+- `2019-05-30-welcome.md`
+- `2019-05-30-welcome/index.md`
+
+A blog post folder can be convenient to co-locate blog post images:
+
+![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
+
+The blog supports tags as well!
+
+**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

docs/blog/authors.yml

@@ -0,0 +1,17 @@
+endi:
+  name: Endilie Yacop Sucipto
+  title: Maintainer of Docusaurus
+  url: https://github.com/endiliey
+  image_url: https://github.com/endiliey.png
+
+yangshun:
+  name: Yangshun Tay
+  title: Front End Engineer @ Facebook
+  url: https://github.com/yangshun
+  image_url: https://github.com/yangshun.png
+
+slorber:
+  name: Sébastien Lorber
+  title: Docusaurus maintainer
+  url: https://sebastienlorber.com
+  image_url: https://github.com/slorber.png

docs/docker/nginx.conf

@@ -0,0 +1,31 @@
+server {
+  listen       80;
+  server_name  localhost;
+
+  # X-Frame-Options is to prevent from clickJacking attack
+  add_header X-Frame-Options SAMEORIGIN;
+
+  # disable content-type sniffing on some browsers.
+  add_header X-Content-Type-Options nosniff;
+
+  # This header enables the Cross-site scripting (XSS) filter
+  add_header X-XSS-Protection "1; mode=block";
+
+  # This will enforce HTTP browsing into HTTPS and avoid ssl stripping attack
+  add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";
+
+  add_header Referrer-Policy "no-referrer-when-downgrade";
+
+  location / {
+    alias  /usr/share/nginx/html/;
+    try_files $uri $uri/ /index.html;
+    add_header Cache-Control "no-store, no-cache, must-revalidate";
+  }
+
+  location /static {
+    alias /usr/share/nginx/html/static/;
+    expires 1y;
+    add_header Cache-Control "public";
+    access_log off;
+  }
+}

docs/docs/features/_category_.json

@@ -0,0 +1,5 @@
+{
+  "label": "Features",
+  "position": 3,
+  "collapsed": false
+}

docs/docs/features/encryption.md

@@ -0,0 +1,48 @@
+# Encrypted Sessions
+
+:::info Pro Feature
+This feature is a Pro feature.
+:::
+
+## Starting an encrypted session
+
+On the homepage, click on "Encrypted Session" (instead of "Create a new session"):
+
+![Create Encrypted Session](/img/features/encrypted-create.png)
+
+## Overview
+
+Your data (post content, action, and game title) is **encrypted** and **decrypted** **locally**, in your browser.
+
+Only the encrypted text is sent to the server, so the server never sees the clear-text data.
+
+The key is stored in the URL, after the hash sign (#), and is never sent to the server either ([why](https://stackoverflow.com/questions/3664257/why-is-the-hash-part-of-the-url-not-available-on-the-server-side)).
+
+You can then share the URL via a secure mean (email, Slack...), store it in a bookmark etc., but the encryption key will never be sent to Retrospected.
+
+## Anatomy of a URL
+
+<span style={{ color: 'blue' }}>https://www.retrospected.com/game/<wbr />P2NWCVKNJ</span><wbr /><span style={{ color: 'green' }}>#</span><span style={{ color: 'red' }}>pZ0ipXFBn</span>
+
+The <span style={{ color: 'blue' }}>blue</span> part contains the Session ID, while the <span style={{ color: 'red' }}>red</span> part,
+after the <span style={{ color: 'green' }}>#</span>, is the encryption key.
+
+In the example above, only the <span style={{ color: 'blue' }}>blue</span> part of the URL is sent to the server, never the <span style={{ color: 'red' }}>red</span> ([source](https://stackoverflow.com/questions/3664257/why-is-the-hash-part-of-the-url-not-available-on-the-server-side)).
+
+## Encryption
+
+Your content is encrypted locally using AES, with [crypto-js/aes](https://cryptojs.gitbook.io/docs/#ciphers).
+
+## Decryption
+
+The content is decrypted locally, and the key is obtained from one of these sources:
+
+- The URL if the URL contains the encryption key
+- Your browser [local storage](https://en.wikipedia.org/wiki/Web_storage)
+- A prompt from the app if the key is neither in the URL nor the local storage.
+
+Why is it stored in local storage? For convenience: if you open an existing session from the list of sessions you participated in, in the home page,
+the key wouldn't be part of the URL because that list is coming from the Retrospected servers, where the encryption keys are not stored.
+
+When is it stored in local storage? Whenever you open a session with an encryption key in the URL,
+the key will be stored in local storage for the reason explained above.