Giter Site home page Giter Site logo

republik / plattform Goto Github PK

View Code? Open in Web Editor NEW
64.0 2.0 8.0 377.81 MB

The platform that powers republik.ch. A tailored solution for a membership based online magazine.

Home Page: https://www.republik.ch/

Shell 0.06% Dockerfile 0.01% JavaScript 75.08% TypeScript 17.21% HTML 6.85% PLpgSQL 0.69% CSS 0.08% Procfile 0.01% Handlebars 0.01%
graphql postgresql react nextjs apollo cms wysiwyg

plattform's Introduction

Republik Plattform

The platform that powers republik.ch. A tailored solution for a membership based online magazine.

What's inside?

This turborepo uses Yarn as a package manager. It includes the following apps and packages:

Apps

  • www: providing the public frontend
  • publikator: providing publication management interface
  • admin: providing the customer management interface
  • api: providing the graphql api
  • assets: fetching, compressing and resizing assets

The frontends are Next.js apps, the backends use Express.js.

Packages

  • styleguide: a React component library shared by all frontends and used by the api to render newsletters
  • backend-modules/*: packages used by the api and assets server
  • mdast/*: packages used to work with mdast (previously in it's own monorepo)
  • eslint-config-*: multiple eslint configurations which are used accross our apps
  • nextjs-apollo-client: a reusable Nextjs / Apollo Client setup
  • tsconfig: a package to store shared typescript configurations
  • icons: A package to make SVG-files available as react.js components to be used across our frontends.

All packages and apps support TypeScript and plain ECMAScript.

Licenses

The logo and fonts are the property of their owners (logo—Project R, GT America—GrilliType and Rubis—Nootype), and may not be reproduced without permission.

The www, publikator app and styleguide are BSD-3-Clause licensed. The api, assets app and all backend-modules are AGPL-3.0 licensed. See respective license files in subfolders.

Utilities

This turborepo has some additional tools already setup for you:

  • ESLint for code linting
  • Jest test runner for all things JavaScript
  • Prettier for code formatting

Setup

To get started you'll need:

  • yarn v1.22
  • Node.js v20
  • Docker or native postgresql@14, elasticsearch@6 and redis
Setup with Docker

The included docker-compose.yml starts all external-services. Currently that's: postgresql, redis, elasticsearch (and kibana).

The data is persisted in ./docker-data/.

docker-compose up [-d]
Postgresql in docker

We recommend you install the postgresql client tools on your machine to interact with the database. The tests scripts also depend on the clients being installed.

# linux
sudo apt install postgresql-client-12

When postgresql is running in docker, client tools like psql or createdb/dropdb don't automatically connect to it. They try to access postgresql via a local socket, when instead you want them to connect via network to localhost. To make your life easier, you can add the following environment variables to ~/.bashrc / ~/.zshrc so the client tools connect to localhost per default.

export PGHOST=127.0.0.1
export PGUSER=postgres

Native Setup with Homebrew

brew install postgresql@12 elasticsearch@6 redis nvm
nvm install 14
nvm alias default 14
npm install -g [email protected]
brew services start postgresql@12
brew services start elasticsearch@6
brew services start redis

Docker Kibana accessing native Elasticsearch

docker run -p 5601:5601 -e ELASTICSEARCH_HOSTS=http://host.docker.internal:9200 docker.elastic.co/kibana/kibana-oss:6.7.0

Note:

  • Elasticsearch and Kibana versions must match, ckeck ES version at http://localhost:9200/
  • ELASTICSEARCH_HOSTS must be accessible within docker.

Env

All apps and the styleguide provide an .env.example, the provided default values should be enough to get started:

cp apps/www/.env.example apps/www/.env
cp apps/publikator/.env.example apps/publikator/.env
cp apps/admin/.env.example apps/admin/.env

cp apps/api/.env.example apps/api/.env
cp apps/assets/.env.example apps/assets/.env
Migrating from Individual Repos

You may copyover your environment from the individual repos with one manual edit:

cp ../republik-frontend/.env apps/www/.env
cp ../publikator-frontend/.env apps/publikator/.env
cp ../republik-admin-frontend/.env apps/admin/.env

cp ../styleguide/.env packages/styleguide/.env

cp ../backends/.env apps/api/.env
echo "PORT=5010" >> apps/api/.env

cp ../backends/servers/assets/.env apps/assets/.env

For more about the available env variables see the individual readme of the apps.

Setup authentication environment

Authentication cookie

The COOKIE_NAME env-variable can be defined in apps/api and apps/www. It's crucial that the value defined in the apps/www file matches the one of the API that you're developing against. If these two env-variables don't match, www will be stuck in a redirection loop when trying to open the URL /.

In addition to the cookie name, there the following env-variables must be set to allow for token based authentication. The env-variables JWT_COOKIE_NAME and JWT_ISSUER are present in both the api and www env-files and must be identical. Additionally a private-key must be provided to the api with theJWT_PRIVATE_KEY env-variable and a public-key must be provided to www with the JWT_PUBLIC_KEY env-variable. There is a script under scripts/generate-keypair.sh that can generate keys in the right format to be directly passed into the corresponding env-files.

Database Setup

yarn install
yarn build
yarn dev:setup

Develop

To develop all apps and packages, run the following command:

yarn dev

Please be patient on boot. It might take a minute for everything to compile and a few nodemon restarts before everything runs smoothly.

Only run certain apps while developing

If you don't want all apps to run when using the dev script, you can use the filter flag. (see the Turborepo documentation) For example if you only want to run the republik frontend run yarn dev --filter=@orbiting/www-app.

In most cases you have certain dependencies that should be run as well, for example the styleguide if you're developing in the frontend. In that case simply append ... directly after the filter, to ensure that the additionally to the filtered app, all dependencies are executed as well. (For example in www run: yarn dev --filter=@orbiting/www-app...)

Commit Message Format

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

You can use yarn commit to generate a message via an interactive prompt.

Types

Always changelog relevant: feat, fix, perf Others: docs, chore, style, refactor, test

Scope is optional.

The body should include the motivation for the change and contrast this with previous behavior.

The footer should contain any information about Breaking Changes and is also the place to reference GitHub issues that this commit Closes.

Yaproxy

Don't care about developing the backend? Just want to test something against our production backend? We have yet another proxy for that:

# terminal 1
yarn yaproxy
# terminal 2
yarn dev:www

(Obvious )Warning: whatever you do here is for realz, if you login to your account and change things they are changed on republik.ch!

Development in a secure context

Install the ngrok cli: brew install --cask ngrok

Login to ngrok with ngrok authtoken <token> (You can find your token at https://dashboard.ngrok.com/auth)

After adding the authtoken, you must now add the following tunnels to your ngrok configuration file: (Default config path is ~/.ngrok2/ngrok.yml)

tunnels:
  republik-frontend:
    proto: http
    addr: 3010
    hostname: republik.eu.ngrok.io
  republik-backend:
    proto: http
    addr: 5010
    hostname: api.republik.eu.ngrok.io

Now you must update the following environment variables:

Frontend Environment Variables

API_URL=https://api.republik.eu.ngrok.io/graphql
API_WS_URL=wss://api.republik.eu.ngrok.io/graphql

Backend Environment Variables

FRONTEND_BASE_URL=https://republik.eu.ngrok.io # optional
COOKIE_DOMAIN=.republik.eu.ngrok.io
CORS_ALLOWLIST_URL=http://localhost:3003,http://localhost:3005,http://localhost:3006,http://localhost:3010,http://localhost:3000,https://republik.eu.ngrok.io

Start your frontend and api using:

yarn dev --filter=@orbiting/www-app... --filter=@orbiting/api-app...

Now run yarn ngrok:start in a new terminal inside the workspace-root.

Your local development servers are now relayed to the following ngrok tunnels.

local-address ngrok-address
http://localhost:3010 https://republik.eu.ngrok.io
http://localhost:5010 https://api.republik.eu.ngrok.io

With this you're now able to test payment-options (such as Apple Pay) that are only available in a secure context.

Deployment

The environment variable SERVER is used to determine which app to build and run on deploy. If SERVER is missing the api app is run.

A heroku-prebuild script runs scripts/prune.sh which runs turbo prune with the correct scope and moved the pruned apps and packages to the root directory.

A heroku-postbuild script is used to add a Procfile for running the scheduler on heroku for the api app.

plattform's People

Contributors

tpreusse avatar patrickvenetz avatar trm217 avatar patte avatar annatraussnig avatar uxengine avatar ovbm avatar jstcki avatar lukasbuenger avatar felixmichel avatar garamond avatar fuenkchen avatar lucianak avatar pozylon avatar werehamster avatar lucguillemot avatar caillou avatar hdahlheim avatar diegomura avatar dependabot[bot] avatar clarajeanne avatar ruggedly avatar alexjenter avatar panmona avatar dgnaegi avatar eightam avatar das-g avatar salim-b avatar thommymo avatar

Stargazers

Lode Claassen avatar Nici avatar kleintux avatar  avatar Lea Ya Li Peng avatar Damian avatar Carlos A Maldonado Virella avatar Marc Muehlheim avatar Robin avatar Paul Nguyen avatar Jin Yao avatar Hans Martin Galliker avatar Dieter Wiesflecker avatar Florian Hämmerle avatar Alessandro Vitali avatar ReisMiner avatar Leo Hofer avatar Mehdi Khawari avatar Simon Steiner avatar Roland Kurmann avatar Corina avatar  avatar Ashmeet Sidhu avatar Niklas Liechti avatar Michael Hertig avatar Eric S. avatar  avatar Miroslav Svitok avatar Gianluca avatar MrMakeItTechnical avatar Dominik Schlegel avatar 2PNK avatar Ciel Yu avatar ddg() avatar Simon avatar Santiago Lee avatar  avatar Stefan Huber avatar Florian Bruggisser avatar PO LYNN avatar  avatar Sabrina Wullschleger avatar Kim avatar tebe avatar Nancy Bolstad avatar  avatar Marco Forster avatar  avatar  avatar  avatar Petar Marjanović avatar honsa.ch avatar e18s avatar Alex Wilson avatar  avatar Oliver Strassmann avatar Bruno Wego avatar Jonathan Levi avatar Ramon Rüttimann avatar Radamés Ajna avatar  avatar Stefan Zweifel avatar  avatar  avatar

Watchers

Dieter Wiesflecker avatar  avatar

plattform's Issues

Front Kacheln - Kontrast Preview im Publikator

Problem
Beim Accessibility Review ist aufgefallen, dass Front-Kacheln teilweise nicht genug hohe Kontrastwerte aufweisen.
Screenshot 2022-06-08 at 13 47 13

Mögliche Lösung
Beim Bauen der Kacheln könnte bei der Wahl der Text- und Hintergrund-Farben der Kontrastwert angezeigt werden, damit die Produktion schon beim Erstellen der Kacheln über mögliche Probleme informiert ist.

iOS app no longer supports background audio

Bug Description

Since the latest update (either App or iOS), audio playback stops when I switch to another app or lock the screen (background play does not work).

iOS 16.6, iphone 11 pro
App version 2.2.3 /210

Expected Behaviour

Audio keeps playing even if I lock the phone or switch to another app.

Steps to reproduce

No response

Environment

App (iOS/iPadOS)

Version

2.2.3

Unattractive image rendering with PDF

Bug Description

I requested an A4 PDF of the article «Staatspolitisch ist die UBS ein Problem». I have deactivated the rendering of images. In the PDF, the images were omitted, as expected. However, the picture captions were rendered unattractively.

signal-2023-03-22-141354_002

Expected Behaviour

The caption should be on the same line as the article text with a note that there would be a picture here. Alternatively, the caption could be omitted altogether.

Steps to reproduce

See bug description.

Environment

Other (please specify in version field below)

Version

Not relevant.

Bar chart: Labels inside bars have some flaws

Both flaws occur when having switched on labelling inside bars, settings of the chart can be checked on love: https://publikator.republik.love/repo/republik/love-article-spielplatz-sharon/tree

  • Calculation to decide if bar is big enough to put the label inside does not work perfectly when having percentage values

Screenshot: Desktop, Chrome
Screenshot 2022-08-11 at 15 56 25

  • Sometimes labels do not get the right color and thus are nearly invisible

Screenshot 1: Mobile, Firefox

invisible label

Screenshot 2: Desktop, Chrome - Publikator => Ansicht => Laptop
Screenshot 2022-08-11 at 15 49 18

Error: no valid IP supplied: <ip-1>, <ip-2>

Sentry Issue: WWW-REPUBLIK-2

Error: no valid IP supplied: <ip-1>, <ip-2>
  File "@orbiting/www-app/./lib/api/TruncateIP.ts", line 15, in truncateIP
    throw new Error('no valid IP supplied: ' + ip)
  File "@orbiting/www-app/pages/api/prolitteris.ts", line 102, in handler
    const maskedIP = truncateIP(requestIp)
  File "@orbiting/www-app/./lib/api/withReqMethodGuard.tsx", line 20, in <anonymous>
    return handler(req, res)
...
(5 additional frame(s) were not displayed)

articles lack clickable dark/bright reading mode switch anywhere on page

Bug Description

Currently, articles are entirely black (dark mode) when Windows is set to dark and browser-mode is set to automatic. All modern websites nowadays have a bright/dark-switch added, to let users choose which websites they want to read in bright mode (due to the dark mode being super dark, like republik currently) and which websites they want to read in dark mode (if a website has way too many white areas that are eye-straining.)

Expected Behaviour

Expected to find a clickable-switch anywhere on the article page to give us (loyal) visitors the best possible reading experience and incentive to support republik's offer at https://www.republik.ch/angebote?package=ABO for example :)

Steps to reproduce

On Windows 10 22H2, set colors to "dark", in webbrowser "website appearance" to "automatic" and visit one of the very basic simple Republik-articles that are presented in a new-tab page by Firefox Pocket, like this very interesting one about anger: https://www.republik.ch/2023/04/24/wut-ist-weiblich?utm_source=pocket-newtab-global-de-DE

Environment

Firefox

Version

112.0.2

Modals sollten barrierefrei umgesetzt sein

  • Das Login-Modal ist nicht barrierefrei umgesetzt. Für Screenreader-User bleibt der Inhalt hinter dem Modal weiterhin erreichbar.
  • iOS: Beim Öffnen der Navigation liegt der Fokus weiterhin im Hintergrund, so dass die Elemente "Magazin", "Feed" etc. im Hintergrund mit VoiceOver angesteuert werden und nicht die Elemente in der Navigation.
  • iOS: Bei der der Lightbox/vergrösserten Ansicht von Bildern können die Elemente im Hintergrund weiterhin mit VoiceOver erreicht werden.
  • Das Dropdown-Menü bei Serien Die Serien-Navi hat keinen Status, so dass es für Screenreader-User nicht erkennbar ist, ob das Menü ein- oder ausgeklappt ist.

Details in den Issues Nr. 63 - 66 im Accessibility Review

Leseposition-Häckchen in Action Bar zeigt unklickbares call out

Bug Description

Leseposition-Häckchen in Action Bar zeigt unklickbare Call-Out-Option «als gelesen markieren»; das Häckchen selbst markiert einen Beitrag bereits als gelesen, auf die Call-Out-Option kann ich gar nicht erst klicken.

Bildschirmaufnahme.2022-10-29.um.15.05.59.mov

(Das Leseposition-Häckchen gibts auch in der "floating" Action Bar bei einem Artikel. Da sehe ich die Call-Out-Option gar nicht erst, sondern wird bei Klick aufs Häckchen direkt als gelesen markiert.)

Expected Behaviour

Ich kann die Call-Out-Option anklicken (oder sie wird mir gar nicht erst angezeigt).

Steps to reproduce

  1. Öffne Artikel
  2. Scrolle Artikel etwas nach unten, so, dass die Leseposition greift und z. B. 38 Prozent gelesen angezeigt wird.
  3. Scrolle zur Action Bar unter der Autorinnenzeile und klick auf Häckchen neben Leseposition

Environment

Other (please specify in version field below)

Version

Brave, MacOS

Automatische Sotrtierung der Kommentare nach "beste" abschalten

Bug Description

Die User-Kommentare bei den Artikeln werden zuerst nach "neueste" geordnet & nach ein paar Tagen automatisch nach "beste". Dieses Behaviour ist an sich schon zuhinterfragen, weil es einen selbstverstärkenden Bias produziert bei Leuten die später Voten, weil dann die obersten Kommentare die besten sind, und die besten dann wieder am meisten gevotet werden.

Hier geht es mir aber um Artikel die dauernd upgedatet werden sowie das bei der "Chronologie der Schweizer Medienkonzentration" der Fall ist. Es macht schlicht keinen Sinn, die Sortierung hier auf "beste" zu setzen, weil man so die neuesten Kommentare übersieht oder immer zuerst auf "neueste" klicken muss.

Expected Behaviour

Ich würde erwarten, dass ich als Nutzer selber festlegen kann, welche Sortierung ich gerne hätte, wobei die Zeitsortierung wohl die neutralste Form ist (ok, Random wäre auch möglich).

Oder als Second-Best Lösung dass die Redaktion diesen Default aktiv übersteuern kann.

Steps to reproduce

Beispiel "Chronolgie Medien CH"

Environment

Firefox

Version

No response

Updating Twitter, Facebook title changes web slug

Bug Description

Altering Twitter or Facebook title changes web slug

Bildschirmfoto 2022-11-09 um 06 42 50

Expected Behaviour

Web slug does not change when altering Twitter or Facebook title

Steps to reproduce

No response

Environment

Other (please specify in version field below)

Version

n/a

Bug: Quote is not distinguishable in Comment Preview

Bug Description

When writing a comment with a quote, the quote-styling is not visible in the preview.

Tried with this text:

Ein normaler Text.

Das ist ein Zitat

Expected Behaviour

The quote is distinguished similarely as it will be when the comment has been published. I see, that it probably needs a different shade of gray, since the input-text has already a background. But currently it is like this, which is a bit misleading:

grafik

grafik

Steps to reproduce

Write a comment containing a Quote and click 'Preview'

Environment

Firefox

Version

No response

Expandable Links in template editorialNewsletter faulty

Bug Description

An article with template "editorialNewsletter" contained an additional description (aka. Expandable Link). Link was rendered normal and additional description render in anchor title:

Bildschirmfoto 2022-09-19 um 07 58 38

Expected Behaviour

I expected it to render as an expandable link, or not render at all.

Steps to reproduce

No response

Environment

Firefox

Version

No response

Refactor: Render Callout in a separate React-Portal

Issue description

With the current implementation the Callout on mobile renders fullscreen with a backdrop.
The problem is, that the Callouts z-index CSS property is bound to possible z-indexes of it's parent elements. Due to that, I can't be guaranteed that the Callout will be rendered on top of everything else if the element has a higher z-index than the parent element of the Callout component.
We currently have this issue on mobile with the AudioPlayer when the side-nav is open (see screenshots below.

Solution

When the Callout is opened, the callout should be rendered inside a separate React-Portal.
To ensure it's backward compatible, we could dynamically create a new dom-node at the end of the document via the Document API and then remove it once the callout closes.

Screenshots

Sidenav + AudioPlayer example

image

[Side-nav z-index = 43, Callout z-index = 1 AudioPlayer z-index = 100]
Even if the z-index of the Callout was 999 it would still render below the Player due to it being bound to hte z-index = 43 of it's parent.

Error: Cannot find module 'uuid'

Sentry Issue: PUBLIKATOR-REPUBLIK-6R

Error: Cannot find module 'uuid'
Require stack:
- /app/apps/publikator/.next/server/pages/repo/[owner]/[repo]/publish.js
- /app/node_modules/next/dist/server/require.js
- /app/node_modules/next/dist/server/next-server.js
- /app/node_modules/next/dist/server...
  File "@orbiting/publikator-app/external commonjs "uuid"", line 1, in e.modules
    const __WEBPACK_NAMESPACE_OBJECT__ = require("uuid");
  File "@orbiting/publikator-app/webpack/bootstrap", line 21, in o
    __webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  File "@orbiting/publikator-app/external node-commonjs "zlib"", line 1, in e.modules
    module.exports = require("zlib");
  File "@orbiting/publikator-app/external node-commonjs "zlib"", line 1, in e.modules
    module.exports = require("zlib");
...
(5 additional frame(s) were not displayed)

Accessibility: UI Kontrast

  • Das Kontrastverhältnis bei den Überschriften "Briefings" und "Kolumnen" beträgt nur 3.35:1 beziehungsweise 2.63:1 und ist nicht ausreichend.

  • Kontrastverhältnis zwischen Fehlermeldung und Hintergrund ist unzureichend Screenshot 2022-06-08 at 13 49 59

  • Die Spaltenüberschriften im Footer wie zum Beispiel “Mitglied werden” und “Republik” weisen kein ausreichendes Kontrastverhältnis zum Hintergrund auf. Screenshot 2022-06-08 at 13 57 30

  • Text-Light (#C0C0C0 und auch Dark-Mode: ) hat schlechten Kontrast. Siehe z.B. Input Platzhalter Screenshot 2022-06-08 at 14 11 13

  • Text-Light funktioniert nicht auf dem hellgrünen HintergrundScreenshot 2022-06-08 at 14 13 50

  • Kontrast bei default buttons (weisser text auf grünem hintergrund) ist nicht ausreichend. Text medium als Lösung? Screenshot 2022-06-08 at 14 14 27
    ?

HTML-Tags: leere Tags vermeiden, semantisch richtige Tags setzen

  • Startseite: die Sätze "Das digitale Magazin für Politik, Wirtschaft, Gesellschaft und Kultur. Finanziert von seinen Leserinnen." sind als H2 ausgezeichnet, obwohl es sich eher um einen Paragraphen handelt.
  • Startseite: an verschiedenen Stellen gibt es leere Paragraphen (leere Tags vermeiden) -> eigentlich, wenn kein format in der kachel, p -> leeres link
  • Feed: leere p-Tags vorhanden, falls bei einem Artikel kein Leadtext vorhanden ist => sollte in dem Fall keine leeren Tags geben
  • Artikelebene: vor dem Leadtext gibt es ein leeres h2-Tag (sollte vermieden werden), z.B. https://www.republik.ch/2021/05/28/das-verlorene-jahrzehnt-wie-die-schweizer-klimapolitik-durchstartete-und-abstuerzte

Details unter Issues 30 - 33 im Accessibility Bericht

Alt-Texte & Buttonbeschriftung

  • Front / Footer: Die Social-Media-Icons im Footer haben keinen Alternativtext, der über das Linkziel informiert.

Screenshot 2022-06-08 at 16 58 06

  • Front: Mobile Viewport Die Grafiken in der Galerie unter dem Artikel "75'000'000'000 giftige Kügelchen..." besitzen keine Alternativtexte und werden vom Screenreader als nur als "render?viewport=1200x1&url=https%3A%2F%2Fwww.republik, , Grafik" angesagt

Screenshot 2022-06-08 at 16 58 56

  • Synthetische Stimme: Der Schalter, um sich einen Beitrag vorlesen zu lassen, hat keine korrekte Beschriftung und wird von Screenreadern nur als "Schalter" ausgegeben. Der Text "Beitrag von synthetischer Stimme vorlesen lassen" sollte mit dem Schalter verknüpft sein, damit die Funktion des Schalters korrekt vermittelt wird.

Screenshot 2022-06-08 at 16 59 05

  • Störer: Der Senden-Pfeil beim E-Mail-Eingabefeld ist nicht beschriftet und wird vom Screenreader als "Schalter" vorgelesen.

Screenshot 2022-06-08 at 14 20 38

  • Feed: Es finden sich im Feed grafische Schalter ohne Alternativtext, die von Screenreadern nur als "Schalter" ausgegeben werden.

Screenshot 2022-06-08 at 16 59 22

  • Die Porträtbilder bei den Zitaten auf der Startseite haben keine Alternativtexte.

Screenshot 2022-06-08 at 16 59 34

  • Serien, Formate: Die Icons auf der Seite Audio, um die Anzahl Beiträge anzuzeigen, verfügen über keinen Alternativtext. (Hinweis: Allgemein, wo wir Anzahl Beiträge auf Übersichtsseiten haben)

Screenshot 2022-06-08 at 17 02 44

  • Das verlinkte Seiten-Logo besitzt keinen Alternativtext, welcher der Doppelfunktion des Logos gerecht wird (Vermittlung der Absenderinformation und Hinweis aufs Ziel der Verlinkung).

  • Die verlinkten SVG-Icons bei einem Artikel (PDF, Schriftgrösse anpassen, Teilen, Dialog und Vorlesen lassen) verfügen über keinen Alternativtext, der über die Funktion oder das Linkziel informiert.

Screenshot 2022-06-08 at 17 03 11

  • Bei Artikelbildern öffnet sich bei Klick eine vergrösserte Ansicht beziehungsweise eine Lightbox. Die Bilder verfügen jedoch über keinen Alternativtext, der über diese Funktion informiert.

Screenshot 2022-06-08 at 17 03 26

A11Y: Show focus state visibly

⚠️ **contains issues that are also mentioned in #136.

Wait for #136 to be resolved and check what has already been solved.**

Description

Autofocus

For modals and other elements that open in a different place in the dom hierarchy the auto-focus must be set programatically.

Make focus visible

image

image

image

https://www.w3.org/TR/WCAG20/#understandable
https://www.w3.org/TR/WCAG20/#consistent-behavior

Todo

  • Videos cannot be focused

image

  • Unselected payment options are not focusable

image

  • Auto focus Audio Player when starting a track (Befund 47 & 52)

image

  • Focused actionbar item must be visible selected

image

  • Auto focus must be set when the series-overview overlay is opened in an article.

image

  • Modals must be autofocus when opened (will require changes in Styleguide)

image

image

  • Autofocus image light-box

image

Seitenhierarchie: Überschriften-Ebene / Semantik von Überschriften

  • Fehlende Überschriften-Hierarchie auf der Startseite => alles H1
  • Im Feed gibt es ebenso keine semantische Hierarchie, um Beispielsweise alle Artikel eines Datums anzuzeigen
  • H-Tag-Sematik auf Übersichtsseiten von Audiobeiträgen nicht korrekt, z.B. Im Gespräch - es folgen H1-Überschriften (Feed) auf eine H2-Überschrift (XY Beiträge)
  • Relevante Seitenbereiche müssen eigene Überschrift haben, z.B. gibt es keine Überschriften, die Bereiche wie den Footer einleiten oder bei Serienübersichten innerhalb des Artikels (wie z.B. https://www.republik.ch/2021/05/25/george-floyd-nach-schweizer-art)
  • Überschriften müssen semantisch korrekt sein, nicht nur visuell hervorgehoben werden, z.B.

Details im Bericht # 17 - # 25

Accessibility: Formulare

Make sure all Forms have labels and are grouped in fieldsets
Resource for Forms: https://www.accessibility-developer-guide.com/examples/forms/

Formularfelder benötigen immer ein zugewiesenes Label. Verknüpfen Sie die Beschriftungen mit den zugehörigen Eingabefeldern über das -Element unter Verwendung des for- und des id- Attributs.

  • Die Checkbox beim Abo-Formular ist nicht korrekt mit dem dazugehörigen Text verknüpft und kann von Screenreadern nicht aktiviert werden. Screenshot 2022-06-08 at 14 59 45

  • Pflichtfelder müssen als solche gekennzeichnet werden. Screenshot 2022-06-08 at 15 04 44

  • Payment Selector sollte standard Formular-Elemente verwenden. Screenshot 2022-06-08 at 15 05 44

  • Die übergeordnete Beschriftung “Rechnungsadresse” beim Abo-Formular wird nicht durch Screenreader ausgegeben. Screenshot 2022-06-08 at 15 02 37

  • Dropdown-Menüs für Goodies gut labeln

CMD+click does not open a tab

Bug Description

Since one of the more recent updates, users can no longer use the established shortcut CMD/CTRL+click to open an article in a new tab.

Expected Behaviour

CMD/CTRL+click opens link in new tab.

Steps to reproduce

CMD/CTRL+click on a teaser on the front. The article opens in the same frame.

Environment

Chrome

Version

Concerns Chrome and Firefox, version-independent, as dependent on implemented Javascript handling.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

docker-compose
apps/admin/docker-compose.yaml
docker-compose-test-network.yml
docker-compose.yml
dockerfile
apps/admin/Dockerfile
github-actions
.github/workflows/codeql-analysis.yml
.github/workflows/test.yml
npm
apps/admin/package.json
  • @apollo/client ~3.8.1
  • apollo-cache-inmemory ^1.6.6
  • graphql ^15.3.0
  • subscriptions-transport-ws ^0.9.19
apps/api/package.json
  • graphql ^15.3.0
  • graphql-fields ^2.0.3
  • apollo-fetch ^0.7.0
apps/assets/package.json
apps/publikator/package.json
  • @apollo/client ~3.8.1
  • graphql ^15.3.0
  • subscriptions-transport-ws ^0.9.17
apps/www/package.json
  • @apollo/client ~3.8.1
  • apollo-fetch ^0.7.0
  • graphql ^15.3.0
  • subscriptions-transport-ws ^0.9.19
docs/package.json
lambdas/chromium/package.json
package.json
packages/backend-modules/access/package.json
packages/backend-modules/apollo-modules-node/package.json
  • graphql ^15.3.0
packages/backend-modules/assets/package.json
packages/backend-modules/auth/package.json
packages/backend-modules/base/package.json
  • @graphql-tools/schema ^10.0.0
  • apollo-server ^2.25.3
  • apollo-server-core ^2.15.1
  • apollo-server-express ^2.15.1
  • graphql ^15.3.0
  • graphql-redis-subscriptions ^2.2.1
  • graphql-subscriptions ^1.0.0
packages/backend-modules/base64u/package.json
packages/backend-modules/calendar/package.json
packages/backend-modules/call-to-actions/package.json
packages/backend-modules/cards/package.json
packages/backend-modules/collections/package.json
packages/backend-modules/databroom/package.json
packages/backend-modules/dataloader/package.json
packages/backend-modules/discussions/package.json
  • graphql-fields ^2.0.3
packages/backend-modules/documents/package.json
packages/backend-modules/embeds/package.json
packages/backend-modules/env/package.json
packages/backend-modules/formats/package.json
packages/backend-modules/gsheets/package.json
packages/backend-modules/invoices/package.json
packages/backend-modules/keyCDN/package.json
packages/backend-modules/mail/package.json
packages/backend-modules/mailbox/package.json
packages/backend-modules/matomo/package.json
packages/backend-modules/migrations/package.json
packages/backend-modules/package.json
packages/backend-modules/publikator/package.json
  • @orbiting/graphql-list-fields ^2.0.2
  • apollo-fetch ^0.7.0
packages/backend-modules/push-notifications/package.json
packages/backend-modules/redirections/package.json
packages/backend-modules/republik-crowdfundings/package.json
  • graphql ^15.3.0
packages/backend-modules/republik/package.json
  • graphql ^15.3.0
packages/backend-modules/scalars/package.json
  • graphql ^15.3.0
  • graphql-type-json ^0.3.2
packages/backend-modules/schedulers/package.json
packages/backend-modules/search/package.json
  • @orbiting/graphql-list-fields ^2.0.2
packages/backend-modules/slack/package.json
packages/backend-modules/sms/package.json
packages/backend-modules/statistics/package.json
packages/backend-modules/styleguide/package.json
packages/backend-modules/subscriptions/package.json
packages/backend-modules/testing/package.json
  • graphql ^15.3.0
  • subscriptions-transport-ws ^0.9.16
packages/backend-modules/translate/package.json
packages/backend-modules/types/package.json
packages/backend-modules/utils/package.json
packages/backend-modules/voting/package.json
packages/eslint-config-backend/package.json
packages/eslint-config-frontend/package.json
packages/icons/package.json
packages/mdast/mdast-react-render/package.json
packages/mdast/remark-preset/package.json
packages/mdast/slate-mdast-serializer/package.json
packages/nextjs-apollo-client/package.json
  • @apollo/client ~3.8.1
  • graphql ^15.3.0
  • @apollo/client ~3.8.1
  • graphql ^15.3.0
packages/styleguide/package.json
  • @apollo/client ~3.8.1
  • graphql ^15.3.0
  • @apollo/client ~3.8.1
packages/tsconfig/package.json
packages/ui-docs-demo/package.json
nvm
.nvmrc

  • Check this box to trigger a request for Renovate to run again on this repository

Seitentitel

  • Seiten müssen eindeutigen, aussagekräftigen Titel haben, z.B.
    • Der Seitentitel auf der Startseite lautet "Republik-Mitglied und Abonnent werden - Republik". Für Screenreader-Nutzende ist nicht ersichtlich, dass es sich um die Startseite handelt.
    • Bei Artikeln wie zum Beispiel bei "Das verlorene Jahrzehnt: Wie die Schweizer Klimapolitik durchstartete – und abstürzte" ist der Artikeltitel der Seitentitel. Es fehlt das Suffix "- Republik.ch", das über den Seitenbetreiber informieren würde.

Details in den Issues Nr. 50 & 51 im Accessibility Review

A11Y: Communicate active/selected state of navigation/selection elements

Description

Links and Buttons used for the page state musst share which link/button must communicate the active state for screen readers.
There are two variants for this:

  • The A11Y-review suggested the following approach.
  • Additionally we should also add the aria-current. See mdn-docs
  • (This might need some more research on how we utilise links, but in general we could automatically set aria-current="page" on every link that has a href that matches window.location.)

Todo

  • Comment sort- and filter-links must communicate the active state

image

  • The navigation must communicate the active page

image

  • Selected payments-option must be communicated

image

Prevent Redirects from opening in the app

Certain redirects, like the google form for goodies, open the app and circumvent the app's whitelist of only opening "republik.ch" domains. Users can get stuck on these pages.

Steps to Reproduce
close the App and open http://republik.ch/s/bestellung from a mail link

Actual Results
The app opens with google.com/form....

Expected Results
The google form should open in safari

Possible Solutions
Handle redirects with a landing page

Middleware Front redirection-loop

Bug Description

When running the mono-repo in dev, the front rewriting within the middleware sometimes breaks, which causes an infinite reloading which then leads "Too many requests".

This might be caused by faulty JWT-Token validation, due to invalid an invalid public-key.
Needs more investigation.

Expected Behaviour

No redirection-loop.
Additionally add logic to log each redirection, showing the route + roles from within the JWT, when running www in dev.

Steps to reproduce

Edit: Managed to narrow the issue down.
The issue occurs if the COOKIE_NAME env-variable in www isn't configured correctly to work with the currently running backend (local or via. proxy).

We should add a log at the startup that shows the following variables with the according values: COOKIE_NAME, JWT_COOKIE_NAME, JWT_ISSUER.

When running the frontend in development, we should also throw an error in the middleware, if the two cookie checks fall-through too often in fast succesion.

The docs should also be extended to mention that these env-vars must urgently be set for the front to work as expected.

Additionally show

Environment

Chrome

Version

No response

Dialog/Beiträge: Verbessern des aktuell gewählten Sortier-Indikators

Ich finde es ziemlich schwierig zu erkennen, welche Sortierung ich im Dialog ausgewählt habe:

grafik

Die visuelle Hervorhebung der aktuellen Auswahl sollte verbessert werden. Zum Beispiel durchs Unterstreichen (wobei die Funtkionalität dann wegen der Links, die auch unterstrichen werden, nicht einheitlich ist) oder durchs Verwenden von Button-Stylen (ähnlich wie der für 'Neuer Beitrag', wenn während dem Lesen ein neuer Beitrag geschrieben wurde).

Dialogstruktur

  • Im Dialog gibt es Texte, die nicht korrekt in die HTML-Struktur eingebunden sind, sondern nur über div und span. Es fehlt eine für Screenreader-User verständliche semantische Struktur, um zu erkennen, was ein Beitragstitel, ein Beitrag und eine Antwort ist. Mögliche Lösungsansätze sind hierarchisch korrekte Überschriften, verschachtelte Listen oder Akkordeon Elemente für jeden Beitrag.

Theming update regression

Bug Description

The values that the color-context provides no longer seem to be identical after the update, which has caused the chart-editor inside the publikator to break.
In this case, the issue was that before the update, the discrete colors that were resolved in the provided value, were equal to the values defined in theme/colors.js.
But now after the update however, these values no longer end up in the resolved scheme.

Expected Behaviour

For the colorscheme to be resolved as previously.

Steps to reproduce

No response

Environment

Other (please specify in version field below)

Version

No response

TypeError: Cannot destructure property 'activeMembership' of 't' as it is null.

Sentry Issue: ADMIN-REPUBLIK-1P

TypeError: Cannot destructure property 'activeMembership' of 't' as it is null.
  File "@orbiting/admin-app/./components/Users/ProfileHeader.js", line 156, in <object>.render
    const { activeMembership } = user
  File "@orbiting/admin-app/../../packages/styleguide/src/components/Loader/index.tsx", line 102, in Loader
    return render()
...
(5 additional frame(s) were not displayed)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.