Add admonitions feature to blog/docs

content/blog/2022-03-17-march-22-heartbeat.md

@@ -37,6 +37,24 @@ tags:
   - Git
 ---
 
+<admonition title="Unique Title" type="warn" icon="exclamation">
+
+text text text text text
+
+</admonition>
+
+<admon type="tip">
+
+text text text
+
+</admon>
+
+<admon title="Unique Info Title" type="info">
+
+text text text text text
+
+</admon>
+
 # On the war in Ukraine 🇺🇦
 
 While the war in Ukraine has impacted the world, it has also greatly impacted

content/docs/index.md

@@ -5,6 +5,12 @@ Data Version Control, or DVC, is a data and ML
 advantage of the existing engineering toolset that you're already familiar with
 (Git, CI/CD, etc.).
 
+<admon type="info" icon="lady_beetle">
+
+more text more text more text
+
+</admon>
+
 <cards>
 
   <card href="/doc/start" heading="Get Started">

plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Admonition/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import cn from 'classnames'
+import * as styles from './styles.module.css'
+
+const Admonition: React.FC<{
+  title?: string
+  type?: 'info' | 'tip' | 'warn'
+  icon?:
+    | 'tip'
+    | 'info'
+    | 'warn'
+    | 'fire'
+    | 'exclamation'
+    | 'lady_beetle'
+    | 'bug'
+}> = ({ title, type = 'info', children, icon = type }) => {
+  const icons = {
+    tip: '💡',
+    info: 'ℹ️',
+    warn: '⚠️',
+    fire: '🔥',
+    exclamation: '❗',
+    lady_beetle: '🐞',
+    bug: '🐛'
+  }
+  const genericTitles = {
+    info: 'Info',
+    tip: 'Tip',
+    warn: 'Warning'
+  }
+
+  return (
+    <div
+      className={cn(styles.admonition, styles[type])}
+      style={{ '--icon': `"${icons[icon]}"` } as React.CSSProperties}
+    >
+      <p className={styles.title}>{title || genericTitles[type]}</p>
+      <div className={styles.content}>{children}</div>
+    </div>
+  )
+}
+
+export default Admonition

plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Admonition/styles.module.css

@@ -0,0 +1,40 @@
+.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);
+  }
+
+  .content {
+    padding: 10px 0 0;
+  }
+
+  .content *:last-child {
+    margin-bottom: 0;
+  }
+}

plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/index.tsx

@@ -15,6 +15,7 @@ import Collapsible from 'react-collapsible'
 import Main from './Main'
 import Link from '../../Link'
 import Tooltip from './Tooltip'
+import Admonition from './Admonition'
 
 import * as styles from './styles.module.css'
 import { TogglesContext, TogglesProvider } from './ToggleProvider'
@@ -248,7 +249,9 @@ const renderAst = (slugger: GithubSlugger) => {
       cards: Cards,
       details: (props: any) => <Details slugger={slugger} {...props} />,
       toggle: Toggle,
-      tab: Tab
+      tab: Tab,
+      admon: Admonition,
+      admonition: Admonition
     }
   }).Compiler
 }

src/components/Blog/Post/Markdown/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import rehypeReact from 'rehype-react'
+import Admonition from 'gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Admonition'
 
 import * as styles from './styles.module.css'
 
@@ -11,7 +12,11 @@ interface IMarkdownProps {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const renderAst = new (rehypeReact as any)({
   createElement: React.createElement,
-  Fragment: React.Fragment
+  Fragment: React.Fragment,
+  components: {
+    admon: Admonition,
+    admonition: Admonition
+  }
 }).Compiler
 
 const Markdown: React.FC<IMarkdownProps> = ({ htmlAst }) => {