diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index e306a72424..5517c0c715 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -16,796 +16,62 @@ import React from 'react'; import { useShadowDom } from '..'; - -const mockHtml: string = ` - - - - - - - - - - - - - - - - - - - - - - - - - - Download boilerplate - MkDocs Material Boilerplate - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - Skip to content - - -
-
- -
- -
- -
- -
- - - - - - - - - - - - -
-
- - -
-
-
- -
-
-
- - -
-
-
- - -
-
-
- - -
-
- - - - - - - - - - -

Download boilerplate

-

Git clone

-
git clone https://github.com/peaceiris/mkdocs-material-boilerplate.git
-cd mkdocs-material-boilerplate
-
- - -

Download zip

-
wget 'https://github.com/peaceiris/mkdocs-material-boilerplate/archive/master.zip'
-unzip master.zip
-cd mkdocs-material-boilerplate-master
-
- - -

👉 Click me to download zip

- - - - - - - -
-
-
-
- - - - -
- - - - - - - - - - - -`; +import { useAsync } from 'react-use'; + +const useFetch = (url: string) => { + const state = useAsync(async () => { + const response = await fetch(url); + const raw = await response.text(); + return raw; + }, [url]); + + return state; +}; + +const addBaseUrl = (htmlString: string, baseUrl: string): string => { + const domParser = new DOMParser().parseFromString(htmlString, 'text/html'); + + const updateDom = ( + list: Array, + attributeName: string, + ): void => { + Array.from(list).forEach((elem: T) => { + const newUrl = new URL( + elem.getAttribute(attributeName)!, + baseUrl, + ).toString(); + elem.setAttribute(attributeName, newUrl); + }); + }; + + updateDom(Array.from(domParser.images), 'src'); + updateDom( + Array.from(domParser.links), + 'href', + ); + updateDom( + Array.from(domParser.querySelectorAll('link')), + 'href', + ); + + return domParser.body.parentElement?.outerHTML || htmlString; +}; export const Reader = () => { const shadowDomRef = useShadowDom(); + const state = useFetch( + 'https://techdocs-mock-sites.storage.googleapis.com/mkdocs/index.html', + ); React.useEffect(() => { const divElement = shadowDomRef.current; - if (!divElement?.shadowRoot) { - return; + if (divElement?.shadowRoot && state.value) { + divElement.shadowRoot.innerHTML = addBaseUrl( + state.value, + 'https://techdocs-mock-sites.storage.googleapis.com/mkdocs/', + ); } - divElement.shadowRoot.innerHTML = mockHtml; - }, [shadowDomRef]); + }, [shadowDomRef, state]); return ( <>