07449de187
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
- [slug].vue : sommaire sticky (overflow:clip sur parent), prev/next en haut, 6 shadoks geek (pinguin+USB, web-of-trust, rubber-duck, caféine, debugger loupe, rack serveur) - Nouveaux types de sections : territoire (bouquet sweethomeCloud, 2 modèles éco, tableau matériel dépliable), projet (carte gestation) - cloud-libre.yml : section sweethomeCloud complète avec infra 50 000 hab. (~2€/an/hab) - authentification-wot.yml : trustWallet, correction WoT Duniter (Ed25519+Scrypt, sigQty=5, stepMax=3), DID/VC standards - logiciel-libre.yml : carte projet wishBounty - home.yml + numerique.yml : cloud-libre → sweethomeCloud, description RGPD/local-first - AxisBlock.vue : bulles de présentation inline dans les cards (plus de tooltip absolu) - Analytics : useTracking.ts (Umami), docker-compose.umami.yml, /api/stats fédération - nuxt.config.ts : config Umami runtime Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
354 lines
8.8 KiB
Vue
354 lines
8.8 KiB
Vue
<template>
|
|
<div class="axis-block">
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="axis-icon" :class="`axis-icon--${color}`">
|
|
<div :class="iconClass(icon)" class="h-6 w-6" />
|
|
</div>
|
|
<h2 class="font-display text-2xl font-bold text-white">{{ title }}</h2>
|
|
</div>
|
|
|
|
<!-- Items grid -->
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div
|
|
v-for="(item, i) in items"
|
|
:key="i"
|
|
class="axis-item card-surface"
|
|
:class="{ 'axis-item--gestation': item.gestation }"
|
|
>
|
|
<!-- Clickable card body -->
|
|
<component
|
|
:is="itemTag(item)"
|
|
v-bind="itemAttrs(item)"
|
|
class="axis-item-body"
|
|
>
|
|
<!-- Item icon -->
|
|
<div v-if="item.icon" class="axis-item-icon" :class="`axis-item-icon--${color}`">
|
|
<span v-if="item.icon === 'g1'" class="axis-item-icon-g1">Ğ1</span>
|
|
<div v-else :class="iconClass(item.icon)" class="h-5 w-5" />
|
|
</div>
|
|
|
|
<h3 class="font-display text-lg font-semibold text-white mb-1">
|
|
{{ item.label }}
|
|
<span v-if="item.gestation" class="gestation-badge">
|
|
<div class="i-lucide-flask-conical h-3 w-3" />
|
|
En gestation
|
|
</span>
|
|
</h3>
|
|
|
|
<p class="text-sm text-white/60 leading-relaxed">{{ item.description }}</p>
|
|
|
|
<!-- Presentation inline (projet en gestation) -->
|
|
<div v-if="item.presentation" class="axis-presentation-inline">
|
|
<div class="axis-pi-header">
|
|
<div class="i-lucide-sparkles h-3 w-3" />
|
|
<span class="axis-pi-title">{{ item.presentation.title }}</span>
|
|
</div>
|
|
<p class="axis-pi-text">{{ item.presentation.text }}</p>
|
|
</div>
|
|
</component>
|
|
|
|
<!-- Actions zone (separate from card link) -->
|
|
<div v-if="item.actions?.length" class="axis-actions">
|
|
<!-- Primary row -->
|
|
<div class="axis-actions-row">
|
|
<button
|
|
v-for="action in primaryActions(item.actions)"
|
|
:key="action.id"
|
|
class="axis-action-btn"
|
|
:class="{ 'axis-action-btn--highlight': action.highlight }"
|
|
@click.stop="handleAction(action.id)"
|
|
>
|
|
<div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
|
|
{{ action.label }}
|
|
</button>
|
|
</div>
|
|
<!-- Secondary row -->
|
|
<div v-if="secondaryActions(item.actions).length" class="axis-actions-secondary">
|
|
<component
|
|
:is="action.to ? resolveComponent('NuxtLink') : 'button'"
|
|
v-for="action in secondaryActions(item.actions)"
|
|
:key="action.label"
|
|
:to="action.to"
|
|
class="axis-action-btn axis-action-btn--secondary"
|
|
@click.stop="!action.to && handleAction(action.id)"
|
|
>
|
|
<div :class="iconClass(action.icon)" class="h-3.5 w-3.5" />
|
|
{{ action.label }}
|
|
</component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface AxisAction {
|
|
id: string
|
|
label: string
|
|
icon: string
|
|
highlight?: boolean
|
|
secondary?: boolean
|
|
to?: string
|
|
}
|
|
|
|
interface AxisItem {
|
|
label: string
|
|
description: string
|
|
to?: string
|
|
href?: string
|
|
gestation?: boolean
|
|
icon?: string
|
|
actions?: AxisAction[]
|
|
presentation?: { title: string; text: string }
|
|
}
|
|
|
|
defineProps<{
|
|
title: string
|
|
icon: string
|
|
color?: 'primary' | 'accent'
|
|
items: AxisItem[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'open-player': []
|
|
'open-pdf': []
|
|
'launch-gratewizard': []
|
|
}>()
|
|
|
|
function primaryActions(actions: AxisAction[]) {
|
|
return actions.filter(a => !a.secondary)
|
|
}
|
|
|
|
function secondaryActions(actions: AxisAction[]) {
|
|
return actions.filter(a => a.secondary)
|
|
}
|
|
|
|
function handleAction(id: string) {
|
|
if (id === 'open-player') emit('open-player')
|
|
else if (id === 'open-pdf') emit('open-pdf')
|
|
else if (id === 'launch-gratewizard') emit('launch-gratewizard')
|
|
}
|
|
|
|
function iconClass(name: string) {
|
|
return `i-lucide-${name}`
|
|
}
|
|
|
|
function itemTag(item: AxisItem) {
|
|
if (item.href) return 'a'
|
|
if (item.to) return resolveComponent('NuxtLink')
|
|
return 'div'
|
|
}
|
|
|
|
function itemAttrs(item: AxisItem) {
|
|
if (item.href) return { href: item.href, target: '_blank', rel: 'noopener noreferrer' }
|
|
if (item.to) return { to: item.to }
|
|
return {}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.axis-block {
|
|
padding: 0;
|
|
}
|
|
|
|
.axis-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
border-radius: 0.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.axis-icon--primary {
|
|
background: hsl(var(--color-primary) / 0.12);
|
|
border: 1px solid hsl(var(--color-primary) / 0.2);
|
|
color: hsl(var(--color-primary));
|
|
}
|
|
|
|
.axis-icon--accent {
|
|
background: hsl(var(--color-accent) / 0.12);
|
|
border: 1px solid hsl(var(--color-accent) / 0.2);
|
|
color: hsl(var(--color-accent));
|
|
}
|
|
|
|
.axis-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 0.75rem;
|
|
border: 1px solid hsl(var(--color-text) / 0.08);
|
|
background: hsl(var(--color-surface));
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
/* overflow: visible pour laisser le tooltip sortir du cadre */
|
|
}
|
|
|
|
.axis-item:hover {
|
|
border-color: hsl(var(--color-primary) / 0.25);
|
|
box-shadow: 0 4px 24px hsl(var(--color-primary) / 0.06);
|
|
}
|
|
|
|
.axis-item--gestation {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.axis-item--gestation:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.axis-item-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1.25rem;
|
|
flex: 1;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.axis-item-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: 0.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.axis-item-icon--primary {
|
|
background: hsl(var(--color-primary) / 0.18);
|
|
color: hsl(var(--color-primary));
|
|
box-shadow: 0 0 14px hsl(var(--color-primary) / 0.15);
|
|
}
|
|
|
|
.axis-item-icon--accent {
|
|
background: hsl(var(--color-accent) / 0.18);
|
|
color: hsl(var(--color-accent));
|
|
box-shadow: 0 0 14px hsl(var(--color-accent) / 0.15);
|
|
}
|
|
|
|
.axis-item-icon-g1 {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.gestation-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
margin-left: 0.5rem;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 9999px;
|
|
background: hsl(var(--color-accent) / 0.12);
|
|
color: hsl(var(--color-accent));
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
font-family: var(--font-mono);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.axis-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
border-top: 1px solid hsl(var(--color-text) / 0.06);
|
|
background: hsl(var(--color-bg) / 0.4);
|
|
border-bottom-left-radius: 0.75rem;
|
|
border-bottom-right-radius: 0.75rem;
|
|
}
|
|
|
|
.axis-actions-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
padding: 0.75rem 1.25rem;
|
|
}
|
|
|
|
.axis-actions-secondary {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 1.25rem 0.75rem;
|
|
border-top: 1px solid hsl(var(--color-text) / 0.04);
|
|
}
|
|
|
|
.axis-action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: hsl(var(--color-text) / 0.7);
|
|
background: hsl(var(--color-text) / 0.05);
|
|
border: 1px solid hsl(var(--color-text) / 0.1);
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.axis-action-btn:hover {
|
|
color: hsl(var(--color-text));
|
|
background: hsl(var(--color-primary) / 0.12);
|
|
border-color: hsl(var(--color-primary) / 0.3);
|
|
}
|
|
|
|
.axis-action-btn--highlight {
|
|
color: hsl(var(--color-primary));
|
|
background: hsl(var(--color-primary) / 0.12);
|
|
border-color: hsl(var(--color-primary) / 0.25);
|
|
}
|
|
|
|
.axis-action-btn--highlight:hover {
|
|
background: hsl(var(--color-primary) / 0.2);
|
|
border-color: hsl(var(--color-primary) / 0.4);
|
|
}
|
|
|
|
.axis-action-btn--secondary {
|
|
color: hsl(var(--color-text) / 0.45);
|
|
background: transparent;
|
|
border-color: hsl(var(--color-text) / 0.06);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.axis-action-btn--secondary:hover {
|
|
color: hsl(var(--color-accent));
|
|
background: hsl(var(--color-accent) / 0.08);
|
|
border-color: hsl(var(--color-accent) / 0.2);
|
|
}
|
|
|
|
/* Presentation inline — projet en gestation, affiché dans la card */
|
|
.axis-presentation-inline {
|
|
margin-top: 0.75rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 8px;
|
|
background: hsl(var(--color-accent) / 0.07);
|
|
border: 1px solid hsl(var(--color-accent) / 0.18);
|
|
}
|
|
|
|
.axis-pi-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
margin-bottom: 0.2rem;
|
|
color: hsl(var(--color-accent));
|
|
}
|
|
|
|
.axis-pi-title {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.axis-pi-text {
|
|
font-size: 0.72rem;
|
|
color: hsl(var(--color-text) / 0.55);
|
|
line-height: 1.45;
|
|
margin: 0;
|
|
}
|
|
</style>
|