Add Makefile, package.json, and initial configuration for VitePress and Slidev integration

- Introduced a Makefile for streamlined commands related to building, running, and managing presentations.
- Created package.json to define project metadata, dependencies, and scripts for development and testing.
- Added .gitignore entries to exclude build artifacts and temporary files from version control.
- Included playwright.config.mjs for end-to-end testing setup with Playwright.
- Added README.md for project documentation, outlining setup instructions and development guidelines.

portal/.vitepress/components/QrEncode.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, watch } from 'vue'
+import { withBase } from 'vitepress'
+import QRCode from 'qrcode'
+
+const props = defineProps<{ path: string }>()
+const canvas = ref<HTMLCanvasElement | null>(null)
+
+const href = computed(() => withBase(props.path))
+
+const displayHost = computed(() => {
+  if (typeof window === 'undefined') return href.value
+  const abs = new URL(href.value, window.location.origin).href
+  return abs.replace(/^https?:\/\//, '')
+})
+
+const fullHref = computed(() => {
+  if (typeof window === 'undefined') return href.value
+  return new URL(href.value, window.location.origin).href
+})
+
+async function draw() {
+  if (!canvas.value || typeof window === 'undefined') return
+  const url = new URL(href.value, window.location.origin).href
+  await QRCode.toCanvas(canvas.value, url, {
+    width: 200,
+    margin: 1,
+    color: { dark: '#0d1115ff', light: '#ffffffff' },
+  })
+}
+
+onMounted(draw)
+watch(href, draw)
+</script>
+
+<template>
+  <div class="qr-deck">
+    <a class="qr-link" :href="href">{{ displayHost }}</a>
+    <div class="qrcode-wrap">
+      <canvas ref="canvas" role="img" :aria-label="`QR code vers ${fullHref}`" />
+    </div>
+  </div>
+</template>

portal/.vitepress/components/QrHomeSection.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useData } from 'vitepress'
+import QRCode from 'qrcode'
+
+const { theme } = useData()
+
+const repoUrl = computed(() => (theme.value as Record<string, string>).talkRepoUrl || '')
+const repoTitle = computed(() => (theme.value as Record<string, string>).talkRepoTitle || 'Dépôt de code')
+const repoDesc = computed(
+  () => (theme.value as Record<string, string>).talkRepoDesc || 'Sources, CI et configuration du site.',
+)
+const siteTitle = computed(() => (theme.value as Record<string, string>).talkSiteTitle || 'Ce site (slides)')
+const siteDesc = computed(
+  () =>
+    (theme.value as Record<string, string>).talkSiteDesc ||
+    'URL à projeter ou à partager pendant une présentation.',
+)
+
+const siteUrlText = ref('…')
+const siteUrlHref = ref('#')
+const canvasRepo = ref<HTMLCanvasElement | null>(null)
+const canvasSite = ref<HTMLCanvasElement | null>(null)
+
+const opts = {
+  width: 200,
+  margin: 1,
+  color: { dark: '#0d1115ff', light: '#ffffffff' },
+}
+
+onMounted(async () => {
+  const u = new URL(window.location.href)
+  u.hash = ''
+  const siteUrl = u.href
+  siteUrlHref.value = siteUrl
+  siteUrlText.value = siteUrl.replace(/^https?:\/\//, '')
+
+  if (canvasRepo.value && repoUrl.value) {
+    await QRCode.toCanvas(canvasRepo.value, repoUrl.value, opts)
+  }
+  if (canvasSite.value) {
+    await QRCode.toCanvas(canvasSite.value, siteUrl, opts)
+  }
+})
+</script>
+
+<template>
+  <section class="qr-section" aria-labelledby="qr-heading">
+    <h2 id="qr-heading" class="section-title">Liens rapides</h2>
+    <div class="qr-grid">
+      <article v-if="repoUrl" class="qr-card">
+        <h3>{{ repoTitle }}</h3>
+        <p class="qr-card-desc">{{ repoDesc }}</p>
+        <a class="qr-link" :href="repoUrl" target="_blank" rel="noopener noreferrer">{{ repoUrl.replace(/^https?:\/\//, '') }}</a>
+        <div class="qrcode-wrap" aria-hidden="true">
+          <canvas ref="canvasRepo" />
+        </div>
+      </article>
+      <article class="qr-card">
+        <h3>{{ siteTitle }}</h3>
+        <p class="qr-card-desc">{{ siteDesc }}</p>
+        <a class="qr-link" id="qr-site-link" :href="siteUrlHref">{{ siteUrlText }}</a>
+        <div class="qrcode-wrap" aria-hidden="true">
+          <canvas ref="canvasSite" />
+        </div>
+      </article>
+    </div>
+  </section>
+</template>