Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add admonitions feature to blog/docs #3371

Merged
merged 13 commits into from
Mar 23, 2022
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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
}
Expand Down
7 changes: 6 additions & 1 deletion src/components/Blog/Post/Markdown/index.tsx
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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 }) => {
Expand Down