Merge branch 'main' into feature/mobile

.eslintrc.yml

@@ -72,7 +72,7 @@ rules:
   max-statements: [warn, { max: 10 }]
   multiline-ternary: off
   new-parens: error
-  newline-per-chained-call: [error, { ignoreChainWithDepth: 3 }]
+  newline-per-chained-call: [error, { ignoreChainWithDepth: 4 }]
   no-alert: error
   no-await-in-loop: warn
   no-bitwise: error

.example.env.development

@@ -0,0 +1 @@
+GATSBY_API_BASE_URL=

.github/workflows/run-tests.yml

@@ -15,5 +15,6 @@ jobs:
       - run: npm install
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - run: npm run tsc
       - run: npm run lint
-      # - run: npm run build
+      - run: npm run build

README.md

@@ -6,17 +6,72 @@ Note: On Windows, both projects need to be checked out with, `git config core.au
 
 ### first time
 
+#### Configure access to the GitHub npm registry
+
+One of our dependencies is `@eurofurence/reg-component-library`, which we only publish to the private GitHub packages
+registry.
+
+To configure access, obtain a GitHub personal access token with `read:packages` scope permissions. With that, do
+
+```
+echo "//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}" >> ~/.npmrc
+```
+
+#### install gatsby and dependencies
+
 ```
 npm install -g gatsby-cli
 gatsby telemetry --disable
 
 npm install
 ```
 
+#### set up a local dotenv
+
+```
+cp .example.env.development .env.development
+```
+
+Edit this new file and fill in the env vars with the test env information.
+
 ### run locally
 
 ```
 npm start
 ```
 
 Then point your browser to http://localhost:8000/register
+
+### server-like installation on localhost
+
+You can run locally together with one or more of the backend services (most likely you'll want at least
+reg-attendee-service and reg-payment-service).
+
+See the instructions [here](https://github.com/eurofurence/reg-regsys-classic), as well as the readme's of the
+backend services.
+
+Then you can use the system exactly as it is installed on the server by pointing your browser to http://localhost:10000/register
+
+This also lets you avoid any CORS issues because everything is coming from the same domain.
+
+### webpack build and upload to the server (ci)
+
+In `gatsby-config.js`, set the correct `pathPrefix`. Then do
+
+```
+PREFIX_PATHS=true npm run build
+```
+
+This will generate a full static version of the site into `public`, which you can then tar.gz and upload to the server
+for roll-out with a script similar to this one (assuming you have ssh-agent running and have access):
+
+```
+# build application with prefix paths as configured
+PREFIX_PATHS=true npm run build
+
+# upload and roll out
+tar czf public.tgz public
+scp public.tgz [email protected]:projects/
+ssh [email protected] -t "bash -l -c 'scripts/update-app.sh'"
+rm -f public.tgz
+```

gatsby-browser.js

@@ -1,3 +1,22 @@
+import { LocalizationProvider, ReactLocalization } from '@fluent/react'
+import { useObservable, useObservableState } from 'observable-hooks'
+import { from } from 'rxjs'
+import { concatMap } from 'rxjs/operators'
+import { loadLanguage, useCurrentLangKey } from '~/localization'
 import wrapWithLibraries from './wrap-with-libraries'
 
+const PageWrapper = ({ children }) => {
+	const langKey = useCurrentLangKey()
+	const l10n$ = useObservable(langKey$ => langKey$.pipe(concatMap(([l]) => from(loadLanguage(l)))), [langKey])
+	const l10n = useObservableState(l10n$, new ReactLocalization([]))
+
+	return <LocalizationProvider l10n={l10n}>
+		{children}
+	</LocalizationProvider>
+}
+
+export const wrapPageElement = ({ element }) => <PageWrapper>
+	{element}
+</PageWrapper>
+
 export const wrapRootElement = wrapWithLibraries

gatsby-config.js

@@ -1,13 +1,20 @@
 const path = require('path')
 
+require("dotenv").config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
 module.exports = {
+  pathPrefix: process.env.PATH_PREFIX, // need to build with PREFIX_PATHS=true npm run build for this to have effect, also currently loads the bundles from /localizations
   siteMetadata: {
-    title: `Eurofurence Reg`,
+    title: `Eurofurence Registration`,
     description: `Eurofurence registration site.`,
     author: `Eurofurence`,
+		twitter: {
+			creator: '@eurofurence',
+		},
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {
@@ -16,7 +23,15 @@ module.exports = {
       },
     },
     `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
+    {
+			resolve: 'gatsby-plugin-sharp',
+			options: {
+				defaults: {
+					placeholder: 'blurred',
+				},
+			},
+		},
+		'gatsby-plugin-image',
     // { // TODO: Enable again after we have an icon.
     //   resolve: `gatsby-plugin-manifest`,
     //   options: {

gatsby-ssr.js

@@ -1,3 +1,39 @@
+import { LocalizationProvider, ReactLocalization } from '@fluent/react'
+import { load } from 'cheerio'
+import { getCurrentLangKey } from 'ptz-i18n'
+import { createLocalization, useCurrentLangKey } from '~/localization'
+import * as localizationFiles from '~/localizations'
 import wrapWithLibraries from './wrap-with-libraries'
 
+const parseMarkup = (str) => {
+	const $ = load(str)
+
+	return $
+		.root()
+		.children()
+		.toArray()
+		.map(child => ({
+			nodeName: child.tagName,
+			textContent: $(child).text(),
+		}))
+}
+
+const localizations = Object.fromEntries(Object.entries(localizationFiles).map(([langKey, ftl]) => [langKey, createLocalization(langKey, ftl, parseMarkup)]))
+
+const PageWrapper = ({ children }) => {
+	const langKey = useCurrentLangKey()
+
+	return <LocalizationProvider l10n={localizations[langKey]}>
+		{children}
+	</LocalizationProvider>
+}
+
+export const onRenderBody = ({ pathname, setHtmlAttributes }) => {
+	setHtmlAttributes({ lang: getCurrentLangKey(['en', 'de'], 'en', pathname) })
+}
+
+export const wrapPageElement = ({ element }) => <PageWrapper>
+	{element}
+</PageWrapper>
+
 export const wrapRootElement = wrapWithLibraries