bespinian.io

The bespinian website reachable at bespinian.io

Setup

The project uses a Nix Flake. To get started, install Nix and run nix develop. This will provide you with a shell and all the necessary tools to run and develop the app.

🚀 Project Structure

This is an Astro-based multilingual website with the following structure:

/
├── public/             # Static assets (favicon, images, robots.txt)
└── src/
    ├── assets/         # Image assets (logos, team photos, partners, etc.)
    ├── components/     # Reusable Astro components
    ├── content/        # Content collections (blog posts, customers, jobs, services)
    ├── i18n/           # Internationalization (translations)
    ├── layouts/        # Page layouts
    ├── lib/            # Utility functions
    ├── pages/          # File-based routing with [lang] dynamic routes
    └── styles/         # Global styles

🧞 Commands

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

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run check	Run Astro type checking
npm run format	Format code with Prettier
npm run lint	Check formatting (Prettier) and lint (ESLint)
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

👱‍♀️ Adding Yourself as a Member

1. Add your portrait to src/assets/team.
2. Add your information to src/content/members/members.json.
3. Create a PR.

📝 Adding a Blog Post

1. Add your blog post to src/content/blog/en/my-blog-topic.md with the respective frontmatter, and its German translation under the same file name in src/content/blog/de/.
2. Add a header image from Pexels to src/assets/blog.
3. Run magick mogrify -resize 1600 your-image.jpg to reduce the image width to 1600 pixels. This improves loading times and SEO. Mogrify is a command-line tool of ImageMagick.
4. If your blog post features other images, create a folder src/assets/blog/my-blog-topic and put them in there.
5. Create a PR with your new blog post. Set draft: true in the frontmatter to merge it without publishing it yet: drafts only show up on the dev server.

✨ Adding a Customer Story

1. Add your customer story to src/content/customers/en/my-customer.md with the respective frontmatter.
2. Add the customer's logo (preferably as an SVG) to src/assets/customers.
3. Send the story to the customer for review and get their quote.
4. Add the German translation under the same file name in src/content/customers/de/.
5. If they are OK with us publishing it, create a PR with your new customer story. Until then, keep draft: true in the frontmatter of both files.

🌍 Languages

The site is available in English (en), German (de) and Bernese Swiss German (ch). Blog posts and customer stories live in one subdirectory per language (en/, de/, ch/); files placed directly in a collection folder, like the jobs, are English only. Where a translation is missing, the page falls back to the closest language that has one: Swiss German falls back to German, and everything falls back to English. Such fallback pages point their canonical URL at the page they copy and are left out of the sitemap.