From b0e407dc4b7468c1811db52e4a47f9456296c83c Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@matthewphillips.info>
Date: Fri, 22 Oct 2021 14:01:29 -0400
Subject: [PATCH] [next] docs example fully working (#1627)

* [next] docs example fully working

* Upgrade compiler to unlock docs
---
 examples/docs/src/components/HeadCommon.astro             | 1 +
 examples/docs/src/components/Header/Header.astro          | 4 ++--
 examples/docs/src/components/Header/Search.tsx            | 2 +-
 .../docs/src/components/PageContent/PageContent.astro     | 7 ++++---
 examples/docs/src/components/RightSidebar/MoreMenu.astro  | 4 ++--
 .../docs/src/components/RightSidebar/RightSidebar.astro   | 2 +-
 examples/docs/src/languages.ts                            | 6 ++++--
 examples/docs/src/layouts/MainLayout.astro                | 4 ++--
 packages/astro/package.json                               | 2 +-
 packages/astro/src/vite-plugin-markdown/index.ts          | 4 +++-
 packages/markdown/remark/src/index.ts                     | 2 +-
 yarn.lock                                                 | 8 ++++----
 12 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/examples/docs/src/components/HeadCommon.astro b/examples/docs/src/components/HeadCommon.astro
index 83045c0d1..fded99bd4 100644
--- a/examples/docs/src/components/HeadCommon.astro
+++ b/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" />
diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro
index a50957240..a6c82d7bb 100644
--- a/examples/docs/src/components/Header/Header.astro
+++ b/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 Search from "./Search.jsx";
+import LanguageSelect from './LanguageSelect.tsx';
+import Search from "./Search.tsx";
 
 const {currentPage} = Astro.props;
 const lang = currentPage && getLanguageFromURL(currentPage);
diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx
index 19ee513f1..158f6fe29 100644
--- a/examples/docs/src/components/Header/Search.tsx
+++ b/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';
 
diff --git a/examples/docs/src/components/PageContent/PageContent.astro b/examples/docs/src/components/PageContent/PageContent.astro
index fd1e9d242..4d904852a 100644
--- a/examples/docs/src/components/PageContent/PageContent.astro
+++ b/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>
diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro
index c295d8933..c822aaee9 100644
--- a/examples/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro
@@ -1,6 +1,6 @@
 ---
-import ThemeToggleButton from './ThemeToggleButton.jsx';
-import * as CONFIG from '../../config.js';
+import ThemeToggleButton from './ThemeToggleButton.tsx';
+import * as CONFIG from '../../config';
 const {editHref} = Astro.props;
 const showMoreSection = (CONFIG.COMMUNITY_INVITE_URL || editHref);
 ---
diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro
index ed1dd37cc..5e0a86b78 100644
--- a/examples/docs/src/components/RightSidebar/RightSidebar.astro
+++ b/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;
diff --git a/examples/docs/src/languages.ts b/examples/docs/src/languages.ts
index 389c3d7a7..5cdea0456 100644
--- a/examples/docs/src/languages.ts
+++ b/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';
 }
diff --git a/examples/docs/src/layouts/MainLayout.astro b/examples/docs/src/layouts/MainLayout.astro
index 620f2e06b..cdadebe61 100644
--- a/examples/docs/src/layouts/MainLayout.astro
+++ b/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} />
diff --git a/packages/astro/package.json b/packages/astro/package.json
index 296b0f151..815d87557 100644
--- a/packages/astro/package.json
+++ b/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",
diff --git a/packages/astro/src/vite-plugin-markdown/index.ts b/packages/astro/src/vite-plugin-markdown/index.ts
index 9d34bb1bd..82ebd4d43 100644
--- a/packages/astro/src/vite-plugin-markdown/index.ts
+++ b/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}';` : ''}
diff --git a/packages/markdown/remark/src/index.ts b/packages/markdown/remark/src/index.ts
index b00127ab5..0c385be21 100644
--- a/packages/markdown/remark/src/index.ts
+++ b/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) {
diff --git a/yarn.lock b/yarn.lock
index a5971aa2c..98fb91f51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -106,10 +106,10 @@
     "@algolia/logger-common" "4.10.5"
     "@algolia/requester-common" "4.10.5"
 
-"@astrojs/compiler@^0.2.8":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.8.tgz#73ab99cfcbf5e56500a60058594decf7db9d99d0"
-  integrity sha512-RuvzJDhZZ5S3mPZhY0Y+4MBfTGqcs6Z9PpTviOy50Yb8GQ9wDaCqU3q95e9BH3p5j50xUpmyGMSOyuRFaFuCLw==
+"@astrojs/compiler@^0.2.13":
+  version "0.2.13"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.2.13.tgz#ea67f9865efdd69a69cb296c0e71f8002f059da9"
+  integrity sha512-KfbY475EdQLPYe8B3Pyqeu4rCYY/aHad5QkoCHIvIDYU2XCM8vMA/PLtpLdi05TSAw6NGFLAZmQJOE1dzsBRLg==
   dependencies:
     typescript "^4.3.5"