Added DefinitionList and DefinitionItem components

src/components/Article/Content/MarkdocRenderer/index.tsx

@@ -13,6 +13,8 @@ import { Column } from '@/components/Content/Grid/Column';
 import { Row } from '@/components/Content/Grid/Row';
 import Sidenote from '@/components/Content/Sidenote/Item';
 import SidenoteContainer from '@/components/Content/Sidenote/Container';
+import DefinitionList from '@/components/Content/DefinitionList';
+import DefinitionItem from '@/components/Content/DefinitionList/DefinitionItem';
 
 interface MarkdocRendererProps {
   content: () => Promise<{ node: Node }>;
@@ -29,6 +31,8 @@ export default async function MarkdocRenderer({
     Column,
     Row,
     Sidenote,
+    DefinitionList,
+    DefinitionItem,
   };
 
   const { node } = await content();

src/components/Content/DefinitionList/DefinitionItem/DefinitionItem.module.css

@@ -0,0 +1,24 @@
+.term {
+  margin-block: var(--el-dt-vspace-top) var(--el-dt-vspace-bottom);
+  padding: var(--el-dt-padding);
+
+  font-family: var(--el-dt-font-family), serif;
+  font-size: var(--el-dt-font-size);
+  font-weight: var(--el-dt-font-weight);
+  line-height: var(--el-dt-line-height);
+  color: var(--el-dt-color);
+  text-transform: var(--el-dt-text-transform);
+  letter-spacing: var(--el-dt-letter-spacing);
+
+  background: var(--el-dt-background);
+}
+
+.def {
+  margin-block: var(--el-dd-vspace-top) var(--el-dd-vspace-bottom);
+  padding: var(--el-dd-indent);
+
+  font-family: var(--el-dd-font-family), sans-serif;
+  font-size: var(--el-dd-font-size);
+  line-height: var(--el-dd-line-height);
+  color: var(--el-dd-color);
+}

src/components/Content/DefinitionList/DefinitionItem/index.tsx

@@ -0,0 +1,28 @@
+import { marked } from 'marked';
+
+import styles from './DefinitionItem.module.css';
+
+interface DefinitionItemProps {
+  term: string;
+  definitions: string[];
+}
+
+export default function DefinitionItem({
+  term,
+  definitions,
+}: DefinitionItemProps) {
+  return (
+    <>
+      <dt className={styles.term}>{term}</dt>
+      {definitions.map((def, idx) => (
+        <dd
+          key={idx}
+          className={styles.def}
+          dangerouslySetInnerHTML={{
+            __html: marked.parseInline(def),
+          }}
+        />
+      ))}
+    </>
+  );
+}

src/components/Content/DefinitionList/DefinitionList.module.css

@@ -0,0 +1,5 @@
+.list {
+  margin-block: var(--el-dl-vspace-top) var(--el-dl-vspace-bottom);
+  font-size: var(--el-dl-font-size);
+  line-height: var(--el-dl-line-height);
+}

src/components/Content/DefinitionList/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import styles from './DefinitionList.module.css';
+
+interface DefinitionListProps {
+  children?: React.ReactNode;
+}
+export default function DefinitionList({ children }: DefinitionListProps) {
+  return <dl className={styles.list}>{children}</dl>;
+}

src/components/Content/Sidenote/Container/Container.module.css

@@ -53,7 +53,7 @@
 }
 
 .content {
-  text-align: left;
+  display: contents;
 }
 
 .ref {

src/keystatic/components/general/definitionlist.ts

@@ -0,0 +1,25 @@
+import { listTreeIcon } from '@keystar/ui/icon/icons/listTreeIcon';
+import { fields } from '@keystatic/core';
+import { repeating, block } from '@keystatic/core/content-components';
+
+export const definitionlistComponents = {
+  DefinitionList: repeating({
+    label: 'Definition List',
+    icon: listTreeIcon,
+    children: ['DefinitionItem'],
+    schema: {},
+  }),
+  DefinitionItem: block({
+    label: 'Definition Item',
+    schema: {
+      term: fields.text({ label: 'Term' }),
+      definitions: fields.array(
+        fields.text({ label: 'Definition', multiline: true }),
+        {
+          label: 'Definitions',
+          itemLabel: (props) => props.value || 'Definition',
+        }
+      ),
+    },
+  }),
+};

src/keystatic/components/general/index.ts

@@ -1,4 +1,9 @@
 import { gridComponents } from '@/keystatic/components/general/grid';
 import { sidenoteComponents } from '@/keystatic/components/general/sidenote';
+import { definitionlistComponents } from '@/keystatic/components/general/definitionlist';
 
-export const generalComponents = { ...gridComponents, ...sidenoteComponents };
+export const generalComponents = {
+  ...gridComponents,
+  ...sidenoteComponents,
+  ...definitionlistComponents,
+};

src/lib/markdoc/tags.ts

@@ -40,4 +40,22 @@ export const tags: Config['tags'] = {
       },
     },
   },
+  DefinitionList: {
+    render: 'DefinitionList',
+    children: ['tag'],
+  },
+  DefinitionItem: {
+    render: 'DefinitionItem',
+    selfClosing: false,
+    attributes: {
+      term: {
+        type: 'String',
+        required: true,
+      },
+      definitions: {
+        type: 'Array',
+        required: true,
+      },
+    },
+  },
 };

src/lib/types/components.ts

@@ -4,3 +4,8 @@ export interface Sidenote {
   content: string;
   type: 'default' | 'lore' | 'crunch' | 'example';
 }
+
+export interface DefinitionItem {
+  term: string;
+  definition: string[];
+}

src/styles/globals/content.css

@@ -320,37 +320,6 @@
       }
     }
 
-    & dl {
-      margin-block: var(--el-dl-vspace-top) var(--el-dl-vspace-bottom);
-      font-size: var(--el-dl-font-size);
-      line-height: var(--el-dl-line-height);
-    }
-
-    & dt {
-      margin-block: var(--el-dt-vspace-top) var(--el-dt-vspace-bottom);
-      padding: var(--el-dt-padding);
-
-      font-family: var(--el-dt-font-family), serif;
-      font-size: var(--el-dt-font-size);
-      font-weight: var(--el-dt-font-weight);
-      line-height: var(--el-dt-line-height);
-      color: var(--el-dt-color);
-      text-transform: var(--el-dt-text-transform);
-      letter-spacing: var(--el-dt-letter-spacing);
-
-      background: var(--el-dt-background);
-    }
-
-    & dd {
-      margin-block: var(--el-dd-vspace-top) var(--el-dd-vspace-bottom);
-      padding: var(--el-dd-indent);
-
-      font-family: var(--el-dd-font-family), sans-serif;
-      font-size: var(--el-dd-font-size);
-      line-height: var(--el-dd-line-height);
-      color: var(--el-dd-color);
-    }
-
     & table {
       border-collapse: collapse;
 

src/styles/globals/elements.css

@@ -178,7 +178,7 @@
     /* === DT VARIABLES === */
     --el-dt-color: var(--color-text-inverse);
     --el-dt-background: var(--color-surface-inverse);
-    --el-dt-font-family: var(--font-header);
+    --el-dt-font-family: var(--font-mono);
     --el-dt-font-size: var(--typo-size-lg);
     --el-dt-font-weight: var(--typo-weight-bold);
     --el-dt-line-height: 1.4;
@@ -194,7 +194,7 @@
     --el-dd-font-family: var(--font-body);
     --el-dd-font-size: var(--typo-size-md);
     --el-dd-line-height: var(--typo-leading-normal);
-    --el-dd-indent: 0 var(--spacing-comfortable);
+    --el-dd-indent: 0;
     --el-dd-vspace-base: calc(1em * var(--el-dd-line-height));
     --el-dd-vspace-top: calc(var(--el-dd-vspace-base) * var(--vspace-compressed));
     --el-dd-vspace-bottom: calc(var(--el-dd-vspace-base) * var(--vspace-tight));