refactor: migrate remaining Comark 0.6 rename leftovers in examples/docs (#329)

Author: farnabaz

docs/app/components/landing/HeroDemo.vue

@@ -35,7 +35,7 @@ const sourceAsCode = computed(() => ['```md', props.demoMarkdown, '```'].join('\
         <div class="shiki-source h-[280px] overflow-y-auto overflow-x-hidden p-4 md:h-[400px]">
           <ComarkDocs
             class="font-mono text-sm/6"
-            :markdown="sourceAsCode"
+            :value="sourceAsCode"
             :components="{ ProsePre: 'pre' }"
           />
         </div>

examples/1.frameworks/astro/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@astrojs/react": "catalog:",
+    "@comark/react": "workspace:*",
     "@tailwindcss/vite": "catalog:",
     "astro": "catalog:",
     "comark": "workspace:*",

examples/1.frameworks/astro/src/pages/posts/[...id].astro

@@ -1,8 +1,8 @@
 ---
 import { getCollection } from 'astro:content'
-import { parse } from 'comark'
+import { parseMarkdown } from 'comark'
 import Layout from '../../layouts/Layout.astro'
-import { MarkdownParsed } from '@comark/react'
+import { MarkdownDocument } from '@comark/react'
 import highlight from 'comark/plugins/highlight'
 import Alert from '../../components/Alert'
 
@@ -15,7 +15,7 @@ export async function getStaticPaths() {
 }
 
 const { post } = Astro.props
-const tree = await parse(post.body!, {
+const document = await parseMarkdown(post.body!, {
   plugins: [
     highlight({
       themes: {
@@ -43,6 +43,6 @@ const tree = await parse(post.body!, {
         </div>
       </div>
     </header>
-    <MarkdownParsed value={tree} className="prose" components={{ Alert }} />
+    <MarkdownDocument value={document} className="prose" components={{ Alert }} />
   </article>
 </Layout>

examples/1.frameworks/nuxt/README.md

@@ -19,7 +19,7 @@ defaultValue: content/posts/comark-syntax.md
 ::Browser{src="https://comark-nuxt.vercel.app/blog/comark-syntax"}
 ::
 
-This example demonstrates how to use Comark Syntax with Nuxt UI. Comark Syntax automatically detects when Nuxt UI is installed and uses its components for rendering. Simply add both `comark/nuxt` and `@nuxt/ui` modules to your Nuxt config, and the `Comark` component will use Nuxt UI components automatically.
+This example demonstrates how to use Comark Syntax with Nuxt UI. Comark Syntax automatically detects when Nuxt UI is installed and uses its components for rendering. Simply add both `comark/nuxt` and `@nuxt/ui` modules to your Nuxt config, and the `Markdown` component will use Nuxt UI components automatically.
 
 ## What does `comark/nuxt` module do
 

examples/2.vite/angular/content/posts/angular-integration.md

@@ -30,8 +30,8 @@ export async function getPost(slug: string) {
   const content = Object.entries(rawFiles)
     .find(([path]) => path.endsWith(`${slug}.md`))?.[1]
 
-  const tree = await parseMarkdown(content!, { plugins: [highlight()] })
-  return { slug, tree, ...tree.frontmatter }
+  const document = await parseMarkdown(content!, { plugins: [highlight()] })
+  return { slug, tree: document, ...document.frontmatter }
 }
 ```
 
@@ -41,7 +41,7 @@ export async function getPost(slug: string) {
   imports: [MarkdownDocument],
   template: `
     @if (post) {
-      <comark-markdown-parsed [value]="post.tree" [components]="components" />
+      <comark-markdown-document [value]="post.tree" [components]="components" />
     }
   `,
 })
@@ -54,7 +54,7 @@ Since this is a client-side SPA, `parseMarkdown()` runs in the browser. Markdown
 
 ## Custom components
 
-Pass custom components via the `components` input on `<comark-markdown-parsed>`. Each component receives props as `@Input()` values and children via `<ng-content />`:
+Pass custom components via the `components` input on `<comark-markdown-document>`. Each component receives props as `@Input()` values and children via `<ng-content />`:
 
 ```ts
 @Component({

examples/2.vite/angular/content/posts/hello-world.md

@@ -24,8 +24,8 @@ This alert is rendered using a custom Comark component mapped via the `component
 import { parseMarkdown } from 'comark'
 import { MarkdownDocument } from '@comark/angular'
 
-const tree = await parseMarkdown(markdown)
-// <comark-markdown-parsed [value]="tree" [components]="components" />
+const document = await parseMarkdown(markdown)
+// <comark-markdown-document [value]="document" [components]="components" />
 ```
 
 ::alert{type="success"}

examples/2.vite/react/README.md

@@ -16,4 +16,4 @@ defaultValue: src/App.tsx
 ---
 ::
 
-This example demonstrates the simplest way to use Comark with React - use the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically.
+This example demonstrates the simplest way to use Comark with React - use the `Markdown` component and pass it markdown content. The component handles parsing and rendering automatically.

examples/2.vite/svelte/README.md

@@ -19,4 +19,4 @@ defaultValue: src/App.svelte
 ::Browser{src="https://comark-svelte.vercel.app"}
 ::
 
-This example demonstrates the simplest way to use Comark with Svelte - use the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically using Svelte 5's `$state` and `$effect` runes.
+This example demonstrates the simplest way to use Comark with Svelte - use the `Markdown` component and pass it markdown content. The component handles parsing and rendering automatically using Svelte 5's `$state` and `$effect` runes.

examples/2.vite/vue/README.md

@@ -19,4 +19,4 @@ defaultValue: content/posts/comark-syntax.md
 ::Browser{src="https://comark-vue.vercel.app/#/blog/comark-syntax"}
 ::
 
-This example demonstrates the simplest way to use Comark with Vue - use the `h()` render function with the `Comark` component and pass it markdown content. The component handles parsing and rendering automatically.
+This example demonstrates the simplest way to use Comark with Vue - use the `h()` render function with the `Markdown` component and pass it markdown content. The component handles parsing and rendering automatically.

examples/3.plugins/react-vite-math/README.md

@@ -34,12 +34,12 @@ This example demonstrates how to use Comark with LaTeX math formulas in React:
 
 2. Import the math plugin, component, and KaTeX CSS:
    ```tsx
-   import { Comark } from '@comark/react'
+   import { Markdown } from '@comark/react'
    import math, { Math } from '@comark/react/plugins/math'
    import 'katex/dist/katex.min.css'
    ```
 
-3. Pass the plugin and component to `Comark`:
+3. Pass the plugin and component to `Markdown`:
    ```tsx
    <Markdown
      value={content}