diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index cb5b49c..786b18a 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -21,6 +21,12 @@ export default defineConfig({ "https://github.com/vscode-elements/elements-lite/tree/main/docs", }, sidebar: [ + { + label: "Guides", + items: [ + {label: "Getting Started", slug: 'guides/getting-started'} + ] + }, { label: "Components", items: [ diff --git a/docs/src/content/docs/guides/getting-started.md b/docs/src/content/docs/guides/getting-started.md new file mode 100644 index 0000000..891caee --- /dev/null +++ b/docs/src/content/docs/guides/getting-started.md @@ -0,0 +1,27 @@ +--- +title: Getting Started +--- + +VSCode Elements Lite is a simpler, lightweight alternative to [VSCode Elements](https://vscode-elements.github.io). There’s no need to +deal with TypeScript or bundler configurations. In fact, you don’t even need to install a package if +you prefer not to—just copy the code snippet you need. While VSCode Elements Lite doesn’t cover +every case that VSCode Elements does, it’s sufficient for most purposes. You can also use it together with VSCode Elements components. + +## Using the Configurator + +The easiest way to get started is by using the configurator. Set the desired parameters, then copy the generated HTML snippet. +The related CSS is also provided on the configurator page—simply copy the code and add it to your project. + +## Install as npm package + +If you're using a bundler like Webpack or Vite, you can install VSCode Elements Lite as an npm package: + +```bash +npm install @vscode-elements/elements-lite +``` + +Next, import the necessary styles: + +```javascript +import "@vscode-elements/elements-lite/components/button/button.css"; +``` diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index 969c819..7adc7b6 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -1,19 +1,15 @@ --- -title: Welcome to Starlight -description: Get started building your docs site with Starlight. +title: VSCode Elements Lite +description: HTML + CSS snippets for developing screens in the VSCode Webview template: splash hero: - tagline: Congrats on setting up a new Starlight project! + tagline: HTML + CSS snippets for developing screens in the VSCode Webview image: file: ../../assets/logo.svg actions: - - text: Example Guide - link: /guides/example/ + - text: Getting Started + link: /elements-lite/guides/getting-started icon: right-arrow - - text: Read the Starlight docs - link: https://starlight.astro.build - icon: external - variant: minimal --- import { Card, CardGrid } from "@astrojs/starlight/components";