diff options
Diffstat (limited to 'examples/docs/src')
21 files changed, 94 insertions, 74 deletions
diff --git a/examples/docs/src/components/Footer/AvatarList.astro b/examples/docs/src/components/Footer/AvatarList.astro index 03b1e5bd7..8d00e0ec6 100644 --- a/examples/docs/src/components/Footer/AvatarList.astro +++ b/examples/docs/src/components/Footer/AvatarList.astro @@ -3,7 +3,7 @@ type Props = { path: string; }; -const { path } = Astro.props as Props; +const { path } = Astro.props; const resolvedPath = `examples/docs/${path}`; const url = `https://api.github.com/repos/withastro/astro/commits?path=${resolvedPath}`; const commitsURL = `https://github.com/withastro/astro/commits/main/${resolvedPath}`; diff --git a/examples/docs/src/components/Footer/Footer.astro b/examples/docs/src/components/Footer/Footer.astro index 1ec756b86..8eab03d82 100644 --- a/examples/docs/src/components/Footer/Footer.astro +++ b/examples/docs/src/components/Footer/Footer.astro @@ -3,7 +3,7 @@ import AvatarList from './AvatarList.astro'; type Props = { path: string; }; -const { path } = Astro.props as Props; +const { path } = Astro.props; --- <footer> diff --git a/examples/docs/src/components/HeadSEO.astro b/examples/docs/src/components/HeadSEO.astro index c40e04327..e8ac787d3 100644 --- a/examples/docs/src/components/HeadSEO.astro +++ b/examples/docs/src/components/HeadSEO.astro @@ -1,16 +1,14 @@ --- -import { SITE, OPEN_GRAPH, Frontmatter } from '../config'; +import type { CollectionEntry } from 'astro:content'; +import { SITE, OPEN_GRAPH } from '../consts'; -export interface Props { - frontmatter: Frontmatter; - canonicalUrl: URL; -} +type Props = { canonicalUrl: URL } & CollectionEntry<'docs'>['data']; -const { frontmatter, canonicalUrl } = Astro.props as Props; -const formattedContentTitle = `${frontmatter.title} 🚀 ${SITE.title}`; -const imageSrc = frontmatter.image?.src ?? OPEN_GRAPH.image.src; +const { ogLocale, image, title, description, canonicalUrl } = Astro.props; +const formattedContentTitle = `${title} 🚀 ${SITE.title}`; +const imageSrc = image?.src ?? OPEN_GRAPH.image.src; const canonicalImageSrc = new URL(imageSrc, Astro.site); -const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt; +const imageAlt = image?.alt ?? OPEN_GRAPH.image.alt; --- <!-- Page Metadata --> @@ -20,21 +18,17 @@ const imageAlt = frontmatter.image?.alt ?? OPEN_GRAPH.image.alt; <meta property="og:title" content={formattedContentTitle} /> <meta property="og:type" content="article" /> <meta property="og:url" content={canonicalUrl} /> -<meta property="og:locale" content={frontmatter.ogLocale ?? SITE.defaultLanguage} /> +<meta property="og:locale" content={ogLocale ?? SITE.defaultLanguage} /> <meta property="og:image" content={canonicalImageSrc} /> <meta property="og:image:alt" content={imageAlt} /> -<meta - name="description" - property="og:description" - content={frontmatter.description ?? SITE.description} -/> +<meta name="description" property="og:description" content={description ?? SITE.description} /> <meta property="og:site_name" content={SITE.title} /> <!-- Twitter Tags --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content={OPEN_GRAPH.twitter} /> <meta name="twitter:title" content={formattedContentTitle} /> -<meta name="twitter:description" content={frontmatter.description ?? SITE.description} /> +<meta name="twitter:description" content={description ?? SITE.description} /> <meta name="twitter:image" content={canonicalImageSrc} /> <meta name="twitter:image:alt" content={imageAlt} /> diff --git a/examples/docs/src/components/Header/AstroLogo.astro b/examples/docs/src/components/Header/AstroLogo.astro index 6c8b5b9ce..1363b3e32 100644 --- a/examples/docs/src/components/Header/AstroLogo.astro +++ b/examples/docs/src/components/Header/AstroLogo.astro @@ -2,7 +2,7 @@ type Props = { size: number; }; -const { size } = Astro.props as Props; +const { size } = Astro.props; --- <svg diff --git a/examples/docs/src/components/Header/Header.astro b/examples/docs/src/components/Header/Header.astro index 58fe46ee9..3f578480b 100644 --- a/examples/docs/src/components/Header/Header.astro +++ b/examples/docs/src/components/Header/Header.astro @@ -1,6 +1,6 @@ --- import { getLanguageFromURL, KNOWN_LANGUAGE_CODES } from '../../languages'; -import * as CONFIG from '../../config'; +import { SITE } from '../../consts'; import AstroLogo from './AstroLogo.astro'; import SkipToContent from './SkipToContent.astro'; import SidebarToggle from './SidebarToggle'; @@ -11,7 +11,7 @@ type Props = { currentPage: string; }; -const { currentPage } = Astro.props as Props; +const { currentPage } = Astro.props; const lang = getLanguageFromURL(currentPage); --- @@ -24,7 +24,7 @@ const lang = getLanguageFromURL(currentPage); <div class="logo flex"> <a href="/"> <AstroLogo size={40} /> - <h1>{CONFIG.SITE.title ?? 'Documentation'}</h1> + <h1>{SITE.title ?? 'Documentation'}</h1> </a> </div> <div style="flex-grow: 1;"></div> diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx index 19ff9fa78..620941e3a 100644 --- a/examples/docs/src/components/Header/Search.tsx +++ b/examples/docs/src/components/Header/Search.tsx @@ -1,6 +1,6 @@ /** @jsxImportSource react */ import { useState, useCallback, useRef } from 'react'; -import { ALGOLIA } from '../../config'; +import { ALGOLIA } from '../../consts'; import '@docsearch/css'; import './Search.css'; diff --git a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro index 33433f5be..22fa5bbde 100644 --- a/examples/docs/src/components/LeftSidebar/LeftSidebar.astro +++ b/examples/docs/src/components/LeftSidebar/LeftSidebar.astro @@ -1,12 +1,12 @@ --- import { getLanguageFromURL } from '../../languages'; -import { SIDEBAR } from '../../config'; +import { SIDEBAR } from '../../consts'; type Props = { currentPage: string; }; -const { currentPage } = Astro.props as Props; +const { currentPage } = Astro.props; const currentPageMatch = currentPage.endsWith('/') ? currentPage.slice(1, -1) : currentPage.slice(1); diff --git a/examples/docs/src/components/PageContent/PageContent.astro b/examples/docs/src/components/PageContent/PageContent.astro index c7c66c7fc..24422b75a 100644 --- a/examples/docs/src/components/PageContent/PageContent.astro +++ b/examples/docs/src/components/PageContent/PageContent.astro @@ -1,17 +1,15 @@ --- -import type { Frontmatter } from '../../config'; +import type { MarkdownHeading } from 'astro'; import MoreMenu from '../RightSidebar/MoreMenu.astro'; import TableOfContents from '../RightSidebar/TableOfContents'; -import type { MarkdownHeading } from 'astro'; type Props = { - frontmatter: Frontmatter; + title: string; headings: MarkdownHeading[]; githubEditUrl: string; }; -const { frontmatter, headings, githubEditUrl } = Astro.props as Props; -const title = frontmatter.title; +const { title, headings, githubEditUrl } = Astro.props; --- <article id="article" class="content"> diff --git a/examples/docs/src/components/RightSidebar/MoreMenu.astro b/examples/docs/src/components/RightSidebar/MoreMenu.astro index 4adffaff4..5dbf89678 100644 --- a/examples/docs/src/components/RightSidebar/MoreMenu.astro +++ b/examples/docs/src/components/RightSidebar/MoreMenu.astro @@ -1,13 +1,13 @@ --- import ThemeToggleButton from './ThemeToggleButton'; -import * as CONFIG from '../../config'; +import { COMMUNITY_INVITE_URL } from '../../consts'; type Props = { editHref: string; }; -const { editHref } = Astro.props as Props; -const showMoreSection = CONFIG.COMMUNITY_INVITE_URL; +const { editHref } = Astro.props; +const showMoreSection = Boolean(COMMUNITY_INVITE_URL); --- {showMoreSection && <h2 class="heading">More</h2>} @@ -39,9 +39,9 @@ const showMoreSection = CONFIG.COMMUNITY_INVITE_URL; ) } { - CONFIG.COMMUNITY_INVITE_URL && ( + COMMUNITY_INVITE_URL && ( <li class={`header-link depth-2`}> - <a href={CONFIG.COMMUNITY_INVITE_URL} target="_blank"> + <a href={COMMUNITY_INVITE_URL} target="_blank"> <svg aria-hidden="true" focusable="false" diff --git a/examples/docs/src/components/RightSidebar/RightSidebar.astro b/examples/docs/src/components/RightSidebar/RightSidebar.astro index d45fbd494..2a7190e50 100644 --- a/examples/docs/src/components/RightSidebar/RightSidebar.astro +++ b/examples/docs/src/components/RightSidebar/RightSidebar.astro @@ -1,14 +1,14 @@ --- +import type { MarkdownHeading } from 'astro'; import TableOfContents from './TableOfContents'; import MoreMenu from './MoreMenu.astro'; -import type { MarkdownHeading } from 'astro'; type Props = { headings: MarkdownHeading[]; githubEditUrl: string; }; -const { headings, githubEditUrl } = Astro.props as Props; +const { headings, githubEditUrl } = Astro.props; --- <nav class="sidebar-nav" aria-labelledby="grid-right"> diff --git a/examples/docs/src/components/RightSidebar/TableOfContents.tsx b/examples/docs/src/components/RightSidebar/TableOfContents.tsx index 34b0ab732..962d64ec2 100644 --- a/examples/docs/src/components/RightSidebar/TableOfContents.tsx +++ b/examples/docs/src/components/RightSidebar/TableOfContents.tsx @@ -1,6 +1,6 @@ -import { unescape } from 'html-escaper'; import type { MarkdownHeading } from 'astro'; import type { FunctionalComponent } from 'preact'; +import { unescape } from 'html-escaper'; import { useState, useEffect, useRef } from 'preact/hooks'; type ItemOffsets = { diff --git a/examples/docs/src/config.ts b/examples/docs/src/consts.ts index 744c93ca1..6486f0325 100644 --- a/examples/docs/src/config.ts +++ b/examples/docs/src/consts.ts @@ -1,8 +1,8 @@ export const SITE = { title: 'Documentation', description: 'Your website description.', - defaultLanguage: 'en_US', -}; + defaultLanguage: 'en-us', +} as const; export const OPEN_GRAPH = { image: { @@ -14,17 +14,6 @@ export const OPEN_GRAPH = { twitter: 'astrodotbuild', }; -// This is the type of the frontmatter you put in the docs markdown files. -export type Frontmatter = { - title: string; - description: string; - layout: string; - image?: { src: string; alt: string }; - dir?: 'ltr' | 'rtl'; - ogLocale?: string; - lang?: string; -}; - export const KNOWN_LANGUAGES = { English: 'en', } as const; diff --git a/examples/docs/src/content/config.ts b/examples/docs/src/content/config.ts new file mode 100644 index 000000000..2780035b1 --- /dev/null +++ b/examples/docs/src/content/config.ts @@ -0,0 +1,20 @@ +import { defineCollection, z } from 'astro:content'; +import { SITE } from '../consts'; + +const docs = defineCollection({ + schema: z.object({ + title: z.string().default(SITE.title), + description: z.string().default(SITE.description), + lang: z.literal('en-us').default(SITE.defaultLanguage), + dir: z.union([z.literal('ltr'), z.literal('rtl')]).default('ltr'), + image: z + .object({ + src: z.string(), + alt: z.string(), + }) + .optional(), + ogLocale: z.string().optional(), + }), +}); + +export const collections = { docs }; diff --git a/examples/docs/src/pages/en/introduction.md b/examples/docs/src/content/docs/en/introduction.md index af9249a97..9e8f7d040 100644 --- a/examples/docs/src/pages/en/introduction.md +++ b/examples/docs/src/content/docs/en/introduction.md @@ -1,7 +1,6 @@ --- -title: Introduction -description: Docs intro -layout: ../../layouts/MainLayout.astro +title: "Introduction" +description: "Docs intro" --- **Welcome to Astro!** diff --git a/examples/docs/src/pages/en/page-2.md b/examples/docs/src/content/docs/en/page-2.md index 84ffea94c..d630ad2f5 100644 --- a/examples/docs/src/pages/en/page-2.md +++ b/examples/docs/src/content/docs/en/page-2.md @@ -1,7 +1,6 @@ --- -title: Page 2 -description: Lorem ipsum dolor sit amet - 2 -layout: ../../layouts/MainLayout.astro +title: "Page 2" +description: "Lorem ipsum dolor sit amet - 2" --- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/examples/docs/src/pages/en/page-3.md b/examples/docs/src/content/docs/en/page-3.md index 6d590f103..fa0a0c766 100644 --- a/examples/docs/src/pages/en/page-3.md +++ b/examples/docs/src/content/docs/en/page-3.md @@ -1,7 +1,6 @@ --- -title: Page 3 -description: Lorem ipsum dolor sit amet - 3 -layout: ../../layouts/MainLayout.astro +title: "Page 3" +description: "Lorem ipsum dolor sit amet - 3" --- This is a fully-featured page, written in Markdown! diff --git a/examples/docs/src/pages/en/page-4.md b/examples/docs/src/content/docs/en/page-4.md index 85416ffa0..af7667366 100644 --- a/examples/docs/src/pages/en/page-4.md +++ b/examples/docs/src/content/docs/en/page-4.md @@ -1,7 +1,6 @@ --- -title: Page 4 -description: Lorem ipsum dolor sit amet - 4 -layout: ../../layouts/MainLayout.astro +title: "Page 4" +description: "Lorem ipsum dolor sit amet - 4" --- This is a fully-featured page, written in Markdown! diff --git a/examples/docs/src/env.d.ts b/examples/docs/src/env.d.ts index 8e48612f5..576fcce3d 100644 --- a/examples/docs/src/env.d.ts +++ b/examples/docs/src/env.d.ts @@ -1,4 +1,5 @@ /// <reference types="astro/client" /> +/// <reference path="../.astro/types.d.ts" /> interface ImportMetaEnv { readonly GITHUB_TOKEN: string | undefined; diff --git a/examples/docs/src/languages.ts b/examples/docs/src/languages.ts index b44d2ba86..935e5da84 100644 --- a/examples/docs/src/languages.ts +++ b/examples/docs/src/languages.ts @@ -1,4 +1,4 @@ -import { KNOWN_LANGUAGES, KNOWN_LANGUAGE_CODES } from './config'; +import { KNOWN_LANGUAGES, KNOWN_LANGUAGE_CODES } from './consts'; export { KNOWN_LANGUAGES, KNOWN_LANGUAGE_CODES }; export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//; diff --git a/examples/docs/src/layouts/MainLayout.astro b/examples/docs/src/layouts/MainLayout.astro index 60d43922a..931b75dba 100644 --- a/examples/docs/src/layouts/MainLayout.astro +++ b/examples/docs/src/layouts/MainLayout.astro @@ -1,32 +1,32 @@ --- +import type { MarkdownHeading } from 'astro'; +import type { CollectionEntry } from 'astro:content'; import HeadCommon from '../components/HeadCommon.astro'; import HeadSEO from '../components/HeadSEO.astro'; import Header from '../components/Header/Header.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'; -import type { MarkdownHeading } from 'astro'; import Footer from '../components/Footer/Footer.astro'; +import { GITHUB_EDIT_URL, SITE } from '../consts'; -type Props = { - frontmatter: CONFIG.Frontmatter; +type Props = CollectionEntry<'docs'>['data'] & { headings: MarkdownHeading[]; }; -const { frontmatter, headings } = Astro.props as Props; +const { headings, ...data } = Astro.props; const canonicalURL = new URL(Astro.url.pathname, Astro.site); const currentPage = Astro.url.pathname; const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`; -const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; +const githubEditUrl = `${GITHUB_EDIT_URL}/${currentFile}`; --- -<html dir={frontmatter.dir ?? 'ltr'} lang={frontmatter.lang ?? 'en-us'} class="initial"> +<html dir={data.dir} lang={data.lang} class="initial"> <head> <HeadCommon /> - <HeadSEO frontmatter={frontmatter} canonicalUrl={canonicalURL} /> + <HeadSEO {...data} canonicalUrl={canonicalURL} /> <title> - {frontmatter.title ? `${frontmatter.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title} + {`${data.title} 🚀 ${SITE.title}`} </title> <style> body { @@ -126,7 +126,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; <LeftSidebar currentPage={currentPage} /> </aside> <div id="grid-main"> - <PageContent frontmatter={frontmatter} headings={headings} githubEditUrl={githubEditUrl}> + <PageContent title={data.title} headings={headings} githubEditUrl={githubEditUrl}> <slot /> </PageContent> </div> diff --git a/examples/docs/src/pages/[...slug].astro b/examples/docs/src/pages/[...slug].astro new file mode 100644 index 000000000..a59e4bc2a --- /dev/null +++ b/examples/docs/src/pages/[...slug].astro @@ -0,0 +1,22 @@ +--- +import { CollectionEntry, getCollection } from 'astro:content'; +import MainLayout from '../layouts/MainLayout.astro'; + +export async function getStaticPaths() { + const docs = await getCollection('docs'); + return docs.map((entry) => ({ + params: { + slug: entry.slug, + }, + props: entry, + })); +} +type Props = CollectionEntry<'docs'>; + +const post = Astro.props; +const { Content, headings } = await post.render(); +--- + +<MainLayout headings={headings} {...post.data}> + <Content /> +</MainLayout> |