refactor: put "front end" before "back end"

mcanouil · mcanouil · commit 144c2d43be4f · 2025-10-08T15:15:52.000+02:00
diff --git a/docs/blog/posts/2025-10-10-quarto-wizard-1-0-0/index.qmd b/docs/blog/posts/2025-10-10-quarto-wizard-1-0-0/index.qmd
@@ -148,80 +148,6 @@ Install it today from the [VS Code marketplace](https://marketplace.visualstudio
 Quarto has revolutionised scientific and technical publishing by enabling reproducible documents that seamlessly blend code, narrative text, and visualisation.
 However, one persistent friction point has been managing the rich and ever-growing ecosystem of extensions and templates—until now.
 
-## Powered by a comprehensive extension directory
-
-### A curated catalogue of 250+ extensions
-
-At the heart of **Quarto Wizard** lies the [Quarto Extensions directory (m.canouil.dev/quarto-extensions/)](https://m.canouil.dev/quarto-extensions/), a comprehensive listing I maintain that catalogues extensions from across the entire Quarto ecosystem.
-
-![](assets/media/quarto-extensions-home-dark.png "Mickaël CANOUIL's Quarto Extensions directory"){
-  .dark-content
-  .img-fluid .img-thumbnail .rounded-3 .border-light
-  width="500px" fig-align="center" group="quarto-wizard-dark"
-  fig-alt='{{< meta alt-text.quarto-extensions-home >}}'
-}
-
-![](assets/media/quarto-extensions-home-light.png "Mickaël CANOUIL's Quarto Extensions directory"){
-  .light-content
-  .img-fluid .img-thumbnail .rounded-3 .border-light
-  width="500px" fig-align="center" group="quarto-wizard-light"
-  fig-alt='{{< meta alt-text.quarto-extensions-home >}}'
-}
-
-To date, it includes over 250 extensions contributed by the community, covering a vast array of functionalities from citation management to interactive visualisations.
-This directory powers **Quarto Wizard**'s discovery features, providing rich metadata about each extension including descriptions, licensing, version tags, and GitHub stars.
-The directory is continuously updated through GitHub's API, ensuring you always have access to the latest extensions from the community.
-
-### One-click installation from the web
-
-What's particularly exciting is that you can install extensions or use templates **directly from the website itself**.
-Each extension listed at [m.canouil.dev/quarto-extensions/](https://m.canouil.dev/quarto-extensions/) includes multiple installation options: traditional command-line via terminal, or one-click installation through **Quarto Wizard** in VS Code, Positron, or VSCodium.
-Simply browse the directory, find the extension you need, and choose your preferred installation method.
-The website generates the appropriate commands or launches your IDE directly.
-This flexibility means teams with mixed technical backgrounds can all access the same powerful extensions.
-
-![](assets/media/quarto-extensions-modal-dark.png "Mickaël CANOUIL's Quarto Extensions install modal"){
-  .dark-content
-  .img-fluid .img-thumbnail .rounded-3 .border-light
-  width="500px" fig-align="center" group="quarto-wizard-dark"
-  fig-alt='{{< meta alt-text.quarto-extensions-modal >}}'
-}
-
-![](assets/media/quarto-extensions-modal-light.png "Mickaël CANOUIL's Quarto Extensions install modal"){
-  .light-content
-  .img-fluid .img-thumbnail .rounded-3 .border-light
-  width="500px" fig-align="center" group="quarto-wizard-light"
-  fig-alt='{{< meta alt-text.quarto-extensions-modal >}}'
-}
-
-For example, you might want to add the [**Iconify**](https://github.com/mcanouil/quarto-iconify) extension to access over 200,000 open source vector icons in your documents, or the [**Animate**](https://github.com/mcanouil/quarto-animate) extension to bring your presentations to life with CSS animations.
-Perhaps the [**Spotlight**](https://github.com/mcanouil/quarto-spotlight) extension for Reveal.js catches your eye for creating dramatic Reveal.js presentations that highlight your mouse position.
-All of these extensions (and hundreds more) are just a click away.
-
-### Template discovery made easy
-
-Additionally, the Quarto Extensions directory excels at **template discovery and deployment** which is enhanced with powerful filtering options: you can sort by recently updated, filter by popularity, browse by categories (*i.e.*, Shortcodes, Filters, Formats, Projects, Reveal.js Plugins), or search for specific functionality.
-Each extension clearly indicates whether it's a template with **"Use"** buttons alongside **"Install"** options.
-
-![](assets/media/quarto-extensions-template-dark.png "Mickaël CANOUIL's Quarto Extensions list view filtered by formats"){
-  .dark-content
-  .img-fluid .img-thumbnail .rounded-3 .border-light
-  width="500px" fig-align="center" group="quarto-wizard-dark"
-  fig-alt='{{< meta alt-text.quarto-extensions-template >}}'
-}
-
-![](assets/media/quarto-extensions-template-light.png "Mickaël CANOUIL's Quarto Extensions list view filtered by formats"){
-  .light-content
-  .img-fluid .img-thumbnail .rounded-3 .border-light
-  width="500px" fig-align="center" group="quarto-wizard-light"
-  fig-alt='{{< meta alt-text.quarto-extensions-template >}}'
-}
-
-Whether you're crafting an academic paper using journal-specific formats, creating professional invoices with my [**Invoice**](https://github.com/mcanouil/quarto-invoice) extension template, or building stunning presentations with themed templates like my [**Reveal.js Coeos**](https://github.com/mcanouil/quarto-revealjs-coeos) extension, browsing available templates becomes as simple as scrolling through a curated gallery.
-
-This directory creates a seamless experience: instead of manually searching GitHub repositories or memorising command-line syntax, you can browse hundreds of extensions with detailed information at your fingertips.
-This transforms extension discovery from a treasure hunt into a curated shopping experience.
-
 ## {{< meta quarto-wizard >}} Quarto Wizard: Your GUI for Quarto extensions
 
 I designed **Quarto Wizard** to address a fundamental challenge I've observed in the community: whilst Quarto's command-line interface is powerful, many users prefer visual interfaces for discovering, installing, and managing extensions.
@@ -335,6 +261,80 @@ The file is not created until you confirm, allowing you to adjust the filename a
 
 :::
 
+## Powered by a comprehensive extension directory
+
+### A curated catalogue of 250+ extensions
+
+At the heart of **Quarto Wizard** lies the [Quarto Extensions directory (m.canouil.dev/quarto-extensions/)](https://m.canouil.dev/quarto-extensions/), a comprehensive listing I maintain that catalogues extensions from across the entire Quarto ecosystem.
+
+![](assets/media/quarto-extensions-home-dark.png "Mickaël CANOUIL's Quarto Extensions directory"){
+  .dark-content
+  .img-fluid .img-thumbnail .rounded-3 .border-light
+  width="500px" fig-align="center" group="quarto-wizard-dark"
+  fig-alt='{{< meta alt-text.quarto-extensions-home >}}'
+}
+
+![](assets/media/quarto-extensions-home-light.png "Mickaël CANOUIL's Quarto Extensions directory"){
+  .light-content
+  .img-fluid .img-thumbnail .rounded-3 .border-light
+  width="500px" fig-align="center" group="quarto-wizard-light"
+  fig-alt='{{< meta alt-text.quarto-extensions-home >}}'
+}
+
+To date, it includes over 250 extensions contributed by the community, covering a vast array of functionalities from citation management to interactive visualisations.
+This directory powers **Quarto Wizard**'s discovery features, providing rich metadata about each extension including descriptions, licensing, version tags, and GitHub stars.
+The directory is continuously updated through GitHub's API, ensuring you always have access to the latest extensions from the community.
+
+### One-click installation from the web
+
+What's particularly exciting is that you can install extensions or use templates **directly from the website itself**.
+Each extension listed at [m.canouil.dev/quarto-extensions/](https://m.canouil.dev/quarto-extensions/) includes multiple installation options: traditional command-line via terminal, or one-click installation through **Quarto Wizard** in VS Code, Positron, or VSCodium.
+Simply browse the directory, find the extension you need, and choose your preferred installation method.
+The website generates the appropriate commands or launches your IDE directly.
+This flexibility means teams with mixed technical backgrounds can all access the same powerful extensions.
+
+![](assets/media/quarto-extensions-modal-dark.png "Mickaël CANOUIL's Quarto Extensions install modal"){
+  .dark-content
+  .img-fluid .img-thumbnail .rounded-3 .border-light
+  width="500px" fig-align="center" group="quarto-wizard-dark"
+  fig-alt='{{< meta alt-text.quarto-extensions-modal >}}'
+}
+
+![](assets/media/quarto-extensions-modal-light.png "Mickaël CANOUIL's Quarto Extensions install modal"){
+  .light-content
+  .img-fluid .img-thumbnail .rounded-3 .border-light
+  width="500px" fig-align="center" group="quarto-wizard-light"
+  fig-alt='{{< meta alt-text.quarto-extensions-modal >}}'
+}
+
+For example, you might want to add the [**Iconify**](https://github.com/mcanouil/quarto-iconify) extension to access over 200,000 open source vector icons in your documents, or the [**Animate**](https://github.com/mcanouil/quarto-animate) extension to bring your presentations to life with CSS animations.
+Perhaps the [**Spotlight**](https://github.com/mcanouil/quarto-spotlight) extension for Reveal.js catches your eye for creating dramatic Reveal.js presentations that highlight your mouse position.
+All of these extensions (and hundreds more) are just a click away.
+
+### Template discovery made easy
+
+Additionally, the Quarto Extensions directory excels at **template discovery and deployment** which is enhanced with powerful filtering options: you can sort by recently updated, filter by popularity, browse by categories (*i.e.*, Shortcodes, Filters, Formats, Projects, Reveal.js Plugins), or search for specific functionality.
+Each extension clearly indicates whether it's a template with **"Use"** buttons alongside **"Install"** options.
+
+![](assets/media/quarto-extensions-template-dark.png "Mickaël CANOUIL's Quarto Extensions list view filtered by formats"){
+  .dark-content
+  .img-fluid .img-thumbnail .rounded-3 .border-light
+  width="500px" fig-align="center" group="quarto-wizard-dark"
+  fig-alt='{{< meta alt-text.quarto-extensions-template >}}'
+}
+
+![](assets/media/quarto-extensions-template-light.png "Mickaël CANOUIL's Quarto Extensions list view filtered by formats"){
+  .light-content
+  .img-fluid .img-thumbnail .rounded-3 .border-light
+  width="500px" fig-align="center" group="quarto-wizard-light"
+  fig-alt='{{< meta alt-text.quarto-extensions-template >}}'
+}
+
+Whether you're crafting an academic paper using journal-specific formats, creating professional invoices with my [**Invoice**](https://github.com/mcanouil/quarto-invoice) extension template, or building stunning presentations with themed templates like my [**Reveal.js Coeos**](https://github.com/mcanouil/quarto-revealjs-coeos) extension, browsing available templates becomes as simple as scrolling through a curated gallery.
+
+This directory creates a seamless experience: instead of manually searching GitHub repositories or memorising command-line syntax, you can browse hundreds of extensions with detailed information at your fingertips.
+This transforms extension discovery from a treasure hunt into a curated shopping experience.
+
 ## Addressing real workflow friction
 
 I designed **Quarto Wizard** and the extension directory at [m.canouil.dev/quarto-extensions](https://m.canouil.dev/quarto-extensions/) to directly tackle several persistent Quarto pain points I've encountered:
