add readme text

README.md

@@ -17,7 +17,7 @@ $ yarn add @sakura-ui/sakura-ui
 ```
 or
 ```
-$ pnpm add @sakura-ui/core @sakura-ui/forms @sakura-ui/tailwind-theme-plugin
+$ pnpm add @sakura-ui/core @sakura-ui/forms @sakura-ui/tailwind-theme-plugin @sakura-ui/markdown
 ```
 
 ## Configuration
@@ -121,3 +121,6 @@ export default App
 - Textarea
 - LabelControl
 - FieldsetControl
+
+## Markdwon extension
+- Markdown

packages/core/package.json

@@ -2,7 +2,14 @@
   "name": "@sakura-ui/core",
   "version": "0.2.5",
   "description": "",
-  "keywords": [],
+  "keywords": [
+    "react",
+    "ui",
+    "design-system",
+    "accessible",
+    "components",
+    "library"
+  ],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
   "repository": {

packages/markdown/README.md

@@ -0,0 +1,113 @@
+# Sakura UI markdown extension
+Sakura UI markdown extension is a markdown extension library that utilizes the Directive syntax of markdown.
+
+For details on markdown directives, please refer to the following page.
+- [remark-directive](https://github.com/remarkjs/remark-directive)
+
+## Install
+```
+$ npm install @sakura-ui/markdown
+```
+or
+```
+$ yarn add @sakura-ui/markdown
+```
+or
+```
+$ pnpm add @sakura-ui/markdown
+```
+
+## Usage
+When using libraries such as Gatsby or Next.js, please use them in combination with React Suspense.
+```ts
+import React, { lazy, Suspense } from 'react'
+
+const Markdown = lazy(() =>
+  import('@sakura-ui/markdown').then((module) => ({ default: module.Markdown }))
+)
+
+export const MyPage = () => {
+  const text = `
+    # Page title
+    I really like using Markdown.
+  
+    - First item
+    - Second item
+    - Third item
+  `
+
+  return (
+    <div>
+      <Suspense fallback={<div />}>
+        <Markdown>{text}</Markdown>
+      </Suspense>
+    </div>
+  );
+}
+```
+
+## Syntax
+### LinkButton
+```
+:link-button[services and applications]{href=/services}
+```
+
+### YouTube
+```
+::youtube[title]{id=o_dzh2vzyMMn}
+```
+
+### Multi column layout
+```
+::::grid-cols-2
+:::cell
+::cell-img{alt=alternative_text src=https://image.foo}
+Cell contents...
+:::
+:::cell
+::cell-description[Cell text...]
+:::
+::::
+```
+
+### Multi column layout with card
+```
+::::grid-cols-2
+:::card
+::card-title[card title]
+::card-description[Cell text...]
+:::
+:::card
+::card-img{alt=alternative_text src=https://image.foo}
+::card-title[card title]
+::card-description[Cell text...]
+:::
+::::
+```
+
+### FAQ
+```
+:::faq
+::faq-q[Question1]
+::faq-a[Answer1]
+::faq-q[Question2]
+::faq-a[Answer2]
+:::
+```
+or
+```
+::::faq
+:::faq-q
+Question1
+:::
+:::faq-a
+Answer1
+:::
+:::faq-q
+Question2
+:::
+:::faq-a
+Answer2
+:::
+::::
+```

packages/markdown/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@sakura-ui/markdown",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "",
-  "keywords": [],
+  "keywords": [
+    "markdown"
+  ],
   "author": "glassonion1",
   "homepage": "https://github.com/glassonion1/sakura-ui",
   "repository": {

packages/markdown/src/components/Markdown.tsx

@@ -241,7 +241,6 @@ export const Markdown = ({ children, showToc, tocTitle = '目次' }: Props) => {
   const [element, setElement] = React.useState(<></>)
 
   React.useEffect(() => {
-    // workaround for 'document is not defined'
     setToc(markdown2Headings(children))
     setElement(markdown2ReactElements(children))
   }, [children])

packages/markdown/src/plugins/grid.ts

@@ -22,7 +22,7 @@ export function gridPlugin() {
 
       const gridNum: number = parseInt(node.name.split('-').pop() || '1')
 
-      // 文字列の埋め込みだとTailwindがCSSを生成してくれない
+      // Tailwind doesn't generate CSS for string interpolation
       const gridClass: { [key: number]: string } = {
         1: 'md:grid-cols-1',
         2: 'md:grid-cols-2',

packages/markdown/src/plugins/headings.ts

@@ -4,7 +4,6 @@ import { visit } from 'unist-util-visit'
 import { toString } from 'mdast-util-to-string'
 import { treefy } from '@sakura-ui/helper'
 import { isHeading } from './helper'
-import { Node } from 'unist'
 
 export type HeadingItem = {
   id?: string