[next] docs example fully working (#1627)

* [next] docs example fully working

* Upgrade compiler to unlock docs

examples/docs/src/components/HeadCommon.astro

@@ -1,4 +1,5 @@
 <!-- Global Metadata -->
+<meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

examples/docs/src/components/Header/Header.astro

@@ -4,8 +4,8 @@ import * as CONFIG from '../../config.ts';
 import AstroLogo from './AstroLogo.astro';
 import SkipToContent from './SkipToContent.astro';
 import SidebarToggle from './SidebarToggle.tsx';
-import LanguageSelect from './LanguageSelect.jsx';
+import LanguageSelect from './LanguageSelect.tsx';
-import Search from "./Search.jsx";
+import Search from "./Search.tsx";
 
 const {currentPage} = Astro.props;
 const lang = currentPage && getLanguageFromURL(currentPage);

examples/docs/src/components/Header/Search.tsx

@@ -2,7 +2,7 @@
 import { useState, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
-import * as CONFIG from '../../config.js';
+import * as CONFIG from '../../config';
 import '@docsearch/css/dist/style.css';
 import './Search.css';
 

examples/docs/src/components/PageContent/PageContent.astro

@@ -1,9 +1,10 @@
 ---
+import MoreMenu from '../RightSidebar/MoreMenu.astro';
+import TableOfContents from '../RightSidebar/TableOfContents.tsx';
+
 const {content, githubEditUrl} = Astro.props;
 const title = content.title;
 const headers = content.astro.headers;
-import MoreMenu from '../RightSidebar/MoreMenu.astro';
-import TableOfContents from '../RightSidebar/TableOfContents.tsx';
 ---
 <style>
       .content {
@@ -31,7 +32,7 @@ import TableOfContents from '../RightSidebar/TableOfContents.tsx';
     <section class="main-section">
         <h1 class="content-title" id="overview">{title}</h1>
         <nav class="block sm:hidden">
-            <TableOfContents client:media="(max-width: 50em)" headers={headers}/>
+            <TableOfContents client:media="(max-width: 50em)" headers={headers} />
         </nav>
         <slot />
     </section>

examples/docs/src/components/RightSidebar/MoreMenu.astro

@@ -1,6 +1,6 @@
 ---
-import ThemeToggleButton from './ThemeToggleButton.jsx';
+import ThemeToggleButton from './ThemeToggleButton.tsx';
-import * as CONFIG from '../../config.js';
+import * as CONFIG from '../../config';
 const {editHref} = Astro.props;
 const showMoreSection = (CONFIG.COMMUNITY_INVITE_URL || editHref);
 ---

examples/docs/src/components/RightSidebar/RightSidebar.astro

@@ -1,5 +1,5 @@
 ---
-import TableOfContents from './TableOfContents.jsx';
+import TableOfContents from './TableOfContents.tsx';
 import MoreMenu from './MoreMenu.astro';
 const {content, githubEditUrl} = Astro.props;
 const headers = content.astro.headers;

examples/docs/src/languages.ts

@@ -1,8 +1,10 @@
-import { KNOWN_LANGUAGES } from './config.js';
+import { KNOWN_LANGUAGES } from './config';
 
+export { KNOWN_LANGUAGES }
 export const KNOWN_LANGUAGE_CODES = Object.values(KNOWN_LANGUAGES);
+export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//;
 
 export function getLanguageFromURL(pathname: string) {
-  const langCodeMatch = pathname.match(/\/([a-z]{2}-?[A-Z]{0,2})\//);
+  const langCodeMatch = pathname.match(langPathRegex);
   return langCodeMatch ? langCodeMatch[1] : 'en';
 }

examples/docs/src/layouts/MainLayout.astro

@@ -6,7 +6,7 @@ import Footer from '../components/Footer/Footer.astro';
 import PageContent from '../components/PageContent/PageContent.astro';
 import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
 import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
-import * as CONFIG from "../config.ts";
+import * as CONFIG from "../config";
 
 const { content = {} } = Astro.props;
 const currentPage = Astro.request.url.pathname;
@@ -14,7 +14,7 @@ const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
 const githubEditUrl = CONFIG.GITHUB_EDIT_URL && (CONFIG.GITHUB_EDIT_URL + currentFile);
 ---
 
-<html dir="{content.dir ?? 'ltr'}" lang="{content.lang ?? 'en-us'}" class="initial">
+<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
   <head>
     <HeadCommon />
     <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} />

packages/astro/package.json

@@ -53,7 +53,7 @@
     "test": "mocha --parallel --timeout 15000"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.2.8",
+    "@astrojs/compiler": "^0.2.13",
     "@astrojs/language-server": "^0.7.16",
     "@astrojs/markdown-remark": "^0.3.1",
     "@astrojs/markdown-support": "0.3.1",

packages/astro/src/vite-plugin-markdown/index.ts

@@ -30,10 +30,12 @@ export default function markdown({ config }: AstroPluginOptions): Plugin {
         if (typeof render === 'string') {
           ({ default: render } = await import(render));
         }
-        let { frontmatter, metadata, code: astroResult } = await render(source, renderOpts);
+        let renderResult = await render(source, renderOpts);
+        let { frontmatter, metadata, code: astroResult } = renderResult;
 
         // Extract special frontmatter keys
         const { layout = '', components = '', setup = '', ...content } = frontmatter;
+        content.astro = metadata;
         const prelude = `---
 ${layout ? `import Layout from '${layout}';` : ''}
 ${components ? `import * from '${components}';` : ''}

packages/markdown/remark/src/index.ts

@@ -74,7 +74,7 @@ export async function renderMarkdown(content: string, opts?: MarkdownRenderingOp
   try {
     const vfile = await parser
     .use([rehypeCollectHeaders])
-      .use(rehypeStringify, { allowParseErrors: true, preferUnquoted: true, allowDangerousHtml: true })
+      .use(rehypeStringify, { allowParseErrors: true, preferUnquoted: false, allowDangerousHtml: true })
       .process(content);
     result = vfile.toString();
   } catch (err) {

yarn.lock

@@ -106,10 +106,10 @@
     "@algolia/logger-common" "4.10.5"
     "@algolia/requester-common" "4.10.5"
 
-"@astrojs/compiler@^0.2.8":
+"@astrojs/compiler@^0.2.13":
-  version "0.2.8"
+  version "0.2.13"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.8.tgz#73ab99cfcbf5e56500a60058594decf7db9d99d0"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.13.tgz#ea67f9865efdd69a69cb296c0e71f8002f059da9"
-  integrity sha512-RuvzJDhZZ5S3mPZhY0Y+4MBfTGqcs6Z9PpTviOy50Yb8GQ9wDaCqU3q95e9BH3p5j50xUpmyGMSOyuRFaFuCLw==
+  integrity sha512-KfbY475EdQLPYe8B3Pyqeu4rCYY/aHad5QkoCHIvIDYU2XCM8vMA/PLtpLdi05TSAw6NGFLAZmQJOE1dzsBRLg==
   dependencies:
     typescript "^4.3.5"