From 74d949be98dfbad4bb4aadd353b6a77ffae39d81 Mon Sep 17 00:00:00 2001 From: Sebastian Qvarfordt Date: Mon, 29 Jun 2020 16:34:06 +0200 Subject: [PATCH 1/4] Changes to material theme css --- .../techdocs/src/reader/components/Reader.tsx | 72 +++++++++++-------- .../techdocs/src/reader/transformers/index.ts | 2 + .../transformers/modifyCssTransformer.ts | 45 ++++++++++++ .../reader/transformers/removeMkdocsHeader.ts | 28 ++++++++ 4 files changed, 116 insertions(+), 31 deletions(-) create mode 100644 plugins/techdocs/src/reader/transformers/modifyCssTransformer.ts create mode 100644 plugins/techdocs/src/reader/transformers/removeMkdocsHeader.ts 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; + }; +}; From faa95b88258c76d93c83742e6d2fa824d978f34d Mon Sep 17 00:00:00 2001 From: Sebastian Qvarfordt Date: Tue, 30 Jun 2020 10:02:18 +0200 Subject: [PATCH 2/4] Updated stories for ItemCard --- .../src/layout/ItemCard/ItemCard.stories.tsx | 58 ++++++++++++------- 1 file changed, 36 insertions(+), 22 deletions(-) diff --git a/packages/core/src/layout/ItemCard/ItemCard.stories.tsx b/packages/core/src/layout/ItemCard/ItemCard.stories.tsx index c7ac2d3200..46b93da370 100644 --- a/packages/core/src/layout/ItemCard/ItemCard.stories.tsx +++ b/packages/core/src/layout/ItemCard/ItemCard.stories.tsx @@ -13,7 +13,7 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import React, { FC } from 'react'; +import React from 'react'; import { ItemCard } from '.'; import { Grid } from '@material-ui/core'; @@ -22,32 +22,46 @@ export default { component: ItemCard, }; -const Wrapper: FC<{}> = ({ children }) => ( +export const Default = () => ( - {children} + {}} + /> + + + {}} + /> ); -export const Default = () => ( - - - -); - export const Tags = () => ( - - - + + + + + + + + ); From 92f85997dcf6ac54b9a8badc302987875adcec7f Mon Sep 17 00:00:00 2001 From: Sebastian Qvarfordt Date: Tue, 30 Jun 2020 10:20:21 +0200 Subject: [PATCH 3/4] Rename modifyCssTransformer to modifyCss --- plugins/techdocs/src/reader/components/Reader.tsx | 4 ++-- plugins/techdocs/src/reader/transformers/index.ts | 2 +- .../transformers/{modifyCssTransformer.ts => modifyCss.ts} | 6 ++---- 3 files changed, 5 insertions(+), 7 deletions(-) rename plugins/techdocs/src/reader/transformers/{modifyCssTransformer.ts => modifyCss.ts} (90%) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 22662a787c..dbe6487782 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -27,7 +27,7 @@ import transformer, { rewriteDocLinks, addEventListener, removeMkdocsHeader, - modifyCssTransformer, + modifyCss, } from '../transformers'; import { docStorageURL } from '../../config'; import URLParser from '../urlParser'; @@ -78,7 +78,7 @@ export const Reader = () => { rewriteDocLinks({ componentId, }), - modifyCssTransformer({ + modifyCss({ cssTransforms: { '.md-main__inner': [{ 'margin-top': '0' }], '.md-sidebar': [{ top: '0' }, { width: '20rem' }], diff --git a/plugins/techdocs/src/reader/transformers/index.ts b/plugins/techdocs/src/reader/transformers/index.ts index e6d178b6bd..f49f496277 100644 --- a/plugins/techdocs/src/reader/transformers/index.ts +++ b/plugins/techdocs/src/reader/transformers/index.ts @@ -18,7 +18,7 @@ export * from './addBaseUrl'; export * from './rewriteDocLinks'; export * from './addEventListener'; export * from './removeMkdocsHeader'; -export * from './modifyCssTransformer'; +export * from './modifyCss'; export type Transformer = (dom: Element) => Element; diff --git a/plugins/techdocs/src/reader/transformers/modifyCssTransformer.ts b/plugins/techdocs/src/reader/transformers/modifyCss.ts similarity index 90% rename from plugins/techdocs/src/reader/transformers/modifyCssTransformer.ts rename to plugins/techdocs/src/reader/transformers/modifyCss.ts index 2ee06c54da..5116baac45 100644 --- a/plugins/techdocs/src/reader/transformers/modifyCssTransformer.ts +++ b/plugins/techdocs/src/reader/transformers/modifyCss.ts @@ -16,14 +16,12 @@ import type { Transformer } from './index'; -type ModifyCssTransformerOptions = { +type ModifyCssOptions = { // Example: { '.md-container': { 'marginTop': '10px' }} cssTransforms: { [key: string]: { [key: string]: string }[] }; }; -export const modifyCssTransformer = ({ - cssTransforms, -}: ModifyCssTransformerOptions): Transformer => { +export const modifyCss = ({ cssTransforms }: ModifyCssOptions): Transformer => { return dom => { Object.entries(cssTransforms).forEach(([cssSelector, cssChanges]) => { const elementsToChange = Array.from( From 7dced3ace183d3023650baac4d8f0fe9a0854fd2 Mon Sep 17 00:00:00 2001 From: Sebastian Qvarfordt Date: Tue, 30 Jun 2020 10:23:04 +0200 Subject: [PATCH 4/4] Remove unused argument to removeMkdocsHeader --- plugins/techdocs/src/reader/components/Reader.tsx | 2 +- .../techdocs/src/reader/transformers/removeMkdocsHeader.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index dbe6487782..1d7a85a6ba 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -87,7 +87,7 @@ export const Reader = () => { '.md-grid': [{ 'max-width': '80vw' }], }, }), - removeMkdocsHeader({}), + removeMkdocsHeader(), ]); divElement.shadowRoot.innerHTML = ''; diff --git a/plugins/techdocs/src/reader/transformers/removeMkdocsHeader.ts b/plugins/techdocs/src/reader/transformers/removeMkdocsHeader.ts index f26947f8dc..087574b2de 100644 --- a/plugins/techdocs/src/reader/transformers/removeMkdocsHeader.ts +++ b/plugins/techdocs/src/reader/transformers/removeMkdocsHeader.ts @@ -16,9 +16,7 @@ import type { Transformer } from './index'; -type AddBaseUrlOptions = {}; - -export const removeMkdocsHeader = ({}: AddBaseUrlOptions): Transformer => { +export const removeMkdocsHeader = (): Transformer => { return dom => { // Remove the header dom.querySelector('.md-header')?.remove();