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>
This commit is contained in:
Jonathan Neal 2021-11-11 12:09:48 -05:00 committed by GitHub
parent 7bb768ddab
commit e0c3318c09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 35 additions and 33 deletions

View file

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

View file

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

View file

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

View file

@ -19,7 +19,7 @@ const lang = canonicalURL && getLanguageFromURL(canonicalURL.pathname);
<link rel="canonical" href={canonicalURL}/> <link rel="canonical" href={canonicalURL}/>
<!-- Algolia docsearch language facet --> <!-- Algolia docsearch language facet -->
<meta name="docsearch:language" content="{lang}" /> <meta name="docsearch:language" content={lang} />
<!-- OpenGraph Tags --> <!-- OpenGraph Tags -->
<meta property="og:title" content={content.title ?? SITE.title}/> <meta property="og:title" content={content.title ?? SITE.title}/>

View file

@ -1,8 +1,8 @@
--- ---
import SkipToContent from './SkipToContent.astro'; import SkipToContent from './SkipToContent.astro';
import SidebarToggle from './SidebarToggle.tsx'; 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";
import { getLanguageFromURL } from '../../util.ts'; import { getLanguageFromURL } from '../../util.ts';
const {currentPage} = Astro.props; const {currentPage} = Astro.props;
const lang = currentPage && getLanguageFromURL(currentPage); const lang = currentPage && getLanguageFromURL(currentPage);

View file

@ -1,10 +1,12 @@
/* jsxImportSource: react */ /* jsxImportSource: react */
import { useState, useCallback, useRef } from 'react'; import { useState, useCallback, useRef } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'; import * as docsearch from '@docsearch/react';
import '@docsearch/css//dist/style.css'; import '@docsearch/css/dist/style.css';
import './Search.css'; import './Search.css';
const { DocSearchModal, useDocSearchKeyboardEvents } = ((docsearch as unknown as { default: typeof docsearch }).default || docsearch)
export default function Search(props) { export default function Search(props) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const searchButtonRef = useRef(); const searchButtonRef = useRef();

View file

@ -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 MoreMenu from '../RightSidebar/MoreMenu.astro';
import TableOfContents from '../RightSidebar/TableOfContents.tsx'; import TableOfContents from '../RightSidebar/TableOfContents.tsx';
import {getLanguageFromURL} from '../../util.ts'; import {getLanguageFromURL} from '../../util.ts';
import {SIDEBAR} from '../../config.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 langCode = getLanguageFromURL(currentPage);
const links = SIDEBAR[langCode].filter(x => x.link && typeof x.header === 'undefined'); const links = SIDEBAR[langCode].filter(x => x.link && typeof x.header === 'undefined');
// handle cases with a trailing slash or not // handle cases with a trailing slash or not

View file

@ -1,5 +1,5 @@
--- ---
import ThemeToggleButton from './ThemeToggleButton.jsx'; import ThemeToggleButton from './ThemeToggleButton.tsx';
const {editHref} = Astro.props; const {editHref} = Astro.props;
--- ---
<style> <style>

View file

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

View file

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

View file

@ -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. 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: 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 #!/usr/bin/env sh
# abort on errors # abort on errors

View file

@ -5,16 +5,16 @@ import {Markdown} from 'astro/components';
import themes from '../data/themes.json'; import themes from '../data/themes.json';
import components from '../data/components.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> <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> <Markdown>
## Featured Theme ## Featured Theme
</Markdown> </Markdown>