Prototype d'environnement de publication Web v2

Ce prototype utilise le framework Gatsby, contrairement à la version 1 qui était basée sur Astro. Il va donc vous falloir réexécuter la commande d'installation.

Prérequis

Node.js LTS

Par souci d'uniformité, nous allons tous utiliser la version LTS courante de Node.js, soit 20.11.1.

Vous pouvez utiliser le gestionnaire NVM Windows sur Windows, ou Node Version Manager (NVM) pour macOS.

Visual Code

Nous recommandons d'utiliser l'éditeur de code Visual Sudio Code (VS Code) de Microsoft, avec les extensions suivantes:

• MDX, pour une prise en charge de MDX, une extension du langage Markdown

Installation

git clone https://github.com/bibudem/coquille-web.git
cd coquille-web
npm install

Pour commencer

Exécutez la commande suivante dans le dossier du projet:

npm run dev

Puis ouvrez un navigateur à l'URL suivante:

http://localhost:8000

Dans VS Code, allez dans File > Open Folder..., puis dirigez vous vers votre dossier prototype-web local du projet.

Les pages à éditer sont dans le dossier content/. Vous pouvez modifier le contenu des fichier ou ajouter des pages (.mdx), les changements seront reflétés instantanément dans votre navigateur.

Autres commandes

Commande	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:8000
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying, at localhost:9000

Pour créer une nouvelle release

Commitez tous vos changements en attente, puis exécutez la commande suivante:

npm version minor -m "Bump v%s" && git push

Déploiement automatique

Rafraîchissez cette page pour une mise à jour du statut de déploiement.

Environnement	Statut de déploiement
pre-production
production

Chaque commit sur le dépôt GitHub déclanchera une nouvelle compilation des sources de la branche main et un déploiement sur Netlify à l'adresse:

https://bib-pp.umontreal.ca

Les commits dans la branche production déclanchent un déploiement sur Netlify à l'adresse:

https://bib-prod.umontreal.ca*

* Adresse temporaire. Elle sera remplacée le jour du lancement du site par https://bib.umontreal.ca.

Composants disponibles

Le prototype utilise la librairie Material UI. Tous les composants de cette librairie peuvent être utilisées dans les fichiers markdown (.mdx). Les composants suivants sont pré-chargés dans le prototype et peuvent donc être utilisés directement:

Composant	Source (package node)
Accordion, AccordionDetails, AccordionSummary	@mui/material
Button	@mui/material
Box	@mui/material
HeroWithImage	@bibudem/coquille-web
HeroWithText	@bibudem/coquille-web
CardWithIcon	@bibudem/coquille-web
Carousel	react-material-ui-carousel
Divider	@mui/material
Grid v2	@mui/material
IconInSquare	@bibudem/coquille-web
Link	@bibudem/coquille-web
List, ListItem, ListItemButton, ListItemIcon, ListItemText	@mui/material
Section	@bibudem/coquille-web
Tabs, Tab	@mui/material
Typography	@mui/material

Les autres composants de la librairie doivent être importées pour être utilisées. Par exemple:

une-page.mdx

---
title: Une page
---

import {Card, CardContent, CardMedia, CardActionArea }  from '@mui/material'

# Exemple React utilisant le composant Typography et d'autres composants importés localement

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Hendrerit dolor magna eget est lorem.

<Card sx={{ maxWidth: 345 }}>
  <CardActionArea>
    <CardMedia
      component="img"
      height="140"
      image="/static/images/cards/contemplative-reptile.jpg"
      alt="green iguana"
    />
    <CardContent>
      <Typography gutterBottom variant="h5" component="div">
        Lizard
      </Typography>
      <Typography variant="body2" sx={{ color: theme => theme.palette.text.secondary>
        Lizards are a widespread group of squamate reptiles, with over 6,000
        species, ranging across all continents except Antarctica
      </Typography>
    </CardContent>
  </CardActionArea>
</Card>

Consultez la documentation de Material UI pour la liste complète des composants disponibles.

Bibliothèques et Points de service

Titre	ID
Aménagement	amenagement
Parc	parc
Centre de conservation Lionel-Groulx	conservation
Livres rares et collections spéciales	lrcs
Droit	droit
Thérèse-Gouin-Décarie	tgd
Point de service : À venir - Jardin Botanique, Brossard, Médecine	jardin-botanique
Kinésiologie	kinesiologie
Campus de Laval	laval
Centre de conservation 101, boul. Marcel-Laurin	marcel-laurin
Mathématiques et informatique	math-info
Musique	musique
Médecine vétérinaire	medecine-veterinaire
Marguerite-d'Youville	marguerite-d-youville
Santé	sante
Hubert-Reeves	Hubert-reeves
Lettres et sciences humaines	lsh