Update Astro docs to use v0.21 (#1738)

* update docs site to leverage astro v0.21

* fix resolutions

* fix docsearch import

* Resolve `@docsearch/react` is a cross-execution-context-friendly way

* chore: update astro version

* fix: remove line highlighting syntax

* fix: braces inside of attr string

* Match current astro version

* Trim leading newline in MainLayout.astro template

* Move card grid styles into Layout

Co-authored-by: Nate Moore <nate@skypack.dev>

6 files changed, 12 insertions, 10 deletions

diff --git a/docs/src/components/HeadSEO.astro b/docs/src/components/HeadSEO.astro
index 9cc9046a6..d3cd80901 100644
--- a/docs/src/components/HeadSEO.astro
+++ b/docs/src/components/HeadSEO.astro
@@ -19,7 +19,7 @@ const lang = canonicalURL && getLanguageFromURL(canonicalURL.pathname);
 <link rel="canonical" href={canonicalURL}/>
 
 <!-- Algolia docsearch language facet -->
-<meta name="docsearch:language" content="{lang}" />
+<meta name="docsearch:language" content={lang} />
 
 <!-- OpenGraph Tags -->
 <meta property="og:title" content={content.title ?? SITE.title}/>
diff --git a/docs/src/components/Header/Header.astro b/docs/src/components/Header/Header.astro
index 901075cf4..06954bd7f 100644
--- a/docs/src/components/Header/Header.astro
+++ b/docs/src/components/Header/Header.astro
@@ -1,8 +1,8 @@
 ---
 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";
 import { getLanguageFromURL } from '../../util.ts';
 const {currentPage} = Astro.props;
 const lang = currentPage && getLanguageFromURL(currentPage);
diff --git a/docs/src/components/Header/Search.tsx b/docs/src/components/Header/Search.tsx
index 7b8532a81..4ca7b4ef1 100644
--- a/docs/src/components/Header/Search.tsx
+++ b/docs/src/components/Header/Search.tsx
@@ -1,10 +1,12 @@
 /* jsxImportSource: react */
 import { useState, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react';
-import '@docsearch/css//dist/style.css';
+import * as docsearch from '@docsearch/react';
+import '@docsearch/css/dist/style.css';
 import './Search.css';
 
+const { DocSearchModal, useDocSearchKeyboardEvents } = ((docsearch as unknown as { default: typeof docsearch }).default || docsearch)
+
 export default function Search(props) {
   const [isOpen, setIsOpen] = useState(false);
   const searchButtonRef = useRef();
diff --git a/docs/src/components/PageContent/PageContent.astro b/docs/src/components/PageContent/PageContent.astro
index 0598d7a2f..91ea90d62 100644
--- a/docs/src/components/PageContent/PageContent.astro
+++ b/docs/src/components/PageContent/PageContent.astro
@@ -1,11 +1,11 @@
 ---
-const {content, githubEditUrl, currentPage} = Astro.props;
-const title = content.title;
-const headers = content.astro?.headers;
 import MoreMenu from '../RightSidebar/MoreMenu.astro';
 import TableOfContents from '../RightSidebar/TableOfContents.tsx';
 import {getLanguageFromURL} from '../../util.ts';
 import {SIDEBAR} from '../../config.ts';
+const {content, githubEditUrl, currentPage} = Astro.props;
+const title = content.title;
+const headers = content.astro?.headers;
 const langCode = getLanguageFromURL(currentPage);
 const links = SIDEBAR[langCode].filter(x => x.link && typeof x.header === 'undefined');
 // handle cases with a trailing slash or not
diff --git a/docs/src/components/RightSidebar/MoreMenu.astro b/docs/src/components/RightSidebar/MoreMenu.astro
index 6be2d86ee..6ae8425cc 100644
--- a/docs/src/components/RightSidebar/MoreMenu.astro
+++ b/docs/src/components/RightSidebar/MoreMenu.astro
@@ -1,5 +1,5 @@
 ---
-import ThemeToggleButton from './ThemeToggleButton.jsx';
+import ThemeToggleButton from './ThemeToggleButton.tsx';
 const {editHref} = Astro.props;
 ---
 <style>
diff --git a/docs/src/components/RightSidebar/RightSidebar.astro b/docs/src/components/RightSidebar/RightSidebar.astro
index 04ce66772..5415d4cef 100644
--- a/docs/src/components/RightSidebar/RightSidebar.astro
+++ b/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;