upgrade to astro and svelte 5, main-site, docs, pipeline-results done

.pre-commit-config.yaml

@@ -5,7 +5,7 @@ repos:
       - id: prettier
         # NOTE https://github.com/pre-commit/pre-commit/issues/3133
         additional_dependencies:
-          - prettier@3.2.5
-          - prettier-plugin-svelte@^3.1.2
-          - prettier-plugin-astro@^0.12.3
+          - prettier@3.3.3
+          - prettier-plugin-svelte@^3.3.3
+          - prettier-plugin-astro@^0.14.1
         files: \.(astro|svelte|mdx|md|yml|yaml)$

sites/configs/package.json

@@ -9,15 +9,15 @@
         "test": "playwright test --ui"
     },
     "dependencies": {
-        "@astrojs/mdx": "^3.1.3",
-        "@astrojs/netlify": "^5.4.0",
-        "@iconify-json/fa": "^1.1.8",
-        "@iconify-json/fa-brands": "^1.1.8",
-        "@iconify-json/file-icons": "^1.1.9",
-        "@iconify-json/logos": "^1.1.43",
-        "@iconify-json/mdi": "^1.1.67",
-        "@iconify-json/octicon": "^1.1.56",
-        "@iconify/utils": "^2.1.25",
-        "svelte-exmarkdown": "^3.0.5"
+        "@astrojs/mdx": "^4.0.5",
+        "@astrojs/netlify": "^6.1.0",
+        "@iconify-json/fa": "^1.2.1",
+        "@iconify-json/fa-brands": "^1.2.1",
+        "@iconify-json/file-icons": "^1.2.1",
+        "@iconify-json/fluent": "^1.2.11",
+        "@iconify-json/logos": "^1.2.4",
+        "@iconify-json/mdi": "^1.2.2",
+        "@iconify-json/octicon": "^1.2.2",
+        "svelte-exmarkdown": "^4.0.2"
     }
 }

sites/docs/astro.config.mjs

@@ -87,7 +87,7 @@ export default defineConfig({
             preprocessorOptions: {
                 scss: {
                     api: 'modern-compiler',
-                    silenceDeprecations: ['legacy-js-api','mixed-decls','color-functions'],
+                    silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'color-functions', 'global-builtin'],
                 },
             },
         },
@@ -97,7 +97,7 @@ export default defineConfig({
                 // avoid flash of unstyled text by interjecting fallback system fonts https://developer.chrome.com/blog/framework-tools-font-fallback/#using-fontaine-library
                 fallbacks: ['BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Arial', 'Noto Sans'],
                 resolvePath: (id) => new URL(`./public${id}`, import.meta.url),
-                skipFontFaceGeneration: (fallbackName) => fallbackName === 'Font Awesome 6 Pro") fallback',
+                skipFontFaceGeneration: (fallbackName) => fallbackName.includes('Font Awesome'),
             }),
         ],
         ssr: {

sites/docs/package.json

@@ -14,16 +14,16 @@
         "test": "playwright test"
     },
     "dependencies": {
-        "@astrojs/mdx": "^3.1.7",
-        "@astrojs/netlify": "^5.5.3",
-        "@iconify-json/fa": "^1.2.0",
-        "@iconify-json/fa-brands": "^1.2.0",
-        "@iconify-json/file-icons": "^1.2.0",
-        "@iconify-json/logos": "^1.2.0",
-        "@iconify-json/mdi": "^1.2.0",
-        "@iconify-json/octicon": "^1.2.0",
-        "@iconify/utils": "^2.1.33",
-        "svelte-exmarkdown": "^3.0.5",
-        "yaml": "^2.5.1"
+        "@astrojs/mdx": "^4.0.5",
+        "@astrojs/netlify": "^6.1.0",
+        "@iconify-json/fa": "^1.2.1",
+        "@iconify-json/fa-brands": "^1.2.1",
+        "@iconify-json/file-icons": "^1.2.1",
+        "@iconify-json/fluent": "^1.2.11",
+        "@iconify-json/logos": "^1.2.4",
+        "@iconify-json/mdi": "^1.2.2",
+        "@iconify-json/octicon": "^1.2.2",
+        "svelte-exmarkdown": "^4.0.2",
+        "yaml": "^2.7.0"
     }
 }

sites/docs/src/content.config.ts

@@ -0,0 +1,25 @@
+import { z, defineCollection } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+const docs = defineCollection({
+    loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: './src/content/docs' }),
+    schema: z.object({
+        title: z.string(),
+        subtitle: z.string().optional(),
+        shortTitle: z.string().optional(),
+        weight: z.number().optional(),
+        parent: z.string().optional(),
+        parentWeight: z.number().optional(),
+        type: z.enum(['tutorial']).optional(),
+        markdownPlugin: z.enum(['checklist', 'addNumbersToHeadings']).optional(),
+    }),
+});
+
+const api_reference = defineCollection({
+    loader: glob({ pattern: '**/[^_]*.{md,mdx}', base: './src/content/api_reference' }),
+});
+
+export const collections = {
+    docs,
+    api_reference,
+};

sites/docs/src/content/docs/usage/troubleshooting/retries.md

@@ -1,3 +1,8 @@
+---
+title: Processes are retrying
+shortTitle: Retries
+---
+
 ## Processes are retrying
 
 ### Why did processes report an error but then retry?

sites/docs/src/pages/docs/[...doc].astro

@@ -1,9 +1,9 @@
 ---
-import MarkdownTocLayout from "@layouts/MarkdownTocLayout.astro";
-import FooterPrevNext from "@components/footer/FooterPrevNext.astro";
-import SubFooter from "@components/footer/SubFooter.astro";
-import { getCollection } from "astro:content";
-import type { SidebarEntry } from "@utils/types";
+import MarkdownTocLayout from '@layouts/MarkdownTocLayout.astro';
+import FooterPrevNext from '@components/footer/FooterPrevNext.astro';
+import SubFooter from '@components/footer/SubFooter.astro';
+import { getCollection, render } from 'astro:content';
+import type { SidebarEntry } from '@utils/types';
 import {
     findCurrentGroup,
     addEntriesToSection,
@@ -18,7 +18,7 @@ export async function getStaticPaths() {
     const docs = await getCollection("docs");
     return docs.map((doc) => ({
         params: {
-            doc: doc.slug,
+            doc: doc.id.replace(/\.[^/.]+$/, ''),
         },
         props: {
             doc: doc,
@@ -27,7 +27,7 @@ export async function getStaticPaths() {
 }
 const title = Astro.props.doc.data.title;
 const subtitle = Astro.props.doc.data.subtitle;
-const { headings, Content, remarkPluginFrontmatter } = await Astro.props.doc.render();
+const { headings, Content, remarkPluginFrontmatter } = await render(Astro.props.doc);
 
 let prev_page: { title: string; slug: string } | null = null;
 let next_page: { title: string; slug: string } | null = null;

sites/docs/src/pages/docs/[subsection].astro

@@ -81,10 +81,10 @@ let sections: SidebarEntry[] = [
     },
 ];
 // sort docs first depth, then by weight, then by title
-const sortDocs = (a: CollectionEntry<"docs">, b: CollectionEntry<"docs">) => {
-    if (a.slug.split("/").length < b.slug.split("/").length) {
+const sortDocs = (a: CollectionEntry<'docs'>, b: CollectionEntry<'docs'>) => {
+    if (a.id.split('/').length < b.id.split('/').length) {
         return 1;
-    } else if (a.slug.split("/").length > b.slug.split("/").length) {
+    } else if (a.id.split('/').length > b.id.split('/').length) {
         return -1;
     } else {
         a.data.weight = a.data.weight || 100;
@@ -105,8 +105,8 @@ const sortDocs = (a: CollectionEntry<"docs">, b: CollectionEntry<"docs">) => {
     }
 };
 
-let subsectionDocs: CollectionEntry<"docs">[] = docs.filter((doc) => doc.slug.startsWith(subsection + "/"));
-const subsections = sections.find((section) => section.href?.startsWith("/docs/" + subsection));
+let subsectionDocs: CollectionEntry<'docs'>[] = docs.filter((doc) => doc.id.startsWith(subsection + '/'));
+const subsections = sections.find((section) => section.href?.startsWith('/docs/' + subsection));
 
 subsectionDocs.sort(sortDocs);
 addEntriesToSection(sections, docs, Astro.url.pathname);
@@ -193,8 +193,11 @@ const splitUrl = `${Astro.url.pathname}/`.replace(/^\/|\/$/g, "").split("/");
                                             <div class="card-body">
                                                 <p>
                                                     {
-                                                        docs.find((doc) => "/docs/" + doc.slug === section.href)?.data
-                                                            .subtitle
+                                                        docs.find(
+                                                            (doc) =>
+                                                                '/docs/' + doc.id.replace(/\.[^/.]+$/, '') ===
+                                                                section.href,
+                                                        )?.data.subtitle
                                                     }
                                                 </p>
                                             </div>

sites/docs/src/pages/docs/index.astro

@@ -57,6 +57,7 @@ let sections: SidebarEntry[] = [
         weight: 6,
     },
 ];
+
 addEntriesToSection(sections, docs, Astro.url.pathname);
 // sort all entries by weight if available recursively
 const sortEntries = (entries: SidebarEntry[]) => {
@@ -90,19 +91,21 @@ const findEntriesWithLabel = (sections: SidebarEntry[], label: string, parentLab
     let entries = [];
     sections.forEach((section) => {
         if (!parentLabel && section.label === label) {
-            section.metadata = docs.find((doc) => "/docs/" + doc.slug === section.href);
+            section.metadata = docs.find((doc) => '/docs/' + doc.id.replace(/\.[^/.]+$/, '') === section.href);
             entries.push(section);
         }
         if (parentLabel && section.label === parentLabel) {
             section.entries.forEach((entry) => {
                 if (entry.label === label) {
-                    entry.metadata = docs.find((doc) => "/docs/" + doc.slug === entry.href);
+                    entry.metadata = docs.find((doc) => '/docs/' + doc.id.replace(/\.[^/.]+$/, '') === entry.href);
                     entries.push(entry);
                 }
             });
         }
         if (section.entries) {
             entries.push(...findEntriesWithLabel(section.entries, label, parentLabel));
+        } else {
+            // console.log('section.label', section);
         }
     });
     return entries;

sites/docs/src/pages/docs/nf-core-tools/api_reference/[version]/[...slug].astro

@@ -1,13 +1,20 @@
 ---
 import MarkdownTocLayout from "@layouts/MarkdownTocLayout.astro";
-import { getCollection, type CollectionEntry } from "astro:content";
-import { createLinkOrGroup } from "@utils/functions";
+import { getCollection, type CollectionEntry, render } from "astro:content";
 import type { SidebarEntry } from "@utils/types";
 
 // 1. Generate a new path for every collection entry
 export async function getStaticPaths() {
     const api_reference: CollectionEntry<"api_reference">[] = await getCollection("api_reference");
-    const versions = [...new Set(api_reference.map((entry) => entry.id.split("/")[0]))].sort((a, b) => {
+
+    const versions = [
+        ...new Set(
+            api_reference.map((entry) => entry.filePath?.replace("src/content/api_reference/", "").split("/")[0]),
+        ),
+    ].sort((a, b) => {
+        if (!a || !b) {
+            return 0;
+        }
         const a_version = a.split(".").map((entry) => parseInt(entry));
         const b_version = b.split(".").map((entry) => parseInt(entry));
         for (let i = 0; i < a_version.length; i++) {
@@ -31,11 +38,15 @@ export async function getStaticPaths() {
         return 0;
     });
     let api_reference_path = api_reference.map((entry: CollectionEntry<"api_reference">) => {
-        const version = entry.id.split("/")[0];
+        const version = entry.filePath?.replace("src/content/api_reference/", "").split("/")[0];
         return {
             params: {
                 version: version,
-                slug: entry.id.replace(`${version}/`, "").replace(/\.md$/, "").replace("/index", "/"),
+                slug: entry.filePath
+                    ?.replace("src/content/api_reference/", "")
+                    .replace(`${version}/`, "")
+                    .replace(/\.md$/, "")
+                    .replace("/index", "/"),
             },
             props: { entry: entry, versions: versions },
         };
@@ -53,7 +64,8 @@ export async function getStaticPaths() {
 // 2. For your template, you can get the entry directly from the prop
 const { entry, versions } = Astro.props;
 const { version } = Astro.params;
-let { headings, Content } = await entry.render();
+let { headings, Content } = await render(entry);
+
 const title = "nf-core/tools API documentation";
 const version_tag_name = version === "latest" ? versions[1] : version;
 const subtitle =
@@ -62,7 +74,7 @@ const subtitle =
 
 const module_name = headings[0].text;
 headings.map((heading) => {
-    // remove everything inside paranthesis
+    // remove everything inside parenthesis
     heading.text = heading.text.replace(/\(.*\)/, "()");
     // remove module name from headings
     heading.text = heading.text.replace(module_name + ".", "");
@@ -75,7 +87,8 @@ headings.map((heading) => {
 // try to figure out github URL to the source file from file path
 let md_github_url = "";
 const base_url = `https://github.com/nf-core/tools/blob/${version_tag_name}/nf_core/`;
-const file_name = entry.id?.split("/").pop()?.replace(".md", ".py") || "";
+const file_name =
+    entry.filePath?.replace("src/content/api_reference/", "").split("/").pop()?.replace(".md", ".py") || "";
 // check if entry.id contains "pipeline_lint_tests"
 if (entry.id.includes("pipeline_lint_tests")) {
     md_github_url = base_url + "lint/" + file_name;
@@ -87,7 +100,13 @@ if (entry.id.includes("pipeline_lint_tests")) {
     md_github_url = base_url + file_name;
 }
 
-const tools: CollectionEntry<"api_reference">[] = await getCollection("api_reference");
+let tools: CollectionEntry<"api_reference">[] = await getCollection("api_reference");
+// replace tools.id with tools.filePath
+tools = tools.map((tool) => {
+    tool.id = tool.filePath?.replace("src/content/api_reference/", "").replace(/\.[^/.]+$/, "") || "";
+    return tool;
+});
+// filter tools by version_
 const versioned_tools = tools.filter((tool) => tool.id.split("/")[0] === version_tag_name);
 const section_names = [...new Set(versioned_tools.map((entry) => entry.id.split("/")[1]))];
 const sections: SidebarEntry[] = section_names

sites/docs/src/pages/docs/nf-core-tools/api_reference/index.astro

@@ -1,3 +1,3 @@
 ---
-return Astro.redirect("/docs/nf-core-tools/api_reference/latest");
+return Astro.redirect('/docs/nf-core-tools/api_reference/latest/index');
 ---

sites/docs/svelte.config.js

@@ -0,0 +1 @@
+../main-site/svelte.config.js