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.
70 lines
2.3 KiB
Vue
70 lines
2.3 KiB
Vue
<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>
|