---
// Component Imports
import { Markdown } from 'astro/components';
import Layout from '../layouts/main.astro';
import ReactCounter from '../components/ReactCounter.jsx';
import PreactCounter from '../components/PreactCounter.tsx';
import VueCounter from '../components/VueCounter.vue';
import SvelteCounter from '../components/SvelteCounter.svelte';

// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.
const title = 'Astro Markdown';
const variable = 'content';
const items = ['A', 'B', 'C'];

// Full Astro Component Syntax:
// https://docs.astro.build/core-concepts/astro-components/
---
<Layout content={{ title }}>
  <Markdown>
    # Introducing {title}

    **Astro Markdown** brings native Markdown support to HTML!

    > It's inspired by [`MDX`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark).

    The best part? It comes with all the Astro features you expect.

    [Other example](./other)

    ## Embed framework components

    <ReactCounter client:visible />
    <PreactCounter client:visible />
    <VueCounter client:visible />
    <SvelteCounter client:visible />

    ## Use Expressions

    You can use any {variable} in scope and use JavaScript for templating ({items.join(', ')})

    ## Oh yeah...

    <ReactCounter client:visible>
      🤯 It's also _recursive_!

      ### Markdown can be embedded in any child component
    </ReactCounter>

    ## Code

    Should work!

    ```js
    import Something from './another';

    const thing = new Something();
    ```

  </Markdown>
</Layout>