github.com/Racer159/jackal@v0.32.7-0.20240401174413-0bd2339e4f2e/docs-website/src/components/FetchFileCodeBlock.js (about) 1 import React from "react"; 2 import { useEffect, useState } from "react"; 3 import CodeBlock from "@theme/CodeBlock"; 4 5 const FetchFileCodeBlock = ({ src, component, raw, showLink = true, fileFormat, fileName }) => { 6 const [content, setContent] = useState(null); 7 8 const linkBaseUrl = `${src}`.replace(/^\/build\/\.\.\//gm, ''); 9 10 useEffect(() => { 11 // when fileFormat is json then you don't need to fetch, it is [object Object] 12 fileFormat !== "json" ? 13 fetch(src) 14 .then((res) => { 15 return res.text() 16 }) 17 .then(async (text) => { 18 setContent(text); 19 }) : setContent(JSON.stringify(src, null, 2)) 20 }, []); 21 22 if (!content) { 23 // This is necessary so the browser does not show [object Object] when fileFormat is json 24 if (fileFormat === "json") { 25 console.log(`Unable to fetch example ${fileFormat} ${fileName}`) 26 } else { 27 console.log(`Unable to fetch example ${fileFormat} ${src}`) 28 } 29 30 return <></> 31 } 32 if (raw) { 33 return <>{content}</>; 34 } 35 return ( 36 <> 37 {showLink && ( 38 <p> 39 This example's full <code>{fileName}</code> can be viewed at{" "} 40 {fileFormat === "json" ? <a download={fileName} href={"data:application/json;charset=utf-8,"+encodeURIComponent(JSON.stringify(src, null, 2))} style={{cursor: "pointer"}}>{fileName}</a> : <a href={`/${linkBaseUrl}/#jackal.yaml`}>{linkBaseUrl}</a>} 41 </p> 42 )} 43 <CodeBlock copy={false} fileFormat={fileFormat}> 44 {content} 45 </CodeBlock> 46 </> 47 ); 48 49 50 }; 51 52 export default FetchFileCodeBlock;