{"id":27942847,"url":"https://github.com/vidstack/site","last_synced_at":"2025-07-17T07:08:07.168Z","repository":{"id":197704797,"uuid":"699158758","full_name":"vidstack/site","owner":"vidstack","description":"vidstack.io","archived":false,"fork":false,"pushed_at":"2025-07-13T01:40:10.000Z","size":3917,"stargazers_count":12,"open_issues_count":3,"forks_count":8,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-13T03:39:34.679Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vidstack.io","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vidstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-02T03:43:56.000Z","updated_at":"2025-04-20T22:25:18.000Z","dependencies_parsed_at":"2023-10-02T04:52:10.162Z","dependency_job_id":"aa0586ee-dcdb-46b2-b3e1-ef4b9bc164bc","html_url":"https://github.com/vidstack/site","commit_stats":null,"previous_names":["vidstack/site"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vidstack/site","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Fsite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Fsite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Fsite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Fsite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vidstack","download_url":"https://codeload.github.com/vidstack/site/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vidstack%2Fsite/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265575519,"owners_count":23790782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-07T11:58:26.451Z","updated_at":"2025-07-17T07:08:07.117Z","avatar_url":"https://github.com/vidstack.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vidstack Site\n\nThis is the main Vidstack site and docs hosted at [vidstack.io][vidstack]. The site is built with\n[Astro][astro], see their docs to get familiar with the framework.\n\n## Quickstart\n\n1. Install [PNPM][pnpm].\n2. Clone repository: `git clone git@github.com:vidstack/site.git vidstack-site --depth=1`\n3. Change directories and install dependencies: `cd vidstack-site \u0026\u0026 pnpm i`\n4. Run development server: `npm run dev`\n\n## Writing Docs\n\nAll documentation files can be found at [`src/content/docs`][content-docs]. They're written\nusing [MDX][astro-mdx] which is automatically supported by Astro.\n\n### Sidebar Items\n\nAll pages that should be displayed in the docs sidebar need to be added to\nthe [docs sidebar items file][docs-sidebar-file].\n\n### Frameworks Filter\n\nYou can filter content by framework by adding a special subdirectory (`wc/` or `react/`) at any path\ninside [`src/content/docs`][content-docs]. For example:\n\n- `src/content/docs/api/page.mdx`: This page will load when either the current JS library selection is\n  Web Components or React and available at the URL `/docs/api/page` and `/docs/wc/api/page`.\n\n- `src/content/docs/api/wc/page.mdx`: This page will load if the current JS library selection is\n  \"Web Components\" and available at the URL `/docs/wc/api/page`.\n\n- `src/content/docs/api/react/page.mdx`: This page will load if the current JS library selection is\n  \"React\" and available at the URL `/docs/api/page`.\n\n### MDX Directives\n\nThe following directives are included to help with writing docs in MDX files:\n\n```mdx\n:::info\nThis is a helpful info callout! The following callout types are supported: note, info, tip,\nwarning, danger, experimental.\n:::\n\n:::yes\nTell the user they should do this!\n:::\n\n:::no\nTell the user they should _not_ do this!\n:::\n```\n\n### Code Snippets\n\nAll code snippets can be found at [`src/snippets`][code-snippets]. Vidstack supports\nlight/dark code themes and multiple frameworks with more to come, hence writing multiple code fences\nin a file won't work as pages will bloat. Therefore, lazy loaded code snippets are used which we've\ndocumented how to create and use below.\n\n#### Code Snippet ID\n\nThe relative path from `src/snippets` without the file extension is the snippet ID. For example,\n`src/snippets/docs/main.ts` has the snippet ID `docs/main`. The ID can be used to lazy load\nthe snippet via the `::code` directive in an MDX file like so:\n\n```mdx\n// Lazy load code snippet at `src/snippets/docs/main.ts`\n::code[docs/main]\n\n// Accepts following options\n::code[docs/main]{title=\"Main Page\" numbers=true copy=true flat=true highlights=\"1-3,5-8\"}\n```\n\nYou will need to provide the file extension if there are two snippets with the same name:\n\n```mdx\n::code[docs/main.ts]\n::code[docs/main.css]\n```\n\n#### Relative Code Snippet ID\n\nThe snippet ID can be relative to the current URL path. For example, if you'd like to display a\nsnippet at the URL path `/docs/player/installation`, then a code file can be placed at\n`src/snippets/docs/player/installation/foo.css` and loaded using the `::code` directive like so:\n\n```mdx\n// Loads the snippet with ID foo relative to current URL\n::code[./foo]\n\n// You can also walk up a directory from current URL\n::code[../bar/foo]\n\n// With extension\n::code[../bar/foo.css]\n```\n\n#### Code Snippet Framework Filter\n\nSimilar to [content framework filters](#frameworks-filter), snippets can be placed inside\nspecial framework subdirectories (`wc/` and `react/`) at any path inside `src/snippets` to be\ndisplayed when the JS library selection is matched.\n\nFor example, `src/snippets/docs/player/installation/wc/foo` and\n`src/snippets/docs/player/installation/react/foo` will both map to the snippet ID\n`docs/player/installation/foo` and be selected based on the current JS library selection.\n\n#### Code Snippet Highlighting\n\nOption one is to include it as part of the `::code` directive options:\n\n```mdx\n// Highlight lines 1-3 and 5-8\n::code[some/id]{highlights=\"1-3,5-8\"}\n```\n\nOption two is to include highlight comment markers in the code snippet file like so:\n\n```ts\nimport { foo } from 'bar';\n\n// @hl-start\nconst a = 1;\n// @hl-end\n```\n\n[pnpm]: https://pnpm.io/installation\n[astro]: https://astro.build\n[vidstack]: https://vidstack.io\n[astro-mdx]: https://docs.astro.build/en/guides/markdown-content\n[code-snippets]: ./src/snippets\n[content-docs]: ./src/content/docs\n[docs-sidebar-file]: ./src/layouts/nav/docs-sidebar-items.ts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvidstack%2Fsite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvidstack%2Fsite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvidstack%2Fsite/lists"}