Fixed migrations

* fixed page markup
* added missing styles
* added a section in the doc

README.md

@@ -369,6 +369,14 @@ See the [consent manager component](https://www.systeme-de-design.gouv.fr/compos
 * `manager`: the Manager instance used. See `src/core/Manager.ts`
 * `config`: the complete config object used
 
+## Migrating
+
+### Version 3
+
+A major overhaul of the configuration took place in this version, as to clarify naming and align more with the GDPR vocabulary.
+
+If you were already using version 2, a tool to migrate your current configuration is available here : https://orejime.empreintedigitale.fr/migration.
+
 ## Development
 
 If you want to contribute to Orejime, or make a special build for yourself, clone the project then:

dist/example-assets/style.css

@@ -81,6 +81,10 @@ a:active {
 	text-decoration: none;
 }
 
+.is-hidden {
+	display: none;
+}
+
 .Button {
 	display: inline-block;
 	border: 0;
@@ -242,6 +246,21 @@ a.Tile:active {
 	max-width: 100%;
 }
 
+.MigrationForm-input,
+.MigrationForm-output {
+	margin-bottom: var(--unit);
+	border: 1px solid currentColor;
+	border-radius: calc(var(--unit) / 4);
+	width: 100%;
+	padding: calc(var(--unit) / 2);
+	font: inherit;
+	font-family: monospace;
+}
+
+.MigrationForm-output {
+	overflow-x: auto;
+}
+
 .Footer {
 	padding: calc(3 * var(--unit)) 0;
 	background: var(--contrast-surface);

dist/migration.html

@@ -25,28 +25,37 @@
 		-->
 
 		<div id="app">
-			<div class="Container">
-				<header class="Header">
-					<h1 class="Header-title">Migration</h1>
-
-					<a href="https://empreintedigitale.fr">
-						<img
-							class="Header-empreinteLogo"
-							src="example-assets/logo.svg"
-						/>
-					</a>
-				</header>
-
-				<main role="main">
-					<div class="Hero">
-						<p>
-							A lot of things can change between major software versions!
-							<br />
-							Here you will find some tools to ease the transition.
-						</p>
+			<header class="Header">
+				<div class="Container">
+					<div class="Header-inner">
+						<a href="https://empreintedigitale.fr">
+							<img
+								class="Header-logo"
+								src="/example-assets/logo.svg"
+								alt="Empreinte Digitale GDPR"
+							/>
+						</a>
 					</div>
+				</div>
+			</header>
+
+			<main role="main">
+				<div class="Hero">
+					<div class="Container">
+						<div class="Hero-inner">
+							<h1 class="Hero-title">Migrating Orejime</h1>
+
+							<p>
+								A lot of things can change between major software versions!
+								<br />
+								Here you will find some tools to ease the transition.
+							</p>
+						</div>
+					</div>
+				</div>
 
-					<h2 class="Inset-title">Migrating from V2 to V3</h2>
+				<div class="Container">
+					<h2 class="Section-title">Migrating from V2 to V3</h2>
 
 					<div class="Inset">
 						<h3>Automated migration</h3>
@@ -63,18 +72,22 @@ <h3>Automated migration</h3>
 						</p>
 
 						<form class="MigrationForm MigrationForm--2-to-3">
+							<label for="MigrationForm-config">Configuration</label>
 							<textarea
+								id="MigrationForm-config"
 								class="MigrationForm-input"
+								name="config"
 								rows="10"
 								placeholder="{ appElement: '#app', apps: [] }"
 							></textarea>
+
 							<input class="Button" type="submit" value="Convert" />
 
 							<pre class="MigrationForm-output is-hidden"></pre>
 						</form>
 					</div>
-				</main>
-			</div>
+				</div>
+			</main>
 
 			<footer class="Footer" role="contentinfo">
 				<div class="Container">