176 lines
5.4 KiB
Markdown
176 lines
5.4 KiB
Markdown
# MMS43 - Maison de la Mobilité Solidaire Haute-Loire
|
|
|
|
This repository contains the website for **MMS43** (Maison de la Mobilité Solidaire Haute-Loire), a solidarity mobility service in the Haute-Loire department of France.
|
|
|
|
## About MMS43
|
|
|
|
MMS43 is an organization that provides accessible mobility solutions for people who face transportation challenges. The platform offers a range of services to help individuals gain or maintain their mobility independence.
|
|
|
|
### Mobility Solutions
|
|
|
|
- **Transport Solidaire** - Solidarity transport services
|
|
- **Accompagnement Mobilité** - Mobility coaching and support
|
|
- **Location de Véhicules** - Vehicle rental services
|
|
- **Garage Solidaire** - Solidarity garage (affordable vehicle maintenance)
|
|
- **Auto-école Solidaire** - Solidarity driving school
|
|
- **Vélo-école** - Bicycle training school
|
|
|
|
## Technology Stack
|
|
|
|
- **Static Site Generator**: [Hugo](https://gohugo.io/)
|
|
- **Theme**: Custom theme (`mms43`)
|
|
- **Styling**: CSS with CSS variables for theming
|
|
- **Font**: Quicksand (Google Fonts)
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
mms43/
|
|
├── content/ # Page content (Markdown files)
|
|
│ └── pages/ # Site pages
|
|
├── themes/mms43/ # Custom Hugo theme
|
|
│ ├── assets/ # CSS, images, videos
|
|
│ ├── layouts/ # Hugo templates
|
|
│ └── static/ # Static files
|
|
└── hugo.yaml # Hugo configuration
|
|
```
|
|
|
|
## Features
|
|
|
|
- Responsive design (desktop, tablet, mobile)
|
|
- Dynamic contact forms with configurable fields
|
|
- Video integration
|
|
- Partner logos showcase
|
|
- Accessible navigation with mobile menu
|
|
|
|
## Development
|
|
|
|
### Prerequisites
|
|
|
|
- Hugo (extended version recommended)
|
|
|
|
### Running locally
|
|
|
|
```bash
|
|
hugo server -D
|
|
```
|
|
|
|
### Building for production
|
|
|
|
```bash
|
|
hugo --minify
|
|
```
|
|
|
|
## PARCOURSMOB Integration
|
|
|
|
This website is designed to be served by **PARCOURSMOB**, COOPGO's inclusive mobility platform. PARCOURSMOB acts as a reverse proxy that serves Hugo static files and dynamically hydrates journey search data.
|
|
|
|
### Architecture
|
|
|
|
```
|
|
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
|
|
│ Browser │────▶│ PARCOURSMOB │────▶│ Hugo Build │
|
|
│ │◀────│ (Go app) │◀────│ (static) │
|
|
└─────────────┘ └──────────────┘ └─────────────┘
|
|
│
|
|
▼
|
|
┌──────────────┐
|
|
│ APIs │
|
|
│ - Transit │
|
|
│ - Carpool │
|
|
│ - Vehicles │
|
|
│ - Knowledge │
|
|
└──────────────┘
|
|
```
|
|
|
|
### Data Hydration
|
|
|
|
PARCOURSMOB injects search data into the page via the global variable `window.__PARCOURSMOB_DATA__`. This variable contains:
|
|
|
|
```javascript
|
|
window.__PARCOURSMOB_DATA__ = {
|
|
searched: true, // Search was performed
|
|
departure: { /* GeoJSON Feature */ },
|
|
destination: { /* GeoJSON Feature */ },
|
|
departure_date: "2024-01-15",
|
|
departure_time: "08:30",
|
|
results: {
|
|
public_transit: {
|
|
number: 3,
|
|
results: [ /* OTP itineraries */ ]
|
|
},
|
|
carpools: {
|
|
number: 2,
|
|
results: [ /* RDEX/OCSS carpools */ ]
|
|
},
|
|
solidarity_drivers: {
|
|
number: 5
|
|
},
|
|
organized_carpools: {
|
|
number: 2
|
|
},
|
|
vehicles: {
|
|
number: 3,
|
|
results: [ /* Available vehicles */ ]
|
|
},
|
|
local_solutions: {
|
|
number: 4,
|
|
results: [ /* Knowledge base solutions */ ]
|
|
}
|
|
}
|
|
};
|
|
```
|
|
|
|
### Dynamic Pages
|
|
|
|
#### Search Page (`/recherche/`)
|
|
|
|
The search form sends the following parameters:
|
|
- `departure`: GeoJSON Feature of departure address (JSON stringified)
|
|
- `destination`: GeoJSON Feature of arrival address (JSON stringified)
|
|
- `departuredate`: Date in `YYYY-MM-DD` format
|
|
- `departuretime`: Time in `HH:MM` format
|
|
|
|
Address autocomplete uses the French government Address API (`api-adresse.data.gouv.fr`).
|
|
|
|
### Alpine.js Components
|
|
|
|
The site uses [Alpine.js](https://alpinejs.dev/) for client-side reactivity:
|
|
|
|
- `searchBlock()`: Search form management with autocomplete
|
|
- `rechercheApp()`: Results display and map interaction
|
|
|
|
### MapLibre Map
|
|
|
|
The map uses [MapLibre GL JS](https://maplibre.org/) with:
|
|
- Self-hosted PMTiles
|
|
- Custom markers for departure/arrival
|
|
- Journey display (decoded polylines)
|
|
- Geographic zones display (local solutions)
|
|
|
|
### Configuration
|
|
|
|
CTA (Call-to-Action) texts are configurable in the front matter of `/content/recherche/index.md`:
|
|
|
|
```yaml
|
|
contactCTA:
|
|
transit: "To organize your trip..."
|
|
carpool: "To organize your trip..."
|
|
solidarity: "To organize your trip..."
|
|
vehicles: "For more information..."
|
|
localSolutions: "For more information..."
|
|
localSolutionsText: "Mobi'Pouce, on-demand transport..."
|
|
```
|
|
|
|
### Deployment
|
|
|
|
1. Build the Hugo site: `hugo --minify`
|
|
2. Configure PARCOURSMOB to serve the `public/` folder
|
|
3. PARCOURSMOB intercepts requests to `/recherche/` and injects data
|
|
|
|
## License
|
|
|
|
This project is licensed under the **AGPLv3** (GNU Affero General Public License v3.0).
|
|
|
|
Brand elements (logos, trademarks, visual identity) are the property of **Maison de la Mobilité Solidaire de Haute-Loire** and are not covered by the open-source license.
|