diff options
Diffstat (limited to 'examples/blog/src')
15 files changed, 99 insertions, 59 deletions
diff --git a/examples/blog/src/components/Header.astro b/examples/blog/src/components/Header.astro index 75577e6bc..4d3da1fcf 100644 --- a/examples/blog/src/components/Header.astro +++ b/examples/blog/src/components/Header.astro @@ -1,6 +1,6 @@ --- import HeaderLink from './HeaderLink.astro'; -import { SITE_TITLE } from '../config'; +import { SITE_TITLE } from '../consts'; --- <header> diff --git a/examples/blog/src/config.ts b/examples/blog/src/consts.ts index 1d5dbf632..1d5dbf632 100644 --- a/examples/blog/src/config.ts +++ b/examples/blog/src/consts.ts diff --git a/examples/blog/src/pages/blog/first-post.md b/examples/blog/src/content/blog/first-post.md index f98986a08..33b844032 100644 --- a/examples/blog/src/pages/blog/first-post.md +++ b/examples/blog/src/content/blog/first-post.md @@ -1,5 +1,4 @@ --- -layout: "../../layouts/BlogPost.astro" title: "First post" description: "Lorem ipsum dolor sit amet" pubDate: "Jul 08 2022" @@ -14,4 +13,4 @@ Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam s Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. -Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
\ No newline at end of file +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/examples/blog/src/pages/blog/markdown-style-guide.md b/examples/blog/src/content/blog/markdown-style-guide.md index e5e000de9..242e86278 100644 --- a/examples/blog/src/pages/blog/markdown-style-guide.md +++ b/examples/blog/src/content/blog/markdown-style-guide.md @@ -1,5 +1,4 @@ --- -layout: "../../layouts/BlogPost.astro" title: "Markdown Style Guide" description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro." pubDate: "Jul 01 2022" @@ -13,10 +12,15 @@ Here is a sample of some basic Markdown syntax that can be used when writing Mar The following HTML `<h1>`—`<h6>` elements represent six levels of section headings. `<h1>` is the highest section level while `<h6>` is the lowest. # H1 + ## H2 + ### H3 + #### H4 + ##### H5 + ###### H6 ## Paragraph @@ -36,7 +40,7 @@ The blockquote element represents content that is quoted from another source, op #### Blockquote without attribution > Tiam, ad mint andaepu dandae nostion secatur sequo quae. -> **Note** that you can use *Markdown syntax* within a blockquote. +> **Note** that you can use _Markdown syntax_ within a blockquote. #### Blockquote with attribution @@ -48,21 +52,21 @@ The blockquote element represents content that is quoted from another source, op ## Tables | Italics | Bold | Code | -| -------- | -------- | ------ | -| *italics* | **bold** | `code` | +| --------- | -------- | ------ | +| _italics_ | **bold** | `code` | ## Code Blocks ```html -<!doctype html> +<!DOCTYPE html> <html lang="en"> -<head> - <meta charset="utf-8"> - <title>Example HTML5 Document</title> -</head> -<body> - <p>Test</p> -</body> + <head> + <meta charset="utf-8" /> + <title>Example HTML5 Document</title> + </head> + <body> + <p>Test</p> + </body> </html> ``` @@ -76,19 +80,19 @@ The blockquote element represents content that is quoted from another source, op #### Unordered List -* List item -* Another item -* And another item +- List item +- Another item +- And another item #### Nested list -* Fruit - * Apple - * Orange - * Banana -* Dairy - * Milk - * Cheese +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese ## Other Elements — abbr, sub, sup, kbd, mark diff --git a/examples/blog/src/pages/blog/second-post.md b/examples/blog/src/content/blog/second-post.md index 6b4f2d242..1bd5ee465 100644 --- a/examples/blog/src/pages/blog/second-post.md +++ b/examples/blog/src/content/blog/second-post.md @@ -1,5 +1,4 @@ --- -layout: "../../layouts/BlogPost.astro" title: "Second post" description: "Lorem ipsum dolor sit amet" pubDate: "Jul 22 2022" @@ -14,4 +13,4 @@ Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam s Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. -Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
\ No newline at end of file +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/examples/blog/src/pages/blog/third-post.md b/examples/blog/src/content/blog/third-post.md index cba1991c5..d7f1f24b0 100644 --- a/examples/blog/src/pages/blog/third-post.md +++ b/examples/blog/src/content/blog/third-post.md @@ -1,5 +1,4 @@ --- -layout: "../../layouts/BlogPost.astro" title: "Third post" description: "Lorem ipsum dolor sit amet" pubDate: "Jul 15 2022" @@ -14,4 +13,4 @@ Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam s Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. -Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
\ No newline at end of file +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/examples/blog/src/pages/blog/using-mdx.mdx b/examples/blog/src/content/blog/using-mdx.mdx index 628cc7e02..036209d3b 100644 --- a/examples/blog/src/pages/blog/using-mdx.mdx +++ b/examples/blog/src/content/blog/using-mdx.mdx @@ -1,5 +1,4 @@ --- -layout: '../../layouts/BlogPost.astro' title: 'Using MDX' description: 'Lorem ipsum dolor sit amet' pubDate: 'Jul 02 2022' diff --git a/examples/blog/src/content/config.ts b/examples/blog/src/content/config.ts new file mode 100644 index 000000000..b4e86c9f7 --- /dev/null +++ b/examples/blog/src/content/config.ts @@ -0,0 +1,21 @@ +import { defineCollection, z } from 'astro:content'; + +const blog = defineCollection({ + // Type-check frontmatter using a schema + schema: z.object({ + title: z.string(), + description: z.string(), + // Transform string to Date object + pubDate: z + .string() + .or(z.date()) + .transform((val) => new Date(val)), + updatedDate: z + .string() + .optional() + .transform((str) => (str ? new Date(str) : undefined)), + heroImage: z.string().optional(), + }), +}); + +export const collections = { blog }; diff --git a/examples/blog/src/env.d.ts b/examples/blog/src/env.d.ts index f964fe0cf..acef35f17 100644 --- a/examples/blog/src/env.d.ts +++ b/examples/blog/src/env.d.ts @@ -1 +1,2 @@ +/// <reference path="../.astro/types.d.ts" /> /// <reference types="astro/client" /> diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index 4baf8e972..04a94ac48 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -1,21 +1,12 @@ --- +import type { CollectionEntry } from 'astro:content'; import BaseHead from '../components/BaseHead.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; -export interface Props { - content: { - title: string; - description: string; - pubDate?: string; - updatedDate?: string; - heroImage?: string; - }; -} +type Props = CollectionEntry<'blog'>['data']; -const { - content: { title, description, pubDate, updatedDate, heroImage }, -} = Astro.props; +const { title, description, pubDate, updatedDate, heroImage } = Astro.props; --- <html lang="en"> diff --git a/examples/blog/src/pages/about.md b/examples/blog/src/pages/about.md index 2aeb6562e..6a6dd0167 100644 --- a/examples/blog/src/pages/about.md +++ b/examples/blog/src/pages/about.md @@ -14,4 +14,4 @@ Mollis nunc sed id semper risus in. Convallis a cras semper auctor neque. Diam s Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Tortor posuere ac ut consequat semper viverra. Tellus mauris a diam maecenas sed enim ut sem viverra. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Arcu ac tortor dignissim convallis aenean et tortor at. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Egestas tellus rutrum tellus pellentesque eu. Fusce ut placerat orci nulla pellentesque dignissim enim sit amet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Id donec ultrices tincidunt arcu. Id cursus metus aliquam eleifend mi. -Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.
\ No newline at end of file +Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna. diff --git a/examples/blog/src/pages/blog/[...slug].astro b/examples/blog/src/pages/blog/[...slug].astro new file mode 100644 index 000000000..0d656a153 --- /dev/null +++ b/examples/blog/src/pages/blog/[...slug].astro @@ -0,0 +1,21 @@ +--- +import { CollectionEntry, getCollection } from 'astro:content'; +import BlogPost from '../../layouts/BlogPost.astro'; + +export async function getStaticPaths() { + const posts = await getCollection('blog'); + return posts.map((post) => ({ + params: { slug: post.slug }, + props: post, + })); +} +type Props = CollectionEntry<'blog'>; + +const post = Astro.props; +const { Content } = await post.render(); +--- + +<BlogPost {...post.data}> + <h1>{post.data.title}</h1> + <Content /> +</BlogPost> diff --git a/examples/blog/src/pages/blog.astro b/examples/blog/src/pages/blog/index.astro index cedf505b0..f85894b6d 100644 --- a/examples/blog/src/pages/blog.astro +++ b/examples/blog/src/pages/blog/index.astro @@ -1,12 +1,12 @@ --- -import BaseHead from '../components/BaseHead.astro'; -import Header from '../components/Header.astro'; -import Footer from '../components/Footer.astro'; -import { SITE_TITLE, SITE_DESCRIPTION } from '../config'; +import BaseHead from '../../components/BaseHead.astro'; +import Header from '../../components/Header.astro'; +import Footer from '../../components/Footer.astro'; +import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts'; +import { getCollection } from 'astro:content'; -// Use Astro.glob() to fetch all posts, and then sort them by date. -const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort( - (a, b) => new Date(b.frontmatter.pubDate).valueOf() - new Date(a.frontmatter.pubDate).valueOf() +const posts = (await getCollection('blog')).sort( + (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf() ); --- @@ -40,14 +40,14 @@ const posts = (await Astro.glob('./blog/*.{md,mdx}')).sort( { posts.map((post) => ( <li> - <time datetime={post.frontmatter.pubDate}> - {new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', { + <time datetime={post.data.pubDate.toISOString()}> + {post.data.pubDate.toLocaleDateString('en-us', { year: 'numeric', month: 'short', day: 'numeric', })} </time> - <a href={post.url}>{post.frontmatter.title}</a> + <a href={`/blog/${post.slug}/`}>{post.data.title}</a> </li> )) } diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro index aaa9a1f07..26f070da5 100644 --- a/examples/blog/src/pages/index.astro +++ b/examples/blog/src/pages/index.astro @@ -2,7 +2,7 @@ import BaseHead from '../components/BaseHead.astro'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; -import { SITE_TITLE, SITE_DESCRIPTION } from '../config'; +import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; --- <!DOCTYPE html> diff --git a/examples/blog/src/pages/rss.xml.js b/examples/blog/src/pages/rss.xml.js index 4e6ed73c4..3997cc45e 100644 --- a/examples/blog/src/pages/rss.xml.js +++ b/examples/blog/src/pages/rss.xml.js @@ -1,10 +1,16 @@ import rss from '@astrojs/rss'; -import { SITE_TITLE, SITE_DESCRIPTION } from '../config'; +import { getCollection } from 'astro:content'; +import { SITE_TITLE, SITE_DESCRIPTION } from '../consts'; -export const get = () => - rss({ +export async function get(context) { + const posts = await getCollection('blog'); + return rss({ title: SITE_TITLE, description: SITE_DESCRIPTION, - site: import.meta.env.SITE, - items: import.meta.glob('./blog/**/*.{md,mdx}'), + site: context.site.href, + items: posts.map((post) => ({ + ...post.data, + link: `/blog/${post.slug}/`, + })), }); +} |