Added descriptions to docs pages (#1550)

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

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.

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.

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`.

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.

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.

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:

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.

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.

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.

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.**

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

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:

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:

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.

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.

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]**

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.

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.

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.

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

examples/docs/src/components/HeadSEO.astro

@@ -21,7 +21,7 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
 <meta property="og:locale" content={content.ogLocale ?? SITE.defaultLanguage}/>
 <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 -->
@@ -32,8 +32,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