Opener Initiative Website

This repository contains the source code for the Opener Initiative's website.

Getting Started

The easiest way to get a working environment is the included dev container (VS Code → "Reopen in Container"), which provides Bun and all dependencies.

Otherwise, with Bun installed:

bun install      # install dependencies
bun run dev      # start Astro dev server at http://localhost:8080

Other useful commands include:

bun run build    # production build -> dist/
bun run preview  # serve the production build locally
bun run check    # type-check
bun run lint     # lint

Tech Stack

This project is built with:

• Astro
• TypeScript
• React
• shadcn-ui
• Tailwind CSS

Project Structure

├── public/                static files (favicon, robots.txt)
└── src/
    ├── assets/            logos and images
    ├── components/        Astro and React components
    ├── content/           news posts and member profiles
    ├── layouts/           page shell
    ├── lib/               shared helpers
    ├── pages/             routes
    ├── content.config.ts  content collection schemas
    └── index.css          global styles and light/dark themes

Posting News

Every post is a folder under src/content/news/, sorted into year and month (zero-padded):

src/content/news/2049/11/dect-world/
├── index.md         the post
├── hero.png         the cover picture
└── booth.png        any other images

The folder name becomes the address, here /news/2049/11/dect-world/.

index.md starts with a header block between --- lines, followed by the post text in Markdown:

---
title: "DECT World 2049: A resounding success"
description: "A one-sentence summary. Shown on post cards and in the RSS feed."
pubDate: 2049-11-05
image: "./hero.png"
imageAlt: "Opener team members demoing the stack at DECT World 2049"
imageCredit: "(c) Opener Initiative"
draft: true
pinned: true
---

Post text. Start headings at `##`, and reference images like this:

![The Opener booth at DECT World 2049](./booth.png "Optional image caption goes here")

Insert quotes with an optional attribution as follows:

> I'm sorry, Dave. I'm afraid I can't do that.
>
> --- HAL 9000, Discovery One (2001: A Space Odyssey)

Good to know:

• Only title, description, and pubDate are required. All other fields are optional.
• pubDate is a plain date (YYYY-MM-DD) and orders the posts, newest first. It must match the post's year and month folders.
• image is the post's cover picture and imageAlt its description for screen readers. Make it 1200 × 630 pixels, or post cards and link previews will crop it. Leave both out for a text-only post, but never one of them.
• imageCredit adds an attribution below the cover picture.
• draft: true can be used for news items that are not yet to be published. If set, the post is kept out of the build and the corresponding HTML page is not generated.
• pinned: true keeps a post at the front of the landing page and the newsroom, ahead of newer entries, and puts a golden star on its card. If multiple entries are pinned, they are ordered by pubDate. The RSS feed ignores pins and stays strictly newest to oldest.
• A post appears on the landing page, in the newsroom, and in the RSS feed automatically.

If something is wrong or missing, the build stops with a corresponding error message.

Creating Member Profiles

Add your profile by creating a new folder under src/content/members/, for example:

src/content/members/wey-yu/
├── index.md         the profile
├── logo.svg         the logo
├── logo-dark.svg    the logo for dark mode
├── cover.png        the cover picture (optional)
└── team.png         any other images used in the profile text

The folder name becomes the address of the profile page, here /members/wey-yu/. Clicking the logo on the landing page opens the member's profile.

index.md starts with a header block between --- lines, followed by the profile text in Markdown:

---
name: "Weyland-Yutani Corporation"
logoLight: "./logo.svg"
logoDark: "./logo-dark.svg"
url: "https://en.wikipedia.org/wiki/Alien_(film)"
email: "contact@example.com"
location: "Earth"
cover: "./cover.png"
coverAlt: "The commercial towing vehicle USCSS Nostromo in orbit above LV-426"
---

Profile text. Start headings at `##`, and reference images like this:

![The crew of the USCSS Nostromo](./team.png)

Good to know:

• name is the full name, as the member writes it. It is the page title, is announced by screen readers, and is used to sort logos alphabetically.
• logoLight is the logo shown on light backgrounds, whereas logoDark is the one used in dark mode. If one logo works on both light and dark backgrounds, point both fields at the same file. Please provide SVG files with a transparent background and no excessive padding. Logos are sized automatically and appear equally prominent.
• url points to the member's own website. It is shown on the profile page.
• email is an optional contact address. It is shown on the profile page as a link that opens the visitor's mail program.
• location is optional free text, e.g. a city and country.
• cover is the optional picture that is shown across the top of the profile page and coverAlt is its description for screen readers. Leave both out for a page without a cover, but never one of them. The picture is shown in its own aspect ratio and is not cropped, unless it is taller than 2:1. Make it at least 1500 pixels wide. Banners from other social pages, such as LinkedIn, can be reused as they are.
• Writing a profile text is optional, but strongly encouraged. Without it, the page consists of the cover, logo, name, and details alone.