Can I render a different md file based on query string param?

[johnsimons]

My use can is that I am trying to convert an existing website that uses query strings to render different versions of the documentation.
The website I am trying to migrate is https://docs.particular.net.

So, for example, https://docs.particular.net/nservicebus/licensing/?version=core_7 a version but https://docs.particular.net/nservicebus/licensing/?version=core_9 renders a different version.

I want the sidebar item to stay active.

This is different from regular versioning of a single product, because this website contains many different"products", so we allow versioning at the page level.

I hope this makes sense, let me know.

[brc-dd]

You can use vue inside markdown, so something like this is possible:

<template v-if="version === 'core_7'>

# license for core_7

</template>

<template v-if="version === 'core_9'>

# license for core_9

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const version = ref('')

onMounted(() => {
  version.value = (new URLSearchParams(window.location.search)).get('version')
})
</script>

If you think the file is getting big, you can move the markdown parts to different files and include or import them.

[johnsimons]

This may work, I would prefer to have a single vue component to have that logic, and I wonder if the vue component can render markdown?

In other words, if my md file includes vue components, do those need to render html or can they render more markdown that eventually gets converted to html via markdown-it?

[brc-dd]

Ah, they need to render html. If you want to render markdown you'll need to make your file .md. You can import .md files same as vue components:

## foo.md

# bar.md

<Foo />

<script setup lang="ts">
import Foo from 'path/to/foo.md'
</script>

[johnsimons]

I finally tried this option @brc-dd.
It nearly works, but my issue is that the content inside <template v-if="version === 'core_7'> is markdown, and that does not seem to be converted to HTML.

So here is what I have tried:

---
title: The Particular Service Platform
reviewed: 2024-05-23
suppressRelated: true
isLearningPath: true
redirects:
 - nservicebus/preparing-your-machine-to-run-nservicebus
---

<script setup lang="ts">
import { onMounted, ref } from "vue";

const version = ref("");

onMounted(() => {
  version.value = new URLSearchParams(window.location.search).get("version") || "";
});
</script>
<template v-if="version === 'core_9'"> 
## license for core_9 
</template>

Messaging is a great way to build loosely coupled, scalable, and reliable systems. But it has its challenges. The most common difficulty is seeing what's happening in a system. This is one of the problems solved by the Particular Service Platform.

The Platform's goal is to provide a set of tools that make it easier to build and maintain messaging systems. The tools are tailored to the common needs of messaging systems and 'just work', out of the box. They enable developers to focus on more important challenges, such as gaining a better understanding of their business domains.
....

When I render without ?version=core_9 I get

but when I render with ?version=core_9, I get

Any thoughts?

[brc-dd]

Add newline before markdown.

[johnsimons]

nice, thank you