Add admonitions feature to blog and docs (#3371)

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import cn from 'classnames'
+import * as styles from './styles.module.css'
+
+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.content}>{children}</div>
+    </div>
+  )
+}
+
+export default Admonition

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

@@ -0,0 +1,44 @@
+.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;
+  }
+
+  .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 }) => {