How would you implement this? (general pointers)

[Zenahr]

Use case:
Our documentation contains static links to dashboard menus of our software (e.g. 192.168.xxx.xxx/settings/security). Now, the IP address is different for every reader of our docs.
To keep the links useful and relevant to all readers we thought of creating an input field where an IP address can be put in and each time the reader opens a documentation page, the links are updated with the currently set IP address at runtime.

The way I see this we got two parts: 1) the input field and 2) the logic for modifying the links

For 1) It would probably make sense to store the value in localStorage. I imagine docusaurus offers an undocumented, internal API for that?

For 2) It would probably make sense to write a custom component that reads the value from localStorage OR a remark/rehype plugin

Question: would this even work in general or is this not possible within Docusaurus due to (unbeknownst to me) technical limitations?

[slorber]

Docusaurus produces a static site so the link in the static markup are static by default.

That being said we could allow you to provide (or swizzle) your own Link component to replace/wrap ours, and eventually add stateful logic that kicks in after React hydration. But that seems overly complex.

What I would do is keep the links static, but link to a dynamic resource that knows where to redirect to (ie to which IP). You can persist the IP in a cookie instead of localStorage. You can prompt the user on first link access what's their IP address (or earlier if that makes sense) and the redirect to the correct ip-prefixed location.

This is what we do for docusaurus.new: the first time it redirects to our playground page, and then we persist your choice and redirects you to the last playground you selected first. Code is open source if you want to take a look at our serverless functions.

[Zenahr]

awesome, thanks @slorber