Docs v2

.gitignore

@@ -1,6 +1,5 @@
 # build output
 dist/
-
 # generated types
 .astro/
 
@@ -13,20 +12,15 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
+
 # environment variables
 .env
 .env.production
 
 # macOS-specific files
 .DS_Store
 
+
 .vscode
 !.vscode/extensions.json
 !.vscode/launch.json
-
-src/data/custom-elements.json
-public/codicon.css
-public/codicon.ttf
-
-# docs-new
-docs-new

README.md

@@ -1,40 +1,41 @@
-# Astro Starter Kit: Basics
+# Starlight Starter Kit: Basics
 
-```sh
-npm create astro@latest -- --template basics
+[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
+
+```
+npm create astro@latest -- --template starlight
 ```
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/withastro/starlight&create_from_path=examples/basics)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fwithastro%2Fstarlight%2Ftree%2Fmain%2Fexamples%2Fbasics&project-name=my-starlight-docs&repository-name=my-starlight-docs)
 
 > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
 
-![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
-
 ## 🚀 Project Structure
 
-Inside of your Astro project, you'll see the following folders and files:
+Inside of your Astro + Starlight project, you'll see the following folders and files:
 
-```text
-/
+```
+.
 ├── public/
-│   └── favicon.svg
 ├── src/
-│   ├── components/
-│   │   └── Card.astro
-│   ├── layouts/
-│   │   └── Layout.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
+│   ├── assets/
+│   ├── content/
+│   │   ├── docs/
+│   │   └── config.ts
+│   └── env.d.ts
+├── astro.config.mjs
+├── package.json
+└── tsconfig.json
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+Images can be added to `src/assets/` and embedded in Markdown with a relative link.
 
-Any static assets, like images, can be placed in the `public/` directory.
+Static assets, like favicons, can be placed in the `public/` directory.
 
 ## 🧞 Commands
 
@@ -51,4 +52,4 @@ All commands are run from the root of the project, from a terminal:
 
 ## 👀 Want to learn more?
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).

astro.config.mjs

@@ -1,21 +1,165 @@
-import {defineConfig} from 'astro/config';
-import rehypeSlug from 'rehype-slug';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import mdx from '@astrojs/mdx';
+// @ts-check
+import { defineConfig } from "astro/config";
+import starlight from "@astrojs/starlight";
+import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
+
+const analytics = `
+(function(window, document, dataLayerName, id) {
+window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
+function stgCreateCookie(a,b,c){var d="";if(c){var e=new Date;e.setTime(e.getTime()+24*c*60*60*1e3),d="; expires="+e.toUTCString();f="; SameSite=Strict"}document.cookie=a+"="+b+d+f+"; path=/"}
+var isStgDebug=(window.location.href.match("stg_debug")||document.cookie.match("stg_debug"))&&!window.location.href.match("stg_disable_debug");stgCreateCookie("stg_debug",isStgDebug?1:"",isStgDebug?14:-1);
+var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
+tags.async=!0,tags.src="https://szoftverhiba.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
+!function(a,n,i){a[n]=a[n]||{};for(var c=0;c<i.length;c++)!function(i){a[n][i]=a[n][i]||{},a[n][i].api=a[n][i].api||function(){var a=[].slice.call(arguments,0);"string"==typeof a[0]&&window[dataLayerName].push({event:n+"."+i+":"+a[0],parameters:[].slice.call(arguments,1)})}}(i[c])}(window,"ppms",["tm","cm"]);
+})(window, document, 'dataLayer', '5f92a4a8-87f5-418f-ac6f-1817837888c3');
+`;
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://vsc-elements.github.io',
-  output: 'static',
-  prefetch: true,
-  integrations: [mdx()],
-  markdown: {
-    shikiConfig: {
-      theme: 'material-theme-lighter',
-    },
-    rehypePlugins: [
-      rehypeSlug,
-      [rehypeAutolinkHeadings, {behavior: 'wrap'}],
-    ],
-  },
+  site: "https://vscode-elements.github.io",
+  integrations: [
+    starlight({
+      title: "VSCode Elements",
+      social: {
+        github: "https://github.com/vscode-elements/elements",
+      },
+      favicon: "/favicon.ico",
+      logo: {
+        src: "/src/assets/logo.svg",
+      },
+      head: [
+        {
+          tag: "meta",
+          attrs: {
+            name: "google-site-verification",
+            content: "xQEXVaL5aIe6GfMlfVDFzRqf0f4_XgL4son-Lk9RPQM"
+          }
+        },
+        {
+          tag: "script",
+          attrs: {
+            type: "text/javascript",
+          },
+          content: analytics,
+        },
+      ],
+      editLink: {
+        baseUrl:
+          "https://github.com/vscode-elements/vscode-elements.github.io/edit/main/",
+      },
+      expressiveCode: {
+        // @ts-ignore
+        plugins: [pluginLineNumbers()],
+      },
+      sidebar: [
+        {
+          label: "Guides",
+          items: [
+            // Each item here is one entry in the navigation menu.
+            { label: "Getting Started", slug: "guides/getting-started" },
+            { label: "Working with forms", slug: "guides/working-with-forms" },
+            {
+              label: "Framework integrations",
+              items: [
+                { label: "React", slug: "guides/framework-integrations/react" },
+                { label: "Vue", slug: "guides/framework-integrations/vue" },
+              ],
+            },
+          ],
+          collapsed: true,
+        },
+        {
+          label: "Components",
+          items: [
+            { label: "Badge", slug: "components/badge" },
+            { label: "Button", slug: "components/button" },
+            { label: "Checkbox", link: "components/checkbox" },
+            { label: "CheckboxGroup", link: "components/checkbox-group" },
+            { label: "Collapsible", link: "components/collapsible" },
+            { label: "ContextMenu", link: "components/context-menu" },
+            {
+              label: "ContextMenuItem",
+              link: "components/context-menu-item",
+            },
+            { label: "Divider", link: "components/divider" },
+            { label: "FormContainer", link: "components/form-container" },
+            { label: "FormGroup", link: "components/form-group" },
+            { label: "FormHelper", link: "components/form-helper" },
+            { label: "Icon", link: "components/icon" },
+            { label: "Label", link: "components/label" },
+            { label: "MultiSelect", link: "components/multi-select" },
+            { label: "Option", link: "components/option" },
+            { label: "ProgressRing", link: "components/progress-ring" },
+            { label: "Radio", link: "components/radio" },
+            { label: "RadioGroup", link: "components/radio-group" },
+            { label: "Scrollable", link: "components/scrollable" },
+            { label: "SingleSelect", link: "components/single-select" },
+            { label: "SplitLayout", link: "components/split-layout" },
+            { label: "TabHeader", link: "components/tab-header" },
+            { label: "TabPanel", link: "components/tab-panel" },
+            { label: "Table", link: "components/table" },
+            { label: "TableBody", link: "components/table-body" },
+            { label: "TableCell", link: "components/table-cell" },
+            { label: "TableHeader", link: "components/table-header" },
+            { label: "TableHeaderCell", link: "components/table-header-cell" },
+            { label: "TableRow", link: "components/table-row" },
+            { label: "Tabs", link: "components/tabs" },
+            { label: "Textarea", link: "components/textarea" },
+            { label: "Textfield", link: "components/textfield" },
+            { label: "Tree", link: "components/tree" },
+          ],
+          collapsed: true,
+        },
+        {
+          label: "API",
+          items: [
+            { label: "Badge", link: "components/badge/api" },
+            { label: "Button", link: "components/button/api" },
+            { label: "Checkbox", link: "components/checkbox/api" },
+            { label: "CheckboxGroup", link: "components/checkbox-group/api" },
+            { label: "Collapsible", link: "components/collapsible/api" },
+            { label: "ContextMenu", link: "components/context-menu/api" },
+            {
+              label: "ContextMenuItem",
+              link: "components/context-menu-item/api",
+            },
+            { label: "Divider", link: "components/divider/api" },
+            { label: "FormContainer", link: "components/form-container/api" },
+            { label: "FormGroup", link: "components/form-group/api" },
+            { label: "FormHelper", link: "components/form-helper/api" },
+            { label: "Icon", link: "components/icon/api" },
+            { label: "Label", link: "components/label/api" },
+            { label: "MultiSelect", link: "components/multi-select/api" },
+            { label: "Option", link: "components/option/api" },
+            { label: "ProgressRing", link: "components/progress-ring/api" },
+            { label: "Radio", link: "components/radio/api" },
+            { label: "RadioGroup", link: "components/radio-group/api" },
+            { label: "Scrollable", link: "components/scrollable/api" },
+            { label: "SingleSelect", link: "components/single-select/api" },
+            { label: "SplitLayout", link: "components/split-layout/api" },
+            { label: "TabHeader", link: "components/tab-header/api" },
+            { label: "TabPanel", link: "components/tab-panel/api" },
+            { label: "Table", link: "components/table/api" },
+            { label: "TableBody", link: "components/table-body/api" },
+            { label: "TableCell", link: "components/table-cell/api" },
+            { label: "TableHeader", link: "components/table-header/api" },
+            {
+              label: "TableHeaderCell",
+              link: "components/table-header-cell/api",
+            },
+            { label: "TableRow", link: "components/table-row/api" },
+            { label: "Tabs", link: "components/tabs/api" },
+            { label: "Textarea", link: "components/textarea/api" },
+            { label: "Textfield", link: "components/textfield/api" },
+            { label: "Tree", link: "components/tree/api" },
+          ],
+          collapsed: true,
+        },
+      ],
+      customCss: [
+        "./src/styles/restore-defaults.css",
+        "./src/styles/custom.css",
+      ],
+    }),
+  ],
 });