From 674d14241870318b8178602b09f01c8f98d64ec5 Mon Sep 17 00:00:00 2001 From: Sebastian Qvarfordt Date: Fri, 26 Jun 2020 14:53:19 +0200 Subject: [PATCH] Update URLS better --- plugins/techdocs/src/config.js | 3 +- .../techdocs/src/reader/components/Reader.tsx | 20 +++++++----- .../{ => reader}/transformers/addBaseUrl.ts | 13 +++++--- .../src/{ => reader}/transformers/index.ts | 7 +++-- .../transformers/rewriteDocLinks.ts | 20 +++++++----- plugins/techdocs/src/reader/urlParser.ts | 31 +++++++++++++++++++ 6 files changed, 71 insertions(+), 23 deletions(-) rename plugins/techdocs/src/{ => reader}/transformers/addBaseUrl.ts (87%) rename plugins/techdocs/src/{ => reader}/transformers/index.ts (85%) rename plugins/techdocs/src/{ => reader}/transformers/rewriteDocLinks.ts (69%) create mode 100644 plugins/techdocs/src/reader/urlParser.ts 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 = ( list: Array, attributeName: string, ): void => { Array.from(list) - .filter(elem => !!elem.getAttribute(attributeName)) + .filter(elem => elem.hasAttribute(attributeName)) .forEach((elem: T) => { - const newUrl = `${componentId}/${elem.getAttribute(attributeName)}`; - elem.setAttribute(attributeName, newUrl); + elem.setAttribute( + attributeName, + new URLParser( + window.location.href, + elem.getAttribute(attributeName)!, + ).parse(), + ); }); }; diff --git a/plugins/techdocs/src/reader/urlParser.ts b/plugins/techdocs/src/reader/urlParser.ts new file mode 100644 index 0000000000..b1429b7635 --- /dev/null +++ b/plugins/techdocs/src/reader/urlParser.ts @@ -0,0 +1,31 @@ +/* + * Copyright 2020 Spotify AB + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +const normalizeBaseURL = (baseURL: string): string => { + const url = new URL(baseURL); + url.pathname = url.pathname.replace(/([^/])$/, '$1/'); + return url.toString(); +}; + +export default class URLParser { + constructor(public baseURL: string, public pathname: string) { + this.baseURL = normalizeBaseURL(baseURL); + } + + parse(): string { + return new URL(this.pathname, this.baseURL).toString(); + } +}