From 01cb8a293970e19f852f2bb3bf872666e843cb58 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Thu, 1 Feb 2024 10:16:21 -0600 Subject: [PATCH] docs: examples pages + upgrade Astro (#791) This change adds a docs examples page with Sandpack. The examples are pulled from the examples/vanilla folder. This is just a start, would like to add more and more examples. The HTML is editable and for the themes one can also edit the theme in place and open it up in Sandbox for keeping their own copy for example. The goal is to show off more with the cool things that can be easily build with media-chrome and to be easier discoverable. https://media-chrome-docs-git-fork-luwes-docs-upgrade-mux.vercel.app/docs/en/examples --- Upgrades the docs dependencies and Astro to v4. Vite has a regression which is reported here https://github.com/vitejs/vite/issues/15702 which Astro runs into together with the React Sandpack library. So I pinned it to vite 5.0.10 to get around that. Sandpack has a regression which I submitted an issue for here: https://github.com/codesandbox/sandpack/issues/1068 The rest seemed to work, a few more warnings in the CLI when building. --- docs/package.json | 29 +- docs/src/components/Header/Header.astro | 1 + .../components/LeftSidebar/LeftSidebar.astro | 4 +- .../components/PageContent/PageContent.astro | 2 +- docs/src/components/Sandpack.jsx | 36 +- docs/src/components/SandpackContainer.astro | 22 + docs/src/layouts/ExamplesLayout.astro | 92 + docs/src/layouts/MainLayout.astro | 6 +- .../pages/docs/en/examples/[...example].astro | 266 ++ docs/src/pages/docs/en/media-element.mdx | 4 +- docs/src/scripts/get-imported-urls.js | 40 + docs/yarn.lock | 2546 +++++++++-------- examples/vanilla/advanced.html | 4 +- examples/vanilla/basic-audio.html | 48 + examples/vanilla/basic-video.html | 57 + examples/vanilla/basic.html | 7 +- examples/vanilla/casting.html | 4 +- .../media-audio-track-menu.html | 176 +- .../control-elements/media-captions-menu.html | 140 +- .../media-playback-rate-menu.html | 246 +- .../media-rendition-menu.html | 162 +- examples/vanilla/portrait.html | 73 + examples/vanilla/responsive-polyfill.html | 2 +- .../vanilla/themes/demuxed-2022-theme.html | 51 +- examples/vanilla/themes/microvideo-theme.html | 246 +- examples/vanilla/themes/minimal-theme.html | 38 +- examples/vanilla/themes/netflix-theme.html | 51 +- examples/vanilla/themes/spotify-theme.html | 59 +- examples/vanilla/themes/winamp-theme.html | 31 +- examples/vanilla/themes/youtube-theme.html | 86 +- examples/vanilla/vertical.html | 4 +- src/js/themes/netflix.js | 1 - 32 files changed, 2617 insertions(+), 1917 deletions(-) create mode 100644 docs/src/layouts/ExamplesLayout.astro create mode 100644 docs/src/pages/docs/en/examples/[...example].astro create mode 100644 docs/src/scripts/get-imported-urls.js create mode 100644 examples/vanilla/basic-audio.html create mode 100644 examples/vanilla/basic-video.html create mode 100644 examples/vanilla/portrait.html diff --git a/docs/package.json b/docs/package.json index 64ecc73fa..22e5495f7 100644 --- a/docs/package.json +++ b/docs/package.json @@ -15,36 +15,43 @@ }, "dependencies": { "@algolia/client-search": "^4.20.0", - "@astrojs/mdx": "^1.1.3", - "@astrojs/preact": "^3.0.1", - "@astrojs/react": "^3.0.4", - "@astrojs/tailwind": "^5.0.2", - "@astrojs/vercel": "^7.0.2", - "@astropub/md": "^0.3.0", - "@codesandbox/sandpack-react": "^2.9.0", + "@astrojs/mdx": "2.1.1", + "@astrojs/preact": "3.1.0", + "@astrojs/react": "3.0.9", + "@astrojs/tailwind": "5.1.0", + "@astrojs/vercel": "^7.1.0", + "@astropub/md": "^0.4.0", + "@codesandbox/sandpack-react": "2.10.0", "@codesandbox/sandpack-themes": "^2.0.21", "@docsearch/css": "^3.5.2", "@docsearch/react": "^3.5.2", "@types/react": "^18.2.34", - "astro": "3.4.3", + "acorn": "^8.11.3", + "acorn-walk": "^8.3.2", + "astro": "4.3.0", "clsx": "^2.0.0", "hastscript": "^8.0.0", "html-escaper": "^3.0.3", "media-chrome": "link:..", "mux-embed": "^4.30.0", + "parse5": "^7.1.2", "preact": "^10.18.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "remark-gfm": "^3.0.1", - "remark-smartypants": "^2.0.0", + "remark-gfm": "^4.0.0", + "remark-smartypants": "^2.1.0", "tailwindcss": "^3.3.5", "zod": "^3.22.4" }, "devDependencies": { - "@types/node": "^20.8.10", + "@types/node": "^20.11.15", "@types/react-dom": "^18.2.14", "prettier": "^3.0.3", "rehype-autolink-headings": "^7.0.0", "rehype-slug": "^6.0.0" + }, + "resolutions": { + "vite": "5.0.10", + "@codesandbox/sandpack-client": "2.10.0" } } diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro index 44bd1b97e..896e50f1a 100644 --- a/docs/src/components/Header/Header.astro +++ b/docs/src/components/Header/Header.astro @@ -32,6 +32,7 @@ const lang = getLanguageFromURL(currentPage); Basics Themes Showcase + Examples
diff --git a/docs/src/components/LeftSidebar/LeftSidebar.astro b/docs/src/components/LeftSidebar/LeftSidebar.astro index acf0281ba..bfe6e1ea0 100644 --- a/docs/src/components/LeftSidebar/LeftSidebar.astro +++ b/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -6,10 +6,10 @@ type Props = { currentPage: string; }; -const { currentPage } = Astro.props as Props; +let { currentPage, sidebar } = Astro.props as Props; const currentPageMatch = currentPage.slice(1).replace(/\/$/, ''); const langCode = getLanguageFromURL(currentPage); -const sidebar = SIDEBAR[langCode]; +sidebar ??= SIDEBAR[langCode]; ---