Skip to content

Commit 59b9b4c

Browse files
authored
Docs v2 (#9)
* Setup Starlight * Add sample component page * API pages wip * wip * Api docs wip * wip * wip * wip * Add examples * Add old content * wip * Migrate Badge page * Migrate Button page * Show line numbers in code examples * Make demo component backward compatible * Migrate old docs * wip * Fix ts errors * Add missing icons * wip * wip * Upgrade Playground * Add favicon * Add logo and customized theme colors * wip * Use built-in markdown feature instead of custom one * Add version info * Add form examples page * React instructions * Finalize React integration docs * Replace the old site * Remove unused asset * Upgrade Elements * Add wip message * Add piwik tracking code * Upgrade Elements * Add reusable markdown section * Add icons info block * Add icons info block to the relevant pages * Remove the duplicated block * Add google site verification
1 parent ef20ad0 commit 59b9b4c

File tree

179 files changed

+8670
-11685
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

179 files changed

+8670
-11685
lines changed

.gitignore

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
# build output
22
dist/
3-
43
# generated types
54
.astro/
65

@@ -13,20 +12,15 @@ yarn-debug.log*
1312
yarn-error.log*
1413
pnpm-debug.log*
1514

15+
1616
# environment variables
1717
.env
1818
.env.production
1919

2020
# macOS-specific files
2121
.DS_Store
2222

23+
2324
.vscode
2425
!.vscode/extensions.json
2526
!.vscode/launch.json
26-
27-
src/data/custom-elements.json
28-
public/codicon.css
29-
public/codicon.ttf
30-
31-
# docs-new
32-
docs-new

README.md

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
1-
# Astro Starter Kit: Basics
1+
# Starlight Starter Kit: Basics
22

3-
```sh
4-
npm create astro@latest -- --template basics
3+
[![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
4+
5+
```
6+
npm create astro@latest -- --template starlight
57
```
68

7-
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
8-
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
9-
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
9+
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/starlight/tree/main/examples/basics)
10+
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/starlight/tree/main/examples/basics)
11+
[![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)
12+
[![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)
1013

1114
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
1215
13-
![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
14-
1516
## 🚀 Project Structure
1617

17-
Inside of your Astro project, you'll see the following folders and files:
18+
Inside of your Astro + Starlight project, you'll see the following folders and files:
1819

19-
```text
20-
/
20+
```
21+
.
2122
├── public/
22-
│ └── favicon.svg
2323
├── src/
24-
│ ├── components/
25-
│ │ └── Card.astro
26-
│ ├── layouts/
27-
│ │ └── Layout.astro
28-
│ └── pages/
29-
│ └── index.astro
30-
└── package.json
24+
│ ├── assets/
25+
│ ├── content/
26+
│ │ ├── docs/
27+
│ │ └── config.ts
28+
│ └── env.d.ts
29+
├── astro.config.mjs
30+
├── package.json
31+
└── tsconfig.json
3132
```
3233

33-
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
34+
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.
3435

35-
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
36+
Images can be added to `src/assets/` and embedded in Markdown with a relative link.
3637

37-
Any static assets, like images, can be placed in the `public/` directory.
38+
Static assets, like favicons, can be placed in the `public/` directory.
3839

3940
## 🧞 Commands
4041

@@ -51,4 +52,4 @@ All commands are run from the root of the project, from a terminal:
5152

5253
## 👀 Want to learn more?
5354

54-
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
55+
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

Lines changed: 161 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,165 @@
1-
import {defineConfig} from 'astro/config';
2-
import rehypeSlug from 'rehype-slug';
3-
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
4-
import mdx from '@astrojs/mdx';
1+
// @ts-check
2+
import { defineConfig } from "astro/config";
3+
import starlight from "@astrojs/starlight";
4+
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
5+
6+
const analytics = `
7+
(function(window, document, dataLayerName, id) {
8+
window[dataLayerName]=window[dataLayerName]||[],window[dataLayerName].push({start:(new Date).getTime(),event:"stg.start"});var scripts=document.getElementsByTagName('script')[0],tags=document.createElement('script');
9+
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=/"}
10+
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);
11+
var qP=[];dataLayerName!=="dataLayer"&&qP.push("data_layer_name="+dataLayerName),isStgDebug&&qP.push("stg_debug");var qPString=qP.length>0?("?"+qP.join("&")):"";
12+
tags.async=!0,tags.src="https://szoftverhiba.containers.piwik.pro/"+id+".js"+qPString,scripts.parentNode.insertBefore(tags,scripts);
13+
!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"]);
14+
})(window, document, 'dataLayer', '5f92a4a8-87f5-418f-ac6f-1817837888c3');
15+
`;
516

617
// https://astro.build/config
718
export default defineConfig({
8-
site: 'https://vsc-elements.github.io',
9-
output: 'static',
10-
prefetch: true,
11-
integrations: [mdx()],
12-
markdown: {
13-
shikiConfig: {
14-
theme: 'material-theme-lighter',
15-
},
16-
rehypePlugins: [
17-
rehypeSlug,
18-
[rehypeAutolinkHeadings, {behavior: 'wrap'}],
19-
],
20-
},
19+
site: "https://vscode-elements.github.io",
20+
integrations: [
21+
starlight({
22+
title: "VSCode Elements",
23+
social: {
24+
github: "https://github.com/vscode-elements/elements",
25+
},
26+
favicon: "/favicon.ico",
27+
logo: {
28+
src: "/src/assets/logo.svg",
29+
},
30+
head: [
31+
{
32+
tag: "meta",
33+
attrs: {
34+
name: "google-site-verification",
35+
content: "xQEXVaL5aIe6GfMlfVDFzRqf0f4_XgL4son-Lk9RPQM"
36+
}
37+
},
38+
{
39+
tag: "script",
40+
attrs: {
41+
type: "text/javascript",
42+
},
43+
content: analytics,
44+
},
45+
],
46+
editLink: {
47+
baseUrl:
48+
"https://github.com/vscode-elements/vscode-elements.github.io/edit/main/",
49+
},
50+
expressiveCode: {
51+
// @ts-ignore
52+
plugins: [pluginLineNumbers()],
53+
},
54+
sidebar: [
55+
{
56+
label: "Guides",
57+
items: [
58+
// Each item here is one entry in the navigation menu.
59+
{ label: "Getting Started", slug: "guides/getting-started" },
60+
{ label: "Working with forms", slug: "guides/working-with-forms" },
61+
{
62+
label: "Framework integrations",
63+
items: [
64+
{ label: "React", slug: "guides/framework-integrations/react" },
65+
{ label: "Vue", slug: "guides/framework-integrations/vue" },
66+
],
67+
},
68+
],
69+
collapsed: true,
70+
},
71+
{
72+
label: "Components",
73+
items: [
74+
{ label: "Badge", slug: "components/badge" },
75+
{ label: "Button", slug: "components/button" },
76+
{ label: "Checkbox", link: "components/checkbox" },
77+
{ label: "CheckboxGroup", link: "components/checkbox-group" },
78+
{ label: "Collapsible", link: "components/collapsible" },
79+
{ label: "ContextMenu", link: "components/context-menu" },
80+
{
81+
label: "ContextMenuItem",
82+
link: "components/context-menu-item",
83+
},
84+
{ label: "Divider", link: "components/divider" },
85+
{ label: "FormContainer", link: "components/form-container" },
86+
{ label: "FormGroup", link: "components/form-group" },
87+
{ label: "FormHelper", link: "components/form-helper" },
88+
{ label: "Icon", link: "components/icon" },
89+
{ label: "Label", link: "components/label" },
90+
{ label: "MultiSelect", link: "components/multi-select" },
91+
{ label: "Option", link: "components/option" },
92+
{ label: "ProgressRing", link: "components/progress-ring" },
93+
{ label: "Radio", link: "components/radio" },
94+
{ label: "RadioGroup", link: "components/radio-group" },
95+
{ label: "Scrollable", link: "components/scrollable" },
96+
{ label: "SingleSelect", link: "components/single-select" },
97+
{ label: "SplitLayout", link: "components/split-layout" },
98+
{ label: "TabHeader", link: "components/tab-header" },
99+
{ label: "TabPanel", link: "components/tab-panel" },
100+
{ label: "Table", link: "components/table" },
101+
{ label: "TableBody", link: "components/table-body" },
102+
{ label: "TableCell", link: "components/table-cell" },
103+
{ label: "TableHeader", link: "components/table-header" },
104+
{ label: "TableHeaderCell", link: "components/table-header-cell" },
105+
{ label: "TableRow", link: "components/table-row" },
106+
{ label: "Tabs", link: "components/tabs" },
107+
{ label: "Textarea", link: "components/textarea" },
108+
{ label: "Textfield", link: "components/textfield" },
109+
{ label: "Tree", link: "components/tree" },
110+
],
111+
collapsed: true,
112+
},
113+
{
114+
label: "API",
115+
items: [
116+
{ label: "Badge", link: "components/badge/api" },
117+
{ label: "Button", link: "components/button/api" },
118+
{ label: "Checkbox", link: "components/checkbox/api" },
119+
{ label: "CheckboxGroup", link: "components/checkbox-group/api" },
120+
{ label: "Collapsible", link: "components/collapsible/api" },
121+
{ label: "ContextMenu", link: "components/context-menu/api" },
122+
{
123+
label: "ContextMenuItem",
124+
link: "components/context-menu-item/api",
125+
},
126+
{ label: "Divider", link: "components/divider/api" },
127+
{ label: "FormContainer", link: "components/form-container/api" },
128+
{ label: "FormGroup", link: "components/form-group/api" },
129+
{ label: "FormHelper", link: "components/form-helper/api" },
130+
{ label: "Icon", link: "components/icon/api" },
131+
{ label: "Label", link: "components/label/api" },
132+
{ label: "MultiSelect", link: "components/multi-select/api" },
133+
{ label: "Option", link: "components/option/api" },
134+
{ label: "ProgressRing", link: "components/progress-ring/api" },
135+
{ label: "Radio", link: "components/radio/api" },
136+
{ label: "RadioGroup", link: "components/radio-group/api" },
137+
{ label: "Scrollable", link: "components/scrollable/api" },
138+
{ label: "SingleSelect", link: "components/single-select/api" },
139+
{ label: "SplitLayout", link: "components/split-layout/api" },
140+
{ label: "TabHeader", link: "components/tab-header/api" },
141+
{ label: "TabPanel", link: "components/tab-panel/api" },
142+
{ label: "Table", link: "components/table/api" },
143+
{ label: "TableBody", link: "components/table-body/api" },
144+
{ label: "TableCell", link: "components/table-cell/api" },
145+
{ label: "TableHeader", link: "components/table-header/api" },
146+
{
147+
label: "TableHeaderCell",
148+
link: "components/table-header-cell/api",
149+
},
150+
{ label: "TableRow", link: "components/table-row/api" },
151+
{ label: "Tabs", link: "components/tabs/api" },
152+
{ label: "Textarea", link: "components/textarea/api" },
153+
{ label: "Textfield", link: "components/textfield/api" },
154+
{ label: "Tree", link: "components/tree/api" },
155+
],
156+
collapsed: true,
157+
},
158+
],
159+
customCss: [
160+
"./src/styles/restore-defaults.css",
161+
"./src/styles/custom.css",
162+
],
163+
}),
164+
],
21165
});

0 commit comments

Comments
 (0)