https://github.com/dataesr/bso-ui
French Open Science Monitor - Website
https://github.com/dataesr/bso-ui
Last synced: 3 months ago
JSON representation
French Open Science Monitor - Website
- Host: GitHub
- URL: https://github.com/dataesr/bso-ui
- Owner: dataesr
- License: mit
- Created: 2021-05-19T13:39:46.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2026-02-18T17:39:39.000Z (4 months ago)
- Last Synced: 2026-02-18T18:28:15.989Z (4 months ago)
- Language: JavaScript
- Homepage: https://frenchopensciencemonitor.esr.gouv.fr/
- Size: 55.9 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bso-ui
[](https://discord.gg/TudsqDqTqb)
[](https://github.com/dataesr/bso-ui/actions/workflows/production.yml)
[](https://archive.softwareheritage.org/browse/origin/?origin_url=https://github.com/dataesr/bso-ui)
Application web du Baromètre de la Science Ouverte accessible ici :
* fr : https://barometredelascienceouverte.esr.gouv.fr/
* en : https://frenchopensciencemonitor.esr.gouv.fr/
## Requirements
* node >= 18
* npm > 7
## Boilerplate
The version number follows [semver](https://semver.org/).
To push in prod, run `npm run deploy -- [patch|minor|major]`
## Workflow
The workflow to submit a new FOSM local variation is described in workflow.md.
## Ajouter une nouvelle icône BSSO
* Ajouter le fichier `icon-bsso-[x].svg` dans `src/components/Icon/svg` en respectant ce format de nommage
* Ajouter à la balise `` du fichier la class `icon-bsso-[x]`
* Ajouter une balise `` pour l'accessibilité
* Ajouter aux balises `` les classes correspondantes `class="color-1"` `class="color-2"`
* Mettre à jour la variable `$icon-bsso-max` dans `src/style/variables.scss`
### Utilisation
```js
```
## Utiliser le glossaire
### 1. Ajouter les clefs nécessaires dans les fichiers de langues `src/translations/fr.json` et `src/translations/en.json`
> La balise `app.word` correspond au mot cliquable du texte dans la page
```json
{
"app.entry": "Entry in glossary",
"app.definition": "My definition my-link",
"app.word": "word to click",
"app.text": "Lorem app.word-1 ip my-link sum app.word-2."
}
```
### 2. Ajouter l'entrée voulue dans `glossary.json` avec les clefs de langues correspondantes
> La clef `intlEntry` correspond au titre dans le volet Glossaire
>
> La clef `cta` est optionnelle
```json
{
"entry": {
"intlEntry": "app.entry",
"intlDefinition": "app.definition",
"cta": "https://www.this-is-my-link.com"
}
}
```
### 3. Ajouter le composant `Glossary` dans la page
```js
import GlossaryEntries from 'glossary.json';
```
### 4. Ajouter dans la page le composant `GlossaryFormattedMessage` à l'emplacement souhaité
> La props `intlKey` correspond au texte dans lequel se trouve le mot clickable
>
> La props `glossaryKeys` correspond aux clefs dans `glossary.json` (dans l'ordre dans lequel elles apparaissent dans le texte)
>
> La props `link` est optionnelle
```js
```