diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx
index 474457ac5c..e9092f1394 100644
--- a/plugins/techdocs/src/reader/components/Reader.tsx
+++ b/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 ? (
-
- ) : (
- <>
-
+
-
-
-
- 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. "
- />
-
-
- 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. "
- />
-
+
+ {componentId ? (
+
+ ) : (
+
+
+ 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. "
+ />
-
- >
- )}
+
+ 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. "
+ />
+
+
+ )}
+
>
);
};
diff --git a/plugins/techdocs/src/reader/transformers/index.ts b/plugins/techdocs/src/reader/transformers/index.ts
index 64c5527fe7..e6d178b6bd 100644
--- a/plugins/techdocs/src/reader/transformers/index.ts
+++ b/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;
diff --git a/plugins/techdocs/src/reader/transformers/modifyCssTransformer.ts b/plugins/techdocs/src/reader/transformers/modifyCssTransformer.ts
new file mode 100644
index 0000000000..2ee06c54da
--- /dev/null
+++ b/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(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;
+ };
+};
diff --git a/plugins/techdocs/src/reader/transformers/removeMkdocsHeader.ts b/plugins/techdocs/src/reader/transformers/removeMkdocsHeader.ts
new file mode 100644
index 0000000000..f26947f8dc
--- /dev/null
+++ b/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;
+ };
+};