Update docs to work with Astro 4

CHANGELOG.md

@@ -22,6 +22,7 @@
 - Remove legacy Highcharts/Matplotlib code an optional template `highcharts` ([#2292](https://github.com/MultiQC/MultiQC/pull/2292))
 - Move GitHub repository to `MultiQC` organisation ([#2243](https://github.com/MultiQC/MultiQC/pull/2243))
 - Update all GitHub actions to their latest versions ([#2242](https://github.com/ewels/MultiQC/pull/2242))
+- Update docs to work with Astro 4 ([#2256](https://github.com/MultiQC/MultiQC/pull/2256))
 - Remove unused dependency on `future` library ([#2258](https://github.com/MultiQC/MultiQC/pull/2258))
 - Fix incorrect scale IDs caught by linting ([#2272](https://github.com/MultiQC/MultiQC/pull/2272))
 - Docs: fix missing `v` prefix in docker image tags ([#2273](https://github.com/MultiQC/MultiQC/pull/2273))

docs/config.yaml

@@ -1,6 +1,6 @@
 nav:
   - Getting Started:
-      - index.md
+      - index.mdx
       - getting_started/quick_start.md
       - getting_started/installation.md
       - getting_started/running_multiqc.md

docs/core/development/modules.md

@@ -859,7 +859,7 @@ Colour scales can be reversed by adding the suffix `-rev` to the name. For examp
 
 The following scales are available:
 
-![color brewer](../../images/cbrewer_scales.png)
+![color brewer](../../../docs/images/cbrewer_scales.png)
 
 For categorical metrics that can take a value from a predefined set, use one of the categorical color scales: Set2, Accent, Set1, Set3, Dark2, Paired, Pastel2, Pastel1. For numerical metrics, consider one the "sequential" color scales from the table above.
 

docs/core/development/plots.md

@@ -529,7 +529,7 @@ Colour scales can be reversed by adding the suffix `-rev` to the name. For examp
 
 The following scales are available:
 
-![color brewer](../../images/cbrewer_scales.png)
+![color brewer](../../../docs/images/cbrewer_scales.png)
 
 ### Custom cell background colours
 

docs/core/getting_started/installation.md

@@ -164,7 +164,7 @@ pip install --user multiqc
 
 MultiQC [is available on spack](https://packages.spack.io/package.html?name=py-multiqc) as `py-multiqc`:
 
-```
+```bash
 spack install py-multiqc
 ```
 

docs/core/index.md → docs/core/index.mdx

@@ -3,13 +3,15 @@ title: Introduction
 description: How to install MultiQC on your system
 ---
 
+import RemoteSvg from "@components/RemoteSvg.astro";
+
 # Introduction
 
 MultiQC is a reporting tool that parses results and statistics from bioinformatics tool outputs, such as log files and console outputs.
 It helps to summarise experiments containing multiple samples and multiple analysis steps.
 It's designed to be placed at the end of pipelines or to be run manually when you've finished running your tools.
 
-![MultiQC Overview](../../images/multiqc_overview.excalidraw.svg)
+<RemoteSvg src="https://raw.githubusercontent.com/MultiQC/MultiQC/main/docs/images/multiqc_overview.excalidraw.svg" />
 
 :::note
 MultiQC doesn't _do_ any analysis for you - it just finds results from other tools that you have already run and generates nice reports.

docs/core/reports/customisation.md

@@ -79,7 +79,7 @@ report_header_info:
 
 Then this will be displayed at the top of reports:
 
-![report project info](../../images/report_proj_info.png)
+![report project info](../../../docs/images/report_proj_info.png)
 
 Note that you can also specify a path to a config file using `-c`.
 
@@ -723,11 +723,11 @@ The first key is the table ID, the second is the header ID for the column you wa
 :::tip
 The easiest way to find these IDs is by clicking _Configure Columns_ above the table you want to customise.
 
-![Table: configure columns button](../../images/table_configure_columns.png)
+![Table: configure columns button](../../../docs/images/table_configure_columns.png)
 
 The table ID is shown at the top of the modal window. The _ID_ column shows the column (header) ID.
 
-![Table: configure columns button](../../images/table_header_ids.png)
+![Table: configure columns button](../../../docs/images/table_header_ids.png)
 :::
 
 ### Hiding columns

docs/core/reports/reports.md

@@ -43,13 +43,13 @@ module produced the data. Clicking a header will sort the table by that value.
 Clicking it again will change the sort direction. You can shift-click multiple
 headers to sort by multiple columns.
 
-![sort column](../../images/genstats_sort.png)
+![sort column](../../../docs/images/genstats_sort.png)
 
 Above the table there is a button called 'Configure Columns'. Clicking this
 will launch a modal window with more detailed information about each column,
 plus options to show/hide and change the order of columns.
 
-![configure columns](../../images/genstats_config_cols.png)
+![configure columns](../../../docs/images/genstats_config_cols.png)
 
 ## Plots
 
@@ -64,16 +64,16 @@ Plots in MultiQC reports are usually interactive, using the
 You can hover the mouse over data to see a tooltip with more information
 about that dataset. Clicking and dragging on line graphs will zoom into that area.
 
-![plot zoom](../../images/plot_zoom.png)
+![plot zoom](../../../docs/images/plot_zoom.png)
 
 To reset the zoom, use the button in the top right:
 
-![reset zoom](../../images/plot_reset_zoom.png)
+![reset zoom](../../../docs/images/plot_reset_zoom.png)
 
 Plots have a grey bar along their base; clicking and dragging this will
 resize the plot's height:
 
-![plot zoom](../../images/plot_height.png)
+![plot zoom](../../../docs/images/plot_height.png)
 
 You can force reports to use interactive plots instead of flat by specifying
 the `--interactive` command line option (see below).
@@ -102,7 +102,7 @@ If you want to use the plot elsewhere (_eg._ in a presentation or paper),
 you can export it in a range of formats. Just click the menu button in
 the top right of the plot:
 
-![plot zoom](../../images/plot_export.png)
+![plot zoom](../../../docs/images/plot_export.png)
 
 This opens the MultiQC Toolbox _Export Plots_ panel with the current plot
 selected. You have a range of export options here. When deciding on output
@@ -118,14 +118,14 @@ Some plots have buttons above them which allow you to change the data
 that they show or their axis. For example, many bar plots have the option
 to show the data as percentages instead of counts:
 
-![percentage button](../../images/plot_percentage_button.png)
+![percentage button](../../../docs/images/plot_percentage_button.png)
 
 ## Toolbox
 
 MultiQC reports come with a 'toolbox', accessible by clicking the buttons
 on the right hand side of the report:
 
-![toolbox buttons](../../images/toolbox_buttons.png)
+![toolbox buttons](../../../docs/images/toolbox_buttons.png)
 
 Active toolbox panels have their button highlighted with a blue outline.
 You can hide the toolbox by clicking the open panel button a second time,
@@ -142,7 +142,7 @@ of interest. Simply enter some text which will match the samples you want to
 highlight and press enter (or click the add button). If you like, you can also
 customise the highlight colour.
 
-![toolbox highlight](../../images/toolbox_highlight.png)
+![toolbox highlight](../../../docs/images/toolbox_highlight.png)
 
 To make it easier to match groups of samples, you can use a regular expressions
 by turning on 'Regex mode'. You can test regexes using a nice tool at
@@ -152,7 +152,7 @@ delimiters are not needed (use `pattern`, not `/pattern/`).
 
 Here, we highlight any sample names that end in `_1`:
 
-![highligh regex](../../images/toolbox_highlight_regex.png)
+![highligh regex](../../../docs/images/toolbox_highlight_regex.png)
 
 Note that a new button appears above the General Statistics table when samples
 are highlighted, allowing you to sort the table according to highlights.
@@ -169,7 +169,7 @@ file names are not always informative. To help with this, you can do a search
 and replace within sample names. Here, we remove the `SRR1067` and `_1` parts
 of the sample names, which are the same for all samples:
 
-![rename samples](../../images/toolbox_rename.png)
+![rename samples](../../../docs/images/toolbox_rename.png)
 
 Again, regular expressions can be used. See above for details. Note that
 regex groups can be used - define a group match with parentheses and
@@ -181,7 +181,7 @@ Often, you may have a spreadsheet with filenames and informative sample
 names. To avoid having to manually enter each name, you can paste from a
 spreadsheet using the 'bulk import' tool:
 
-![bulk rename](../../images/toolbox_bulk_rename.png)
+![bulk rename](../../../docs/images/toolbox_bulk_rename.png)
 
 ### Hiding Samples
 
@@ -192,7 +192,7 @@ the 'Hide Samples' toolbox panel.
 Here, we hide all samples with `_trimmed` in their sample name:
 _(Note that plots will tell you how many samples have been hidden)_
 
-![hide samples](../../images/toolbox_hide_samples.png)
+![hide samples](../../../docs/images/toolbox_hide_samples.png)
 
 ### Export