-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 vitejs/vite#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: codesandbox/sandpack#1068 The rest seemed to work, a few more warnings in the CLI when building.
- Loading branch information
Showing
32 changed files
with
2,617 additions
and
1,917 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| --- | ||
| import { Markdown } from '@astropub/md'; | ||
| import MainLayout from './MainLayout.astro'; | ||
| import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro'; | ||
| import SandpackContainer from "../components/SandpackContainer.astro"; | ||
| const { | ||
| frontmatter, | ||
| headings, | ||
| leftSidebar, | ||
| externalResources, | ||
| dependencies, | ||
| files, | ||
| html, | ||
| css, | ||
| } = Astro.props as Props; | ||
| const currentPage = Astro.url.pathname; | ||
| --- | ||
|
|
||
| <MainLayout {...Astro.props}> | ||
|
|
||
| <LeftSidebar slot="left-sidebar" currentPage={currentPage} sidebar={leftSidebar} /> | ||
|
|
||
| <slot /> | ||
|
|
||
| <SandpackContainer | ||
| style={{ | ||
| width: '100%', | ||
| height: '100%', | ||
| }} | ||
| reversed | ||
| editorHeight="calc(100vh - 80px)" | ||
| editorWidthPercentage={45} | ||
| showLineNumbers={true} | ||
| showNavigator={false} | ||
| showTabs={true} | ||
| previewAspectRatio={frontmatter?.previewAspectRatio ?? frontmatter?.aspectRatio} | ||
| dependencies={frontmatter?.dependencies ?? dependencies} | ||
| hiddenCss={` | ||
| body { | ||
| font-family: system-ui, sans-serif; | ||
| font-size: .9rem; | ||
| padding: .5rem 1.2rem 3rem; | ||
| } | ||
| ${frontmatter?.css ?? css ?? ``} | ||
| `} | ||
| externalResources={externalResources} | ||
| files={files} | ||
| html={frontmatter?.html ?? html ?? ``} | ||
| /> | ||
|
|
||
| </MainLayout> | ||
|
|
||
| <style> | ||
| .left-sidebar { | ||
| width: 100%; | ||
| height: 100%; | ||
| border-right: 1px solid var(--theme-divider); | ||
| } | ||
| </style> | ||
|
|
||
| <style is:global> | ||
| :root:not(.theme-dark) { | ||
| --theme-code-bg: white; | ||
| } | ||
|
|
||
| @media (min-width: 0) { | ||
| .layout { | ||
| --max-width: 100%; | ||
| grid-template-columns: 18rem minmax(0, var(--max-width)) !important; | ||
| gap: 0 !important; | ||
| } | ||
|
|
||
| #grid-main { | ||
| padding: 0 !important; | ||
| } | ||
|
|
||
| .main-section { | ||
| height: 100%; | ||
| margin: 0 !important; | ||
| } | ||
|
|
||
| .sp-container { | ||
| margin: 0 !important; | ||
| } | ||
|
|
||
| .sp-resize-handler { | ||
| border-left: 1px solid var(--theme-divider); | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.