We want different kind of maps. There should be overview map and small info maps. For this we want to integrate MapLibre GL JS.

Tasks

• Add maplibre-gl dependency
• Figure out how to use it in Gatsby
• Add MapTiler Base Layer
• Add additional GeoJSON / VectorTile Layer

The Problem

The Lighthouse score (FCP) is bad , also because the font is big (300kb), as well as, there is a loading chain ("Verkettung kritischer Anfragen vermeiden ").

Proposed Solution

Use Overpass font from @fontsource: https://fontsource.org/fonts/overpass

Or otherwise use a technique, so TTF request is not triggered via CSS, but in the main document.

See also https://www.digitalocean.com/community/tutorials/gatsbyjs-custom-fonts-in-gatsby

Instead of using tthe JSON schema to generate typescript types we could use it for generating graphQL types and then use Gatsbys graphQL typegen. Related to #76

Beispielsweise RS 2

Insbesondere für Google / SEO

Möglicherweise auch Logo

What's the problem you want solved?
The design for the homepage got updated. We need to adapt the design in the application. See Figma draft.

Is there a solution you'd like to recommend?

Integration ToDos

• Add Image Logo
• Add bottom hero image
• Update content section for smaller images
• Update text of homepage
• Find (generic) images and add these

What's the problem you want solved?
Currently you need to pass class names to get, for example, the outlined version of the ButtonLink. This is not handy and too hard to memorise.

Example:

<ButtonLink to="/foerderungen" className="btn-brand-outline mt-5">
  Zur Förderübersicht
</ButtonLink>

Is there a solution you'd like to recommend?

New version should be:

<ButtonLink to="/foerderungen" outline className="mt-5">
  Zur Förderübersicht
</ButtonLink>

What are the steps to reproduce this issue?

1. Go to https://radschnellverbindungen.info/steckbriefe/

What happens?

Some cards don't have an image, but it only shows the geometry of the RSV , not the map background tiles

What were you expecting to happen?

Every map should have background tiles

Any logs, error output, etc?

no seen.

Which version/branch do you run?

develop

The Problem

URLs for retrieving static images are too long, therefore the GeoJSON needs to be reduced in its geometry level of detail.

Proposed Solution

Tasks

• [ ]
• [ ]
• [ ]

FIY @rush42

Currently in the JSON schema the detail_level property is defined as string. IMHO we should define allowed values as an enum type, to limit the possibilities and allow fully defined mappings for e.g. a map legend.
Until now we have the following values:

• exact
• rough
• corridor
• approximated

Maybe we could do something similar for the variant property.

Gatsby released a new version of the core and plugins. We are two minor behind this newest version and should update to 4.16

What's the problem you want solved?

We want an overview page, which displays multiple highways on one page. Therefore we need one component which displays one highway. This component should

Use the TailwindUI component Alternating with optional testimonial as initial component.

Important: Integrate these components only as static components. Don't use dynamic maps or content from jsons. This issue is only for designing the components. Also don't change footer, navigation or something other from Layout components.

Tasks

• Introduce a new component <RsvSnippet />
• Modularize the component into comfortable sub-components into the same component folder
• Integrate the component into (and replace current content of) /radschnellwege page
• Design the components according to design draft

Testcases

• Each page has …
  • a title tag
  • a meta description
  • a fallback social sharing image
  • can have a specific social sharing image specified in the page file
• Social sharing looks good in Twitter https://cards-dev.twitter.com/validator
• Social sharing looks good in Facebook https://developers.facebook.com/tools/debug/?q=

Links

• https://www.gatsbyjs.com/docs/how-to/adding-common-features/seo/

The Gatsby graphQL typgen feature is stable since june and could be used to type our query data.

What's the problem you want solved?

We currently use a Matomo Iframe for users to opt out from tracking. This is located at /datenschutz page. Since Iframes are not optimal, especially for mobile, we would like to get rid of the iframe and use the matomo script to build a opt-out component our self.

Is there a solution you'd like to recommend?

There is a documentation at https://developer.matomo.org/guides/tracking-javascript-guide#optional-creating-a-custom-opt-out-form how to use the script.

Tasks

• Remove the iframe from datenschutz page
• Create new component MatomoOptOut
• Use script mentioned above to build a checkbox which disables tracking on disabling.

What's the problem you want solved?

Storybook should be integrated into the package. It should contain the UI components. It should not contain arbitrary components, which are not related to the project

Is there a solution you'd like to recommend?

See branch integrate-storybook.

Integration ToDos

• Install via npm
• Setup first components
• Setup Netlify build

Consider changing the website here:
https://github.com/FixMyBerlin/rsv-dossier/blob/42727938ccd9684f2f3fc566018c227529cf3480/src/radschnellwege/meta/meta.json#L105C21-L105C21

to: https://www.rems-murr-kreis.de/bauen-umwelt-und-verkehr/radwege/radschnellwege/rs5-schorndorf-fellbach

User should decide on whether share their information with the map service provider or not. They also should be to opt out afterwards.

• Add Opt-In component before map loads
• Load Map after opt-in
• Add Opt-Out to privacy policy

Depends on #4

What's the problem you want solved?

Currently the data for the radschnellverbindungen is in FixMyBerlin/radschnellverbindungen. We need this data here in this project.

Is there a solution you'd like to recommend?

There are multiple options:

• Git submodule
• REST API on build time

ToDos

• Evaluate solutions
• Execute solution

The Problem

Build time increased very much with the new static image generation for RSV. Also every build triggers many API Calls, but we have limited request quota.

Proposed Solution

There should be an CLI parameter or Environment variable where I can disable the generation of the static map images

Tasks

• ?
• ...

This has some medium priority for me.

What's the problem you want solved?
The "About us" page needs to be created, linked and filled with content.

Integration ToDos

• Create page
• Add content, FMC logo, etc.

This page will be using Matomo for analysing user traffic.

• Add Matomo Gatsby Plugin
• Add privacy page
• Add OptOut possibility of Matomo

Testing

• Each page view shows data in Matomo
• Its possible to add event tracking to track in page links
• Its possible to add campaign tracking to track external links

The Problem

We need a way to differentiate between different build environments (development and production), as well store some secrets, which should not be public.

Proposed Solution

Use the Gatsby Configuration through .env files.
https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/

Right now, we do not generate the required meta tags on SSR.

I had the same issue in FixMyBerlin/radwege-check.de@858474d, here are my findings gatsbyjs/gatsby#25189 (comment).

The last issue is an issue for us as well

In my case, I also noticed that I had some data:image;base64 stuff in the og:image tag which was because I used an import to import a PNG instead of referencing it from the 'static' folder.

To test success:

• https://cards-dev.twitter.com/validator
• https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fradschnellverbindungen.info%2F (…)
  … both need to show the desired social sharing content

Looking at https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fradschnellverbindungen.info%2F now, it does show some data. I don't know where that comes from; I don't see the data inspecting http https://radschnellverbindungen.info/

Link and display source of the steckbrief short description

The Problem

The static map images are not necessarily shown in their full size and thus the attribution is not always visible.

Proposed Solution

Implement a custom attribution component for use in dynamic and static maps and disable the internal attribution tags.

Tasks

• implement attribution component
• disable attribution in static map generation
• disable attribution in dynamic map

For better image handling we could introduce the gatsby-plugin-image. It automatically creates srcsets and providing different sizes for responsive pages in different formats. It also handles placeholder images, when internet connection is bad.

It provides the <StaticImage /> component.

See also https://www.gatsbyjs.com/plugins/gatsby-plugin-image/ and docs: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/

• Add dependency
• Replace all appropriate images with new Component

For the planned features of radschnellverbindungen.info we need the following adaptations in the MetaJSON schema:
(descending order of priority)

• include the total length of every RSV
• split from and to attributes, e.g.: from: string -> from: {city: string, state: string}
• name id attribute consistent with the geoJSON files: currently the corresponding geoJSON attribute is name (which is also a foreign key in the geoJSON specification... thus changing name -> id might be better)

More

• https://www.gatsbyjs.com/plugins/gatsby-plugin-netlify/
• https://levelup.gitconnected.com/how-to-add-netlify-redirects-to-a-gatsby-site-ae678518cc91#de8f

Same as radparken.info. Exclude some pages.

• - Pendler-Radroute von Worms nach Ludwigshafen
• - die südliche Weiterführung von Ludwigshafen nach Schifferstadt
• - die südliche Weiterführung von Schifferstadt nach Wörth
• - Dazu noch die Pendler-Radroute zwischen Neustadt und Landau

Quelle: https://www.m-r-n.com/was-wir-tun/themen-und-projekte/projekte/radfahren-rhein-neckar