Repository files navigation

This is the main Vidstack site and docs hosted atvidstack.io. The site is built withAstro, see their docs to get familiar with the framework.

1. InstallPNPM.
2. Clone repository:git clone git@github.com:vidstack/site.git vidstack-site --depth=1
3. Change directories and install dependencies:cd vidstack-site && pnpm i
4. Run development server:npm run dev

All documentation files can be found atsrc/content/docs. They're writtenusingMDX which is automatically supported by Astro.

All pages that should be displayed in the docs sidebar need to be added tothedocs sidebar items file.

You can filter content by framework by adding a special subdirectory (wc/ orreact/) at any pathinsidesrc/content/docs. For example:

• src/content/docs/api/page.mdx: This page will load when either the current JS library selection isWeb Components or React and available at the URL/docs/api/page and/docs/wc/api/page.

• src/content/docs/api/wc/page.mdx: This page will load if the current JS library selection is"Web Components" and available at the URL/docs/wc/api/page.

• src/content/docs/api/react/page.mdx: This page will load if the current JS library selection is"React" and available at the URL/docs/api/page.

The following directives are included to help with writing docs in MDX files:

:::infoThis is a helpful info callout! The following callout types are supported: note, info, tip,warning, danger, experimental.::::::yesTell the user they should do this!::::::noTell the user they should_not_ do this!:::

All code snippets can be found atsrc/snippets. Vidstack supportslight/dark code themes and multiple frameworks with more to come, hence writing multiple code fencesin a file won't work as pages will bloat. Therefore, lazy loaded code snippets are used which we'vedocumented how to create and use below.

The relative path fromsrc/snippets without the file extension is the snippet ID. For example,src/snippets/docs/main.ts has the snippet IDdocs/main. The ID can be used to lazy loadthe snippet via the::code directive in an MDX file like so:

// Lazy load code snippet at`src/snippets/docs/main.ts`::code[docs/main]// Accepts following options::code[docs/main]{title="Main Page"numbers=truecopy=trueflat=truehighlights="1-3,5-8"}

You will need to provide the file extension if there are two snippets with the same name:

::code[docs/main.ts]::code[docs/main.css]

The snippet ID can be relative to the current URL path. For example, if you'd like to display asnippet at the URL path/docs/player/installation, then a code file can be placed atsrc/snippets/docs/player/installation/foo.css and loaded using the::code directive like so:

// Loads the snippet with ID foo relative to current URL::code[./foo]// You can also walk up a directory from current URL::code[../bar/foo]// With extension::code[../bar/foo.css]

Similar tocontent framework filters, snippets can be placed insidespecial framework subdirectories (wc/ andreact/) at any path insidesrc/snippets to bedisplayed when the JS library selection is matched.

For example,src/snippets/docs/player/installation/wc/foo andsrc/snippets/docs/player/installation/react/foo will both map to the snippet IDdocs/player/installation/foo and be selected based on the current JS library selection.

Option one is to include it as part of the::code directive options:

// Highlight lines 1-3 and 5-8::code[some/id]{highlights="1-3,5-8"}

Option two is to include highlight comment markers in the code snippet file like so:

import{foo}from'bar';//@hl-startconsta=1;//@hl-end