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;