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:
parent
7bb768ddab
commit
e0c3318c09
12 changed files with 35 additions and 33 deletions
|
@ -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',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -1,8 +0,0 @@
|
||||||
export default {
|
|
||||||
alias: {
|
|
||||||
components: './src/components',
|
|
||||||
'~': './src',
|
|
||||||
},
|
|
||||||
plugins: ['@snowpack/plugin-dotenv'],
|
|
||||||
workspaceRoot: '../',
|
|
||||||
};
|
|
|
@ -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}/>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import ThemeToggleButton from './ThemeToggleButton.jsx';
|
import ThemeToggleButton from './ThemeToggleButton.tsx';
|
||||||
const {editHref} = Astro.props;
|
const {editHref} = Astro.props;
|
||||||
---
|
---
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Reference in a new issue