Website for Forgejo

This website is built with Astro and Tailwind CSS, and is based on the AstroWind template.

When a branch foobar is pushed to the repository, the content is rendered for preview at https://forgejo.codeberg.page/@foobar/.

When a PR is created, its content is rendered for preview at https://forgejo.codeberg.page/@pull_1234/ where 1234 is the number of the PR.

The forgejo-website user is dedicated to providing an application token set to websitetoken and allows for publishing the branch and CI previews in https://codeberg.org/forgejo/pages.

Hosting

The website is hosted at our Kubernetes cluster and the technical details on how this is done can be found in the CI configuration at .forgejo/workflows and the k8s-cluster repo.

• https://code.forgejo.org/forgejo/html-website
• https://codeberg.org/forgejo/k8s-cluster/src/branch/main/flux/apps/static-site/forgejo.yaml
• https://codeberg.org/forgejo/k8s-cluster/src/branch/main/flux/apps/charts/static-site

Contributing

Format locally

docker run --rm -ti -v $(pwd):$(pwd) -w $(pwd) node:20 bash -c 'corepack enable ; pnpm install --frozen-lockfile ; pnpm run format'

Commands

All commands are run from the root of the project, from a terminal:

See the AstroWind docs for more information.

Project structure

The following is the default structure of the AstroWind template:

/
├── data/
| └── blog/
| ├── post-slug-1.md
| ├── post-slug-2.mdx
| └── ...
├── public/
│ ├── robots.txt
│ └── favicon.ico
├── src/
│ ├── assets/
│ │ ├── images/
| | └── styles/
| | └── base.css
│ ├── components/
│ │ ├── atoms/
│ │ ├── blog/
│ │ ├── core/
| | └── widgets/
| | ├── Header.astro
| | ├── Footer.astro
| | └── ...
│ ├── layouts/
│ | |── BaseLayout.astro
│ | └── ...
│ ├── pages/
│ | ├── [...blog]/
| | | ├── [...page].astro
| | | └── [slug].astro
│ | ├── [...categories]/
| | | └── [category]/
| | | └── [...page].astro
│ | ├── [...tags]/
| | | └── [tag]/
| | | └── [...page].astro
│ | ├── index.astro
| | ├── 404.astro
| | └-- rss.xml.js
│ ├── utils/
│ └── config.ts
├── package.json
└── ...

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory if they do not require any transformation or in the assets/ directory if they are imported directly.

Manual testing

When doing some dependency upgrade (e.g. using pnpm update), the following should be manually tested:

Note that ideally both the mobile (narrow) and desktop (wide) versions should be tested

• visit the homepage
• visit the rss.xml feed (⚠️ the menu button points to the main version: put the URL manually in case of a pull request with /@pull_XX prefix)
• switch the theme (light/dark)
• visit the FAQ
• visit the Releases page (there should be one Stable and one LTS tag)
• visit the News page
• visit the News page for a given tag (report for instance)
• visit the first News
• visit the docs /latest
• visit the docs /next
• visit the docs /v11.0
• visit the docs > Admin > Reverse proxy and check that all code blocks have syntax coloring
• visit the docs > Admin > Configuration Cheat Sheet and check that the internal page navigation (on the right) behaves correctly (independently scrollable / click on item goes to the right place) only available on desktop for now
• check the menu toggling only for mobile