docs: setup & syntax

docs/app.config.ts

@@ -1,38 +1,46 @@
 export default defineAppConfig({
   docus: {
-    title: 'Docus',
-    description: 'The best place to start your documentation.',
+    title: 'Remark MDC',
+    description: 'Remark plugin to parse MarkDown Components syntax.',
     image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
+
     socials: {
       twitter: 'nuxt_js',
-      github: 'nuxt-themes/docus',
+      github: 'nuxtlabs/remark-mdc',
       nuxt: {
         label: 'Nuxt',
         icon: 'simple-icons:nuxtdotjs',
         href: 'https://nuxt.com'
       }
     },
+
     github: {
-      dir: '.starters/default/content',
+      dir: 'docs/content',
       branch: 'main',
-      repo: 'docus',
-      owner: 'nuxt-themes',
+      repo: 'remark-mdc',
+      owner: 'nuxtlabs',
       edit: true
     },
+
     aside: {
       level: 0,
       collapsed: false,
       exclude: []
     },
+
     main: {
       padded: true,
       fluid: true
     },
+
     header: {
-      logo: true,
+      logo: false,
       showLinkIcon: true,
       exclude: [],
-      fluid: true
-    }
+      fluid: true,
+      title: 'Remark MDC'
+    },
+
+    titleTemplate: '%s · Remark MDC'
   }
-})
+})

docs/content/0.index.md

@@ -1,99 +1,248 @@
 ---
 title: Home
-navigation: false
-layout: page
-main:
-  fluid: false
 ---
 
-:ellipsis{right=0px width=75% blur=150px}
 
-::block-hero
+# Remark MDC
+
+Remark plugin to parse MarkDown Components syntax.
+
+## Setup
+
+
+Add `remark-mdc` dependency to your project:
+
+::code-group
+```bash [Yarn]
+yarn add --dev remark-mdc
+```
+```bash [NPM]
+npm install --save-dev remark-mdc
+```
+```bash [PNPM]
+pnpm i --save-dev remark-mdc
+```
+::
+
+Then, add `remark-mdc` to the `unified` streams:
+
+```ts 
+import { unified } from 'unified'
+import remarkParse from 'remark-parse'
+import remarkMDC from 'remark-mdc'
+
+function parse(md: string) {
+  const processor = unified()
+  processor.use(remarkParse)
+
+  // Use `remark-mdc` plugin to parse mdc syntax
+  processor.use(remarkMDC)
+
+  // ...
+
+  return processor.process({ value: content, data: frontmatter })
+}
+```
+
+That's it ✨
+
+## Syntax
+
+### `^-` Frontmatter
+
+Front-matter is a convention of Markdown-based CMS to provide meta-data to documents, like description or title. Remark MDc uses the YAML syntax with `key: value` pairs.
+
+To define frontmatter, start your document with `---\n---` section and put your desired data in yaml format within this section.
+
+```md
 ---
-cta:
-  - Get started
-  - /introduction/getting-started
-secondary:
-  - Open on GitHub →
-  - https://github.com/nuxt-themes/docus
+title: 'Title of the page'
+description: 'meta description of the page'
 ---
 
-#title
-The best place to start your documentation.
+<!-- Content of the page -->
+```
+
+### `:` Inline Components
+Inline components are entiries that will stick inside parent paragraph. Like spans, emojis, icons, etc. Inline component can be defined by single `:` followed by component name.
+
+```md
+A simple :inline-component
+```
+
+You may want to pass some text into an inline-component, you can do it using `[TEXT]` syntax
+
+```md
+A simple :inline-component[John Doe]
+```
+
+If you want to use an inline component followed by specific characters like `-`, `_` or `:`, you can use a dummy props specifier after it.
+
+```md
+How to say :hello{}-world in markdown
+```
+
+
+In this example, `:hello{}` will search for the `<Hello />` component, and `-world` will be plain text.
+
+::alert
+Note: If you put an inline component alone in a single line it will be transformed to a block component. This is suger syntax for block components.
+```md
+Paragraph a
+
+:block-component
+
+Pargraph b
+```
+::
+
+### `::` Block Components
+
+Block components are components that accept Markdown content or another component as a slot.
+
+Block components defined by `::` identifier.
+
+```md
+::card
+The content of the card
+::
+```
+
+Block component can be used without any content.
+
+```md
+::card
+::
+```
+
+Or with suger syntax. Note that in suger syntax it is important to put the component alone in a separate line
+
+```md
+A paragraph
+
+:card
+```
+
+### `#` Slots
+
+Block components can accept slots (like vue slots) with different names. The content of these slots can be anything from normal markdown paragraph to a nested block component.
+
+- The `default` slot renders the top-level content inside the block component.
+- Named slots use the `#` identifier to render the corresponding content.
+
+```md
+::hero
+Default slot text
 
 #description
-Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.org) components and enjoy the power of [Nuxt](https://nuxt.com).
-
-#extra
-  ::list
-  - **+50 Components** ready to build rich pages
-  - **Docs** and **Page** layouts
-  - Start from a `README`, scale to a framework documentation
-  - Navigation and Table of Contents generation
-  - Fully configurable design system
-  - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev)
-  - Used on [Content Documentation](https://content.nuxtjs.org)
-  ::
-
-#support
-  ::terminal
-  ---
-  content:
-  - npx nuxi@latest init -t themes/docus
-  - cd docs
-  - npm install
-  - npm run dev
-  ---
-  ::
+This will be rendered inside the `description` slot.
+```
+
+### `:::` Nesting
+
+MDC supports nested components inside slots by indenting them. In order to make nested components visually distinguishable, you can indend nested components and add more `:` when you define them.
+
+```md
+::hero
+  :::card
+    A nested card
+
+    ::::card
+      A super nested card
+    ::::
+  :::
 ::
+```
+
+### `[]` Span
+
+To create inline spans in your text you can use the `[]` identifier.
+
+```md
+Hello [World]
+```
+
+This syntax is usefull in combination of inline props to make text visually different from rest of paragraph. Checkout inline props section to read more about props.
+
+```md
+Hello [World]{.bg-blue-500}!
+```
+
+### `{}` Inline Props
 
-::card-grid
-#title
-What's included
-
-#root
-:ellipsis{left=0px width=40rem top=10rem blur=140px}
-
-#default
-  ::card{icon=logos:nuxt-icon}
-  #title
-  Nuxt Architecture
-  #description
-  Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem.
-  ::
-
-  ::card{icon=IconNuxtStudio}
-  #title
-  Nuxt Studio ready
-  #description
-  Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio).
-  ::
-
-  ::card{icon=logos:vue}
-  #title
-  Vue Components
-  #description
-  Use built-in components (or your own!) inside your content.
-  ::
-
-  ::card{icon=simple-icons:markdown}
-  #title
-  Write Markdown
-  #description
-  Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
-  ::
-
-  ::card{icon=noto:rocket}
-  #title
-  Deploy anywhere
-  #description
-  Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com).
-  ::
-
-  ::card{icon=noto:puzzle-piece}
-  #title
-  Extensible.
-  #description
-  Customize the whole design, or add components using slots - you can make Docus your own.
-  ::
+Using the inline props syntax you can pass props and attributes to your components. Also you MDC goes goes a step further and allows you to pass attributes to markdown native elements like images, links, bold texts and etc.
+
+In order to define properties for a component or a markdown element, You need to create props scope `{}` exactly after the component/element definition. Then you can define the properties inline this scope using a `key=value` syntax.
+
+```md
+Inline :component{key="value" key2=value2}
+
+::block-component{no-border title="My Component"}
 ::
+
+[Link](https://nuxt.com){class="nuxt"}
+
+![Nuxt Logo](https://nuxt.com/assets/design-kit/logo/icon-green.svg){class=".nuxt-logo"}
+
+`code`{style="color: red"}
+
+_italic_{style="color: blue"}
+
+**bold**{style="color: blue"}
+```
+
+There is also couple of suger syntaxes for common use-cases:
+
+- `id` attribute: `_italic_{#the_italic_text}`
+- `class` attribute: `**bold**{.bold .text.with_attribute}`
+- No value (boolean props): `:component{no-border}`
+- Single string without any space: `**bold**{class=red}`
+
+If you want to pass arrays or objects as props to components you can pass them as JSON string and prefix the prop key with a colon to automatically decode the JSON string. Note that in this case you should use single quotes for the value string so you can use double quotes to pass a valid JSON string:
+
+```md
+::dropdown{:items='["Nuxt", "Vue", "React"]'}
+String Array
+::
+
+::dropdown{:items='[1,2,3.5]'}
+Number Array
+::
+
+::chart{:options='{"responsive": true, "scales": {"y": {"beginAtZero": true}}}'}
+Object
+::
+```
+
+### `---` Yaml Props
+
+The YAML method uses the `---` identifier to declare one prop per line, that can be useful for readability.
+
+```md
+::icon-card
+---
+icon: IconNuxt
+description: Harness the full power of Nuxt and the Nuxt ecosystem.
+title: Nuxt Architecture.
+---
+::
+```
+
+
+## Contributing
+
+You can contribute to this module online with CodeSandBox:
+
+[![Edit @nuxtjs/color-mode](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/nuxt-modules/color-mode/tree/master/?fontsize=14&hidenavigation=1&theme=dark)
+
+Or locally:
+
+1. Clone this repository
+2. Install dependencies using `pnpm install`
+3. Start development server using `pnpm dev`
+
+## License
+
+[MIT License](https://github.com/nuxt-modules/color-mode/blob/master/LICENSE)
+
+Copyright (c) Nuxt Team