Changes to material theme css

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

@@ -21,6 +21,8 @@ import transformer, {
   addBaseUrl,
   rewriteDocLinks,
   addEventListener,
+  removeMkdocsHeader,
+  modifyCssTransformer,
 } from '../transformers';
 import { docStorageURL } from '../../config';
 import { Grid } from '@material-ui/core';
@@ -74,6 +76,16 @@ export const Reader = () => {
         rewriteDocLinks({
           componentId,
         }),
+        modifyCssTransformer({
+          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({}),
       ]);
 
       divElement.shadowRoot.innerHTML = '';
@@ -90,39 +102,37 @@ export const Reader = () => {
 
   return (
     <>
-      {componentId ? (
-        <div ref={shadowDomRef} />
-      ) : (
-        <>
-          <Header
-            title="Documentation"
-            subtitle="Documentation available in Backstage"
-          />
+      <Header
+        title={componentId ?? 'Documentation'}
+        subtitle={componentId ?? 'Documentation available in Backstage'}
+      />
 
-          <Content>
-            <Grid container>
-              <Grid item xs={12} sm={6} md={3}>
-                <ItemCard
-                  onClick={() => navigate('/docs/mkdocs')}
-                  tags={['Developer Tool']}
-                  title="MkDocs"
-                  label="Read Docs"
-                  description="MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. "
-                />
-              </Grid>
-              <Grid item xs={12} sm={6} md={3}>
-                <ItemCard
-                  onClick={() => navigate('/docs/backstage-microsite')}
-                  tags={['Service']}
-                  title="Backstage"
-                  label="Read Docs"
-                  description="Getting started guides, API Overview, documentation around how to Create a Plugin and more. "
-                />
-              </Grid>
+      <Content>
+        {componentId ? (
+          <div ref={shadowDomRef} />
+        ) : (
+          <Grid container>
+            <Grid item xs={12} sm={6} md={3}>
+              <ItemCard
+                onClick={() => navigate('/docs/mkdocs')}
+                tags={['Developer Tool']}
+                title="MkDocs"
+                label="Read Docs"
+                description="MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. "
+              />
             </Grid>
-          </Content>
-        </>
-      )}
+            <Grid item xs={12} sm={6} md={3}>
+              <ItemCard
+                onClick={() => navigate('/docs/backstage-microsite')}
+                tags={['Service']}
+                title="Backstage"
+                label="Read Docs"
+                description="Getting started guides, API Overview, documentation around how to Create a Plugin and more. "
+              />
+            </Grid>
+          </Grid>
+        )}
+      </Content>
     </>
   );
 };

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

@@ -17,6 +17,8 @@
 export * from './addBaseUrl';
 export * from './rewriteDocLinks';
 export * from './addEventListener';
+export * from './removeMkdocsHeader';
+export * from './modifyCssTransformer';
 
 export type Transformer = (dom: Element) => Element;
 

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

@@ -0,0 +1,45 @@
+/*
+ * 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 ModifyCssTransformerOptions = {
+  // Example: { '.md-container': { 'marginTop': '10px' }}
+  cssTransforms: { [key: string]: { [key: string]: string }[] };
+};
+
+export const modifyCssTransformer = ({
+  cssTransforms,
+}: ModifyCssTransformerOptions): 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;
+  };
+};

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

@@ -0,0 +1,28 @@
+/*
+ * 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 AddBaseUrlOptions = {};
+
+export const removeMkdocsHeader = ({}: AddBaseUrlOptions): Transformer => {
+  return dom => {
+    // Remove the header
+    dom.querySelector('.md-header')?.remove();
+
+    return dom;
+  };
+};