github.com/Racer159/jackal@v0.32.7-0.20240401174413-0bd2339e4f2e/docs-website/src/components/ExampleYAML.js (about)

     1  import React from "react";
     2  import { useEffect, useState } from "react";
     3  import CodeBlock from "@theme/CodeBlock";
     4  
     5  const FetchExampleYAML = ({ src, component, raw, showLink = true }) => {
     6    const [content, setContent] = useState(null);
     7    const linkBaseUrl = `${src}`.replace(/^\/build\/\.\.\//gm,'').replace(/\/jackal\.yaml.+?$/gm,'');
     8  
     9    useEffect(() => {
    10      fetch(src)
    11        .then((res) => res.text())
    12        .then(async (text) => {
    13          if (component) {
    14            const lines = text.split("\n");
    15            const start = lines.indexOf(`  - name: ${component}`);
    16            const end = lines.findIndex((line, index) => index > start && line.startsWith("  - name: "));
    17            setContent(lines.slice(start, end).join("\n"));
    18          } else {
    19            setContent(text);
    20          }
    21        });
    22    }, []);
    23  
    24    if (!content) {
    25      console.log(`Unable to fetch example YAML ${src}`)
    26      return <></>
    27    }
    28    if (raw) {
    29      return <>{content}</>;
    30    }
    31    return (
    32      <>
    33        {showLink && (
    34          <p>
    35            This example's full <code>jackal.yaml</code> can be viewed at{" "}
    36            <a href={`/${linkBaseUrl}/#jackal.yaml`}>{linkBaseUrl}</a>
    37          </p>
    38        )}
    39        <CodeBlock copy={false} language="yaml">
    40          {content}
    41        </CodeBlock>
    42      </>
    43    );
    44  };
    45  
    46  export default FetchExampleYAML;