adding services to the gaufre button

hiding audioconf for now as i dont have any logo
This commit is contained in:
Emmanuel Pelletier
2024-05-02 12:07:25 +02:00
parent 73beeaf9ec
commit ab7cf18638
7 changed files with 117 additions and 30 deletions

View File

@@ -1,7 +1,7 @@
---
import services from "@/data/services.json"
import { Image } from "astro:assets"
const logos = import.meta.glob<{ default: ImageMetadata }>("/src/assets/logos/*.svg")
const logos = import.meta.glob<{ default: ImageMetadata }>("/src/assets/logos/*.{svg,png,jpg}")
---
<!doctype html>
@@ -133,6 +133,8 @@ const logos = import.meta.glob<{ default: ImageMetadata }>("/src/assets/logos/*.
.lasuite-Service-icon {
display: flex;
align-items: center;
width: 40px;
height: 40px;
}
.lasuite-Service-name {
@@ -179,30 +181,34 @@ const logos = import.meta.glob<{ default: ImageMetadata }>("/src/assets/logos/*.
<h1 class="fr-sr-only">Liste des services de La Suite numérique</h1>
<ul class="lasuite-Services-inner scrollbars">
{
services.map(({ id, name, url }, i) => (
<li>
<div class="lasuite-Services-item lasuite-Service fr-enlarge-link">
<div class="lasuite-Service-icon">
<Image
src={logos[`/src/assets/logos/${id}.svg`]()}
width="40"
height="40"
alt=""
loading="eager"
/>
</div>
<a
target="_parent"
class="lasuite-Service-name"
href={url}
id={`lasuite-service-${id}`}
{...((i === 0 && { autofocus: true }) || {})}
>
{name}
</a>
</div>
</li>
))
services
.filter(({ enabled }) => !!enabled)
.map(({ id, name, url }, i) => {
const logo =
logos[`/src/assets/logos/${id}.svg`] ||
logos[`/src/assets/logos/${id}.jpg`] ||
logos[`/src/assets/logos/${id}.png`]
return (
<li>
<div class="lasuite-Services-item lasuite-Service fr-enlarge-link">
<div class="lasuite-Service-icon">
{!!logo ? (
<Image src={logo()} width="40" height="40" alt="" loading="eager" />
) : null}
</div>
<a
target="_parent"
class="lasuite-Service-name"
href={url}
id={`lasuite-service-${id}`}
{...((i === 0 && { autofocus: true }) || {})}
>
{name}
</a>
</div>
</li>
)
})
}
</ul>
</div>