feat: Reorganize pipeline examples into clean directory structure

Restructure pipeline examples from flat files to organized subdirectories 
under /examples/, with colocated docs and code files.

- Move examples.astro → examples/index.astro  
- Create subdirs: basic-pipeline/, blast-pipeline/, rna-seq-pipeline/, 
  machine-learning-pipeline/, mixing-scripting-languages/
- Extract embedded Nextflow code from .md to separate main.nf files
- Convert .md to .mdx with Expressive Code imports
- Clean URLs without trailing slashes (/examples/basic-pipeline)
- Update all navigation and links to new structure
- Fix active page highlighting in side navigation
- Add backward compatibility redirects

Better organization, consistent patterns, maintainable structure.

Author: edmundmiller

netlify.toml

@@ -23,20 +23,41 @@
 
 [[redirects]]
   from = "/example1.html"
-  to = "/basic-pipeline.html"
+  to = "/examples/basic-pipeline"
 
 [[redirects]]
   from = "/example2.html"
-  to = "/mixing-scripting-languages.html"
+  to = "/examples/mixing-scripting-languages"
 
 [[redirects]]
   from = "/example3.html"
-  to = "/blast-pipeline.html"
+  to = "/examples/blast-pipeline"
 
 [[redirects]]
   from = "/example4.html"
-  to = "/rna-seq-pipeline.html"
+  to = "/examples/rna-seq-pipeline"
 
 [[redirects]]
   from = "/example5.html"
-  to = "/machine-learning-pipeline.html"
+  to = "/examples/machine-learning-pipeline"
+
+# Direct redirects from old .html files to new structure
+[[redirects]]
+  from = "/basic-pipeline.html"
+  to = "/examples/basic-pipeline"
+
+[[redirects]]
+  from = "/mixing-scripting-languages.html"
+  to = "/examples/mixing-scripting-languages"
+
+[[redirects]]
+  from = "/blast-pipeline.html"
+  to = "/examples/blast-pipeline"
+
+[[redirects]]
+  from = "/rna-seq-pipeline.html"
+  to = "/examples/rna-seq-pipeline"
+
+[[redirects]]
+  from = "/machine-learning-pipeline.html"
+  to = "/examples/machine-learning-pipeline"

src/components/Footer.astro

@@ -86,28 +86,28 @@ import LogoSeqera from "../../public/img/assets/Logo_Seqera_whote.svg";
           <ul class="examples-list pl-0">
             <li class="title text-white font-inter text-xs font-bold">Examples</li>
             <li>
-              <a class="text-white font-inter text-xs font-normal leading-normal" href="/basic-pipeline.html"
+              <a class="text-white font-inter text-xs font-normal leading-normal" href="/examples/basic-pipeline"
                 >Basic pipeline</a
               >
             </li>
             <li>
               <a
                 class="text-white font-inter text-xs font-normal leading-normal"
-                href="/mixing-scripting-languages.html">Mixing scripting languages</a
+                href="/examples/mixing-scripting-languages">Mixing scripting languages</a
               >
             </li>
             <li>
-              <a class="text-white font-inter text-xs font-normal leading-normal" href="/blast-pipeline.html"
+              <a class="text-white font-inter text-xs font-normal leading-normal" href="/examples/blast-pipeline"
                 >BLAST pipeline</a
               >
             </li>
             <li>
-              <a class="text-white font-inter text-xs font-normal leading-normal" href="/rna-seq-pipeline.html"
+              <a class="text-white font-inter text-xs font-normal leading-normal" href="/examples/rna-seq-pipeline"
                 >RNA-Seq pipeline</a
               >
             </li>
             <li>
-              <a class="text-white font-inter text-xs font-normal leading-normal" href="/machine-learning-pipeline.html"
+              <a class="text-white font-inter text-xs font-normal leading-normal" href="/examples/machine-learning-pipeline"
                 >Machine Learning pipeline</a
               >
             </li>

src/components/Menu/Menu.tsx

@@ -192,27 +192,27 @@ const Menu = ({}) => {
               </a>
               <ul className="dropdown-menu" role="menu" onClick={handleMenuItemClick}>
                 <li>
-                  <a href="/basic-pipeline.html" tabIndex={0}>
+                  <a href="/examples/basic-pipeline" tabIndex={0}>
                     Basic pipeline
                   </a>
                 </li>
                 <li>
-                  <a href="/mixing-scripting-languages.html" tabIndex={0}>
+                  <a href="/examples/mixing-scripting-languages" tabIndex={0}>
                     Mixing scripting languages
                   </a>
                 </li>
                 <li>
-                  <a href="/blast-pipeline.html" tabIndex={0}>
+                  <a href="/examples/blast-pipeline" tabIndex={0}>
                     BLAST pipeline
                   </a>
                 </li>
                 <li>
-                  <a href="/rna-seq-pipeline.html" tabIndex={0}>
+                  <a href="/examples/rna-seq-pipeline" tabIndex={0}>
                     RNA-Seq pipeline
                   </a>
                 </li>
                 <li>
-                  <a href="/machine-learning-pipeline.html" tabIndex={0}>
+                  <a href="/examples/machine-learning-pipeline" tabIndex={0}>
                     Machine Learning pipeline
                   </a>
                 </li>

src/components/SideNavigation/ExamplesSideNav.tsx

@@ -7,13 +7,11 @@ const ExamplesSideNav = () => {
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const path = window.location.pathname;
-      const filename = path.split('/').pop();
-      
-      if (filename) {
-        const match = filename.match(/example(\d+)/);
-        if (match && match[1]) {
-          setActiveId(`example${match[1]}`);
-        }
+
+      // Extract pipeline name from /examples/pipeline-name/ format
+      const match = path.match(/\/examples\/([^\/]+)\/?$/);
+      if (match && match[1]) {
+        setActiveId(match[1]);
       }
     }
   }, []);
@@ -22,27 +20,27 @@ const ExamplesSideNav = () => {
     {
       id: 'basic-pipeline',
       title: 'Basic pipeline',
-      href: 'basic-pipeline.html'
+      href: '/examples/basic-pipeline'
     },
     {
       id: 'mixing-scripting-languages',
       title: 'Mixing scripting languages',
-      href: 'mixing-scripting-languages.html'
+      href: '/examples/mixing-scripting-languages'
     },
     {
       id: 'blast-pipeline',
       title: 'BLAST pipeline',
-      href: 'blast-pipeline.html'
+      href: '/examples/blast-pipeline'
     },
     {
       id: 'rna-seq-pipeline',
       title: 'RNA-Seq pipeline',
-      href: 'rna-seq-pipeline.html'
+      href: '/examples/rna-seq-pipeline'
     },
     {
       id: 'machine-learning-pipeline',
       title: 'Machine Learning pipeline',
-      href: 'machine-learning-pipeline.html'
+      href: '/examples/machine-learning-pipeline'
     }
   ];
 

src/pages/basic-pipeline.mdx renamed to src/pages/examples/basic-pipeline/index.mdx

@@ -4,7 +4,7 @@ layout: "@layouts/ExampleLayout.astro"
 ---
 
 import { Code } from 'astro-expressive-code/components'
-import pipelineCode from '../examples/basic-pipeline.nf?raw'
+import pipelineCode from './main.nf?raw'
 
 <div class="blg-summary example">
 <h2>Basic pipeline</h2>

src/examples/basic-pipeline.nf renamed to src/pages/examples/basic-pipeline/main.nf

@@ -0,0 +1,41 @@
+---
+title: BLAST pipeline
+layout: "@layouts/ExampleLayout.astro"
+---
+
+import { Code } from 'astro-expressive-code/components'
+import pipelineCode from './main.nf?raw'
+
+<div class="blg-summary example">
+<h2>BLAST pipeline</h2>
+
+<p class="">
+    This example splits a FASTA file into chunks and executes a BLAST query for each chunk in parallel. Then, all the sequences for the top hits are collected and merged into a single result file.
+</p>
+
+<Code
+  code={pipelineCode}
+  lang="nextflow"
+/>
+
+</div>
+
+### Try it on your computer
+
+To run this pipeline on your computer, you will need:
+
+- Unix-like operating system
+- Java 17 (or higher)
+- Docker
+
+Install Nextflow by entering the following command in the terminal:
+
+    $ curl -fsSL https://get.nextflow.io | bash
+
+Then launch the pipeline with this command:
+
+    $ ./nextflow run blast-example -with-docker
+
+It will automatically download the pipeline [GitHub repository](https://github.com/nextflow-io/blast-example) and the associated Docker images, thus the first execution may take a few minutes to complete depending on your network connection.
+
+**NOTE**: To run this example with versions of Nextflow older than 22.04.0, you must include the `-dsl2` flag with `nextflow run`.

src/pages/examples/blast-pipeline/index.mdx

@@ -1,16 +1,3 @@
----
-title: BLAST pipeline
-layout: "@layouts/ExampleLayout.astro"
----
-
-<div class="blg-summary example">
-<h2>BLAST pipeline</h2>
-
-<p class="">
-    This example splits a FASTA file into chunks and executes a BLAST query for each chunk in parallel. Then, all the sequences for the top hits are collected and merged into a single result file.
-</p>
-
-```groovy
 #!/usr/bin/env nextflow
 
 /*
@@ -85,27 +72,4 @@ process extract {
     """
     blastdbcmd -db $db/$db_name -entry_batch top_hits | head -n 10 > sequences
     """
-}
-```
-
-</div>
-
-### Try it on your computer
-
-To run this pipeline on your computer, you will need:
-
-- Unix-like operating system
-- Java 17 (or higher)
-- Docker
-
-Install Nextflow by entering the following command in the terminal:
-
-    $ curl -fsSL https://get.nextflow.io | bash
-
-Then launch the pipeline with this command:
-
-    $ ./nextflow run blast-example -with-docker
-
-It will automatically download the pipeline [GitHub repository](https://github.com/nextflow-io/blast-example) and the associated Docker images, thus the first execution may take a few minutes to complete depending on your network connection.
-
-**NOTE**: To run this example with versions of Nextflow older than 22.04.0, you must include the `-dsl2` flag with `nextflow run`.
+}

src/pages/blast-pipeline.md renamed to src/pages/examples/blast-pipeline/main.nf

@@ -25,33 +25,33 @@ import ExamplesSideNav from "@components/SideNavigation/ExamplesSideNav";
               <p class="mb-4">
                 Learn how to create a simple pipeline with two processes that communicate via channels.
               </p>
-              <a href="basic-pipeline.html" class="text-nextflow-green hover:underline">View example →</a>
+              <a href="/examples/basic-pipeline" class="text-nextflow-green hover:underline">View example →</a>
             </div>
 
             <div class="border rounded-lg p-6 hover:shadow-md transition-shadow">
               <h3 class="text-xl font-medium mb-2">Multiple inputs</h3>
               <p class="mb-4">
                 Discover how to manage multiple inputs and complex data dependencies in your workflows.
               </p>
-              <a href="mixing-scripting-languages.html" class="text-nextflow-green hover:underline">View example →</a>
+              <a href="/examples/mixing-scripting-languages" class="text-nextflow-green hover:underline">View example →</a>
             </div>
 
             <div class="border rounded-lg p-6 hover:shadow-md transition-shadow">
               <h3 class="text-xl font-medium mb-2">Channel operators</h3>
               <p class="mb-4">Explore powerful channel operators for transforming and manipulating data streams.</p>
-              <a href="blast-pipeline.html" class="text-nextflow-green hover:underline">View example →</a>
+              <a href="/examples/blast-pipeline" class="text-nextflow-green hover:underline">View example →</a>
             </div>
 
             <div class="border rounded-lg p-6 hover:shadow-md transition-shadow">
               <h3 class="text-xl font-medium mb-2">Processes and Channels</h3>
               <p class="mb-4">See advanced techniques for connecting processes through different channel types.</p>
-              <a href="rna-seq-pipeline.html" class="text-nextflow-green hover:underline">View example →</a>
+              <a href="/examples/rna-seq-pipeline" class="text-nextflow-green hover:underline">View example →</a>
             </div>
 
             <div class="border rounded-lg p-6 hover:shadow-md transition-shadow">
               <h3 class="text-xl font-medium mb-2">Error strategies</h3>
               <p class="mb-4">Learn how to handle errors and implement robust error recovery strategies.</p>
-              <a href="machine-learning-pipeline.html" class="text-nextflow-green hover:underline">View example →</a>
+              <a href="/examples/machine-learning-pipeline" class="text-nextflow-green hover:underline">View example →</a>
             </div>
           </div>
         </div>

src/pages/examples.astro renamed to src/pages/examples/index.astro

@@ -3,48 +3,20 @@ title: Error strategies
 layout: "@layouts/ExampleLayout.astro"
 ---
 
+import { Code } from 'astro-expressive-code/components'
+import pipelineCode from './main.nf?raw'
+
 <div class="blg-summary example">
 <h2>Machine Learning pipeline</h2>
 
 <p class="">
     This example shows how to put together a basic Machine Learning pipeline. It fetches a dataset from OpenML, trains a variety of machine learning models on a prediction target, and selects the best model based on some evaluation criteria.
 </p>
 
-```groovy
-#!/usr/bin/env nextflow
-
-params.dataset_name = 'wdbc'
-params.train_models = ['dummy', 'gb', 'lr', 'mlp', 'rf']
-params.outdir = 'results'
-
-workflow {
-    // fetch dataset from OpenML
-    ch_datasets = fetch_dataset(params.dataset_name)
-
-    // split dataset into train/test sets
-    (ch_train_datasets, ch_predict_datasets) = split_train_test(ch_datasets)
-
-    // perform training
-    (ch_models, ch_train_logs) = train(ch_train_datasets, params.train_models)
-
-    // perform inference
-    ch_predict_inputs = ch_models.combine(ch_predict_datasets, by: 0)
-    (ch_scores, ch_predict_logs) = predict(ch_predict_inputs)
-
-    // select the best model based on inference score
-    ch_scores
-        | max {
-            new JsonSlurper().parse(it[2])['value']
-        }
-        | subscribe { dataset_name, model_type, score_file ->
-            def score = new JsonSlurper().parse(score_file)
-            println "The best model for ${dataset_name} was ${model_type}, with ${score['name']} = ${score['value']}"
-        }
-}
-
-// view the entire code on GitHub ...
-
-```
+<Code
+  code={pipelineCode}
+  lang="nextflow"
+/>
 
 </div>
 
@@ -66,4 +38,4 @@ Then launch the pipeline with this command:
 
 It will automatically download the pipeline [GitHub repository](https://github.com/nextflow-io/ml-hyperopt) and build a Docker image on-the-fly using [Wave](https://seqera.io/wave/), thus the first execution may take a few minutes to complete depending on your network connection.
 
-**NOTE**: Nextflow 22.10.0 or newer is required to run this pipeline with Wave.
+**NOTE**: Nextflow 22.10.0 or newer is required to run this pipeline with Wave.