From ec0230a6c896662e4e2580840eb95336da659831 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Mon, 29 Jun 2020 11:03:57 +0200 Subject: [PATCH 1/5] feat(techdocs): techdocs landing page --- packages/app/src/components/Root/Root.tsx | 2 + packages/core/src/layout/index.ts | 1 + plugins/techdocs/src/plugin.ts | 6 +++ .../techdocs/src/reader/components/Reader.tsx | 41 ++++++++++++++++--- 4 files changed, 44 insertions(+), 6 deletions(-) diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx index 4b92f8281e..a86b92ab43 100644 --- a/packages/app/src/components/Root/Root.tsx +++ b/packages/app/src/components/Root/Root.tsx @@ -22,6 +22,7 @@ import ExploreIcon from '@material-ui/icons/Explore'; import BuildIcon from '@material-ui/icons/BuildRounded'; import RuleIcon from '@material-ui/icons/AssignmentTurnedIn'; import MapIcon from '@material-ui/icons/MyLocation'; +import LibraryBooks from '@material-ui/icons/LibraryBooks'; import CreateComponentIcon from '@material-ui/icons/AddCircleOutline'; import LogoFull from './LogoFull'; import LogoIcon from './LogoIcon'; @@ -89,6 +90,7 @@ const Root: FC<{}> = ({ children }) => ( {/* Global nav, not org-specific */} + {/* End global nav */} diff --git a/packages/core/src/layout/index.ts b/packages/core/src/layout/index.ts index e2de159ec6..e8245119f3 100644 --- a/packages/core/src/layout/index.ts +++ b/packages/core/src/layout/index.ts @@ -26,3 +26,4 @@ export * from './Sidebar'; export * from './SignInPage'; export * from './TabbedCard'; export * from './HeaderTabs'; +export * from './ItemCard'; diff --git a/plugins/techdocs/src/plugin.ts b/plugins/techdocs/src/plugin.ts index fec2b1cf74..89a5ddeb73 100644 --- a/plugins/techdocs/src/plugin.ts +++ b/plugins/techdocs/src/plugin.ts @@ -33,6 +33,11 @@ import { createPlugin, createRouteRef } from '@backstage/core'; import { Reader } from './reader/components/Reader'; export const rootRouteRef = createRouteRef({ + path: '/docs', + title: 'TechDocs Landing Page', +}); + +export const rootDocsRouteRef = createRouteRef({ path: '/docs/:componentId/*', title: 'Docs', }); @@ -41,5 +46,6 @@ export const plugin = createPlugin({ id: 'techdocs', register({ router }) { router.addRoute(rootRouteRef, Reader); + router.addRoute(rootDocsRouteRef, Reader); }, }); diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 0175462cc3..821d3f650a 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -23,7 +23,8 @@ import transformer, { addEventListener, } from '../transformers'; import { docStorageURL } from '../../config'; -import { Link } from '@backstage/core'; +import { Grid } from '@material-ui/core'; +import { Link, InfoCard, Header, Content, ItemCard } from '@backstage/core'; import { useLocation, useParams, useNavigate } from 'react-router-dom'; import URLParser from '../urlParser'; @@ -89,11 +90,39 @@ 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. " + /> + + + + + )} ); }; From 5066a79143e5a354ae08fabdba7024473bb304c6 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Mon, 29 Jun 2020 11:04:27 +0200 Subject: [PATCH 2/5] fix(docs): update readmeg --- plugins/techdocs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/techdocs/README.md b/plugins/techdocs/README.md index 10ddcf9411..36d00fc970 100644 --- a/plugins/techdocs/README.md +++ b/plugins/techdocs/README.md @@ -10,7 +10,7 @@ Welcome to the TechDocs plugin - Spotify's docs-like-code approach built directl ## Getting started -Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/techdocs](http://localhost:3000/techdocs). +Your plugin has been added to the example app in this repository, meaning you'll be able to access it by running `yarn start` in the root directory, and then navigating to [/docs](http://localhost:3000/docs). You can also serve the plugin in isolation by running `yarn start` in the plugin directory. This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads. From 2454dcbd79de7f04caee6624043ab6ae573c83d8 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Mon, 29 Jun 2020 11:05:04 +0200 Subject: [PATCH 3/5] feat(ItemCard): reusable card component --- .../src/layout/ItemCard/InfoCard.stories.tsx | 35 ++++++++ .../core/src/layout/ItemCard/ItemCard.tsx | 79 +++++++++++++++++++ packages/core/src/layout/ItemCard/index.ts | 17 ++++ 3 files changed, 131 insertions(+) create mode 100644 packages/core/src/layout/ItemCard/InfoCard.stories.tsx create mode 100644 packages/core/src/layout/ItemCard/ItemCard.tsx create mode 100644 packages/core/src/layout/ItemCard/index.ts diff --git a/packages/core/src/layout/ItemCard/InfoCard.stories.tsx b/packages/core/src/layout/ItemCard/InfoCard.stories.tsx new file mode 100644 index 0000000000..87c5b0684e --- /dev/null +++ b/packages/core/src/layout/ItemCard/InfoCard.stories.tsx @@ -0,0 +1,35 @@ +/* + * 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, { FC } from 'react'; +import { ItemCard } from '.'; +import { Grid } from '@material-ui/core'; + +export default { + title: 'Item Card', + component: ItemCard, +}; + +const Wrapper: FC<{}> = ({ children }) => ( + + {children} + +); + +export const Default = () => ( + + + +); diff --git a/packages/core/src/layout/ItemCard/ItemCard.tsx b/packages/core/src/layout/ItemCard/ItemCard.tsx new file mode 100644 index 0000000000..86ad53e8dd --- /dev/null +++ b/packages/core/src/layout/ItemCard/ItemCard.tsx @@ -0,0 +1,79 @@ +/* + * 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, { FC } from 'react'; +import { Button, Card, Chip, Typography, makeStyles } from '@material-ui/core'; + +const useStyles = makeStyles(theme => ({ + header: { + color: theme.palette.common.white, + padding: theme.spacing(2, 2, 6), + backgroundImage: + 'linear-gradient(-137deg, rgb(25, 230, 140) 0%, rgb(29, 127, 110) 100%)', + }, + content: { + padding: theme.spacing(2), + }, + description: { + height: 175, + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + footer: { + display: 'flex', + flexDirection: 'row-reverse', + }, +})); + +type ItemCardProps = { + description: string; + tags?: string[]; + title: string; + type?: string; + label: string; + onClick?: () => void; +}; +export const ItemCard: FC = ({ + description, + tags, + title, + type, + label, + onClick, +}) => { + const classes = useStyles(); + + return ( + +
+ {type ?? {type}} + {title} +
+
+ {tags?.map(tag => ( + + ))} + + {description} + +
+ +
+
+ + ); +}; diff --git a/packages/core/src/layout/ItemCard/index.ts b/packages/core/src/layout/ItemCard/index.ts new file mode 100644 index 0000000000..b38dd2acc2 --- /dev/null +++ b/packages/core/src/layout/ItemCard/index.ts @@ -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'; From 695b1971ad8109802407bd976d040e0be363854f Mon Sep 17 00:00:00 2001 From: Sebastian Qvarfordt Date: Mon, 29 Jun 2020 12:17:07 +0200 Subject: [PATCH 4/5] Fixed lint issue --- plugins/techdocs/src/reader/components/Reader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 821d3f650a..474457ac5c 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -24,7 +24,7 @@ import transformer, { } from '../transformers'; import { docStorageURL } from '../../config'; import { Grid } from '@material-ui/core'; -import { Link, InfoCard, Header, Content, ItemCard } from '@backstage/core'; +import { Header, Content, ItemCard } from '@backstage/core'; import { useLocation, useParams, useNavigate } from 'react-router-dom'; import URLParser from '../urlParser'; From fc7b0a0aa55d7a2acadbceeadf4d1243a13e6087 Mon Sep 17 00:00:00 2001 From: Emma Indal Date: Mon, 29 Jun 2020 15:23:09 +0200 Subject: [PATCH 5/5] fix(techdocs): move card component into techdocs plugin from backstage core --- .../src/layout/ItemCard/InfoCard.stories.tsx | 35 ------------------- packages/core/src/layout/ItemCard/index.ts | 17 --------- packages/core/src/layout/index.ts | 1 - .../src/reader/components/DocsCard.tsx | 4 +-- .../techdocs/src/reader/components/Reader.tsx | 13 ++++--- 5 files changed, 10 insertions(+), 60 deletions(-) delete mode 100644 packages/core/src/layout/ItemCard/InfoCard.stories.tsx delete mode 100644 packages/core/src/layout/ItemCard/index.ts rename packages/core/src/layout/ItemCard/ItemCard.tsx => plugins/techdocs/src/reader/components/DocsCard.tsx (96%) diff --git a/packages/core/src/layout/ItemCard/InfoCard.stories.tsx b/packages/core/src/layout/ItemCard/InfoCard.stories.tsx deleted file mode 100644 index 87c5b0684e..0000000000 --- a/packages/core/src/layout/ItemCard/InfoCard.stories.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * 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, { FC } from 'react'; -import { ItemCard } from '.'; -import { Grid } from '@material-ui/core'; - -export default { - title: 'Item Card', - component: ItemCard, -}; - -const Wrapper: FC<{}> = ({ children }) => ( - - {children} - -); - -export const Default = () => ( - - - -); diff --git a/packages/core/src/layout/ItemCard/index.ts b/packages/core/src/layout/ItemCard/index.ts deleted file mode 100644 index b38dd2acc2..0000000000 --- a/packages/core/src/layout/ItemCard/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* - * 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'; diff --git a/packages/core/src/layout/index.ts b/packages/core/src/layout/index.ts index e8245119f3..e2de159ec6 100644 --- a/packages/core/src/layout/index.ts +++ b/packages/core/src/layout/index.ts @@ -26,4 +26,3 @@ export * from './Sidebar'; export * from './SignInPage'; export * from './TabbedCard'; export * from './HeaderTabs'; -export * from './ItemCard'; diff --git a/packages/core/src/layout/ItemCard/ItemCard.tsx b/plugins/techdocs/src/reader/components/DocsCard.tsx similarity index 96% rename from packages/core/src/layout/ItemCard/ItemCard.tsx rename to plugins/techdocs/src/reader/components/DocsCard.tsx index 86ad53e8dd..68f42bf84a 100644 --- a/packages/core/src/layout/ItemCard/ItemCard.tsx +++ b/plugins/techdocs/src/reader/components/DocsCard.tsx @@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({ }, })); -type ItemCardProps = { +type DocsCardProps = { description: string; tags?: string[]; title: string; @@ -45,7 +45,7 @@ type ItemCardProps = { label: string; onClick?: () => void; }; -export const ItemCard: FC = ({ +export const DocsCard: FC = ({ description, tags, title, diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index 474457ac5c..a4ff03af47 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -17,16 +17,19 @@ import React from 'react'; import { useShadowDom } from '..'; 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 transformer, { addBaseUrl, rewriteDocLinks, addEventListener, } from '../transformers'; import { docStorageURL } from '../../config'; -import { Grid } from '@material-ui/core'; -import { Header, Content, ItemCard } from '@backstage/core'; -import { useLocation, useParams, useNavigate } from 'react-router-dom'; import URLParser from '../urlParser'; +import { DocsCard } from './DocsCard'; const useFetch = (url: string) => { const state = useAsync(async () => { @@ -102,7 +105,7 @@ export const Reader = () => { - navigate('/docs/mkdocs')} tags={['Developer Tool']} title="MkDocs" @@ -111,7 +114,7 @@ export const Reader = () => { /> - navigate('/docs/backstage-microsite')} tags={['Service']} title="Backstage"