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>

docs/astro.config.mjs

@@ -1,4 +1,5 @@
-export default {
+// @ts-check
+export default /** @type {import('astro').AstroUserConfig} */ ({
   buildOptions: {
     site: 'https://docs.astro.build/',
   },
@@ -8,4 +9,12 @@ export default {
     // Needed for Algolia search component
     '@astrojs/renderer-react',
   ],
-};
+  vite: {
+    resolve: {
+      alias: {
+        '~': '/src',
+        'components': '/src/components',
+      }
+    }
+  }
+})

docs/package.json

@@ -17,7 +17,7 @@
   },
   "devDependencies": {
     "@snowpack/plugin-dotenv": "^2.1.0",
-    "astro": "^0.21.0-next.0",
+    "astro": "^0.21.0-next.2",
     "broken-link-checker": "^0.7.8",
     "npm-run-all": "^4.1.5",
     "pa11y-ci": "^2.4.2",

docs/snowpack.config.mjs

@@ -1,8 +0,0 @@
-export default {
-  alias: {
-    components: './src/components',
-    '~': './src',
-  },
-  plugins: ['@snowpack/plugin-dotenv'],
-  workspaceRoot: '../',
-};

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}/>

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);

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();

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

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>

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;

docs/src/layouts/MainLayout.astro

@@ -14,8 +14,7 @@ const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`;
 const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`;
 const formatTitle = (content, SITE) => content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
 ---
-
-<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} />

docs/src/pages/guides/deploy.md

@@ -37,7 +37,7 @@ By default, the build output will be placed at `dist/`. You may deploy this `dis
 1. Set the correct `buildOptions.site` in `astro.config.mjs`.
 1. Inside your project, create `deploy.sh` with the following content (uncommenting the appropriate lines), and run it to deploy:
 
-   ```bash{13,20,23}
+   ```bash
    #!/usr/bin/env sh
 
    # abort on errors

docs/src/pages/themes.astro

@@ -5,16 +5,16 @@ import {Markdown} from 'astro/components';
 import themes from '../data/themes.json';
 import components from '../data/components.json';
 ---
-<style>
-    .card-grid {
-        display: grid;
-        grid-column-gap: 15px;
-        grid-row-gap: 15px;
-        grid-auto-flow: dense;
-        grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
-    }
-</style>
 <Layout content={{title: 'Themes'}} hideRightSidebar>
+    <style>
+        .card-grid {
+            display: grid;
+            grid-column-gap: 15px;
+            grid-row-gap: 15px;
+            grid-auto-flow: dense;
+            grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
+        }
+    </style>
     <Markdown>
         ## Featured Theme
     </Markdown>