.dockerignore

+*
+!docker
+!public
+!src
+!typings
+!package*.json
+!jsconfig.json

.editorconfig

@@ -6,3 +6,7 @@ indent_size = 2
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[Makefile]
+indent_style = tab
+indent_size = 4

.env

-REACT_APP_STYLEGUIDE_URL=http://localhost:3001/
+REACT_APP_STYLEGUIDE_URL=https://styleguide.pirati.cz/2.11.0
+REACT_APP_API_BASE_URL=https://cf2024.online/api
+REACT_APP_MATOMO_ID=135
+REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pirati.cz/14

.env.development

+REACT_APP_STYLEGUIDE_URL=http://localhost:3001

.gitlab-ci.yml

+image: node:18.20.4-bullseye
+
+variables:
+  SITE_NAME: cf2024.online
+
+  ARTIFACTS_PATH: build
+  REACT_APP_API_BASE_URL: /api
+  WEBHOOK_URL: https://ha-web.pirati.cz
+
+before_script:
+  - apt-get update && DEBIAN_FRONTEND=noninteractive apt-get install -yq curl
+
+build:
+  stage: build
+  script:
+    - npm install --legacy-peer-deps
+    - npm run build
+  after_script:
+    - echo "{\"name\":\"$SITE_NAME\" }" > request.json
+    - "curl -k -H 'Content-Type: application/json' -X POST -d @request.json $WEBHOOK_URL"
+  artifacts:
+    expire_in: 30 min
+    paths:
+      - $ARTIFACTS_PATH
+

.nvmrc

+18.20.4

Dockerfile

+FROM node:18.20.4-alpine AS build
+
+ENV REACT_APP_STYLEGUIDE_URL="https://styleguide.pirati.cz/2.12.1"
+ENV REACT_APP_API_BASE_URL=https://cf2024.online/api
+ENV REACT_APP_MATOMO_ID=135
+ENV REACT_APP_SENTRY_DSN=https://aa80453ff4d54b9a9c1b49e79060498a@sentry.pirati.cz/14
+
+RUN mkdir -p /home/node/cf2021
+
+WORKDIR /home/node/cf2021
+
+COPY package*.json ./
+
+RUN npm ci --legacy-peer-deps
+
+COPY . .
+
+RUN npm run build
+
+# ---
+
+FROM nginx:alpine AS production
+
+COPY --from=build /home/node/cf2021/build /usr/share/nginx/html/
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf

Dockerfile.development

+FROM node:18.20.4-alpine
+
+#  libs for development -- most of theme needed for canvas support in tests
+RUN apk add --no-cache \
+  build-base \
+  g++ \
+  libpng \
+  libpng-dev \
+  jpeg-dev \
+  pango-dev \
+  cairo-dev \
+  giflib-dev \
+  python3 \
+  ;
+
+WORKDIR /app/cf2021
+
+COPY package*.json ./
+
+RUN npm ci --legacy-peer-deps
+
+COPY . .
+
+CMD npm start

Makefile

+.PHONY: build-image
+build-image:
+	docker build \
+        --build-arg BUILD_REACT_APP_STYLEGUIDE_URL=$${STYLEGUIDE_PUBLIC_URL:-https://styleguide.pir-test.eu}/$${STYLEGUIDE_VERSION:-latest} \
+        --tag cf2021:latest \
+        .

compose.yaml

+services:
+  app:
+    image: cf-online
+    ports:
+      - "3000:80"
+

docker/nginx.conf

+gzip on;
+gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
+gzip_proxied any;
+gzip_comp_level 5;
+gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/rss+xml text/javascript image/x-icon image/bmp image/svg+xml;
+gzip_vary on;
+
+server {
+  listen 80;
+  root   /usr/share/nginx/html;
+
+  location / {
+    index  index.html index.htm;
+    try_files $uri $uri/ /index.html;
+
+    # 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";
+    add_header Cache-Control "no-store, no-cache, must-revalidate";
+  }
+
+  location /static {
+    expires 1y;
+    access_log off;
+
+    # 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";
+    add_header Cache-Control "public";
+  }
+
+  error_page   500 502 503 504  /50x.html;
+
+  location = /50x.html {
+    root   /usr/share/nginx/html;
+  }
+}

eslint.config.mjs

+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import jestDom from "eslint-plugin-jest-dom";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import testingLibrary from "eslint-plugin-testing-library";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+const eslintConfig = [
+  ...fixupConfigRules(
+    compat.extends(
+      "react-app",
+      "plugin:prettier/recommended",
+      "plugin:testing-library/dom",
+      "plugin:jest-dom/recommended",
+    ),
+  ),
+  {
+    plugins: {
+      "simple-import-sort": simpleImportSort,
+      "testing-library": fixupPluginRules(testingLibrary),
+      "jest-dom": fixupPluginRules(jestDom),
+    },
+
+    rules: {
+      "sort-imports": "off",
+      "prettier/prettier": "warn",
+      "react/no-unknown-property": [1],
+
+      "simple-import-sort/imports": [
+        "warn",
+        {
+          groups: [
+            ["^react", "^@?\\w"],
+            [
+              "^(api|actions|config|hooks|components|containers|pages|utils|stores|keycloak|markdown|ws)(/.*|$)",
+            ],
+            ["^(test-utils)(/.*|$)"],
+            ["^\\u0000"],
+            ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+            ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+            ["^.+\\.s?css$"],
+          ],
+        },
+      ],
+
+      "testing-library/await-async-queries": "error",
+      "testing-library/no-await-sync-queries": "error",
+      "testing-library/no-debugging-utils": "warn",
+      "jest-dom/prefer-checked": "error",
+      "jest-dom/prefer-enabled-disabled": "error",
+      "jest-dom/prefer-required": "error",
+      "jest-dom/prefer-to-have-attribute": "error",
+    },
+  },
+];
+
+export default eslintConfig;

jsconfig.json

@@ -7,6 +7,6 @@
   },
   "include": [
     "./src/**/*",
-    "./typings/**/*",
+    "./typings/**/*"
   ]
 }

package.json

@@ -3,19 +3,35 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@react-keycloak/web": "^2.1.4",
-    "@sentry/react": "^5.23.0",
-    "classnames": "^2.2.6",
-    "date-fns": "^2.16.1",
-    "keycloak-js": "^10.0.2",
-    "lodash": "^4.17.20",
-    "pullstate": "^1.20.4",
-    "react": "^16.13.1",
-    "react-device-detect": "^1.13.1",
-    "react-dom": "^16.13.1",
-    "react-modal": "^3.11.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "@react-keycloak/web": "^3.4.0",
+    "@rooks/use-interval": "^4.11.2",
+    "@rooks/use-outside-click": "^4.11.2",
+    "@rooks/use-timeout": "^4.11.2",
+    "@rooks/use-window-size": "^4.11.2",
+    "@sentry/integrations": "^7.119.2",
+    "@sentry/react": "^8.34.0",
+    "@sentry/tracing": "^7.119.2",
+    "ajv": "^8.17.1",
+    "classnames": "^2.5.1",
+    "crypto-js": "^4.2.0",
+    "date-fns": "^4.1.0",
+    "keycloak-js": "^26.0.0",
+    "lodash": "^4.17.21",
+    "pullstate": "^1.25.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
+    "react-hint": "^3.2.1",
+    "react-intersection-observer": "^9.13.1",
+    "react-joyride": "^2.9.2",
+    "react-mde": "^11.5.0",
+    "react-modal": "^3.16.1",
+    "react-player": "^2.16.0",
+    "react-router-dom": "^6.27.0",
+    "react-scripts": "^5.0.1",
+    "showdown": "^2.1.0",
+    "wait-queue": "^1.1.4",
+    "xss": "^1.0.15"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -23,66 +39,8 @@
     "test": "react-scripts test --env=jsdom-fourteen",
     "eject": "react-scripts eject",
     "lint": "eslint --cache 'src/**/*.{js,jsx}'",
-    "lint:fix": "eslint --cache --fix 'src/**/*.{js,jsx}'"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "plugin:prettier/recommended",
-      "plugin:testing-library/recommended",
-      "plugin:jest-dom/recommended"
-    ],
-    "plugins": [
-      "simple-import-sort",
-      "testing-library",
-      "jest-dom"
-    ],
-    "rules": {
-      "sort-imports": "off",
-      "prettier/prettier": "warn",
-      "react/no-unknown-property": [
-        1
-      ],
-      "simple-import-sort/sort": [
-        "warn",
-        {
-          "groups": [
-            [
-              "^react",
-              "^@?\\w"
-            ],
-            [
-              "^(components|containers|pages|utils|stores|keycloak)(/.*|$)"
-            ],
-            [
-              "^(test-utils)(/.*|$)"
-            ],
-            [
-              "^\\u0000"
-            ],
-            [
-              "^\\.\\.(?!/?$)",
-              "^\\.\\./?$"
-            ],
-            [
-              "^\\./(?=.*/)(?!/?$)",
-              "^\\.(?!/?$)",
-              "^\\./?$"
-            ],
-            [
-              "^.+\\.s?css$"
-            ]
-          ]
-        }
-      ],
-      "testing-library/await-async-query": "error",
-      "testing-library/no-await-sync-query": "error",
-      "testing-library/no-debug": "warn",
-      "jest-dom/prefer-checked": "error",
-      "jest-dom/prefer-enabled-disabled": "error",
-      "jest-dom/prefer-required": "error",
-      "jest-dom/prefer-to-have-attribute": "error"
-    }
+    "lint:fix": "eslint --cache --fix 'src/**/*.{js,jsx}'",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "browserslist": {
     "production": [
@@ -97,21 +55,27 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/user-event": "^7.2.1",
-    "@testing-library/react": "^9.5.0",
+    "@eslint/compat": "^1.2.0",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.12.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest-dom": "^3.2.3",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-simple-import-sort": "^5.0.3",
-    "eslint-plugin-testing-library": "^3.8.0",
-    "prettier": "^2.1.1"
+    "eslint": "^9.12.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "eslint-plugin-testing-library": "^6.3.0",
+    "prettier": "^3.3.3",
+    "source-map-explorer": "^2.5.3",
+    "typescript": "^5.6.3"
   }
 }

public/index.html

@@ -2,14 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Favicons -->
+    <link rel="apple-touch-icon"  href="%REACT_APP_STYLEGUIDE_URL%/images/favicons/favicon-196x196.png">
+    <link rel="icon" type="image/png" href="%REACT_APP_STYLEGUIDE_URL%/images/favicons/favicon-196x196.png" sizes="196x196">
+    <meta name="application-name" content="CF2023">
+    <meta name="msapplication-TileColor" content="#000000">
+    <meta name="msapplication-TileImage" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-144x144.png">
+    <meta name="msapplication-square70x70logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-70x70.png">
+    <meta name="msapplication-square150x150logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-150x150.png">
+    <meta name="msapplication-wide310x150logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-310x150.png">
+    <meta name="msapplication-square310x310logo" content="%REACT_APP_STYLEGUIDE_URL%/images/favicons/mstile-310x310.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta property="og:url" content="https://cf2024.online/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="CF 2024 | Pirátská strana" />
+    <meta property="og:image" content="https://cf2023.online/img/og2024.png" />
+    <meta property="og:description" content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024." />
+    <meta name="description" content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 13. 1. 2024." />
+
+    <title>CF 2023 | Pirátská strana</title>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -25,11 +37,11 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" />
-    <title>React App</title>
+    <!--<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>-->
   </head>
-  <body class="h-screen">
+  <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="h-screen h-full w-full"></div>
+    <div id="root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
@@ -41,4 +53,19 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+  <!-- Matomo -->
+  <script type="text/javascript">
+    var _paq = window._paq = window._paq || [];
+    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+    _paq.push(['trackPageView']);
+    _paq.push(['enableLinkTracking']);
+    (function() {
+      var u="//matomo.pirati.cz/";
+      _paq.push(['setTrackerUrl', u+'matomo.php']);
+      _paq.push(['setSiteId', '%REACT_APP_MATOMO_ID%']);
+      var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+      g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+    })();
+  </script>
+  <!-- End Matomo Code -->
 </html>