[Blog] Making of Rezofora


```mermaid
mindmap
	root((Rezofora))
		Bootstrapping
			✅ Créer dépôt Github
			✅ Créer une app sveltekit
			✅ Remanier le README
			✅ Installer l'internationalisation
		Contenu
		Design
			✅ Intégrer le design system iroco-ui
				✅ Mettre à jour les dépendences du Design System
					✅ iroco-ui
					📌 iroco-app
					📌 landing
					📌 jmap-admin
					✅ rezofora
				✅ Support du base path non root
			Choix des couleurs
			Mise à jour du design system
				Variantes des composants
				Navigation : supporter un autre logo
		Accessibilité
			Audit Frago	
		Déploiement
			✅ Déploiement temporaire sur Github Pages
				https://iroco-co.github.io/rezofora/
			Déploiment définitif
			Mise en place d'un domaine
			Mise en place de SSL
			
```


## Bootstrapping

### Créer un dépôt git sur Github

Dans Github, j'ai créé un nouveau dépôt public https://github.com/iroco-co/rezofora, pour le moment
- sans README.md
- sans licence

### Créer une app sveltekit

```sh
npm create svelte@latest rezofora
```

```
Need to install the following packages:
create-svelte@6.0.8
Ok to proceed? (y) y

create-svelte version 6.0.8

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting, Add Vitest for unit testing
│
└  Your project is ready!

✔ Typescript
  Inside Svelte components, use <script lang="ts">

✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte

✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options

✔ Vitest
  https://vitest.dev

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-add

Next steps:
  1: cd rezofora
  2: npm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

```

Je m'assure que la branche principale s'appelle `main`.

> **Pourquoi [[Nommer la branche principale main]]?**
> 
> Traditionnellement dans [[Git]], le nom de la branche principale est `master`.
> Cela pose un problème car c'est un terme à connotation raciste comme par exemple `whitelist/blacklist` ou encore `master/slave`.


```sh
git branch -M main
```

On associe ensuite le dépôt git à celui qui a été créé sur Github.

```sh
git remote add origin git@github.com:iroco-co/rezofora.git
git push -u origin main
```

### Remanier le README

Le README généré par [[SvelteKit]] est très technique et manque d'informations sur l'intention portée par Rezofora.

Simplifions le

````md
# Rezofora

SveltKit Rezofora landing page.

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev -- --host
```

## Running tests

```sh
npm test
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with 

```sh
npm run preview -- --host --port
```

````

### Installer l'adapter pour sites statiques

Pour pouvoir construire et ensuite déployer [le site en statique](https://kit.svelte.dev/docs/adapter-static), installons l'adapter `@sveltejs/adapter-static`.

```sh
npm install @sveltejs/adapter-static --save-dev
```

`svelte.config.js`

```js 
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: undefined,
			precompress: false,
			strict: true
		})
	}
};

export default config;
```


`src/routes/+layout.ts`

```ts
export const prerender = true;
```


## Déploiement temporaire sur Github Pages

Installer l'utilitaire [gh-pages](https://github.com/tschaub/gh-pages).

```sh
npm install gh-pages --save-dev
```

`package.json`

```json
"scripts": {
  "deploy": "gh-pages -d dist"
}
```

Pour déployer, nous pouvons lancer la commande

```sh
npm run deploy
```

Celle-ci va récupérer le contenu du dossier `build` et le pousser vers la branche `gh-pages`

Nous pouvons ensuite configurer les Github pages (https://github.com/iroco-co/rezofora/settings/pages) pour lire le contenu de la branch `gh-page` et l'exposer sous la forme d'un site statique.

```mermaid
flowchart LR
Github --> Settings --> Pages --> build_and_deployment[Build and deployment] --> Source --> dfb[Deploy from a branch]
build_and_deployment --> Branch --> gh-pages
```

Nous trouvons ce paramétrage dans les "Settings" du dépôt Github.
- Settings
	- Pages
	- Build and deployment
		- Source : Deploy from a branch
		- Branch : gh-pages


## Intégrer le design system iroco-ui

Nous souhaitons capitaliser sur le [[Design System]] d'[[Iroco]].
C'est à dire que nous pouvons réutiliser et paramétrer les [[Composants Svelte]] utilisés dans l'écosystème d'Iroco.

```sh
npm install @iroco/ui
```

### Ouille! Erreur!
Il semble que notre Design System soit encore sur des dépendences en versions anciennes.

```
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: rezofora@0.0.1
npm ERR! Found: @sveltejs/kit@2.5.0
npm ERR! node_modules/@sveltejs/kit
npm ERR!   dev @sveltejs/kit@"^2.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @sveltejs/kit@"^1.16.3" from @iroco/ui@0.62.5
npm ERR! node_modules/@iroco/ui
npm ERR!   @iroco/ui@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /home/dev/.npm/_logs/2024-02-09T10_06_06_780Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/dev/.npm/_logs/2024-02-09T10_06_06_780Z-debug-0.log
```


Une option que je vois serait de mettre à jour les dépendances dans le design system `@iroco/ui`.

Mais attention, certaines applications s'appuient dessus!
Si nous mettons à jour le design system sans précaution, nous pouvons casser leur build.

Nous allons figer la version du design system `@iroco/ui` en version `0.62.5` (la version courante). 
Ainsi les applications existantes ne passeront pas à la prochaine version sans qu'on le décide.

Ca nous laissera le loisir de mettre à jour les dépendances de ces applications pour que la nouvelle version  de `@iroco/ui`soit supportée au moment qu'on choisira.

### Figer @iroco/ui dans les applications existantes

- landing
- iroco-app
- jmap-admin


```diff
--- i/package.json
+++ w/package.json
        "dependencies": {
-               "@iroco/ui": "^0.60.2",
+               "@iroco/ui": "0.62.5",
```

- Pin en version `0.62.5` le design system dans les applications qui l’utilisent

### Mettre à jour les dépendences dans @iroco/ui

- documenter les dépendances prérequises
- Déployer une nouvelle version de iroco-ui (pre-release majeure) : `1.0.0-0`

### Installer le design system

On installe la version pre-majeure car elle n'est pas encore tres testée après avoir mise à jour ses dépendances pour le moment

```sh
npm install @iroco/ui@next
```

On initialise ensuite certains fichiers pour tester le design.

`src/app.scss`

```scss
@use "node_modules/@iroco/ui/dist/scss/colors";  
@use "node_modules/@iroco/ui/dist/scss/fonts";  
@use "node_modules/@iroco/ui/dist/scss/style";  
@use "node_modules/@iroco/ui/dist/scss/constants";  
@import "node_modules/@iroco/ui/dist/scss/containers";
```

`src/routes/+layout.svelte`

```svelte
<script>  
  import '../app.scss';  
  import { Navigation, NavigationItem } from '@iroco/ui';  
</script>  
  
  <Navigation   navigationItems={[  
      new NavigationItem("About", "/about"),  
    ]}  
   type="topbar"  
  />  

  <main class="main">  
   <slot />  
  </main>  

<style lang="scss">  
  @use "node_modules/@iroco/ui/dist/scss/colors.scss";  
  @use "node_modules/@iroco/ui/dist/scss/constants.scss";  
  @import "node_modules/@iroco/ui/dist/scss/containers.scss";  
  @import "node_modules/@iroco/ui/dist/scss/button.scss";  
</style>
```

## Mise en place de l'internationalisation

`src/i18n/en.json`

```json
{   
  "temp": {  
    "lorem": "Lorem Ipsum",  
    "lipsum": "🇬🇧Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac luctus enim. Integer sodales leo nec nibh convallis, vitae efficitur ante lacinia. Phasellus lectus massa, venenatis nec orci eu, tempor tempor eros. Suspendisse orci dolor, lobortis ut mollis eu, tempor in urna. Ut efficitur velit sem, nec dapibus tortor molestie ut. Curabitur eget leo feugiat, lobortis velit in, porttitor mauris. Duis eget imperdiet ipsum. In hac habitasse platea dictumst. Integer sollicitudin sed elit vitae commodo."  
  }  
}
```

`src/i18n/fr.json`

```json
{   
  "temp": {  
    "lorem": "Lorem Ipsum",  
    "lipsum": "🇫🇷Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac luctus enim. Integer sodales leo nec nibh convallis, vitae efficitur ante lacinia. Phasellus lectus massa, venenatis nec orci eu, tempor tempor eros. Suspendisse orci dolor, lobortis ut mollis eu, tempor in urna. Ut efficitur velit sem, nec dapibus tortor molestie ut. Curabitur eget leo feugiat, lobortis velit in, porttitor mauris. Duis eget imperdiet ipsum. In hac habitasse platea dictumst. Integer sollicitudin sed elit vitae commodo."  
  }  
}
```

`src/i18n/index.ts`

```ts
import { register, init, getLocaleFromNavigator } from "svelte-i18n";  
  
register("en", () => import("./en.json"));  
register("fr", () => import("./fr.json"));  
  
init({  
  fallbackLocale: "fr",  
  initialLocale: getLocaleFromNavigator(),  
});
```

`src/routes/+layout.svelte`

```svelte
<script>  
  import '../i18n/index.js';  
  import { _, isLoading } from 'svelte-i18n';  
</script>

{#if !$isLoading}  

  <h1>{$_("temp.lorem")}</h1>  
  <p>{$_("temp.lipsum")}</p>
  
  <main class="main">  
   <slot />  
  </main>  
{/if}  
  
```



## Support du base path non root

Lorsque je déploie sur github pages, le site n'est pas à la racine de l'url mais dans une "sous-route"  : https://github.io/iroco-co/**rezofora**.

J'obtiens alors l'erreur suivante:

```
Error: 404 / does not begin with `base`, which is configured in `paths.base` and can be imported from `$app/paths` - see https://kit.svelte.dev/docs/configuration#paths for more info (linked from /rezofora/about/)
```

Correction inspirée de https://github.com/metonym/sveltekit-gh-pages

Dans iroco-ui

```diff
 <script lang="ts">

+	import { base } from '$app/paths';

 </script>
 
-<a class="iroco-logo" href="/" aria-label="go to Iroco home" on:click={clickOnLogo}>
+<a class="iroco-logo" href="{base}/" aria-label="go to Iroco home" on:click={clickOnLogo}>

```

Dans rezofora

`package.json`

```diff
    "scripts":{
-		"deploy": "gh-pages -d build"
+		"deploy": "gh-pages -d build -t true"
 	},
 	"dependencies": {
-		"@iroco/ui": "^1.0.0-0",
+		"@iroco/ui": "^1.0.0-1",
 		"svelte-i18n": "^4.0.0"
 	},
```

`svelte.config.js`

```diff
 import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import preprocess from 'svelte-preprocess';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: vitePreprocess(),
+	preprocess: preprocess(),
 
 	kit: {
+		prerender: {
+			handleMissingId: 'ignore'
+		},
 		adapter: adapter({
 			pages: 'build',
 			assets: 'build',
 			fallback: undefined,
 			precompress: false,
 			strict: true
-		})
+		}),
+		paths: {
+			base: process.env.NODE_ENV === 'production' ? '/rezofora' : ''
+		}
 	}
 };
 

```

`src/routes/+layout.ts`

```diff
export const prerender = true;
+
+export const trailingSlash = 'always';

```

`src/routes/+layout.svelte`

```diff
 <script>
	import '../i18n';
 	import { _, isLoading } from 'svelte-i18n';
	import '../app.scss';
 	import { Navigation, NavigationItem } from '@iroco/ui';
+	import { base } from '$app/paths';
 </script>
 
 {#if !$isLoading}
-	<Navigation navigationItems={[new NavigationItem($_('header.about'), '/about')]} type="topbar" />
+	<Navigation navigationItems={[new NavigationItem($_('header.about'), `${base}/about`)]} type="topbar" />
 	<main class="main">
 		<slot />
 	</main>

```



Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Blog] Making of Rezofora #1

Bootstrapping

Créer un dépôt git sur Github

Créer une app sveltekit

Remanier le README

Installer l'adapter pour sites statiques

Déploiement temporaire sur Github Pages

Intégrer le design system iroco-ui

Ouille! Erreur!

Figer @iroco/ui dans les applications existantes

Mettre à jour les dépendences dans @iroco/ui

Installer le design system

Mise en place de l'internationalisation

Support du base path non root

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Blog] Making of Rezofora #1

Description

Bootstrapping

Créer un dépôt git sur Github

Créer une app sveltekit

Remanier le README

Installer l'adapter pour sites statiques

Déploiement temporaire sur Github Pages

Intégrer le design system iroco-ui

Ouille! Erreur!

Figer @iroco/ui dans les applications existantes

Mettre à jour les dépendences dans @iroco/ui

Installer le design system

Mise en place de l'internationalisation

Support du base path non root

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions