Two versions of a page (but not versioning)

[ghost]

Hey all

What is the best way to have the same site only once but have some "conditions" for some paragraphs? Like in Jekyll:

{% if param == "old-page" -%}
 do not do that
{% elsif param == "new-page" -%}
  do this
{% endif -%}

What would have to be done?

Note that the pages (docs, md) are generally the same, just in some places it should feature some other information.

Thanks

[slorber]

We don't have a built-in way to do that, but you can plug this logic yourself.

---

You can create a custom remark plugin that will remove the unwanted paragraphs based on plugin options and some syntax:

# title

:::old 

do not do that

:::

:::new 

do that

:::

Our admonition plugin can be useful for inspiration: https://github.com/elviswolcott/remark-admonitions

---

You can create a React component and use it in MD (thanks to MDX).
The component will display one text or another according to config it reads through useDocusaurusContext

# My title

Some text

<MyComp
  oldContent={
    <>
    
    Some **markdown text**
    
    </>
  }
  newContent={
    <>
    
    Some **markdown text**
    
    </>
  }
/>

I wouldn't recommend this for long texts because both text strings will be in your final JS bundle for that page and make it heavier.

---

We could make the site config available in md docs so that you can do:

# My title

<>{siteConfig.customFields.isOld ? "old text" : "new text"}</>

This is basically similar to the 2nd solution, just a shortcut not requiring an intermediate component.

[mambax]

Sorry to reply late (I finally found out where the discussion went, I used my corporate account 🤦🏽 ).
I would need to make the difference only during build time.

We have a legacy GitHub and a new one. The docs are deployed separately (twice) but at build time we need to slightly alter the content.

like:

docusaurus serve --config = old // --> renders some places slightly different infos, e.g. old GH has no GH Actions
docusaurus serve --config = new // --> renders some places slightly different infos, e.g. new GH has GH Actions

We have 27 ifs but 17 are in one file that I could split up.

Tabs are an option yet it would be better if the server only renders 1 option (actually it just depends on the baseUrl).

Markdown example:

if (baseUrl === 'github.tools.sap') {
 actions are enabled!
} else {
 you need to migrate to github.tools.sap to get actions
}

This can be "done" at build time. So answer to your question: No, two instances would get deployed but reusing 95% of the code.

[slorber]

Not sure what is your question here, but you can:

• use docusaurus build --config site1.config.js and docusaurus build --config site2.config.js, sharing a common base.config.js
• use env variable when doing docusaurus build , and use that env variable in docusaurus.config.js

Now it's up to you to build a remark plugin to filter out the unwanted content. I didn't find any existing solution but I think the community would be interested to have one

[mambax]

I understand 95% (sorry for my shortcomings). Here is how then I imagine the remark plugin syntax:

:::Conditional condition="{siteConfig.context.ENV} === 'locationOld'"

# old content

:::

But I can't find docs on how to get the site config/context into MD(X), here I see it for React, but I can't see MDX.

[slorber]

:::Conditional condition="{siteConfig.context.ENV} === 'locationOld'"

You can't do that, at least without writing serious remark code to handle such construct

::: is not MDX syntax, it is some proprietary syntax you invent to enhance markdown.
If you want this proprietary syntax to support js expressions/conditions, you'd have to implement that yourself (good luck!).

In the end, remember that YOU will have to implement the support for this syntax, so you'd rather keep that syntax simple in the first place or you'll end up with complex work to do.

---

What you can do instead, as already explained

:::old 

do not do that

:::

:::new 

do that

:::

And you have a remark plugin that filter the content wrapped with one tag or the other.

This is the best solution IMHO.
It remains your responsibility to write such a remark plugin, you'll have to learn how to write a remark plugin in any case.

I am not myself a remark expert, and can't support you here. Look at the linked admonition plugin for inspiration: that's basically what I'd do.

---

If you use React/MDX, you can have a component to do the old/new switch for you:

# Title

import Switch from "@site/src/components/Switch"

<Switch
  oldContent="old string"
  newContent="new string"
/>

In Switch, you can use useDocusaurusContext() to read config.customFields and do your if-else logic here.

As explained, it is not the ideal solution because booth strings will end-up in the final js bundles, and your site will be heavier.

It might also be more complicated to interleave md syntax for the old/new content props

[ghost]

Alright, I think I got it. And I pass the current config to the remark plugin via its options in the config file!
Thanks @slorber 🤗