-
Notifications
You must be signed in to change notification settings - Fork 4.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
🪟 🎉 Support docusaurus admonitions in markdown docs (#15519)
* Support docusaurus admonitions in markdown docs * Narrow down docs folders in vscod workspace * Add mdast and remark-directive dependencies * Add remark-directive to Markdown component plugins * Add admonitions plugin to support docusaurus admonitions * Add styles for admonitions in markdown files * Add storybook component for Markdown and fix issues with code blocks * Rename Markdown component styles files, improve code blocks style and lower heading font sizes * Update admonitions tag to div * Update DocumentationPanel to lazy load * Add @types/unist to package.json
- Loading branch information
Showing
10 changed files
with
1,027 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
131 changes: 131 additions & 0 deletions
131
airbyte-webapp/src/components/Markdown/Markdown.styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| @use "../../scss/colors"; | ||
|
|
||
| .airbyte-markdown { | ||
| * { | ||
| color: colors.$dark-blue; | ||
| line-height: 24px; | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 32px; | ||
| line-height: 56px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| h2 { | ||
| font-size: 22px; | ||
| line-height: 36px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| h3 { | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| h4 { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| a { | ||
| color: colors.$blue; | ||
| text-decoration: none; | ||
| line-height: 24px; | ||
|
|
||
| &:hover { | ||
| text-decoration: underline; | ||
| } | ||
| } | ||
|
|
||
| table { | ||
| border-collapse: collapse; | ||
| } | ||
|
|
||
| th, | ||
| td { | ||
| border: 1px solid colors.$grey-100; | ||
| margin: 0; | ||
| padding: 8px 16px; | ||
| } | ||
|
|
||
| th { | ||
| background: colors.$grey-50; | ||
| } | ||
|
|
||
| blockquote { | ||
| border-left: 4px solid colors.$grey-100; | ||
| padding-left: 16px; | ||
| margin-left: 25px; | ||
| } | ||
|
|
||
| strong { | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| code { | ||
| white-space: break-spaces; | ||
| background: colors.$grey-50; | ||
| font-family: Menlo, Monaco, Consolas, monospace; | ||
| } | ||
|
|
||
| pre > code { | ||
| display: block; | ||
| padding: 15px; | ||
| overflow: auto; | ||
| border-radius: 8px; | ||
| border-bottom: 2px solid colors.$grey-100; | ||
| } | ||
|
|
||
| img { | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| .admonition { | ||
| border-radius: 8px; | ||
| border-left: 8px solid colors.$grey-300; | ||
| padding: 1px 16px 1px 48px; | ||
| margin: -1px 0 15px; | ||
| background-color: colors.$grey-50; | ||
| position: relative; | ||
|
|
||
| &::before { | ||
| content: "ℹ️"; | ||
| position: absolute; | ||
| top: 16px; | ||
| left: 16px; | ||
| } | ||
|
|
||
| &--caution, | ||
| &--warning { | ||
| background-color: colors.$yellow-50; | ||
| border-left-color: colors.$yellow-300; | ||
| &::before { | ||
| content: "⚠️"; | ||
| } | ||
| } | ||
|
|
||
| &--danger { | ||
| background-color: colors.$red-50; | ||
| border-left-color: colors.$red-300; | ||
| &::before { | ||
| content: "⚠️"; | ||
| } | ||
| } | ||
|
|
||
| &--note::before { | ||
| content: "📝"; | ||
| } | ||
|
|
||
| &--tip, | ||
| &--info { | ||
| background-color: colors.$blue-50; | ||
| border-left-color: colors.$blue-300; | ||
| } | ||
|
|
||
| &--tip::before { | ||
| content: "💡"; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { ComponentStory, ComponentMeta } from "@storybook/react"; | ||
|
|
||
| import { Markdown } from "./Markdown"; | ||
|
|
||
| export default { | ||
| title: "Ui/Markdown", | ||
| component: Markdown, | ||
| argTypes: {}, | ||
| } as ComponentMeta<typeof Markdown>; | ||
|
|
||
| const Template: ComponentStory<typeof Markdown> = (args) => ( | ||
| <div style={{ backgroundColor: "white" }}> | ||
| <Markdown {...args} /> | ||
| </div> | ||
| ); | ||
|
|
||
| const content = ` | ||
| # Heading 1 | ||
| ## Heading 2 | ||
| ### Heading 3 | ||
| #### Heading 4 | ||
| ##### Heading 5 | ||
| ###### Heading 6 | ||
| The quick brown fox jumps over the lazy dog. | ||
| The quick brown fox jumps over the lazy dog. | ||
| > The quick brown fox jumps over the lazy dog. | ||
| [Link](https://www.airbyte.com/) | ||
| \`Pre\` | ||
| *italic* | ||
| **bold** | ||
| ~strikethrough~ | ||
| \`\`\`javascript | ||
| function codeBlock() { | ||
| // comment | ||
| } | ||
| \`\`\` | ||
| | Heading 1 | Heading 2 | | ||
| |:----------|:----------| | ||
| |Cell 1 | Cell 2 | | ||
| |Cell 3 | Cell 4 | | ||
| - List item 1 | ||
| - List item 2 | ||
| - List item 3 | ||
| 1. List item 1 | ||
| 2. List item 2 | ||
| 3. List item 3 | ||
| * List item 1 | ||
| * List item 2 | ||
| * List item 3 | ||
| :::note | ||
| This is a note admonition | ||
| ::: | ||
| :::tip | ||
| This is a tip admonition | ||
| ::: | ||
| :::info | ||
| This is a info admonition | ||
| ::: | ||
| :::caution | ||
| This is a caution admonition | ||
| ::: | ||
| :::warning | ||
| This is a warning admonition | ||
| ::: | ||
| :::danger | ||
| This is a danger admonition | ||
| ::: | ||
| `; | ||
|
|
||
| export const Primary = Template.bind({}); | ||
| Primary.args = { | ||
| content, | ||
| }; |
21 changes: 21 additions & 0 deletions
21
airbyte-webapp/src/components/Markdown/remarkAdmonitionsPlugin.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { Root } from "mdast"; | ||
| import { Plugin } from "unified"; | ||
| import { Node } from "unist"; | ||
| import { visit } from "unist-util-visit"; | ||
|
|
||
| const SUPPORTED_ADMONITION_NAMES: Readonly<string[]> = ["note", "tip", "info", "caution", "warning", "danger"]; | ||
| const SUPPORTED_NODE_TYPES: Readonly<string[]> = ["textDirective", "leafDirective", "containerDirective"]; | ||
|
|
||
| export const remarkAdmonitionsPlugin: Plugin<[], Root> = () => (tree) => { | ||
| visit<Node & { name?: string }>(tree, (node) => { | ||
| if (!node.name || !SUPPORTED_ADMONITION_NAMES.includes(node.name) || !SUPPORTED_NODE_TYPES.includes(node.type)) { | ||
| return; | ||
| } | ||
|
|
||
| const data = node.data ?? (node.data = {}); | ||
| const className = `admonition admonition--${node.name}`; | ||
|
|
||
| data.hName = "div"; | ||
| data.hProperties = { class: className }; | ||
| }); | ||
| }; |
Oops, something went wrong.