Improve pages layout.

src/routes/$layout.svelte

 <script>
-  import NavBar from "$lib/NavBar.svelte"
   import "../global.css"
+
+  import NavBar from "$lib/NavBar.svelte"
 </script>
 
 <NavBar />

src/routes/about.svelte

-TODO
+<script lang="ts">
+  import { session } from "$app/stores"
+</script>
+
+<svelte:head>
+  <title>À propos | {$session.title}</title>
+</svelte:head>
+
+<main>
+  <h1>À propos</h1>
+</main>

src/routes/calculations/index.svelte

@@ -227,6 +227,11 @@
   }
 </script>
 
+<svelte:head>
+  <title>Calculs | {$session.title}</title>
+</svelte:head>
+
+<main>
   <label class="block">
     Année
     <input max={2021} min={2013} step="1" type="number" bind:value={year} />
@@ -254,3 +259,4 @@
   <label
     ><input bind:checked={showNulls} type="checkbox" /> Montrer les montants nuls</label
   >
+</main>

src/routes/decomposition/index.svelte

@@ -177,9 +177,18 @@
 </script>
 
 <script lang="ts">
+  import { session } from "$app/stores"
   import type { Simulation } from "$lib/simulations"
 
   export let simulation: Simulation
 </script>
 
+<svelte:head>
+  <title>Décomposition | {$session.title}</title>
+</svelte:head>
+
+<main>
+  <h1>Décomposition</h1>
+
   <pre>{JSON.stringify(simulation, null, 2)}</pre>
+</main>

src/routes/entities/index.svelte

@@ -21,7 +21,17 @@
 </script>
 
 <script lang="ts">
+  import { session } from "$app/stores"
+
   export let entityById: unknown
 </script>
 
+<svelte:head>
+  <title>Entités | {$session.title}</title>
+</svelte:head>
+
+<main>
+  <h1>Entités</h1>
+
   <pre>{JSON.stringify(entityById, null, 2)}</pre>
+</main>

src/routes/index.svelte

+<script lang="ts">
+  import { session } from "$app/stores"
+
+  $: title = $session.title
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+</svelte:head>
+
 <main>
-  <h1>Simulateur socio-fiscal Leximpact</h1>
+  <h1>{title}</h1>
 
   <h2>Tests de l'API OpenFisca</h2>
   <ul>

src/routes/parameters/index.svelte

@@ -49,9 +49,18 @@
 </script>
 
 <script lang="ts">
+  import { session } from "$app/stores"
   import ParametersTree from "$lib/ParametersTree.svelte"
 
   export let parametersTree: { [id: string]: ParametersNode }
 </script>
 
+<svelte:head>
+  <title>Paramètres | {$session.title}</title>
+</svelte:head>
+
+<main>
+  <h1>Paramètres</h1>
+
   <ParametersTree tree={parametersTree} />
+</main>

src/routes/spec.svelte

@@ -21,7 +21,17 @@
 </script>
 
 <script lang="ts">
+  import { session } from "$app/stores"
+
   export let spec: unknown
 </script>
 
+<svelte:head>
+  <title>Documentation de l'API | {$session.title}</title>
+</svelte:head>
+
+<main>
+  <h1>Documentation de l'API</h1>
+
   <pre>{JSON.stringify(spec, null, 2)}</pre>
+</main>

src/routes/variables/[variable].svelte

@@ -20,11 +20,17 @@
 </script>
 
 <script lang="ts">
+  import { session } from "$app/stores"
   import type { Variable } from "$lib/variables"
 
   export let variable: Variable
 </script>
 
+<svelte:head>
+  <title>{variable.id} | Variables | {$session.title}</title>
+</svelte:head>
+
+<main>
   <h1>
     Variable
     <var>{variable.id}</var>
@@ -51,5 +57,9 @@
 
   <hr class="my-4" />
 
-<h2>JSON</h2>
+  <section>
+    <h1>JSON</h1>
+
     <pre>{JSON.stringify(variable, null, 2)}</pre>
+  </section>
+</main>

src/routes/variables/index.svelte

@@ -19,12 +19,19 @@
 </script>
 
 <script lang="ts">
+  import { session } from "$app/stores"
   import type { VariableSummaryById } from "$lib/variables"
 
   export let variableById: VariableSummaryById
 </script>
 
+<svelte:head>
+  <title>Variables | {$session.title}</title>
+</svelte:head>
+
+<main>
   <h1>Variables</h1>
+
   <ul class="list-disc list-inside">
     {#each Object.entries(variableById) as [id, variable]}
       <li>
@@ -37,3 +44,4 @@
       </li>
     {/each}
   </ul>
+</main>