homepage

.contentlayer/.cache/v0.3.4/data-IIEYXV7W.json

@@ -6,8 +6,8 @@
         "description": "Pre-built components to use within the docs.",
         "tagline": "Overview",
         "body": {
-          "raw": "\n<script>\n\timport { Tabs, TabItem, Callout, Step, Steps } from '$lib/components'\n</script>\n\nThe Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using [Svelte](https://svelte.dev), [Tailwind CSS](https://tailwindcss.com), and [shadcn-svelte](https://shadcn-svelte.com).\n\n## Using a component\n\nTo use a component, simply import it from it's respective location and use it in the Markdown file.\n\n```md title=\"content/docs/example.md\"\n---\ntitle: Example\ndescription: An example page.\n---\n\n<script>\n\timport { SomeComponent } from '$lib/components'\n</script>\n\n<SomeComponent>\n\tHello\n</SomeComponent>\n```\n\n## Built-in components\n\nHere's a list of the built-in components you can start using right away. We'll add more components on an as-needed basis and will update this page accordingly.\n\n### Tabs\n\nYou can use the `Tabs` and `TabItem` components to create a tabbed interface. Each `<TabItem>` must contain a `label` prop that will be used as the tab's label.\n\n```svelte title=\"content/docs/example.md\"\n<script>\n\timport { Tabs, TabItem } from \"$lib/components\";\n</script>\n\n<Tabs>\n\t<TabItem label=\"First tab\">This is the first tab's content.</TabItem>\n\t<TabItem label=\"Second tab\">This is the second tab's content.</TabItem>\n</Tabs>\n```\n\nThe above code will render the following:\n\n<Tabs>\n\t<TabItem label=\"First tab\">This is the first tab's content.</TabItem>\n\t<TabItem label=\"Second tab\">This is the second tab's content.</TabItem>\n</Tabs>\n\n### Callouts\n\nCallouts (also known as \"admonitions\") are used to highlight a block of text.\n\nThere are four types of callouts available: `'note'`, `'warning'`, `'danger'`, and `'tip'`.\n\n```svelte title=\"content/docs/example.md\"\n<script>\n\timport { Callout } from \"$lib/components\";\n</script>\n\n<Callout type=\"note\" title=\"Note\">\n\tThis is a note, used to highlight important information or provide additional\n\tcontext. You can use markdown in here as well! Just ensure you include a space\n\tbetween the component and the content in your Markdown file.\n</Callout>\n```\n\nThe above code will render the following:\n\n<Callout type=\"note\" title=\"Note\">\n\n    This is a note, used to highlight important information or provide additional\n    context. You can use Markdown in here as well! Just ensure you include a space between the component and the content in your Markdown file.\n\n</Callout>\n\nHere are the other types of callouts:\n\n<Callout type=\"danger\" title=\"Danger\">\n\nThis is a danger callout.\n\n</Callout>\n\n<Callout type=\"tip\" title=\"Tip\">\n\nThis is a tip callout.\n\n</Callout>\n\n<Callout type=\"warning\" title=\"Warning\">\n\nThis is a warning callout.\n\n```ts\n// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n```\n\n</Callout>\n\n### Steps\n\nSteps are great for showing a list of steps to complete a task. You can use the `<Steps />` and `<Step />` components to create a list of steps in the docs.\n\n```svelte title=\"content/docs/example.md\"\n<script>\n\timport { Steps, Step } from \"$lib/components\";\n</script>\n\n<Steps>\n\t<Step>Install the package</Step>\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t<!-- Code block here -->\n\n\t<Step>Start your engines</Step>\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t<!-- Code block here -->\n</Steps>\n```\n\nThe above code will render the following:\n\n<Steps>\n\n<Step tocIgnore>Install the package</Step>\n\nYou can install the project via `npm` or `pnpm`.\n\n```sh\npnpm install -D myproject\n```\n\n<Step tocIgnore>Start your engines</Step>\n\nYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n```sh\npnpm run dev\n```\n\n</Steps>\n",
-          "html": "<p>The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using <a href=\"https://svelte.dev\">Svelte</a>, <a href=\"https://tailwindcss.com\">Tailwind CSS</a>, and <a href=\"https://shadcn-svelte.com\">shadcn-svelte</a>.</p>\n<h2>Using a component</h2>\n<p>To use a component, simply import it from it's respective location and use it in the Markdown file.</p>\n<pre><code class=\"language-md\">---\ntitle: Example\ndescription: An example page.\n---\n\n&#x3C;script>\n\timport { SomeComponent } from '$lib/components'\n&#x3C;/script>\n\n&#x3C;SomeComponent>\n\tHello\n&#x3C;/SomeComponent>\n</code></pre>\n<h2>Built-in components</h2>\n<p>Here's a list of the built-in components you can start using right away. We'll add more components on an as-needed basis and will update this page accordingly.</p>\n<h3>Tabs</h3>\n<p>You can use the <code>Tabs</code> and <code>TabItem</code> components to create a tabbed interface. Each <code>&#x3C;TabItem></code> must contain a <code>label</code> prop that will be used as the tab's label.</p>\n<pre><code class=\"language-svelte\">&#x3C;script>\n\timport { Tabs, TabItem } from \"$lib/components\";\n&#x3C;/script>\n\n&#x3C;Tabs>\n\t&#x3C;TabItem label=\"First tab\">This is the first tab's content.&#x3C;/TabItem>\n\t&#x3C;TabItem label=\"Second tab\">This is the second tab's content.&#x3C;/TabItem>\n&#x3C;/Tabs>\n</code></pre>\n<p>The above code will render the following:</p>\n<h3>Callouts</h3>\n<p>Callouts (also known as \"admonitions\") are used to highlight a block of text.</p>\n<p>There are four types of callouts available: <code>'note'</code>, <code>'warning'</code>, <code>'danger'</code>, and <code>'tip'</code>.</p>\n<pre><code class=\"language-svelte\">&#x3C;script>\n\timport { Callout } from \"$lib/components\";\n&#x3C;/script>\n\n&#x3C;Callout type=\"note\" title=\"Note\">\n\tThis is a note, used to highlight important information or provide additional\n\tcontext. You can use markdown in here as well! Just ensure you include a space\n\tbetween the component and the content in your Markdown file.\n&#x3C;/Callout>\n</code></pre>\n<p>The above code will render the following:</p>\n<pre><code>This is a note, used to highlight important information or provide additional\ncontext. You can use Markdown in here as well! Just ensure you include a space between the component and the content in your Markdown file.\n</code></pre>\n<p>Here are the other types of callouts:</p>\n<p>This is a danger callout.</p>\n<p>This is a tip callout.</p>\n<p>This is a warning callout.</p>\n<pre><code class=\"language-ts\">// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n</code></pre>\n<h3>Steps</h3>\n<p>Steps are great for showing a list of steps to complete a task. You can use the <code>&#x3C;Steps /></code> and <code>&#x3C;Step /></code> components to create a list of steps in the docs.</p>\n<pre><code class=\"language-svelte\">&#x3C;script>\n\timport { Steps, Step } from \"$lib/components\";\n&#x3C;/script>\n\n&#x3C;Steps>\n\t&#x3C;Step>Install the package&#x3C;/Step>\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t&#x3C;!-- Code block here -->\n\n\t&#x3C;Step>Start your engines&#x3C;/Step>\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t&#x3C;!-- Code block here -->\n&#x3C;/Steps>\n</code></pre>\n<p>The above code will render the following:</p>\n<p>Install the package</p>\n<p>You can install the project via <code>npm</code> or <code>pnpm</code>.</p>\n<pre><code class=\"language-sh\">pnpm install -D myproject\n</code></pre>\n<p>Start your engines</p>\n<p>You can start the project by running <code>npm run dev</code> or <code>pnpm run dev</code>.</p>\n<pre><code class=\"language-sh\">pnpm run dev\n</code></pre>"
+          "raw": "\n<script>\n\timport { Tabs, TabItem, Callout, Step, Steps } from '$lib/components'\n</script>\n\nThe Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using [Svelte](https://svelte.dev), [Tailwind CSS](https://tailwindcss.com), and [shadcn-svelte](https://shadcn-svelte.com).\n\n## Using a component\n\nTo use a component, simply import it from it's respective location and use it in the Markdown file.\n\n```md title=\"content/docs/example.md\"\n---\ntitle: Example\ndescription: An example page.\n---\n\n<script>\n\timport { SomeComponent } from '$lib/components'\n</script>\n\n<SomeComponent>\n\tHello\n</SomeComponent>\n```\n\n## Built-in components\n\nHere's a list of the built-in components you can start using right away. We'll add more components on an as-needed basis and will update this page accordingly.\n\n### Tabs\n\nYou can use the `Tabs` and `TabItem` components to create a tabbed interface. Each `<TabItem>` must contain a `label` prop that will be used as the tab's label.\n\n```svelte title=\"content/docs/example.md\"\n<script>\n\timport { Tabs, TabItem } from \"$lib/components\";\n</script>\n\n<Tabs>\n\t<TabItem label=\"First tab\">This is the first tab's content.</TabItem>\n\t<TabItem label=\"Second tab\">This is the second tab's content.</TabItem>\n</Tabs>\n```\n\nThe above code will render the following:\n\n<Tabs>\n\t<TabItem label=\"First tab\">This is the first tab's content.</TabItem>\n\t<TabItem label=\"Second tab\">This is the second tab's content.</TabItem>\n</Tabs>\n\n### Callouts\n\nCallouts (also known as \"admonitions\") are used to highlight a block of text.\n\nThere are four types of callouts available: `'note'`, `'warning'`, `'danger'`, and `'tip'`.\n\n```svelte title=\"content/docs/example.md\"\n<script>\n\timport { Callout } from \"$lib/components\";\n</script>\n\n<Callout type=\"note\" title=\"Note\">\n\tThis is a note, used to highlight important information or provide additional\n\tcontext. You can use markdown in here as well! Just ensure you include a space\n\tbetween the component and the content in your Markdown file.\n</Callout>\n```\n\nThe above code will render the following:\n\n<Callout type=\"note\" title=\"Note\">\n\n    This is a note, used to highlight important information or provide additional\n    context. You can use Markdown in here as well! Just ensure you include a space between the component and the content in your Markdown file.\n\n</Callout>\n\nHere are the other types of callouts:\n\n<Callout type=\"danger\" title=\"Danger\">\n\nThis is a danger callout.\n\n</Callout>\n\n<Callout type=\"tip\" title=\"Tip\">\n\nThis is a tip callout.\n\n</Callout>\n\n<Callout type=\"warning\" title=\"Warning\">\n\nThis is a warning callout.\n\n```ts\n// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n```\n\n</Callout>\n\n### Steps\n\nSteps are great for showing a list of steps to complete a task. Use the `<Steps />` and `<Step />` components to create a list of steps in the docs.\n\n```svelte title=\"content/docs/example.md\"\n<script>\n\timport { Steps, Step } from \"$lib/components\";\n</script>\n\n<Steps>\n\t<Step>Install the package</Step>\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t<!-- Code block here -->\n\n\t<Step>Start your engines</Step>\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t<!-- Code block here -->\n</Steps>\n```\n\nThe above code will render the following:\n\n<Steps>\n\n<Step tocIgnore>Install the package</Step>\n\nYou can install the project via `npm` or `pnpm`.\n\n```sh\npnpm install -D myproject\n```\n\n<Step tocIgnore>Start your engines</Step>\n\nYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n```sh\npnpm run dev\n```\n\n</Steps>\n",
+          "html": "<p>The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using <a href=\"https://svelte.dev\">Svelte</a>, <a href=\"https://tailwindcss.com\">Tailwind CSS</a>, and <a href=\"https://shadcn-svelte.com\">shadcn-svelte</a>.</p>\n<h2>Using a component</h2>\n<p>To use a component, simply import it from it's respective location and use it in the Markdown file.</p>\n<pre><code class=\"language-md\">---\ntitle: Example\ndescription: An example page.\n---\n\n&#x3C;script>\n\timport { SomeComponent } from '$lib/components'\n&#x3C;/script>\n\n&#x3C;SomeComponent>\n\tHello\n&#x3C;/SomeComponent>\n</code></pre>\n<h2>Built-in components</h2>\n<p>Here's a list of the built-in components you can start using right away. We'll add more components on an as-needed basis and will update this page accordingly.</p>\n<h3>Tabs</h3>\n<p>You can use the <code>Tabs</code> and <code>TabItem</code> components to create a tabbed interface. Each <code>&#x3C;TabItem></code> must contain a <code>label</code> prop that will be used as the tab's label.</p>\n<pre><code class=\"language-svelte\">&#x3C;script>\n\timport { Tabs, TabItem } from \"$lib/components\";\n&#x3C;/script>\n\n&#x3C;Tabs>\n\t&#x3C;TabItem label=\"First tab\">This is the first tab's content.&#x3C;/TabItem>\n\t&#x3C;TabItem label=\"Second tab\">This is the second tab's content.&#x3C;/TabItem>\n&#x3C;/Tabs>\n</code></pre>\n<p>The above code will render the following:</p>\n<h3>Callouts</h3>\n<p>Callouts (also known as \"admonitions\") are used to highlight a block of text.</p>\n<p>There are four types of callouts available: <code>'note'</code>, <code>'warning'</code>, <code>'danger'</code>, and <code>'tip'</code>.</p>\n<pre><code class=\"language-svelte\">&#x3C;script>\n\timport { Callout } from \"$lib/components\";\n&#x3C;/script>\n\n&#x3C;Callout type=\"note\" title=\"Note\">\n\tThis is a note, used to highlight important information or provide additional\n\tcontext. You can use markdown in here as well! Just ensure you include a space\n\tbetween the component and the content in your Markdown file.\n&#x3C;/Callout>\n</code></pre>\n<p>The above code will render the following:</p>\n<pre><code>This is a note, used to highlight important information or provide additional\ncontext. You can use Markdown in here as well! Just ensure you include a space between the component and the content in your Markdown file.\n</code></pre>\n<p>Here are the other types of callouts:</p>\n<p>This is a danger callout.</p>\n<p>This is a tip callout.</p>\n<p>This is a warning callout.</p>\n<pre><code class=\"language-ts\">// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n</code></pre>\n<h3>Steps</h3>\n<p>Steps are great for showing a list of steps to complete a task. Use the <code>&#x3C;Steps /></code> and <code>&#x3C;Step /></code> components to create a list of steps in the docs.</p>\n<pre><code class=\"language-svelte\">&#x3C;script>\n\timport { Steps, Step } from \"$lib/components\";\n&#x3C;/script>\n\n&#x3C;Steps>\n\t&#x3C;Step>Install the package&#x3C;/Step>\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t&#x3C;!-- Code block here -->\n\n\t&#x3C;Step>Start your engines&#x3C;/Step>\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t&#x3C;!-- Code block here -->\n&#x3C;/Steps>\n</code></pre>\n<p>The above code will render the following:</p>\n<p>Install the package</p>\n<p>You can install the project via <code>npm</code> or <code>pnpm</code>.</p>\n<pre><code class=\"language-sh\">pnpm install -D myproject\n</code></pre>\n<p>Start your engines</p>\n<p>You can start the project by running <code>npm run dev</code> or <code>pnpm run dev</code>.</p>\n<pre><code class=\"language-sh\">pnpm run dev\n</code></pre>"
         },
         "_id": "components.md",
         "_raw": {
@@ -23,7 +23,7 @@
         "fileName": "components",
         "suffix": ".md"
       },
-      "documentHash": "1705788552830",
+      "documentHash": "1705788862846",
       "hasWarnings": false,
       "documentTypeName": "Doc"
     },