ci: add firebase deploy

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "nos-voyages-a-velo"
+  }
+}

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: yarn install --frozen-lockfile && yarn build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_NOS_VOYAGES_A_VELO }}'
+          channelId: live
+          projectId: nos-voyages-a-velo

.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: yarn install --frozen-lockfile && yarn build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_NOS_VOYAGES_A_VELO }}'
+          projectId: nos-voyages-a-velo

firebase.json

@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}

gatsby-node.ts

@@ -33,7 +33,7 @@ export async function createPages({ actions, graphql }: CreatePagesArgs) {
 
     createPage({
       path: `/${key}`,
-      component: path.resolve(`src/pages/trip/index.tsx`),
+      component: path.resolve(`src/templates/trip/index.tsx`),
       context: {
         tripIndex,
         queryImages: files.length > 0,

src/pages/components/card.tsx → src/components/card.tsx

@@ -3,11 +3,11 @@ import { Link } from 'gatsby';
 import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image';
 import React, { Fragment } from 'react';
 
-import { Trip } from '../../fixtures';
+import { Trip } from '../fixtures';
 
-import TripThemes from './themes';
+import { TripThemes } from './themes';
 
-function TripCard({
+export function TripCard({
   trip: { key, coverImageDescription, title, strStartDate, stepsItems, themes, description },
   image,
 }: {
@@ -63,5 +63,3 @@ function TripCard({
     </LinkBox>
   );
 }
-
-export default TripCard;

src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './list';
+export * from './map';
+export * from './themes';

src/pages/components/list.tsx → src/components/list.tsx

@@ -2,11 +2,11 @@ import { Box, Button, ButtonGroup, Text } from '@chakra-ui/react';
 import { graphql, useStaticQuery } from 'gatsby';
 import React, { useEffect, useState } from 'react';
 
-import { Trip, trips } from '../../fixtures';
+import { Trip, trips } from '../fixtures';
 
-import TripCard from './card';
+import { TripCard } from './card';
 
-function List(): JSX.Element {
+export function TripsList(): JSX.Element {
   const [initialized, setInitialized] = useState(false);
   const [sortedBy, sortBy] = useState<'date' | '-date'>('-date');
   const [sortedTrips, sortTrips] = useState<Trip[]>(getTrips());
@@ -82,5 +82,3 @@ function List(): JSX.Element {
     </Box>
   );
 }
-
-export default List;

src/pages/components/map.tsx → src/components/map.tsx

@@ -2,11 +2,11 @@ import { Box, Text } from '@chakra-ui/react';
 import { Map as MaplibreMap, NavigationControl } from 'maplibre-gl';
 import React, { useEffect, useState } from 'react';
 
-import { trips } from '../../fixtures/trips';
+import { trips } from '../fixtures';
 
 const mapId = 'trips-map';
 
-function Map(): JSX.Element {
+export function TripsMap(): JSX.Element {
   const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
@@ -83,5 +83,3 @@ function Map(): JSX.Element {
     </Box>
   );
 }
-
-export default Map;

src/pages/components/themes.tsx → src/components/themes.tsx

@@ -1,9 +1,9 @@
 import { Box, Tag } from '@chakra-ui/react';
 import React from 'react';
 
-import { TTripTheme, tripThemesMap } from '../../fixtures';
+import { type TTripTheme, tripThemesMap } from '../fixtures';
 
-function TripThemes({ themes }: { themes: TTripTheme[] }): JSX.Element {
+export function TripThemes({ themes }: { themes: TTripTheme[] }): JSX.Element {
   if (themes.length === 0) return <></>;
 
   return (
@@ -19,5 +19,3 @@ function TripThemes({ themes }: { themes: TTripTheme[] }): JSX.Element {
     </Box>
   );
 }
-
-export default TripThemes;

src/fixtures/trips/index.ts

@@ -1,12 +1,12 @@
 import { lav22Trip } from './22-lav';
 import { veloFrancette23Trip } from './23-velo-francette';
 import { velodyssee23Trip } from './23-velodyssee';
-import { type TTripTheme, Trip, tripThemesMap } from './trip';
+import { type TTripTheme, Trip, TripStep, tripThemesMap } from './trip';
 
 export const trips: Trip[] = [
   new Trip(lav22Trip),
   new Trip(veloFrancette23Trip),
   new Trip(velodyssee23Trip),
 ];
 
-export { type TTripTheme, Trip, tripThemesMap };
+export { type TTripTheme, Trip, TripStep, tripThemesMap };

src/fixtures/trips/trip.ts

@@ -10,7 +10,7 @@ export const tripThemesMap: { [key in TTripTheme]: { label: string; color: strin
   nature: { label: 'Nature', color: 'green.500' },
 };
 
-export type TTripStep = {
+type TTripStep = {
   date: Date;
   distance: number;
   from: string;
@@ -35,7 +35,6 @@ export class TripStep {
   public readonly date: Date;
   public readonly distance: number;
   public readonly from: string;
-  public readonly geometry: GeoJSON.LineString;
   public readonly isLoop: boolean;
   public readonly photos: Array<{ path: string; description: string }>;
   public readonly simplifiedGeometry: GeoJSON.LineString;
@@ -45,13 +44,12 @@ export class TripStep {
     this.date = date;
     this.distance = distance;
     this.from = from;
-    this.geometry = geometry;
     this.photos = photos || [];
 
     this.isLoop = 'isLoop' in props && props.isLoop;
     this.to = 'to' in props ? props.to : this.from;
 
-    this.simplifiedGeometry = simplify(this.geometry, { tolerance: 0.01, highQuality: false });
+    this.simplifiedGeometry = simplify(geometry, { tolerance: 0.01, highQuality: false });
 
     const positions = this.simplifiedGeometry.coordinates.flatMap(([lng, lat]) => ({ lat, lng }));
     this.bounds = positions.slice(1).reduce(

src/pages/index.tsx

@@ -2,11 +2,9 @@ import { Box, Heading, Text } from '@chakra-ui/react';
 import type { HeadFC, PageProps } from 'gatsby';
 import React from 'react';
 
+import { TripsList, TripsMap } from '../components';
 import PageBreadcrumb from '../layout/breadcrumb';
 
-import List from './components/list';
-import Map from './components/map';
-
 function IndexPage({}: PageProps): JSX.Element {
   return (
     <>
@@ -39,8 +37,8 @@ function IndexPage({}: PageProps): JSX.Element {
           Le plus dur est de choisir laquelle emprunter pour le prochain !
         </Text>
       </Box>
-      <Map />
-      <List />
+      <TripsMap />
+      <TripsList />
     </>
   );
 }

src/pages/trip/index.tsx → src/templates/trip/index.tsx

@@ -1,11 +1,11 @@
 import { Box, Divider, Heading, Text } from '@chakra-ui/react';
-import { PageProps, graphql } from 'gatsby';
+import { type PageProps, graphql } from 'gatsby';
 import { GatsbyImage } from 'gatsby-plugin-image';
 import React, { Fragment, useState } from 'react';
 
+import { TripThemes } from '../../components';
 import { trips } from '../../fixtures';
 import PageBreadcrumb from '../../layout/breadcrumb';
-import TripThemes from '../components/themes';
 
 import TripMap from './map';
 import Step from './step';

src/pages/trip/map.tsx → src/templates/trip/map.tsx

@@ -2,7 +2,7 @@ import { Box, Text } from '@chakra-ui/react';
 import { Map as MaplibreMap, NavigationControl } from 'maplibre-gl';
 import React, { useEffect, useState } from 'react';
 
-import { Trip } from '../../fixtures/trips/trip';
+import { Trip } from '../../fixtures';
 
 const mapId = 'trip-map';
 

src/pages/trip/step.tsx → src/templates/trip/step.tsx

@@ -2,7 +2,7 @@ import { Avatar, Box, Heading, Text } from '@chakra-ui/react';
 import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image';
 import React, { useState } from 'react';
 
-import { TripStep } from '../../fixtures/trips/trip';
+import { TripStep } from '../../fixtures';
 
 function Step({
   stepIndex,