Add admonition feature (#210)

iterative · Mar 23, 2022 · 7335208 · 7335208
1 parent eee7cc0
commit 7335208
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 1 deletion.
diff --git a/src/components/pages/Documentation/Markdown/index.tsx b/src/components/pages/Documentation/Markdown/index.tsx
@@ -211,6 +211,50 @@ const Toggle: React.FC<{
   )
 }
 
+const icons = {
+  tip: '💡',
+  info: 'ℹ️',
+  warn: '⚠️',
+  fire: '🔥',
+  exclamation: '❗',
+  lady_beetle: '🐞',
+  bug: '🐛'
+}
+const genericTitles = {
+  info: 'Info',
+  tip: 'Tip',
+  warn: 'Warning'
+}
+const defaultType = 'info'
+
+const Admonition: React.FC<{
+  title?: string
+  type?: 'info' | 'tip' | 'warn'
+  icon?:
+    | 'tip'
+    | 'info'
+    | 'warn'
+    | 'fire'
+    | 'exclamation'
+    | 'lady_beetle'
+    | 'bug'
+}> = ({ title, type = defaultType, children, icon = type }) => {
+  const setType = genericTitles[type] ? type : defaultType
+  const iconContent = icons[icon] || ''
+
+  return (
+    <div
+      className={cn(styles.admonition, styles[setType])}
+      style={{ '--icon': `"${iconContent}"` } as React.CSSProperties}
+    >
+      <p className={cn(styles.title, !iconContent && styles.noIcon)}>
+        {title || genericTitles[setType]}
+      </p>
+      <div className={styles.admonitionContent}>{children}</div>
+    </div>
+  )
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderAst = new (rehypeReact as any)({
   createElement: React.createElement,
@@ -221,7 +265,9 @@ const renderAst = new (rehypeReact as any)({
     card: Card,
     cards: Cards,
     toggle: Toggle,
-    tab: React.Fragment
+    tab: React.Fragment,
+    admon: Admonition,
+    admonition: Admonition
   }
 }).Compiler
 

diff --git a/src/components/pages/Documentation/Markdown/styles.module.css b/src/components/pages/Documentation/Markdown/styles.module.css
@@ -494,3 +494,48 @@ a.card {
   overflow: hidden;
   width: 0;
 }
+
+.admonition {
+  padding: 10px;
+  border-left-style: solid;
+  margin-bottom: 10px;
+  border-radius: 10px;
+  border-left-width: 10px;
+
+  &.warn {
+    border-color: var(--color-orange);
+    background-color: rgb(227 112 70 / 20%);
+  }
+
+  &.tip {
+    border-color: var(--color-azure);
+    background-color: rgb(19 173 199 / 20%);
+  }
+
+  &.info {
+    border-color: var(--color-purple);
+    background-color: rgb(148 93 214 / 20%);
+  }
+
+  .title {
+    font-weight: 500;
+    margin: 0;
+  }
+
+  .title::before {
+    margin-right: 5px;
+    content: var(--icon);
+  }
+
+  .title.noIcon::before {
+    margin-right: 0;
+  }
+
+  .admonitionContent {
+    padding: 10px 0 0;
+  }
+
+  .admonitionContent *:last-child {
+    margin-bottom: 0;
+  }
+}