82 lines
2.6 KiB
Vue
82 lines
2.6 KiB
Vue
<script lang="ts" setup>
|
|
import { Head } from '@inertiajs/vue3';
|
|
import { onMounted, ref } from 'vue';
|
|
import HelpText from '@/components/HelpText.vue';
|
|
import LinkHeader from '@/components/LinkHeader.vue';
|
|
|
|
const icons = {
|
|
'matthiasgdev.png': {
|
|
href: 'https://abcd.matthiasg.dev/q/portfolio',
|
|
alt: 'Portfolio',
|
|
},
|
|
'gitea.png': {
|
|
href: 'https://git.matthiasg.dev/Ninluc/perceptron-viewer',
|
|
alt: 'Dépôt Git',
|
|
},
|
|
};
|
|
const iconsFolder: string = '/img/footerIcons/';
|
|
const iconHtml = ref<Record<string, string>>({});
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const svgEntries = await Promise.all(
|
|
Object.keys(icons)
|
|
.filter((icon) => icon.endsWith('.svg'))
|
|
.map(async (icon) => {
|
|
const response = await fetch(`${iconsFolder}${icon}`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load ${icon}`);
|
|
}
|
|
|
|
return [icon, await response.text()] as const;
|
|
}),
|
|
);
|
|
|
|
iconHtml.value = Object.fromEntries(svgEntries);
|
|
} catch (error) {
|
|
console.error('Could not load footer icons:', error);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Perceptron Viewer"></Head>
|
|
<main class="flex min-h-dvh flex-col gap-6 pb-6">
|
|
<LinkHeader class="w-full my-0! py-6 sticky top-0 z-10 bg-background" />
|
|
|
|
<div
|
|
class="flex flex-col items-center gap-6 rounded-lg p-6 shadow sm:p-8"
|
|
>
|
|
<HelpText markdownFileName="intro" class="max-w-[90ch]" />
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<footer class="p-10 flex flex-col gap-6">
|
|
<p class="text-center text-muted-foreground">
|
|
Autres liens :
|
|
</p>
|
|
|
|
<div class="flex flex-wrap justify-center align-center gap-10">
|
|
<a
|
|
v-for="(iconData, icon) in icons"
|
|
:key="icon"
|
|
:href="iconData.href"
|
|
:aria-label="iconData.alt"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="min-h-full flex flex-col justify-between items-center gap-2 transition hover:scale-110"
|
|
>
|
|
<img
|
|
:src="iconsFolder + icon"
|
|
:alt="iconData.alt"
|
|
class="contain-size w-20 transition brightness-200 hover:brightness-100 hover:saturate-100 hover:opacity-70"
|
|
/>
|
|
<p>{{ iconData.alt }}</p>
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
</template>
|