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>