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