Update URLS better

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';

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 (
     <>
       <nav>
-        <Link to="/docs/mkdocs">mkdocs</Link>
-        <Link to="/docs/backstage-microsite">Backstage docs</Link>
+        <Link to="/docs/mkdocs/">mkdocs</Link>
+        <Link to="/docs/backstage-microsite/">Backstage docs</Link>
       </nav>
       <div ref={shadowDomRef} />
     </>

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);
         });
     };

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;
 };

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 = <T extends Element>(
       list: Array<T>,
       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(),
+          );
         });
     };
 

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();
+  }
+}