Merge pull request #1507 from oasisprotocol/lw/doccard-tags

Print document tags in DocCard

Author: lukaw3d

docusaurus.config.ts

@@ -63,6 +63,14 @@ const config: Config = {
     ],
   ],
   markdown: {
+    // Copy tags into sidebar props so we can print tags in DocCard
+    parseFrontMatter: async (params) => {
+      const frontmatter = await params.defaultParseFrontMatter(params);
+      frontmatter.frontMatter.sidebar_custom_props ??= {}
+      // @ts-expect-error Wrong type
+      frontmatter.frontMatter.sidebar_custom_props.tags = frontmatter.frontMatter.tags
+      return frontmatter
+    },
     hooks: {
       onBrokenMarkdownLinks: process.env.NETLIFY ? 'warn' : 'throw',
       onBrokenMarkdownImages: process.env.NETLIFY ? 'warn' : 'throw',

src/css/custom.css

@@ -229,6 +229,21 @@ table .card{
   max-width: 400px;
 }
 
+.tag,
+a[rel="tag"] {
+  border: 0.0625rem solid var(--ifm-color-primary);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  display: inline-block;
+  background-color: transparent;
+  font-weight: 400;
+  font-size: 0.875rem;
+}
+
+.tag {
+  margin-right: 0.375rem;
+}
+
 @media (max-width: 768px) {
   table .card{
     min-width: 182px;

src/theme/DocCard/index.tsx

@@ -56,11 +56,13 @@ function CardLayout({
   icon,
   title,
   description,
+  customProps,
 }: {
   href: string;
   icon: ReactNode;
   title: string;
   description?: string;
+  customProps: {[key: string]: unknown} | undefined;
 }): ReactNode {
   return (
     <CardContainer href={href}>
@@ -77,6 +79,15 @@ function CardLayout({
           {description}
         </p>
       )}
+      {customProps?.tags && Array.isArray(customProps.tags) ? (
+        <div className="pill">
+          {customProps.tags.map((tag) => (
+            <div className="pills__item pills__item--active tag " key={tag}>
+              {tag}
+            </div>
+          ))}
+        </div>
+      ) : null}
     </CardContainer>
   );
 }
@@ -97,6 +108,7 @@ function CardCategory({item}: {item: PropSidebarItemCategory}): ReactNode {
       title={item.label}
       // description={item.description ?? categoryItemsPlural(item.items.length)}
       description={item.description}
+      customProps={item.customProps}
     />
   );
 }
@@ -110,6 +122,7 @@ function CardLink({item}: {item: PropSidebarItemLink}): ReactNode {
       icon={icon}
       title={item.label}
       description={item.description ?? doc?.description}
+      customProps={item.customProps}
     />
   );
 }