7.How to add variable in markdown for docusaurus

Picture from: details

Replace the software version number or Replace the variable version number

@site/src/plugins/releaseVersion

import axios from "axios";
import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
import { useSessionStorageState, useMount, useLocalStorageState } from 'ahooks';
import { copyToClipboard } from 'copyforjs';


const cacheKey = 'global-cache-releases';
const cacheTimeKey = 'global-cache-time';
const cacheTagNameKey = 'global-cache-tag-name';

export function getLatest(){
  let [cacheReleast, setCacheReleast] = useSessionStorageState(cacheKey);
  const [cacheTime, setCacheTime] = useSessionStorageState(cacheTimeKey);
  const [cacheTagName, setCacheTagName] = useLocalStorageState(cacheTagNameKey);
  useMount(()=>{  
    if (ExecutionEnvironment.canUseDOM) {
      setTimeout(()=>{
        const timeStamp = new Date().getTime();
        // It's only cached for an hour
        if (cacheTime && (timeStamp - cacheTime) > 60*60*1000) {
          cacheReleast = null;
          setCacheReleast();
        }
        getData();
        const dom = document.querySelectorAll('.clean-btn')
        for(let button of dom) {
          if (button?.getAttribute('aria-label') === 'Copy code to clipboard') {
            button.addEventListener("click", ()=>{
              setTimeout(()=>{
                const text = button?.previousSibling?.innerText;
                copyToClipboard(String(text).trim())
               }, 1)
            }, false);
          }
        }
      });
    }
  })
  function getData(){
    if (cacheReleast) {
      setText(cacheReleast?.name);
    } else {
      axios.get('https://api.github.com/repos/xxx/xxxx/releases')
        .then(res=>{
          if(res.data && res.data?.length > 0){
            const data = res.data[0];
            const { name } = data;
            setCacheReleast(data)
            setCacheTime(new Date().getTime())
            setText(name);
            setCacheTagName(name);
          } else {
            setText()
          }
        })
        .catch(()=>{
          setText()
        })
    }
  }
  function setText(text) {
    const dom = document.querySelectorAll('.variable');
    for (let div of dom){
      if (div.innerHTML === '${version}') {
        // v1.0
        div.innerText = text ? text : (cacheTagName || 'v1.0');
      }
    }
  }
}

GetLatest

import React from "react";
import { getLatest } from '@site/src/plugins/releaseVersion';
function GetLatest() {
  return (
    <>{getLatest()}</>
  )
}
export default GetLatest;

markdown

// at the start of markdown
import GetLatest from '@site/src/components/GetLatest';

.......
// the "version" is need replace
curl -LJO ${version}/xxxxxx-${version}

.......
// at the end of markdown
<GetLatest/>

Reference

https://github.com/datafuselabs/databend/blob/main/website/src/plugins/releaseVersion.jsx