paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 52 Packages Projects Releases Wiki Activity

Merge pull request #1491 from spotify/mob/techdocs-landing-page

Browse Source 
Mob/techdocs landing page
This commit is contained in:
Emma Indal
2020-06-30 10:33:43 +02:00
committed by GitHub
parent 1b2e60ada4 7dced3ace1
commit 47ababd413
8 changed files with 200 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/layout/ItemCard/ItemCard.stories.tsx
+67
View File
@@ -0,0 +1,67 @@
/*
* 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 React from 'react';
import { ItemCard } from '.';
import { Grid } from '@material-ui/core';
export default {
title: 'Item Card',
component: ItemCard,
};
export const Default = () => (
<Grid container spacing={4}>
<Grid item xs={6} sm={4} md={2}>
<ItemCard
title="Item Card"
description="This is the description of an Item Card"
label="Button"
type="Pretitle"
onClick={() => {}}
/>
</Grid>
<Grid item xs={6} sm={4} md={2}>
<ItemCard
title="Item Card"
description="This is the description of an Item Card"
label="Button"
type="Pretitle"
onClick={() => {}}
/>
</Grid>
</Grid>
);
export const Tags = () => (
<Grid container spacing={4}>
<Grid item xs={6} sm={4} md={2}>
<ItemCard
title="Item Card"
description="This is a Item Card"
tags={['one tag', 'two tag']}
label="Button"
/>
</Grid>
<Grid item xs={6} sm={4} md={2}>
<ItemCard
title="Item Card"
description="This is a Item Card"
tags={['one tag', 'two tag']}
label="Button"
/>
</Grid>
</Grid>
);
plugins/techdocs/src/reader/components/DocsCard.tsx → packages/core/src/layout/ItemCard/ItemCard.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({
},
}));
type DocsCardProps = {
type ItemCardProps = {
description: string;
tags?: string[];
title: string;
@@ -45,7 +45,7 @@ type DocsCardProps = {
label: string;
onClick?: () => void;
};
export const DocsCard: FC<DocsCardProps> = ({
export const ItemCard: FC<ItemCardProps> = ({
description,
tags,
title,
packages/core/src/layout/ItemCard/index.ts
+17
View File
@@ -0,0 +1,17 @@
/*
* 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.
*/
export { ItemCard } from './ItemCard';
packages/core/src/layout/index.ts
+1
View File
@@ -26,3 +26,4 @@ export * from './Sidebar';
export * from './SignInPage';
export * from './TabbedCard';
export * from './HeaderTabs';
export * from './ItemCard';
plugins/techdocs/src/reader/components/Reader.tsx
+42 -33
View File
@@ -20,16 +20,17 @@ import { useAsync } from 'react-use';
import { useLocation, useParams, useNavigate } from 'react-router-dom';
import { Grid } from '@material-ui/core';
import { Header, Content } from '@backstage/core';
import { Header, Content, ItemCard } from '@backstage/core';
import transformer, {
addBaseUrl,
rewriteDocLinks,
addEventListener,
removeMkdocsHeader,
modifyCss,
} from '../transformers';
import { docStorageURL } from '../../config';
import URLParser from '../urlParser';
import { DocsCard } from './DocsCard';
const useFetch = (url: string) => {
const state = useAsync(async () => {
@@ -77,6 +78,16 @@ export const Reader = () => {
rewriteDocLinks({
componentId,
}),
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(),
]);
divElement.shadowRoot.innerHTML = '';
@@ -93,39 +104,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}>
<DocsCard
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}>
<DocsCard
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
+2
View File
@@ -17,6 +17,8 @@
export * from './addBaseUrl';
export * from './rewriteDocLinks';
export * from './addEventListener';
export * from './removeMkdocsHeader';
export * from './modifyCss';
export type Transformer = (dom: Element) => Element;
plugins/techdocs/src/reader/transformers/modifyCss.ts
+43
View File
@@ -0,0 +1,43 @@
/*
* 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;
};
};
plugins/techdocs/src/reader/transformers/removeMkdocsHeader.ts
+26
View File
@@ -0,0 +1,26 @@
/*
* 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';
export const removeMkdocsHeader = (): Transformer => {
return dom => {
// Remove the header
dom.querySelector('.md-header')?.remove();
return dom;
};
};