[TechDocs] Bug fixes and cleanups (#3599)

* Fixed issue with some internal doc links reloading the page and removed modifyCss transformer

* Create silly-kiwis-rest.md

* Formatting in changeset

.changeset/silly-kiwis-rest.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-techdocs': minor
+---
+
+Removed modifyCss transformer and moved the css to injectCss transformer
+Fixed issue where some internal doc links would cause a reload of the page

plugins/techdocs/src/reader/components/Reader.tsx

@@ -30,7 +30,6 @@ import transformer, {
   addLinkClickListener,
   removeMkdocsHeader,
   simplifyMkdocsFooter,
-  modifyCss,
   onCssReady,
   sanitizeDOM,
   injectCss,
@@ -71,15 +70,6 @@ export const Reader = ({ entityId, onReady }: Props) => {
         path,
       }),
       rewriteDocLinks(),
-      modifyCss({
-        cssTransforms: {
-          '.md-main__inner': [{ 'margin-top': '0' }],
-          '.md-sidebar': [{ top: '0' }, { width: '20rem' }],
-          '.md-typeset': [{ 'font-size': '1rem' }],
-          '.md-nav': [{ 'font-size': '1rem' }],
-          '.md-grid': [{ 'max-width': '80vw' }],
-        },
-      }),
       removeMkdocsHeader(),
       simplifyMkdocsFooter(),
       injectCss({
@@ -92,6 +82,11 @@ export const Reader = ({ entityId, onReady }: Props) => {
           --md-code-fg-color: ${theme.palette.text.primary};
           --md-code-bg-color: ${theme.palette.background.paper};
         }
+        .md-main__inner { margin-top: 0; }
+        .md-sidebar { top: 0; width: 20rem; }
+        .md-typeset { font-size: 1rem; }
+        .md-nav { font-size: 1rem; }
+        .md-grid { max-width: 80vw; }
         `,
       }),
     ]);

plugins/techdocs/src/reader/transformers/addLinkClickListener.ts

@@ -28,13 +28,13 @@ export const addLinkClickListener = ({
   return dom => {
     Array.from(dom.getElementsByTagName('a')).forEach(elem => {
       elem.addEventListener('click', (e: MouseEvent) => {
-        const target = e.target as HTMLAnchorElement;
-        const href = target?.getAttribute('href');
+        const target = elem as HTMLAnchorElement;
+        const href = target.getAttribute('href');
 
         if (!href) return;
         if (href.startsWith(baseUrl)) {
           e.preventDefault();
-          onClick(e, target.getAttribute('href')!);
+          onClick(e, href);
         }
       });
     });

plugins/techdocs/src/reader/transformers/index.ts

@@ -19,7 +19,6 @@ export * from './rewriteDocLinks';
 export * from './addLinkClickListener';
 export * from './removeMkdocsHeader';
 export * from './simplifyMkdocsFooter';
-export * from './modifyCss';
 export * from './onCssReady';
 export * from './sanitizeDOM';
 export * from './injectCss';

plugins/techdocs/src/reader/transformers/modifyCss.test.tsx

@@ -1,58 +0,0 @@
-/*
- * 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.
- */
-
-import { createTestShadowDom } from '../../test-utils';
-import { modifyCss } from '../transformers';
-
-describe('modifyCss', () => {
-  it('does not modify css', () => {
-    const shadowDom = createTestShadowDom(
-      `<div class="md-typeset" style="font-size: 0.8em"></div>`,
-      {
-        preTransformers: [],
-        postTransformers: [],
-      },
-    );
-
-    const { fontSize } = getComputedStyle(
-      shadowDom.querySelector<HTMLElement>('.md-typeset')!,
-    );
-
-    expect(fontSize).toBe('0.8em');
-  });
-
-  it('does modify css', () => {
-    const shadowDom = createTestShadowDom(
-      `<div class="md-typeset" style="font-size: 1px"></div>`,
-      {
-        preTransformers: [
-          modifyCss({
-            cssTransforms: {
-              '.md-typeset': [{ 'font-size': '1em' }],
-            },
-          }),
-        ],
-        postTransformers: [],
-      },
-    );
-
-    const { fontSize } = getComputedStyle(
-      shadowDom.querySelector<HTMLElement>('.md-typeset')!,
-    );
-
-    expect(fontSize).toBe('1em');
-  });
-});

plugins/techdocs/src/reader/transformers/modifyCss.ts

@@ -1,43 +0,0 @@
-/*
- * 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.
- */
-
-import type { Transformer } from './index';
-
-type ModifyCssOptions = {
-  // Example: { '.md-container': { 'marginTop': '10px' }}
-  cssTransforms: { [key: string]: { [key: string]: string }[] };
-};
-
-export const modifyCss = ({ cssTransforms }: ModifyCssOptions): Transformer => {
-  return dom => {
-    Object.entries(cssTransforms).forEach(([cssSelector, cssChanges]) => {
-      const elementsToChange = Array.from(
-        dom.querySelectorAll<HTMLElement>(cssSelector),
-      );
-      if (elementsToChange.length < 1) return;
-
-      cssChanges.forEach(changes => {
-        elementsToChange.forEach((element: HTMLElement) => {
-          Object.entries(changes).forEach(([cssProperty, cssValue]) => {
-            element.style.setProperty(cssProperty, cssValue);
-          });
-        });
-      });
-    });
-
-    return dom;
-  };
-};