https://github.com/geops/alma-website
https://github.com/geops/alma-website
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/geops/alma-website
- Owner: geops
- Created: 2025-11-17T10:08:51.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2026-01-26T12:00:10.000Z (5 months ago)
- Last Synced: 2026-01-27T01:39:41.904Z (5 months ago)
- Language: Astro
- Homepage: https://alma-website-geops.vercel.app
- Size: 7.11 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# alma Website
Official website for **alma** – the modern, web-based solution for managing polluted sites (Kataster belasteter Standorte).
## 🚀 Quick Start
### Prerequisites
- Node.js 20 or higher
- pnpm
### Installation
```bash
pnpm install
```
### Development
```bash
npm run dev
```
Open [http://localhost:4321](http://localhost:4321) in your browser.
### Build
```bash
npm run build
```
## 🏗️ Project Structure
```
/
├── public/ # Static assets (favicon, images, etc.)
├── src/
│ ├── components/ # Reusable Astro components
│ │ ├── graphics/ # Vector graphics used in components
│ │ ├── icons/ # Vector icons used in components
│ │ ├── images/ # Raster images used in components
│ │ └── Button.astro
│ ├── fonts/ # Local font files (Satoshi)
│ ├── pages/ # Page routes
│ │ ├── [locale].astro # Localized version
│ │ └── index.astro # Default page (redirects to browser or default locale)
│ ├── lib.ts # Utility functions (i18n, etc.)
│ ├── tailwind.css # Tailwind CSS configuration
│ └── translations.json # All translatable content
└── package.json
```
## 🌍 Internationalization (i18n)
The website supports three languages: **German (de)**, **French (fr)**, and **Italian (it)**.
### How Translation Works
All translatable content is stored in `src/translations.json` using a flat structure with dot notation:
```json
{
"de": {
"navigation.about": "Über alma",
"header.heading": "Einfach. Sicher. Gemeinsam entwickelt."
}
}
```
### Using Translations in Components
```astro
---
import { useTranslations } from "../lib.ts";
const t = useTranslations(Astro.currentLocale);
---
{t("header.heading")}
```
### Translation Key Convention
Keys follow a hierarchical naming pattern:
- `navigation.*` - Navigation items
- `header.*` - Header section content
- `about.*` - About section content
- `feature.*` - Feature section content
- `feature.data.*` - Data management feature
- `feature.geodata.*` - Geodata feature
- `feature.workflow.*` - Workflow feature
- `feature.export.*` - Export feature
## 📝 Content Management
### For Content Managers
All website content can be edited in a single file: **`src/translations.json`**
#### Editing Text Content
1. Open `src/translations.json`
2. Find the key you want to edit (e.g., `"header.heading"`)
3. Update the text for each language (`de`, `fr`, `it`)
4. Save the file
#### HTML in Translations
Some content includes HTML tags for formatting:
```json
"header.description": "alma unterstützt Behörden bei der Führung des Katasters"
"feature.data.list": "
```
- `` - Bold text
- `
- `
` - Line break
### Adding New Content
1. Add a new key in `src/translations.json` for all three languages
2. Use the key in your Astro component with `t("your.new.key")`
## 🎨 Styling
The project uses **Tailwind CSS v4** with custom configuration:
- Custom colors defined in `src/tailwind.css`
- Satoshi font family (locally hosted)
### Custom Theme
```css
@theme {
--color-gray-500: #d0d5dd;
/* Add more custom colors here */
}
```
## 🛠️ Tech Stack
- **Framework:** [Astro 5](https://astro.build/) - Static site generator
- **Styling:** [Tailwind CSS v4](https://tailwindcss.com/) - Utility-first CSS
- **Fonts:** Satoshi (locally hosted)
- **Package Manager:** pnpm
- **Formatting:** Prettier with Astro and Tailwind plugins
## 🤝 Contributing
### For Developers
1. Create a new branch from `main`
2. Make your changes
3. Run `pnpm format` to format code
4. Test locally with `pnpm dev`
5. Create a pull request
### Code Style
- Use Prettier for formatting (run `pnpm format`)
- Follow existing component patterns
- Use TypeScript for type safety
- Keep components small and reusable
## 📄 License
[Add license information here]
## 🔗 Links
- [alma Demo](https://demo.alma-os.ch/)
- [Repository](https://github.com/geops/alma-website)