diff --git a/plugins/techdocs/src/config.js b/plugins/techdocs/src/config.js index 2baf8b725c..296b9fc14c 100644 --- a/plugins/techdocs/src/config.js +++ b/plugins/techdocs/src/config.js @@ -13,4 +13,5 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -export const baseUrl = 'https://techdocs-mock-sites.storage.googleapis.com'; +export const docStorageURL = + 'https://techdocs-mock-sites.storage.googleapis.com'; diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 36816fcc9a..0a0bb88421 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -17,8 +17,8 @@ import React from 'react'; import { useShadowDom } from '..'; import { useAsync } from 'react-use'; -import transformer, { addBaseUrl, rewriteDocLinks } from '../../transformers'; -import { baseUrl } from '../../config'; +import transformer, { addBaseUrl, rewriteDocLinks } from '../transformers'; +import { docStorageURL } from '../../config'; import { Link } from '@backstage/core'; import { useLocation, useParams } from 'react-router-dom'; @@ -42,16 +42,16 @@ export const Reader = () => { const shadowDomRef = useShadowDom(); const state = useFetch( normalizeUrl( - `${baseUrl}${location.pathname.replace('/docs', '')}/index.html`, + `${docStorageURL}${location.pathname.replace('/docs', '')}/index.html`, ), ); - // https://techdocs-mock-sites.storage.googleapis.com/mkdocs/user-guide/configuration/custom-themes/index.html + React.useEffect(() => { const divElement = shadowDomRef.current; if (divElement?.shadowRoot && state.value) { - divElement.shadowRoot.innerHTML = transformer(state.value, [ + const transformedElement = transformer(state.value, [ addBaseUrl({ - baseUrl, + docStorageURL, componentId, path, }), @@ -59,14 +59,18 @@ export const Reader = () => { componentId, }), ]); + + divElement.shadowRoot.innerHTML = ''; + if (transformedElement) + divElement.shadowRoot.appendChild(transformedElement); } }, [shadowDomRef, state, componentId, path]); return ( <>
> diff --git a/plugins/techdocs/src/transformers/addBaseUrl.ts b/plugins/techdocs/src/reader/transformers/addBaseUrl.ts similarity index 87% rename from plugins/techdocs/src/transformers/addBaseUrl.ts rename to plugins/techdocs/src/reader/transformers/addBaseUrl.ts index 674e3ab33b..e07a41fc03 100644 --- a/plugins/techdocs/src/transformers/addBaseUrl.ts +++ b/plugins/techdocs/src/reader/transformers/addBaseUrl.ts @@ -13,14 +13,17 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +import URLParser from '../urlParser'; + type AddBaseUrlOptions = { - baseUrl: string; + docStorageURL: string; componentId: string; path: string; }; export const addBaseUrl = ({ - baseUrl, + docStorageURL, componentId, path, }: AddBaseUrlOptions) => { @@ -32,10 +35,10 @@ export const addBaseUrl = ({ Array.from(list) .filter(elem => !!elem.getAttribute(attributeName)) .forEach((elem: T) => { - const newUrl = new URL( + const newUrl = new URLParser( + `${docStorageURL}/${componentId}/${path}`, elem.getAttribute(attributeName)!, - `${baseUrl}/${componentId}/${path}`, - ).toString(); + ).parse(); elem.setAttribute(attributeName, newUrl); }); }; diff --git a/plugins/techdocs/src/transformers/index.ts b/plugins/techdocs/src/reader/transformers/index.ts similarity index 85% rename from plugins/techdocs/src/transformers/index.ts rename to plugins/techdocs/src/reader/transformers/index.ts index b530840d08..008c86e261 100644 --- a/plugins/techdocs/src/transformers/index.ts +++ b/plugins/techdocs/src/reader/transformers/index.ts @@ -19,10 +19,13 @@ export * from './rewriteDocLinks'; type Transformer = (dom: Document) => Document; -export default (html: string, transformers: Transformer[]): string => { +export default ( + html: string, + transformers: Transformer[], +): HTMLElement | undefined => { const dom = new DOMParser().parseFromString(html, 'text/html'); transformers.forEach(transformer => transformer(dom)); - return dom.body.parentElement?.outerHTML ?? ''; + return dom.body.parentElement ?? undefined; }; diff --git a/plugins/techdocs/src/transformers/rewriteDocLinks.ts b/plugins/techdocs/src/reader/transformers/rewriteDocLinks.ts similarity index 69% rename from plugins/techdocs/src/transformers/rewriteDocLinks.ts rename to plugins/techdocs/src/reader/transformers/rewriteDocLinks.ts index 459b7eda3c..373db51abd 100644 --- a/plugins/techdocs/src/transformers/rewriteDocLinks.ts +++ b/plugins/techdocs/src/reader/transformers/rewriteDocLinks.ts @@ -13,21 +13,27 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -type AddBaseUrlOptions = { - componentId: string; -}; -export const rewriteDocLinks = ({ componentId }: AddBaseUrlOptions) => { +import URLParser from '../urlParser'; + +type AddBaseUrlOptions = {}; + +export const rewriteDocLinks = ({}: AddBaseUrlOptions) => { return (dom: Document): Document => { const updateDom =