Skip to main content

7.How to add variable in markdown for docusaurus

· 2 min read
chasen

An image from the static

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