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.
44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
<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>
|