Added DefinitionList and DefinitionItem components

content/meta/index.mdoc

@@ -61,6 +61,14 @@ Et Pater tuus, qui videt in abscondito, reddet tibi. Et cum oratis, non eritis s
 
 Puer meus. Nam et ego homo sum sub potestate constitutus, habens sub me milites, et dico huic Vade, et vadit et alii Veni, et venit et servo meo Fac hoc, et facit. Audiens autem Jesus miratus est, et sequentibus se dixit Amen dico vobis, non inveni tantam fidem in Israël. Dico autem vobis, quod multi ab oriente et occidente venient, et recumbent cum Abraham, et Isaac, et Jacob in regno cælorum filii autem regni ejicientur in tenebras exteriores ibi erit fletus et stridor dentium. Et dixit Jesus centurioni Vade, et sicut credidisti, fiat tibi. Et sanatus est puer in illa hora. Et cum venisset Jesus in domum Petri, vidit socrum ejus jacentem, et febricitantem et tetigit manum ejus, et dimisit eam febris, et surrexit, et ministrabat eis. Vespere autem facto, obtulerunt ei multos dæmonia habentes et ejiciebat spiritus verbo, et omnes male habentes curavit. Ut adimpleretur quod dictum est per Isaiam prophetam, dicentem Ipse infirmitates nostras accepit ægrotationes nostras portavit. Videns autem Jesus turbas multas circum se.
 
+{% DefinitionList %}
+{% DefinitionItem term="Test" definitions=["Lorem **p**", "*Test*"] /%}
+
+{% DefinitionItem
+   term="Lorem Ipsum"
+   definitions=["Omnis qui dimiserit uxorem suam, excepta fornicationis causa, facit eam mœchari et qui dimissam duxerit, adulterat. Iterum audistis quia dictum est antiquis Non perjurabis reddes autem Domino juramenta tua. Ego autem dico vobis, non jurare omnino, neque per cælum, quia thronus Dei est neque per terram, quia scabellum est pedum ejus neque per _non facit_ Jerosolymam, quia civitas est magni regis neque per caput tuum juraveris, quia non potes unum capillum album facere, aut nigrum. Sit _et_ autem sermo vester, est, est non, non."] /%}
+{% /DefinitionList %}
+
 ### Your ad in
 
 Erit. Si autem oculus tuus fuerit nequam, totum corpus tuum tenebrosum erit. Si ergo lumen, quod in te est, tenebræ sunt ipsæ tenebræ quantæ erunt? Nemo potest duobus dominis servire aut enim unum odio habebit, et alterum diliget aut unum sustinebit, et alterum contemnet. Non potestis Deo servire et mammonæ. Ideo dico vobis, ne solliciti sitis animæ vestræ quid manducetis, neque corpori vestro quid induamini. Nonne anima plus est quam esca, et corpus plus quam vestimentum? Respicite volatilia cæli, quoniam non serunt, neque metunt, neque congregant in horrea et Pater vester cælestis pascit illa. Nonne vos magis pluris estis illis? Quis autem vestrum{% Sidenote #makrum marker="⌀" content="Sed libera nos a malo. Amen. Si enim dimiseritis hominibus peccata eorum dimittet et vobis Pater vester cælestis delicta vestra. Si autem non dimiseritis hominibus nec Pater vester dimittet vobis peccata vestra. Cum autem jejunatis, nolite fieri sicut hypocritæ, tristes. Exterminant enim facies suas, ut appareant hominibus jejunantes. Amen dico vobis, quia receperunt mercedem **autem jesus** suam. Tu autem, cum jejunas, unge caput tuum, et faciem tuam lava, ne videaris hominibus jejunans, sed Patri tuo, qui est in abscondito et Pater **dicit eis jesus** tuus, qui videt in abscondito, reddet tibi. Nolite thesaurizare vobis thesauros in." type="default" /%} cogitans potest adjicere ad staturam suam cubitum unum? Et de vestimento quid solliciti estis? Considerate lilia agri quomodo crescunt non laborant, neque nent. Dico autem vobis, quoniam nec Salomon in omni gloria sua coopertus est sicut unum ex istis. Si autem fœnum agri, quod hodie est, et cras in clibanum mittitur, Deus sic vestit, quanto.

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));