Redesign of gbfs.org website

[emmambd]

Update gbfs.org homepage and iconography to match the composite here: GBFS-Homepage-Final (1).pdf

Associated assets here

GBFS_Brand Guide_V1_Jan2025.pdf

Figma file

[fredericsimard]

Staging repo/website

• https://github.com/MobilityData/staging.gbfs.org
• https://staging.gbfs.org

What was done and why...

Akin to how gtfs.org was updated, I created a staging repo that is a fork of the gbfs.org repo.

I updated the file structure based on what we learned while working on the redesign of gtfs.org (including the blog) to a more structured support for multiple languages.

• staging.gbfs.org (English is the default)
• staging.gbfs.org/es
• staging.gbfs.org/fr

One main advantage with this new structure is that search properly supports other languages than English. We can now search in French and Spanish.

The new site now uses MKDocs Materials Insiders, all features are available.

Important

Even though this allows us to translate the .md file names in languages other than English (for exemple, outils.md instead of tools.md) I would advise against it.

For example the translation CLI tool will not work properly if we do. It would be nice, but it is not required.

Reference

This is what I used to change the file structure:

• Setting up multi-language installations squidfunk/mkdocs-material#2346

Staging website

A staging.gbfs.org website has been created and entirely separated from gbfs.org. I updated the script that updates the contents of that website and anyone can fire an update manually from here or, whenever a commit to master occurs the workflow will be triggered automatically.

Important

I deactivated the original script that updates gbfs.org automatically as this is not desired.

The _ vs - issue...

Well the - won. Following a suggestion from Brian Ferris (I think?) we had to change all URLs, folders and document names in docs/ to use dashes instead of underscores while working on gtfs.org. That was not an easy task.

Therefore we should keep this in mind with this new design.

Note

So far no .md files or folders have underscores in them, so that's good.

mkdocs.yml files

There is now a separate mkdocs.yml file for each language (located in config/).

Documentation files remain in docs/ in their respective short language code (en, fr, es).

Compiling/building the site's files

We now have to use make serve to serve the files or make build to build the site. From now on, the files will be generated inside the /generated folder instead of /site.

Except for English, each language ends up in a subfolder named after the short language code (fr, es). English ends up at the root of generated/

README

I updated the README by adding the Python virtual environment step as well as mentioning that users should use the make serve command instead of mkdocs serve due to the new file structure.

MakeFile

The MakeFile file was updated as well since each language has its own website when you serve the site locally. Same idea for building the site. Not ideal, but no other choice.

PIP plugin requirements

I updated the requirements.txt to the latest versions of each plug-in. Might as well 🤷 ...

Miscellaneous

I removed files/folders that did not seem to be valid anymore with this update, like:

• /simpleen.config.json
• /package.json
• /hooks/
• /site/ (now generated)
• Updated icons & images with the new GBFS logo, in overrides/assets/images/.
• I eliminated as many errors during compile as possible, like missing links or images. Some remains for 3 images in guide.md but for some reason they still show up on the website??

Same warnings for all 3 languages:

WARNING -  Doc file 'guide.md' contains a link '../assets/shared_vehicles.jpeg', but the target is not found among documentation files. Did you mean 'assets/shared_vehicles.jpeg'?
WARNING -  Doc file 'guide.md' contains a link '../assets/bike_share_station.jpeg', but the target is not found among documentation files. Did you mean 'assets/bike_share_station.jpeg'?
WARNING -  Doc file 'guide.md' contains a link '../assets/shared_scooter.jpeg', but the target is not found among documentation files. Did you mean 'assets/shared_scooter.jpeg'?

What's left to do...

1. Landing page, obvi ;-)
2. Logos are not correct in the header of each page.
3. In overrides/assets/stylesheets/ need to update the extra.css and remove extra_old.css if no longer valid (comes from the current live site).1. In overrides/partials/logo.html the logos seem to be missing.
4. In overrides/404.html need to change yellow for light cyan.
5. In overrides/assets/javascript/sw.js is an empty file, still needed?
6. I think some links to images still use img/ instead of the new assets/, especially files in specifications/.
7. Localize images? Like in guide/ for example.
8. We could rename some .md files to match the title, for example guide.md is Get started, or specifications.md is Documentation. If we do, we need to create redirects in case people bookmarked these URLs.
9. Build the list of redirects to apply after merging back to the source repo.

Colours

PRIMARY ->   Cyan : #43E0FF   Black      : #080808

ACCENT  ->   Blue : #3859FA   Cyan @ 35% : #85EBFF