|
| 1 | +import styles from './styles.module.css' |
| 2 | +import React, { useEffect, useState } from "react"; |
| 3 | +import ReactDOM from "react-dom"; |
| 4 | +import Admonition from '@theme/Admonition'; |
| 5 | + |
| 6 | +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; |
| 7 | +import { faGithub } from '@fortawesome/free-brands-svg-icons'; |
| 8 | +import { faLink, faFileAlt } from '@fortawesome/free-solid-svg-icons'; |
| 9 | +import BrowserOnly from '@docusaurus/BrowserOnly'; |
| 10 | +interface ReferenceLink { |
| 11 | + name: string, |
| 12 | + url: string |
| 13 | +} |
| 14 | + |
| 15 | +interface StructuredLinkProps { |
| 16 | + demoLink?: string; |
| 17 | + codeLink?: string; |
| 18 | + referenceLinks?: ReferenceLink[]; |
| 19 | +} |
| 20 | + |
| 21 | +function StructuredLinkInner({ demoLink, codeLink, referenceLinks }: StructuredLinkProps) { |
| 22 | + const [container, setContainer] = useState<HTMLElement | null>(null); |
| 23 | + // Use placeholder to find element for correct placement |
| 24 | + const [placeholder] = useState(() => document.createElement("div")); |
| 25 | + |
| 26 | + useEffect(() => { |
| 27 | + |
| 28 | + const tocContainer: HTMLElement = document.querySelector(".theme-doc-toc-desktop"); |
| 29 | + if (tocContainer?.parentElement) { |
| 30 | + const parentElement = tocContainer.parentElement; |
| 31 | + parentElement.insertBefore(placeholder, parentElement.firstChild); |
| 32 | + setContainer(placeholder); |
| 33 | + } |
| 34 | + |
| 35 | + // Remove placeholder when unmounting |
| 36 | + return () => { |
| 37 | + placeholder.remove(); |
| 38 | + }; |
| 39 | + }, [placeholder]); |
| 40 | + |
| 41 | + if (!demoLink && !codeLink && !referenceLinks) { |
| 42 | + return null; |
| 43 | + } |
| 44 | + |
| 45 | + return container |
| 46 | + ? ReactDOM.createPortal( |
| 47 | + <div className={styles.container}> |
| 48 | + <Admonition type='note' title='Relevant Links'> |
| 49 | + <div className={styles.linkContainer}> |
| 50 | + {demoLink ? |
| 51 | + <div className={styles.demoContainer}> |
| 52 | + <div className={styles.iconContainer}> |
| 53 | + <FontAwesomeIcon icon={faLink} /> |
| 54 | + <a target="_blank" href={demoLink}>Live Demo</a> |
| 55 | + </div> |
| 56 | + </div> |
| 57 | + : null} |
| 58 | + {codeLink ? |
| 59 | + <div className={styles.codeContainer}> |
| 60 | + <div className={styles.iconContainer}> |
| 61 | + <FontAwesomeIcon icon={faGithub} /> |
| 62 | + <a target="_blank" href={codeLink}>Demo Code</a> |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + : null} |
| 66 | + {referenceLinks && referenceLinks.length > 0 ? |
| 67 | + <div className={styles.referencesContainer}> |
| 68 | + <div className={styles.iconContainer}> |
| 69 | + <FontAwesomeIcon icon={faFileAlt} /> |
| 70 | + <div className={styles.referencesTitle}>References</div> |
| 71 | + </div> |
| 72 | + <div style={{ marginLeft: '23px' }}> |
| 73 | + {referenceLinks.map(entry => |
| 74 | + <a target="_blank" href={entry.url}>{entry.name}</a> |
| 75 | + ) |
| 76 | + } |
| 77 | + </div> |
| 78 | + </div> |
| 79 | + : null} |
| 80 | + </div> |
| 81 | + </Admonition> |
| 82 | + </div>, |
| 83 | + container |
| 84 | + ) |
| 85 | + : null; |
| 86 | +} |
| 87 | + |
| 88 | +// BrowserOnly wrapper for use in docusaurus. Without this, docusaurus will fail to build. |
| 89 | +function StructuredLink({ demoLink, codeLink, referenceLinks }: StructuredLinkProps) { |
| 90 | + return ( |
| 91 | + <BrowserOnly> |
| 92 | + {() => <StructuredLinkInner demoLink={demoLink} codeLink={codeLink} referenceLinks={referenceLinks} />} |
| 93 | + </BrowserOnly> |
| 94 | + ) |
| 95 | +} |
| 96 | + |
| 97 | +export default StructuredLink; |
0 commit comments