Le Prévost-Corvellec Arnault
354c8cd9ef
- 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.
110 lines
2.4 KiB
Vue
110 lines
2.4 KiB
Vue
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import QRCode from 'qrcode'
|
||
|
||
const REPO = 'https://git.specificat.io/arnault/Talks'
|
||
|
||
const canvasRepo = ref<HTMLCanvasElement | null>(null)
|
||
const canvasHome = ref<HTMLCanvasElement | null>(null)
|
||
|
||
/** Accueil portail : même logique que l’ancien Reveal (parent depuis /slides/<slug>/<n>). */
|
||
function portalHomeHref(): string {
|
||
if (typeof window === 'undefined') return 'https://specificat.io/'
|
||
try {
|
||
const u = new URL(window.location.href)
|
||
if (u.pathname.includes('/slides/')) {
|
||
u.pathname = '/'
|
||
u.hash = ''
|
||
return u.href
|
||
}
|
||
} catch {
|
||
/* ignore */
|
||
}
|
||
return `${window.location.origin}/`
|
||
}
|
||
|
||
const opts = {
|
||
width: 150,
|
||
margin: 1,
|
||
color: { dark: '#0d1115ff', light: '#ffffffff' },
|
||
}
|
||
|
||
async function draw() {
|
||
if (canvasRepo.value)
|
||
await QRCode.toCanvas(canvasRepo.value, REPO, opts)
|
||
if (canvasHome.value)
|
||
await QRCode.toCanvas(canvasHome.value, portalHomeHref(), opts)
|
||
}
|
||
|
||
onMounted(draw)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="closing-qr" aria-label="QR codes dépôt et accueil">
|
||
<figure class="closing-qr__block">
|
||
<figcaption class="closing-qr__cap">Dépôt</figcaption>
|
||
<div class="closing-qr__wrap">
|
||
<canvas
|
||
ref="canvasRepo"
|
||
role="img"
|
||
width="150"
|
||
height="150"
|
||
aria-label="QR code vers le dépôt Git"
|
||
/>
|
||
</div>
|
||
</figure>
|
||
<figure class="closing-qr__block">
|
||
<figcaption class="closing-qr__cap">Slides — accueil</figcaption>
|
||
<div class="closing-qr__wrap">
|
||
<canvas
|
||
ref="canvasHome"
|
||
role="img"
|
||
width="150"
|
||
height="150"
|
||
aria-label="QR code vers l’accueil du portail"
|
||
/>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.closing-qr {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
gap: 1.75rem;
|
||
margin-top: 0.6rem;
|
||
}
|
||
|
||
.closing-qr__block {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
text-align: center;
|
||
}
|
||
|
||
.closing-qr__cap {
|
||
margin: 0 0 0.35rem;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: rgba(245, 245, 245, 0.85);
|
||
}
|
||
|
||
.closing-qr__wrap {
|
||
display: inline-block;
|
||
padding: 0.2em;
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
line-height: 0;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.closing-qr__wrap canvas {
|
||
display: block;
|
||
width: 150px;
|
||
height: 150px;
|
||
}
|
||
</style>
|