[Blog] Making of Rezofora #1

marc-bouvier · 2024-02-09T17:58:37Z

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

npm create svelte@latest rezofora

Need to install the following packages:
[email protected]
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.

git branch -M main

On associe ensuite le dépôt git à celui qui a été créé sur Github.

git remote add origin [email protected]: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

# 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, installons l'adapter @sveltejs/adapter-static.

npm install @sveltejs/adapter-static --save-dev

svelte.config.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

export const prerender = true;

Déploiement temporaire sur Github Pages

Installer l'utilitaire gh-pages.

npm install gh-pages --save-dev

package.json

"scripts": {
  "deploy": "gh-pages -d dist"
}

Pour déployer, nous pouvons lancer la commande

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.

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.

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: [email protected]
npm ERR! Found: @sveltejs/[email protected]
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/[email protected]
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/uisoit supportée au moment qu'on choisira.

Figer @iroco/ui dans les applications existantes

landing
iroco-app
jmap-admin

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

npm install @iroco/ui@next

On initialise ensuite certains fichiers pour tester le design.

src/app.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

<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

{   
  "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

{   
  "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

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

<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

 <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

    "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

 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

export const prerender = true;
+
+export const trailingSlash = 'always';

src/routes/+layout.svelte

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

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Blog] Making of Rezofora #1

[Blog] Making of Rezofora #1

marc-bouvier commented Feb 9, 2024

[Blog] Making of Rezofora #1

[Blog] Making of Rezofora #1

Comments

marc-bouvier commented Feb 9, 2024

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