|
1 | | -# Open Knowledge Belgium — website (v2) |
| 1 | +# Open Knowledge Belgium website |
2 | 2 |
|
3 | | -A modern rebuild of [openknowledge.be](https://openknowledge.be), the umbrella-organisation |
4 | | -site for Open Knowledge Belgium. |
| 3 | +The official website of **[Open Knowledge Belgium](https://openknowledge.be)** — an umbrella |
| 4 | +organisation (vzw/asbl) for the many open-knowledge and open-data initiatives in Belgium. |
5 | 5 |
|
6 | | -Built with **Astro** + **React islands** + **Tailwind** (Relume design system), with animated |
7 | | -sections and git-based Markdown content (no CMS). |
| 6 | +[](https://openknowledge.be) |
| 7 | +[](LICENSE) |
| 8 | +[](https://github.com/openknowledgebe/website-v2/actions/workflows/deploy.yml) |
8 | 9 |
|
9 | | -## Tech stack |
| 10 | +It's a fast, static site built with [Astro](https://astro.build). All content lives as plain |
| 11 | +Markdown in this repo, so it's easy to read, review, and contribute to — no CMS or login required. |
10 | 12 |
|
11 | | -| Concern | Choice | |
| 13 | +--- |
| 14 | + |
| 15 | +## ✨ Contributing |
| 16 | + |
| 17 | +We welcome contributions from the community — fixing a typo, adding a story, updating an |
| 18 | +activity, or improving the site itself. |
| 19 | + |
| 20 | +The easiest way: **edit a Markdown file straight on GitHub** (use the ✏️ button on any file) and |
| 21 | +open a pull request. For anything bigger, fork the repo and run it locally (below). |
| 22 | + |
| 23 | +Common edits: |
| 24 | + |
| 25 | +| I want to… | Edit | |
12 | 26 | |---|---| |
13 | | -| Framework | [Astro 5](https://astro.build) (static output) | |
14 | | -| Interactive/animated sections | React islands hydrated with `client:visible` / `client:load` | |
15 | | -| Animation | [`motion`](https://motion.dev) (Framer Motion), tasteful scroll reveals + hover | |
16 | | -| Styling | Tailwind 3 + [`@relume_io/relume-tailwind`](https://relume.io) preset + OKBE brand tokens | |
17 | | -| UI components | Relume (vendored, shadcn-style — we own the files) | |
18 | | -| Content | Markdown in `src/content/*` via Astro content collections | |
19 | | -| Package manager | pnpm | |
| 27 | +| Publish a **story / blog post** | add a file in [`src/content/stories/`](src/content/stories) | |
| 28 | +| Add or update an **activity / project** | a file in [`src/content/activities/`](src/content/activities) | |
| 29 | +| Change the **Home / About / Team** pages | [`src/content/pages/`](src/content/pages) | |
| 30 | +| Update **navigation, footer, contact** | [`src/config/site.ts`](src/config/site.ts) | |
20 | 31 |
|
21 | | -## Getting started |
| 32 | +See [Editing content](#-editing-content) for the field details. Every pull request gets a preview |
| 33 | +build, and once merged it deploys to [openknowledge.be](https://openknowledge.be) automatically. |
| 34 | + |
| 35 | +## 🚀 Run it locally |
| 36 | + |
| 37 | +Requires [Node.js](https://nodejs.org) 22+ and [pnpm](https://pnpm.io). |
22 | 38 |
|
23 | 39 | ```bash |
24 | 40 | pnpm install |
25 | 41 | pnpm dev # http://localhost:4321 |
26 | | -pnpm build # static build -> dist/ |
| 42 | +pnpm build # production build → dist/ |
27 | 43 | pnpm preview # preview the production build |
28 | 44 | ``` |
29 | 45 |
|
30 | | -## Project structure |
| 46 | +## 🧩 Tech stack |
| 47 | + |
| 48 | +| | | |
| 49 | +|---|---| |
| 50 | +| Framework | [Astro](https://astro.build) — static output | |
| 51 | +| Interactivity & animation | React islands + [`motion`](https://motion.dev) (scroll reveals, hover) | |
| 52 | +| Styling | Tailwind CSS + the [Relume](https://relume.io) design system + OKBE brand tokens | |
| 53 | +| Content | Markdown via Astro content collections | |
| 54 | +| Hosting | GitHub Pages (auto-deploy on push to `main`) | |
| 55 | + |
| 56 | +## 📁 Project structure |
31 | 57 |
|
32 | 58 | ``` |
33 | 59 | src/ |
34 | 60 | ├── components/ |
35 | | -│ ├── react/ # animated islands (Hero, Navbar, grids, CTA, Reveal) |
36 | | -│ ├── ui/ # vendored Relume primitives (button, card, input) |
37 | | -│ ├── Footer.astro |
38 | | -│ └── PageHeader.astro |
| 61 | +│ ├── react/ # interactive/animated islands (Hero, Navbar, grids, newsletter…) |
| 62 | +│ └── ui/ # design-system primitives (button, card, input) |
39 | 63 | ├── content/ |
40 | | -│ ├── stories/ # ~130 blog posts (Markdown) |
41 | | -│ ├── activities/ # project/community pages (Markdown) |
42 | | -│ └── pages/ # home / about / team singletons (Markdown frontmatter) |
43 | | -├── config/site.ts # nav, footer, socials, contact |
44 | | -├── layouts/ # BaseLayout (SEO/head) + PageLayout (nav + footer) |
45 | | -├── lib/content.ts # collection helpers (sorting, excerpts, cards) |
46 | | -├── pages/ # routes |
47 | | -└── styles/global.css # Tailwind + fonts + article/prose styles |
48 | | -
|
49 | | -public/uploads/ # migrated images (stories / activities / team / home) |
| 64 | +│ ├── stories/ # blog posts (Markdown) |
| 65 | +│ ├── activities/ # projects & communities (Markdown) |
| 66 | +│ └── pages/ # Home / About / Team (Markdown frontmatter) |
| 67 | +├── config/site.ts # nav, footer, socials, contact — one place |
| 68 | +├── layouts/ # page shell + SEO/head |
| 69 | +├── lib/ # content helpers |
| 70 | +├── pages/ # routes |
| 71 | +└── styles/ # global styles + article typography |
| 72 | +public/uploads/ # images, referenced with absolute /uploads/… paths |
| 73 | +``` |
| 74 | + |
| 75 | +## 📝 Editing content |
| 76 | + |
| 77 | +All content is plain Markdown with a small YAML frontmatter block at the top. |
| 78 | + |
| 79 | +**A story** — `src/content/stories/<yyyymmdd-slug>.md` |
| 80 | + |
| 81 | +```yaml |
| 82 | +--- |
| 83 | +title: Your headline |
| 84 | +date: 2026-01-31 |
| 85 | +author: Your name |
| 86 | +tags: [open data, event] |
| 87 | +excerpt: One-sentence summary (optional). |
| 88 | +--- |
| 89 | +Your post, in Markdown. Images go in public/uploads/stories/<slug>/ and are |
| 90 | +referenced like /uploads/stories/<slug>/photo.jpg |
50 | 91 | ``` |
51 | 92 |
|
52 | | -## Editing content |
| 93 | +**An activity** — `src/content/activities/<slug>.md` |
| 94 | + |
| 95 | +- `status: active` lists it under **“Active now”**; `status: past` (the default) files it under |
| 96 | + **“Past activities”**. When nothing is active, the site invites people to start something. |
| 97 | +- Other fields: `name`, `logo`, `tags`, `to` (website), `catchphrase`, `featured_image`, |
| 98 | + `contact_info`, `members`. |
| 99 | + |
| 100 | +**Home / About / Team** — `src/content/pages/{home,about,team}.md`. |
53 | 101 |
|
54 | | -All content is plain Markdown — edit it in the repo (or on GitHub) and push. |
| 102 | +## 🎨 Brand |
55 | 103 |
|
56 | | -- **A story:** add `src/content/stories/<yyyymmdd-slug>.md` with frontmatter |
57 | | - `title`, `date`, `author`, `tags`, optional `excerpt`. Images go in |
58 | | - `public/uploads/stories/<slug>/` and are referenced with absolute `/uploads/...` paths. |
59 | | -- **An activity:** add `src/content/activities/<slug>.md` (`name`, `status`, `logo`, |
60 | | - `tags`, `to`, `catchphrase`, `featured_image`, `contact_info`, `members`). |
61 | | - - `status: active` shows it under **"Active now"** on `/activities` and on the home page. |
62 | | - - `status: past` (the default) files it under **"Past activities"**. |
63 | | - - With no active activities, the home page and `/activities` show an invitation to |
64 | | - start one instead of an empty grid. |
65 | | -- **Home / About / Team:** edit `src/content/pages/{home,about,team}.md`. |
66 | | -- **Nav / footer / contact:** edit `src/config/site.ts`. |
| 104 | +- Deep purple `#301948` and electric purple `#641bff` |
| 105 | +- Headings in **Work Sans**, body in **Chivo** |
67 | 106 |
|
68 | | -## Brand |
| 107 | +## 📣 Newsletter |
69 | 108 |
|
70 | | -- Deep purple `#301948` (`brand`), electric purple `#641bff` (`electric`) |
71 | | -- Titles: Work Sans · Body: Chivo |
| 109 | +The signup form posts to an [n8n](https://n8n.io) automation |
| 110 | +(`automation.openknowledge.be`) that stores subscribers. The endpoint lives in |
| 111 | +[`src/config/site.ts`](src/config/site.ts). |
72 | 112 |
|
73 | | -## Notes |
| 113 | +## 📄 License |
74 | 114 |
|
75 | | -- The old Gatsby + Netlify CMS site was migrated with `scripts/migrate-content.mjs` |
76 | | - (kept for reference). |
77 | | -- The newsletter form currently falls back to a `mailto:` subscribe. Wire a real |
78 | | - endpoint by passing `action` to `<NewsletterCTA>`. |
| 115 | +Code is released under the [MIT License](LICENSE). Site content is © Open Knowledge Belgium, |
| 116 | +shared under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) unless noted otherwise. |
0 commit comments