From ba41d3f5fdac78c68958dde37baa8a17d3fa009b Mon Sep 17 00:00:00 2001 From: Hunter Johnston Date: Sat, 20 Jan 2024 17:58:01 -0500 Subject: [PATCH] homepage --- .../.cache/v0.3.4/data-IIEYXV7W.json | 6 +-- .contentlayer/generated/Doc/_index.json | 4 +- .../generated/Doc/components.md.json | 4 +- content/components.md | 2 +- src/lib/components/feature-card.svelte | 25 +++++++++++ .../components/layout/footer/footer.svelte | 4 +- .../components/layout/navbar/navbar.svelte | 2 +- .../components/ui/card/card-content.svelte | 13 ++++++ .../ui/card/card-description.svelte | 13 ++++++ src/lib/components/ui/card/card-footer.svelte | 13 ++++++ src/lib/components/ui/card/card-header.svelte | 13 ++++++ src/lib/components/ui/card/card-title.svelte | 21 +++++++++ src/lib/components/ui/card/card.svelte | 16 +++++++ src/lib/components/ui/card/index.ts | 24 ++++++++++ src/routes/+layout.svelte | 2 + src/routes/+page.svelte | 45 ++++++++++++++++--- src/routes/docs/+layout.svelte | 2 - tailwind.config.js | 9 ++-- 18 files changed, 194 insertions(+), 24 deletions(-) create mode 100644 src/lib/components/feature-card.svelte create mode 100644 src/lib/components/ui/card/card-content.svelte create mode 100644 src/lib/components/ui/card/card-description.svelte create mode 100644 src/lib/components/ui/card/card-footer.svelte create mode 100644 src/lib/components/ui/card/card-header.svelte create mode 100644 src/lib/components/ui/card/card-title.svelte create mode 100644 src/lib/components/ui/card/card.svelte create mode 100644 src/lib/components/ui/card/index.ts diff --git a/.contentlayer/.cache/v0.3.4/data-IIEYXV7W.json b/.contentlayer/.cache/v0.3.4/data-IIEYXV7W.json index 94e910a..3253ece 100644 --- a/.contentlayer/.cache/v0.3.4/data-IIEYXV7W.json +++ b/.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\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\n\n\n\tHello\n\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 `` must contain a `label` prop that will be used as the tab's label.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\n```\n\nThe above code will render the following:\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\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\n\n\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\n```\n\nThe above code will render the following:\n\n\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\n\nHere are the other types of callouts:\n\n\n\nThis is a danger callout.\n\n\n\n\n\nThis is a tip callout.\n\n\n\n\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\n\n### Steps\n\nSteps are great for showing a list of steps to complete a task. You can use the `` and `` components to create a list of steps in the docs.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tInstall the package\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t\n\n\tStart your engines\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t\n\n```\n\nThe above code will render the following:\n\n\n\nInstall the package\n\nYou can install the project via `npm` or `pnpm`.\n\n```sh\npnpm install -D myproject\n```\n\nStart your engines\n\nYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n```sh\npnpm run dev\n```\n\n\n", - "html": "

The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using Svelte, Tailwind CSS, and shadcn-svelte.

\n

Using a component

\n

To use a component, simply import it from it's respective location and use it in the Markdown file.

\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

Built-in components

\n

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.

\n

Tabs

\n

You 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
<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

The above code will render the following:

\n

Callouts

\n

Callouts (also known as \"admonitions\") are used to highlight a block of text.

\n

There are four types of callouts available: 'note', 'warning', 'danger', and 'tip'.

\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

The above code will render the following:

\n
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
\n

Here are the other types of callouts:

\n

This is a danger callout.

\n

This is a tip callout.

\n

This is a warning callout.

\n
// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n
\n

Steps

\n

Steps 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
<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

The above code will render the following:

\n

Install the package

\n

You can install the project via npm or pnpm.

\n
pnpm install -D myproject\n
\n

Start your engines

\n

You can start the project by running npm run dev or pnpm run dev.

\n
pnpm run dev\n
" + "raw": "\n\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\n\n\n\tHello\n\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 `` must contain a `label` prop that will be used as the tab's label.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\n```\n\nThe above code will render the following:\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\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\n\n\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\n```\n\nThe above code will render the following:\n\n\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\n\nHere are the other types of callouts:\n\n\n\nThis is a danger callout.\n\n\n\n\n\nThis is a tip callout.\n\n\n\n\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\n\n### Steps\n\nSteps are great for showing a list of steps to complete a task. Use the `` and `` components to create a list of steps in the docs.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tInstall the package\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t\n\n\tStart your engines\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t\n\n```\n\nThe above code will render the following:\n\n\n\nInstall the package\n\nYou can install the project via `npm` or `pnpm`.\n\n```sh\npnpm install -D myproject\n```\n\nStart your engines\n\nYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n```sh\npnpm run dev\n```\n\n\n", + "html": "

The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using Svelte, Tailwind CSS, and shadcn-svelte.

\n

Using a component

\n

To use a component, simply import it from it's respective location and use it in the Markdown file.

\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

Built-in components

\n

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.

\n

Tabs

\n

You 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
<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

The above code will render the following:

\n

Callouts

\n

Callouts (also known as \"admonitions\") are used to highlight a block of text.

\n

There are four types of callouts available: 'note', 'warning', 'danger', and 'tip'.

\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

The above code will render the following:

\n
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
\n

Here are the other types of callouts:

\n

This is a danger callout.

\n

This is a tip callout.

\n

This is a warning callout.

\n
// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n
\n

Steps

\n

Steps 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
<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

The above code will render the following:

\n

Install the package

\n

You can install the project via npm or pnpm.

\n
pnpm install -D myproject\n
\n

Start your engines

\n

You can start the project by running npm run dev or pnpm run dev.

\n
pnpm run dev\n
" }, "_id": "components.md", "_raw": { @@ -23,7 +23,7 @@ "fileName": "components", "suffix": ".md" }, - "documentHash": "1705788552830", + "documentHash": "1705788862846", "hasWarnings": false, "documentTypeName": "Doc" }, diff --git a/.contentlayer/generated/Doc/_index.json b/.contentlayer/generated/Doc/_index.json index d20dd0f..ece4dfc 100644 --- a/.contentlayer/generated/Doc/_index.json +++ b/.contentlayer/generated/Doc/_index.json @@ -4,8 +4,8 @@ "description": "Pre-built components to use within the docs.", "tagline": "Overview", "body": { - "raw": "\n\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\n\n\n\tHello\n\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 `` must contain a `label` prop that will be used as the tab's label.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\n```\n\nThe above code will render the following:\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\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\n\n\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\n```\n\nThe above code will render the following:\n\n\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\n\nHere are the other types of callouts:\n\n\n\nThis is a danger callout.\n\n\n\n\n\nThis is a tip callout.\n\n\n\n\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\n\n### Steps\n\nSteps are great for showing a list of steps to complete a task. You can use the `` and `` components to create a list of steps in the docs.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tInstall the package\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t\n\n\tStart your engines\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t\n\n```\n\nThe above code will render the following:\n\n\n\nInstall the package\n\nYou can install the project via `npm` or `pnpm`.\n\n```sh\npnpm install -D myproject\n```\n\nStart your engines\n\nYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n```sh\npnpm run dev\n```\n\n\n", - "html": "

The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using Svelte, Tailwind CSS, and shadcn-svelte.

\n

Using a component

\n

To use a component, simply import it from it's respective location and use it in the Markdown file.

\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

Built-in components

\n

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.

\n

Tabs

\n

You 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
<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

The above code will render the following:

\n

Callouts

\n

Callouts (also known as \"admonitions\") are used to highlight a block of text.

\n

There are four types of callouts available: 'note', 'warning', 'danger', and 'tip'.

\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

The above code will render the following:

\n
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
\n

Here are the other types of callouts:

\n

This is a danger callout.

\n

This is a tip callout.

\n

This is a warning callout.

\n
// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n
\n

Steps

\n

Steps 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
<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

The above code will render the following:

\n

Install the package

\n

You can install the project via npm or pnpm.

\n
pnpm install -D myproject\n
\n

Start your engines

\n

You can start the project by running npm run dev or pnpm run dev.

\n
pnpm run dev\n
" + "raw": "\n\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\n\n\n\tHello\n\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 `` must contain a `label` prop that will be used as the tab's label.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\n```\n\nThe above code will render the following:\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\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\n\n\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\n```\n\nThe above code will render the following:\n\n\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\n\nHere are the other types of callouts:\n\n\n\nThis is a danger callout.\n\n\n\n\n\nThis is a tip callout.\n\n\n\n\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\n\n### Steps\n\nSteps are great for showing a list of steps to complete a task. Use the `` and `` components to create a list of steps in the docs.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tInstall the package\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t\n\n\tStart your engines\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t\n\n```\n\nThe above code will render the following:\n\n\n\nInstall the package\n\nYou can install the project via `npm` or `pnpm`.\n\n```sh\npnpm install -D myproject\n```\n\nStart your engines\n\nYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n```sh\npnpm run dev\n```\n\n\n", + "html": "

The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using Svelte, Tailwind CSS, and shadcn-svelte.

\n

Using a component

\n

To use a component, simply import it from it's respective location and use it in the Markdown file.

\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

Built-in components

\n

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.

\n

Tabs

\n

You 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
<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

The above code will render the following:

\n

Callouts

\n

Callouts (also known as \"admonitions\") are used to highlight a block of text.

\n

There are four types of callouts available: 'note', 'warning', 'danger', and 'tip'.

\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

The above code will render the following:

\n
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
\n

Here are the other types of callouts:

\n

This is a danger callout.

\n

This is a tip callout.

\n

This is a warning callout.

\n
// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n
\n

Steps

\n

Steps 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
<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

The above code will render the following:

\n

Install the package

\n

You can install the project via npm or pnpm.

\n
pnpm install -D myproject\n
\n

Start your engines

\n

You can start the project by running npm run dev or pnpm run dev.

\n
pnpm run dev\n
" }, "_id": "components.md", "_raw": { diff --git a/.contentlayer/generated/Doc/components.md.json b/.contentlayer/generated/Doc/components.md.json index 3313a95..ebef263 100644 --- a/.contentlayer/generated/Doc/components.md.json +++ b/.contentlayer/generated/Doc/components.md.json @@ -3,8 +3,8 @@ "description": "Pre-built components to use within the docs.", "tagline": "Overview", "body": { - "raw": "\n\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\n\n\n\tHello\n\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 `` must contain a `label` prop that will be used as the tab's label.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\n```\n\nThe above code will render the following:\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\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\n\n\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\n```\n\nThe above code will render the following:\n\n\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\n\nHere are the other types of callouts:\n\n\n\nThis is a danger callout.\n\n\n\n\n\nThis is a tip callout.\n\n\n\n\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\n\n### Steps\n\nSteps are great for showing a list of steps to complete a task. You can use the `` and `` components to create a list of steps in the docs.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tInstall the package\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t\n\n\tStart your engines\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t\n\n```\n\nThe above code will render the following:\n\n\n\nInstall the package\n\nYou can install the project via `npm` or `pnpm`.\n\n```sh\npnpm install -D myproject\n```\n\nStart your engines\n\nYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n```sh\npnpm run dev\n```\n\n\n", - "html": "

The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using Svelte, Tailwind CSS, and shadcn-svelte.

\n

Using a component

\n

To use a component, simply import it from it's respective location and use it in the Markdown file.

\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

Built-in components

\n

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.

\n

Tabs

\n

You 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
<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

The above code will render the following:

\n

Callouts

\n

Callouts (also known as \"admonitions\") are used to highlight a block of text.

\n

There are four types of callouts available: 'note', 'warning', 'danger', and 'tip'.

\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

The above code will render the following:

\n
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
\n

Here are the other types of callouts:

\n

This is a danger callout.

\n

This is a tip callout.

\n

This is a warning callout.

\n
// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n
\n

Steps

\n

Steps 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
<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

The above code will render the following:

\n

Install the package

\n

You can install the project via npm or pnpm.

\n
pnpm install -D myproject\n
\n

Start your engines

\n

You can start the project by running npm run dev or pnpm run dev.

\n
pnpm run dev\n
" + "raw": "\n\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\n\n\n\tHello\n\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 `` must contain a `label` prop that will be used as the tab's label.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\n```\n\nThe above code will render the following:\n\n\n\tThis is the first tab's content.\n\tThis is the second tab's content.\n\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\n\n\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\n```\n\nThe above code will render the following:\n\n\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\n\nHere are the other types of callouts:\n\n\n\nThis is a danger callout.\n\n\n\n\n\nThis is a tip callout.\n\n\n\n\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\n\n### Steps\n\nSteps are great for showing a list of steps to complete a task. Use the `` and `` components to create a list of steps in the docs.\n\n```svelte title=\"content/docs/example.md\"\n\n\n\n\tInstall the package\n\n\tYou can install the project via `npm` or `pnpm`.\n\n\t\n\n\tStart your engines\n\n\tYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n\t\n\n```\n\nThe above code will render the following:\n\n\n\nInstall the package\n\nYou can install the project via `npm` or `pnpm`.\n\n```sh\npnpm install -D myproject\n```\n\nStart your engines\n\nYou can start the project by running `npm run dev` or `pnpm run dev`.\n\n```sh\npnpm run dev\n```\n\n\n", + "html": "

The Svecosystem starter template ships with a few pre-built components that you can use within the docs. These components are built using Svelte, Tailwind CSS, and shadcn-svelte.

\n

Using a component

\n

To use a component, simply import it from it's respective location and use it in the Markdown file.

\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

Built-in components

\n

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.

\n

Tabs

\n

You 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
<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

The above code will render the following:

\n

Callouts

\n

Callouts (also known as \"admonitions\") are used to highlight a block of text.

\n

There are four types of callouts available: 'note', 'warning', 'danger', and 'tip'.

\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

The above code will render the following:

\n
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
\n

Here are the other types of callouts:

\n

This is a danger callout.

\n

This is a tip callout.

\n

This is a warning callout.

\n
// This is a code block within a callout.\n\nconsole.log(\"Hello, world!\");\n
\n

Steps

\n

Steps 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
<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

The above code will render the following:

\n

Install the package

\n

You can install the project via npm or pnpm.

\n
pnpm install -D myproject\n
\n

Start your engines

\n

You can start the project by running npm run dev or pnpm run dev.

\n
pnpm run dev\n
" }, "_id": "components.md", "_raw": { diff --git a/content/components.md b/content/components.md index 182de27..fb44e2b 100644 --- a/content/components.md +++ b/content/components.md @@ -110,7 +110,7 @@ console.log("Hello, world!"); ### Steps -Steps are great for showing a list of steps to complete a task. You can use the `` and `` components to create a list of steps in the docs. +Steps are great for showing a list of steps to complete a task. Use the `` and `` components to create a list of steps in the docs. ```svelte title="content/docs/example.md" + + +
+ +
+ + {title} + +

+ +

+ diff --git a/src/lib/components/layout/footer/footer.svelte b/src/lib/components/layout/footer/footer.svelte index 8c11b9c..8024771 100644 --- a/src/lib/components/layout/footer/footer.svelte +++ b/src/lib/components/layout/footer/footer.svelte @@ -6,9 +6,7 @@