feat: custom container render function (#81)

docs/en/guide/use-mdx.mdx

@@ -53,6 +53,54 @@ The properties defined in front matter will be passed to the component as `meta`
 
 You can see more front matter config detail in [config-front-matter](/en/api/config-front-matter).
 
+## Custom Containers
+
+**Input:**
+
+```markdown
+:::tip
+This is a `tip`.
+:::
+
+:::info
+This ia an `info` box.
+:::
+
+:::warning
+This is a warning.
+:::
+
+:::danger
+This is a dangerous warning.
+:::
+
+:::other
+`tip` as a custom container of the bottom-line type
+:::
+```
+
+**Output:**
+
+:::tip
+This is a `tip`.
+:::
+
+:::info
+This ia an `info` box.
+:::
+
+:::warning
+This is a warning.
+:::
+
+:::danger
+This is a dangerous warning.
+:::
+
+:::other
+`tip` as a custom container of the bottom-line type
+:::
+
 ## Code Line Highlighting
 
 Island.js supports highlighting of specified code lines. You can specify line highlighting in any of the following ways.

docs/zh/guide/use-mdx.mdx

@@ -57,6 +57,54 @@ title: Hello World
 
 更多的配置详情请参考 [config-front-matter](/zh/api/config-front-matter)。
 
+## Custom Containers
+
+**输入：**
+
+```markdown
+:::tip
+这是一个`tip`类型的`block`
+:::
+
+:::info
+这是一个`info`类型的`block`
+:::
+
+:::warning
+这是一个`warning`类型的`block`
+:::
+
+:::danger
+这是一个`danger`类型的`block`
+:::
+
+:::other
+`tip`作为兜底类型的`block`
+:::
+```
+
+**输出：**
+
+:::tip
+这是一个`tip`类型的`block`
+:::
+
+:::info
+这是一个`info`类型的`block`
+:::
+
+:::warning
+这是一个`warning`类型的`block`
+:::
+
+:::danger
+这是一个`danger`类型的`block`
+:::
+
+:::other
+`tip`作为兜底类型的`block`
+:::
+
 ## 指定代码行高亮
 
 Island.js 支持指定代码行的高亮显示。你可以用以下任意方式指定代码行高亮。

package.json

@@ -89,6 +89,7 @@
     "rehype-external-links": "^2.0.1",
     "rehype-highlight": "^5.0.2",
     "rehype-slug": "^5.0.1",
+    "remark-directive": "^2.0.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-mdx-frontmatter": "^2.0.3",

src/node/constants/index.ts

@@ -55,3 +55,5 @@ export const ISLAND_JSX_RUNTIME_PATH = RUNTIME_BUNDLE_OUTDIR;
 export const ISLAND_CLI_PATH = join(CLI_BUNDLE_OUTDIR, 'cli.js');
 
 export const VENDOR_PATH = join(PACKAGE_ROOT_PATH, 'vendors');
+
+export const DIRECTIVE_TYPES: string[] = ['tip', 'warning', 'danger', 'info'];

src/node/plugin-mdx/pluginMdxRollup.ts

@@ -2,12 +2,14 @@ import pluginMdx from '@mdx-js/rollup';
 import { rehypePluginPreWrapper } from './rehypePlugins/preWrapper';
 import remarkPluginGFM from 'remark-gfm';
 import remarkPluginFrontMatter from 'remark-frontmatter';
+import remarkDirective from 'remark-directive';
 import remarkPluginMDXFrontMatter from 'remark-mdx-frontmatter';
 import { remarkPluginNormalizeLink } from './remarkPlugins/link';
 import rehypePluginAutolinkHeadings from 'rehype-autolink-headings';
 import rehypePluginSlug from 'rehype-slug';
 import rehypePluginExternalLinks from 'rehype-external-links';
 import { remarkPluginToc } from './remarkPlugins/toc';
+import { remarkPluginTip } from './remarkPlugins/tip';
 import shiki from 'shiki';
 import { rehypePluginShiki } from './rehypePlugins/shiki';
 import { SiteConfig } from 'shared/types/index';
@@ -27,6 +29,8 @@ export async function pluginMdxRollup(
       remarkPluginFrontMatter,
       [remarkPluginMDXFrontMatter, { name: 'frontmatter' }],
       remarkPluginToc,
+      remarkDirective,
+      remarkPluginTip,
       [
         remarkPluginNormalizeLink,
         { base: config.base || '/', enableSpa: config.enableSpa }

src/node/plugin-mdx/remarkPlugins/tip.ts

@@ -0,0 +1,41 @@
+import { DIRECTIVE_TYPES } from '../../constants';
+import type { Plugin } from 'unified';
+import { visit } from 'unist-util-visit';
+
+export const remarkPluginTip: Plugin = () => {
+  return (tree: any) => {
+    visit(tree, (node) => {
+      if (node.type === 'containerDirective') {
+        const name = DIRECTIVE_TYPES.includes(node.name)
+          ? node.name
+          : DIRECTIVE_TYPES[0];
+        const data = node.data || (node.data = {});
+        const children = node.children;
+
+        data.hName = 'div';
+        data.hProperties = {
+          class: `island-directive ${name}`
+        };
+
+        node.children = [
+          {
+            type: 'paragraph',
+            data: {
+              hProperties: {
+                class: 'island-directive-title'
+              }
+            },
+            children: [{ type: 'text', value: name.toLocaleUpperCase() }]
+          },
+          {
+            type: 'element',
+            data: {
+              hProperties: { class: 'island-directive-content' }
+            },
+            children
+          }
+        ];
+      }
+    });
+  };
+};

src/theme-default/styles/doc.css

@@ -82,8 +82,8 @@
 }
 
 /**
-  * Paragraph and inline elements
-  * -------------------------------------------------------------------------- */
+   * Paragraph and inline elements
+   * -------------------------------------------------------------------------- */
 
 .island-doc p,
 .island-doc summary {
@@ -125,8 +125,8 @@
 }
 
 /**
-  * Lists
-  * -------------------------------------------------------------------------- */
+   * Lists
+   * -------------------------------------------------------------------------- */
 
 .island-doc ul,
 .island-doc ol {
@@ -152,8 +152,8 @@
 }
 
 /**
-  * Table
-  * -------------------------------------------------------------------------- */
+   * Table
+   * -------------------------------------------------------------------------- */
 
 .island-doc table {
   display: block;
@@ -188,8 +188,8 @@
 }
 
 /**
-  * Decorational elements
-  * -------------------------------------------------------------------------- */
+   * Decorational elements
+   * -------------------------------------------------------------------------- */
 
 .island-doc hr {
   margin: 16px 0;
@@ -198,8 +198,8 @@
 }
 
 /**
-  * Custom Block
-  * -------------------------------------------------------------------------- */
+   * Custom Block
+   * -------------------------------------------------------------------------- */
 
 .island-doc .custom-block {
   margin: 16px 0;
@@ -241,8 +241,8 @@
 }
 
 /**
-  * Code
-  * -------------------------------------------------------------------------- */
+   * Code
+   * -------------------------------------------------------------------------- */
 
 /* inline code */
 .island-doc :not(pre, h1, h2, h3, h4, h5, h6) > code {
@@ -438,3 +438,57 @@
 .island-doc [class*='language-'] > button.copy:focus + span.lang {
   opacity: 0;
 }
+
+/**
+   * Custom container
+   * -------------------------------------------------------------------------- */
+
+.island-doc .island-directive {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 16px 16px 8px;
+  line-height: 24px;
+  font-size: 14px;
+  margin: 16px 0;
+}
+
+.island-doc .island-directive .island-directive-title {
+  font-weight: 700;
+  margin: 0;
+}
+
+.island-doc .island-directive .island-directive-content p {
+  margin: 8px 0;
+}
+
+.island-doc .island-directive .island-directive-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 3px;
+  background-image: var(--island-icon-tip);
+}
+
+.island-doc .island-directive.tip {
+  border-color: var(--island-custom-block-tip-border);
+  color: var(--island-custom-block-tip-text);
+  background-color: var(--island-custom-block-tip-bg);
+}
+
+.island-doc .island-directive.info {
+  border-color: var(--island-custom-block-info-border);
+  color: var(--island-custom-block-info-text);
+  background-color: var(--island-custom-block-info-bg);
+}
+
+.island-doc .island-directive.warning {
+  border-color: var(--island-custom-block-warning-border);
+  color: var(--island-custom-block-warning-text);
+  background-color: var(--island-custom-block-warning-bg);
+}
+
+.island-doc .island-directive.danger {
+  border-color: var(--island-custom-block-danger-border);
+  color: var(--island-custom-block-danger-text);
+  background-color: var(--island-custom-block-danger-bg);
+}