diff options
Diffstat (limited to 'docs/src')
21 files changed, 25 insertions, 5 deletions
diff --git a/docs/src/components/HeadSEO.astro b/docs/src/components/HeadSEO.astro index be6b016c7..434f4a010 100644 --- a/docs/src/components/HeadSEO.astro +++ b/docs/src/components/HeadSEO.astro @@ -5,7 +5,7 @@ export interface Props { site: any, canonicalURL: URL | string, }; -const { +const { content = {}, canonicalURL, } = Astro.props; @@ -23,7 +23,7 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; <meta property="og:locale" content={content.ogLocale ?? OPEN_GRAPH.locale}/> <meta property="og:image" content={canonicalImageSrc}/> <meta property="og:image:alt" content={imageAlt}/> -<meta property="og:description" content={content.description ? content.description : SITE.description}/> +<meta name="description" property="og:description" content={content.description ? content.description : SITE.description}/> <meta property="og:site_name" content={SITE.title}/> <!-- Twitter Tags --> @@ -34,8 +34,8 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; <meta name="twitter:image" content={canonicalImageSrc}/> <meta name="twitter:image:alt" content={imageAlt}/> -<!-- - TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense? +<!-- + TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense? Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this. Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg diff --git a/docs/src/pages/comparing-astro-vs-other-tools.md b/docs/src/pages/comparing-astro-vs-other-tools.md index 4eac27018..773a6a552 100644 --- a/docs/src/pages/comparing-astro-vs-other-tools.md +++ b/docs/src/pages/comparing-astro-vs-other-tools.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Comparing Astro +description: Comparing Astro with other static site generators like Gatsby, Next.js, Nuxt, Hugo, Eleventy, and more. --- We often get asked the question, "How does Astro compare to my favorite site builder, **\_\_\_\_**?" This guide was written to help answer that question for several popular site builders and Astro alternatives. diff --git a/docs/src/pages/core-concepts/astro-components.md b/docs/src/pages/core-concepts/astro-components.md index f85e9f138..1f1ae9a4a 100644 --- a/docs/src/pages/core-concepts/astro-components.md +++ b/docs/src/pages/core-concepts/astro-components.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Astro Components +description: An intro to the .astro component syntax. --- **Astro Components** (files ending with `.astro`) are the foundation of server-side templating in Astro. Think of the Astro component syntax as HTML enhanced with JavaScript. diff --git a/docs/src/pages/core-concepts/astro-pages.md b/docs/src/pages/core-concepts/astro-pages.md index 1657be290..656aecc93 100644 --- a/docs/src/pages/core-concepts/astro-pages.md +++ b/docs/src/pages/core-concepts/astro-pages.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Pages +description: An intro to Astro pages, components that function as full pages. --- **Pages** are a special type of [Astro Component](/core-concepts/astro-components) that handle routing, data loading, and templating for each page of your website. You can think of them like any other Astro component, just with extra responsibilities. @@ -61,5 +62,5 @@ console.log(data); ## Custom 404 Error Page -For a custom 404 error page create a `404.astro` file in `/src/pages`. That builds to a `404.html` page. Most [deploy services](/guides/deploy) will find and use it. +For a custom 404 error page create a `404.astro` file in `/src/pages`. That builds to a `404.html` page. Most [deploy services](/guides/deploy) will find and use it. This is special and different to the default behavior building `page.astro` (or `page/index.astro`) to `page/index.html`. diff --git a/docs/src/pages/core-concepts/component-hydration.md b/docs/src/pages/core-concepts/component-hydration.md index ce7e3c304..60ea26fd7 100644 --- a/docs/src/pages/core-concepts/component-hydration.md +++ b/docs/src/pages/core-concepts/component-hydration.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Partial Hydration in Astro +description: Learn how partial hydration works using the "Islands Architecture" in Astro. --- **Astro generates every website with zero client-side JavaScript, by default.** Use any frontend UI component that you'd like (React, Svelte, Vue, etc.) and Astro will automatically render it to HTML at build-time and strip away all JavaScript. This keeps every site fast by default. diff --git a/docs/src/pages/core-concepts/layouts.md b/docs/src/pages/core-concepts/layouts.md index 534c66ab3..dcd58e824 100644 --- a/docs/src/pages/core-concepts/layouts.md +++ b/docs/src/pages/core-concepts/layouts.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Layouts +description: An intro to layouts, a type of Astro component that is shared between pages for common layouts. --- **Layouts** are a special type of [Component](/core-concepts/astro-components) that help you share and reuse common page layouts within your project. diff --git a/docs/src/pages/core-concepts/project-structure.md b/docs/src/pages/core-concepts/project-structure.md index 3c2207a5b..a0cae897e 100644 --- a/docs/src/pages/core-concepts/project-structure.md +++ b/docs/src/pages/core-concepts/project-structure.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Project Structure +description: Learn how to structure a project with Astro. --- Astro includes an opinionated folder layout for your project. Every Astro project must include these directories and files: diff --git a/docs/src/pages/core-concepts/routing.md b/docs/src/pages/core-concepts/routing.md index be86d9474..5469bf07b 100644 --- a/docs/src/pages/core-concepts/routing.md +++ b/docs/src/pages/core-concepts/routing.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Routing +description: An intro to routing with Astro. --- Astro uses **file-based routing** to generate your build URLs based on the file layout of your project `src/pages` directory. When a file is added to the `src/pages` directory of your project, it is automatically available as a route based on its filename. diff --git a/docs/src/pages/getting-started.md b/docs/src/pages/getting-started.md index 5e2df9ea1..861093d3f 100644 --- a/docs/src/pages/getting-started.md +++ b/docs/src/pages/getting-started.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Getting Started +description: A basic intro to Astro. --- Astro is a modern static site builder. Learn what Astro is all about from [our homepage](https://astro.build/) or [our release post](https://astro.build/blog/introducing-astro). This page is an overview of the Astro documentation and all related resources. diff --git a/docs/src/pages/guides/aliases.md b/docs/src/pages/guides/aliases.md index ac93d08d7..d82176a60 100644 --- a/docs/src/pages/guides/aliases.md +++ b/docs/src/pages/guides/aliases.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Aliases +description: An intro to Snowpack aliases with Astro. --- An **alias** is a handy shortcut for your JavaScript imports. This can be a great option if you dislike long relative import paths with many repeating `../` segments. Define an alias to import things directly from some top-level project directory, no matter how deeply nested a file is located. diff --git a/docs/src/pages/guides/data-fetching.md b/docs/src/pages/guides/data-fetching.md index c853dfe54..5f306a2dd 100644 --- a/docs/src/pages/guides/data-fetching.md +++ b/docs/src/pages/guides/data-fetching.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Data Fetching +description: Learn how to fetch remote data with Astro using the fetch API. --- Astro components and pages can fetch remote data to help generate your pages. Astro provides two different tools to pages to help you do this: **fetch()** and **top-level await.** diff --git a/docs/src/pages/guides/debugging.md b/docs/src/pages/guides/debugging.md index 561af0267..64d18f4f3 100644 --- a/docs/src/pages/guides/debugging.md +++ b/docs/src/pages/guides/debugging.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Debugging +description: Debug in Astro using the Debug component --- Astro runs on the server and logs directly to your terminal, so it can be difficult to debug values from Astro. Astro's built-in `<Debug>` component can help you inspect values inside your files on the clientside. Read more about the [built-in Debug Component](/reference/builtin-components#debug-). diff --git a/docs/src/pages/guides/deploy.md b/docs/src/pages/guides/deploy.md index c8ad775ab..663451e74 100644 --- a/docs/src/pages/guides/deploy.md +++ b/docs/src/pages/guides/deploy.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Deploy a Website +description: Multiple different methods to deploy a website with Astro. --- The following guides are based on some shared assumptions: diff --git a/docs/src/pages/guides/imports.md b/docs/src/pages/guides/imports.md index ec49c98d1..b239ff367 100644 --- a/docs/src/pages/guides/imports.md +++ b/docs/src/pages/guides/imports.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Supported Imports +description: Learn how to import different content types with Astro. --- Astro uses Snowpack as its internal build system. Snowpack provides Astro with built-in support for the following file types, with no configuration required: diff --git a/docs/src/pages/guides/markdown-content.md b/docs/src/pages/guides/markdown-content.md index 05d59c1ff..aed8edcb7 100644 --- a/docs/src/pages/guides/markdown-content.md +++ b/docs/src/pages/guides/markdown-content.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Markdown +description: An intro to Markdown with Astro. --- Astro comes with out-of-the-box Markdown support powered by the expansive [remark](https://remark.js.org/) ecosystem. diff --git a/docs/src/pages/guides/pagination.md b/docs/src/pages/guides/pagination.md index 8c1b0e638..d59f836c1 100644 --- a/docs/src/pages/guides/pagination.md +++ b/docs/src/pages/guides/pagination.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Pagination +description: An intro to Astro pagination to split large amounts of data into different pages. --- Astro supports built-in, automatic pagination for large collections of data that need to be split into multiple pages. Astro also automatically includes pagination metadata for things like previous/next page URL, total number of pages, and more. diff --git a/docs/src/pages/guides/publish-to-npm.md b/docs/src/pages/guides/publish-to-npm.md index 6ffe576cc..fc4d20407 100644 --- a/docs/src/pages/guides/publish-to-npm.md +++ b/docs/src/pages/guides/publish-to-npm.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Publish to NPM +description: Learn how to publish Astro components to NPM --- Building a new Astro component? **Publish it to [npm!][npm]** diff --git a/docs/src/pages/guides/rss.md b/docs/src/pages/guides/rss.md index 3c98db661..e13123dc7 100644 --- a/docs/src/pages/guides/rss.md +++ b/docs/src/pages/guides/rss.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: RSS +description: An intro to RSS in Astro --- Astro supports fast, automatic RSS feed generation for blogs and other content websites. diff --git a/docs/src/pages/guides/styling.md b/docs/src/pages/guides/styling.md index 6eda32bd3..d0b5300dd 100644 --- a/docs/src/pages/guides/styling.md +++ b/docs/src/pages/guides/styling.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Styling & CSS +description: Learn how to style components with Astro. --- Astro includes special handling to make writing CSS as easy as possible. Styling inside of Astro components is done by adding a `<style>` tag anywhere. diff --git a/docs/src/pages/installation.md b/docs/src/pages/installation.md index 3d97a7e88..a4637451e 100644 --- a/docs/src/pages/installation.md +++ b/docs/src/pages/installation.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Installation +description: How to install Astro with NPM, PNPM, or Yarn. --- There are a few different ways to install Astro in a new project. diff --git a/docs/src/pages/quick-start.md b/docs/src/pages/quick-start.md index bb2c1fcbf..c7a9678ce 100644 --- a/docs/src/pages/quick-start.md +++ b/docs/src/pages/quick-start.md @@ -1,6 +1,7 @@ --- layout: ~/layouts/MainLayout.astro title: Quick Start +description: The easiest way to get started quickly with Astro. --- ```shell |