[WIP] Show included modules on pipeline pages

[lmReef]

Preview for #2722

[netlify]

✅ Deploy Preview for nf-core-main-site ready!

Name	Link
🔨 Latest commit	bf7b2bf
🔍 Latest deploy log	https://app.netlify.com/sites/nf-core-main-site/deploys/67db8f1edbe3e9000863a9ff
😎 Deploy Preview	https://deploy-preview-3094--nf-core-main-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mashehu]

hmm, maybe make the "show more" button a bit more subtle, e.g. similar to how we do it in the module cards

[lmReef]

So the implementation for this in Astro is looking more scuffed than it needs to be. I think it could be better to abstract this out from the other places its implemented (module/subworkflow cards and pages) into a new svelte component so we can reuse it across all 3 places.

This approach should make it easier to maintain and fix issues like this going forward too.

I can do up a draft for now in svelte 5 and wait for #3047 before opening a new PR/updating this one. Let me know what you think.

Probably something along these lines with a few extras for handling the differences with pipelines:

<script lang="ts">
    const {
        tags,
        maxSliced = 5,
        type,
    }: { tags: string[]; maxSliced?: number; type: "modules" | "subworkflows" | "pipelines" } = $props();
    let expanded = $state(false);
</script>

<div class="tags-section mb-2">
    {#each expanded ? tags : tags.slice(0, maxSliced) as tag}
        <a
            href={`/${type}/${tag.replace("/", "_")}/`}
            class="badge fw-normal border border-info-subtle bg-info-subtle text-body me-2 text-decoration-none"
        >
            {tag}
        </a>
    {/each}
</div>
<span
    class="text-small cursor-pointer tags-show-more"
    title={`click to show all ${tags}`}
    on:click={() => (expanded = !expanded)}
    on:keydown={() => (expanded = !expanded)}
    role="button"
    data-bs-toggle="tooltip"
    data-bs-delay="500">+{tags.length - maxSliced} more {tags}</span
>

[mashehu]

great idea!

[mashehu]

#3047 is merged so give the component approach a shot

[lmReef]

awesome! I'll get started