Skip to content

Commit

Permalink
docs: examples pages + upgrade Astro (#791)
Browse files Browse the repository at this point in the history
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
luwes committed Feb 1, 2024
1 parent 3e7b0e1 commit a62a34a
Show file tree
Hide file tree
Showing 32 changed files with 2,617 additions and 1,917 deletions.
29 changes: 18 additions & 11 deletions docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
1 change: 1 addition & 0 deletions docs/src/components/Header/Header.astro
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const lang = getLanguageFromURL(currentPage);
<a href="/docs/en/get-started" aria-current={currentPage === '/docs/en/get-started'}>Basics</a>
<a href="/docs/en/themes" aria-current={currentPage === '/docs/en/themes'}>Themes</a>
<a href="/docs/en/showcase" aria-current={currentPage === '/docs/en/showcase'}>Showcase</a>
<a href="/docs/en/examples" aria-current={currentPage === '/docs/en/examples'}>Examples</a>
</div>
<div class="search-item">
<Search client:idle />
Expand Down
4 changes: 2 additions & 2 deletions docs/src/components/LeftSidebar/LeftSidebar.astro
Original file line number Diff line number Diff line change
Expand Up @@ -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];
---

<nav aria-labelledby="grid-left">
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/PageContent/PageContent.astro
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const title = frontmatter.title;

<article id="article" class="content">
<section class="main-section">
<h1 class="content-title" id="overview">{title}</h1>
{title ? <h1 class="content-title" id="overview">{title}</h1> : ''}
<nav class="block sm:hidden">
<TableOfContents client:media="(max-width: 50em)" headings={headings} />
</nav>
Expand Down
36 changes: 30 additions & 6 deletions docs/src/components/Sandpack.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,11 @@ export default function ComponentSandpack({
css,
hiddenCss = '',
editorHeight,
editorWidthPercentage = 50,
showLineNumbers = false,
showNavigator = false,
showTabs = false,
externalResources = [],
files = {},
dependencies = {},
active = Active.HTML,
Expand Down Expand Up @@ -112,9 +117,10 @@ export default function ComponentSandpack({
'./styles.css',
...Object.keys(dependencies),
...Object.keys(files).reduce((importPaths, fileAbsPath) => {
const disableImport = files[fileAbsPath].disableImport === true;
// Only automatically import .css or .js files for now
if (fileAbsPath.endsWith('.css') | fileAbsPath.endsWith('.js')) {
importPaths.push(`.${fileAbsPath}`);
if (!disableImport && (fileAbsPath.endsWith('.css') || fileAbsPath.endsWith('.js'))) {
importPaths.push(`./${fileAbsPath}`);
}
return importPaths;
}, css ? ['./custom-styles.css'] : [])
Expand All @@ -125,8 +131,16 @@ export default function ComponentSandpack({
template="vanilla"
theme={theme}
options={{
// recompileMode: "delayed",
// recompileDelay: 500,
// autorun: true,
// autoReload: true,
editorHeight,
editorWidthPercentage: 50,
showLineNumbers,
showNavigator,
showTabs,
editorWidthPercentage,
externalResources,
}}
customSetup={{
dependencies: {
Expand All @@ -137,6 +151,13 @@ export default function ComponentSandpack({
},
}}
files={{
"sandbox.config.json": {
hidden: true,
// Required for the changes to take effect on the live page.
code: `{
"hardReloadOnChange": true
}`
},
"/node_modules/@internals/media-chrome/package.json": {
hidden: true,
code: JSON.stringify({
Expand All @@ -153,18 +174,21 @@ export default function ComponentSandpack({
code: `${html}`
},
'/index.js': {
code: importPaths.map(path => `import '${path}';`).join(' '),
hidden: true,
code: importPaths.map(path => `import '${path}';`).join('\n'),
},
'/styles.css': {
code: `body {
code: `
body {
margin: 0;
}
media-controller,
media-controller:not([audio]),
video {
width: 100%;
aspect-ratio: 2.4;
}
${hiddenCss}`,
hidden: true,
},
Expand Down
22 changes: 22 additions & 0 deletions docs/src/components/SandpackContainer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,28 @@ if (typeof editorHeight === 'number') editorHeight = `${editorHeight}px`;
-webkit-font-smoothing: antialiased;
}

.sp-tabs {
background: var(--theme-code-bg) !important;
border-bottom: 1px solid var(--sp-colors-surface2, var(--theme-divider));
}

.sp-tabs-scrollable-container {
padding: 0 var(--sp-space-2, 8px);
overflow: auto;
display: flex;
flex-wrap: nowrap;
align-items: stretch;
min-height: 40px;
margin-bottom: -1px;
}

.sp-tab-button {
padding: 0 var(--sp-space-2, 8px);
height: var(--sp-layout-headerHeight, 40px);
white-space: nowrap;
font-size: 12px !important;
}

div:where(.sp-preview-actions) {
display: none; /* hide until Sandpack JS styles are loaded */
}
Expand Down
92 changes: 92 additions & 0 deletions docs/src/layouts/ExamplesLayout.astro
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>
6 changes: 4 additions & 2 deletions docs/src/layouts/MainLayout.astro
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
}

.grid-sidebar {
height: 100vh;
height: calc(100vh - 80px);
position: sticky;
top: 5rem;
padding: 0;
Expand Down Expand Up @@ -150,7 +150,9 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
<Header currentPage={currentPage} />
<main class="layout">
<aside id="grid-left" class="grid-sidebar" title="Site Navigation">
<LeftSidebar currentPage={currentPage} />
<slot name="left-sidebar">
<LeftSidebar currentPage={currentPage} />
</slot>
</aside>
<div id="grid-main">
<PageContent
Expand Down
Loading

0 comments on commit a62a34a

Please sign in to comment.