mms43-v2/README.md

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
• 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

hugo server -D

Building for production

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:

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 for client-side reactivity:

• searchBlock(): Search form management with autocomplete
• rechercheApp(): Results display and map interaction

MapLibre Map

The map uses MapLibre GL JS 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:

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.