---
import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro"
import YAMLEditor from "astro-code-editor/YAMLEditor.astro";
const mySchema = "/schemas/my-schema.yaml";

import fs from "fs";

const initialValue = fs.readFileSync("src/vocab_list.yaml", "utf8");

---

<StarlightPage frontmatter={{ title: 'Edit Vocabulary YAML', tableOfContents: false, prev: false }}>
    <YAMLEditor
      yaml-editor
      schemaUrlRef={mySchema}
      value={initialValue}
      extractMarkdownFrontmatter
    />
</StarlightPage>

<style>
    :global(div.sl-container) {
        margin-inline: 0 !important;
    }

    :global([yaml-editor]) {
        width: calc(100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x));
    }
</style>