diff --git a/.changeset/many-nails-joke.md b/.changeset/many-nails-joke.md new file mode 100644 index 0000000000..8cfa79a446 --- /dev/null +++ b/.changeset/many-nails-joke.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-catalog': patch +--- + +Added Markdown support in the About card description section diff --git a/packages/catalog-model/examples/components/petstore-component.yaml b/packages/catalog-model/examples/components/petstore-component.yaml index 878fabd551..cdac4ce1ae 100644 --- a/packages/catalog-model/examples/components/petstore-component.yaml +++ b/packages/catalog-model/examples/components/petstore-component.yaml @@ -2,8 +2,11 @@ apiVersion: backstage.io/v1alpha1 kind: Component metadata: name: petstore - # This is an extra long description - description: The Petstore is an example API used to show features of the OpenAPI spec. + # This is an extra long description with Markdown + description: | + [The Petstore](http://petstore.example.com) is an example API used to show features of the OpenAPI spec. + - First item + - Second item links: - url: https://github.com/swagger-api/swagger-petstore title: GitHub Repo diff --git a/plugins/catalog/src/components/AboutCard/AboutContent.tsx b/plugins/catalog/src/components/AboutCard/AboutContent.tsx index 260a0eccbf..245308cee2 100644 --- a/plugins/catalog/src/components/AboutCard/AboutContent.tsx +++ b/plugins/catalog/src/components/AboutCard/AboutContent.tsx @@ -25,7 +25,8 @@ import { getEntityRelations, } from '@backstage/plugin-catalog-react'; import { JsonArray } from '@backstage/types'; -import { Chip, Grid, makeStyles, Typography } from '@material-ui/core'; +import { Chip, Grid, makeStyles } from '@material-ui/core'; +import { MarkdownContent } from '@backstage/core-components'; import React from 'react'; import { AboutField } from './AboutField'; import { LinksGridList } from '../EntityLinksCard/LinksGridList'; @@ -111,9 +112,10 @@ export function AboutContent(props: AboutContentProps) { return ( - - {entity?.metadata?.description || 'No description'} - +