Include content taxonomy on content pages

app/scripts/components/common/content-taxonomy.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from 'styled-components';
+import { TaxonomyItem } from 'veda';
+import { Link } from 'react-router-dom';
+import { glsp, themeVal } from '@devseed-ui/theme-provider';
+import { Heading, Overline } from '@devseed-ui/typography';
+
+import { Actions } from './browse-controls/use-browse-controls';
+
+import { variableGlsp } from '$styles/variable-utils';
+import Constrainer from '$styles/constrainer';
+import { Pill } from '$styles/pill';
+import { DATASETS_PATH } from '$utils/routes';
+
+const TaxonomySection = styled.section`
+  background-color: ${themeVal('color.base-100')};
+  padding: ${variableGlsp()};
+`;
+
+const TaxonomySectionInner = styled(Constrainer)`
+  ${Heading} {
+    grid-column: 1 / -1;
+  }
+`;
+
+const TaxonomyList = styled.dl`
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: ${glsp(1.5, 1)};
+  align-items: center;
+
+  > dt {
+    grid-column: 1;
+  }
+
+  > dd {
+    grid-column: 2;
+    display: flex;
+    flex-flow: row wrap;
+    gap: ${glsp(0.5)};
+  }
+`;
+
+interface ContentTaxonomyProps {
+  taxonomy: Record<string, TaxonomyItem[] | undefined>;
+}
+
+export function ContentTaxonomy(props: ContentTaxonomyProps) {
+  const { taxonomy } = props;
+
+  const taxonomies = Object.entries(taxonomy) as [string, TaxonomyItem[]][];
+
+  if (!taxonomies.length) return null;
+
+  return (
+    <TaxonomySection>
+      <TaxonomySectionInner>
+        <Heading as='h2' hidden>
+          Taxonomy
+        </Heading>
+        <TaxonomyList>
+          {taxonomies.map(([key, values]) => (
+            <React.Fragment key={key}>
+              <dt>
+                <Overline>{key}</Overline>
+              </dt>
+              <dd>
+                {values.map((t) => (
+                  <Pill
+                    key={t.id}
+                    as={Link}
+                    to={`${DATASETS_PATH}?${
+                      Actions.TAXONOMY
+                    }=${encodeURIComponent(JSON.stringify({ [key]: t.id }))}`}
+                  >
+                    {t.name}
+                  </Pill>
+                ))}
+              </dd>
+            </React.Fragment>
+          ))}
+        </TaxonomyList>
+      </TaxonomySectionInner>
+    </TaxonomySection>
+  );
+}

app/scripts/components/datasets/s-overview/index.tsx

@@ -13,6 +13,7 @@ import { NotebookConnectButton } from '$components/common/notebook-connect';
 
 import { allDatasetsProps, useDataset } from '$utils/veda-data';
 import { DATASETS_PATH, getDatasetExplorePath } from '$utils/routes';
+import { ContentTaxonomy } from '$components/common/content-taxonomy';
 
 const MdxContent = lazy(() => import('$components/common/mdx-content'));
 
@@ -67,7 +68,11 @@ function DatasetsOverview() {
           attributionAuthor={dataset.data.media?.author?.name}
           attributionUrl={dataset.data.media?.author?.url}
         />
-        <MdxContent loader={dataset?.content} />
+
+        <ContentTaxonomy taxonomy={dataset.data.taxonomy} />
+
+        <MdxContent loader={dataset.content} />
+
         {!!dataset.data.related?.length && (
           <RelatedContent related={dataset.data.related} />
         )}

app/scripts/components/discoveries/single/index.tsx

@@ -7,6 +7,7 @@ import { PageMainContent } from '$styles/page';
 import RelatedContent from '$components/common/related-content';
 import { DISCOVERIES_PATH } from '$utils/routes';
 import { useDiscovery, allDiscoveriesProps } from '$utils/veda-data';
+import { ContentTaxonomy } from '$components/common/content-taxonomy';
 
 const MdxContent = lazy(() => import('$components/common/mdx-content'));
 
@@ -43,7 +44,11 @@ function DiscoveriesSingle() {
             attributionAuthor={media?.author?.name}
             attributionUrl={media?.author?.url}
           />
+
+          <ContentTaxonomy taxonomy={discovery.data.taxonomy} />
+
           <MdxContent loader={discovery.content} />
+
           {!!related?.length && <RelatedContent related={related} />}
         </article>
       </PageMainContent>