diff options
Diffstat (limited to 'examples/blog-multiple-authors')
11 files changed, 404 insertions, 422 deletions
diff --git a/examples/blog-multiple-authors/astro.config.mjs b/examples/blog-multiple-authors/astro.config.mjs index 68499b3fa..a1516f292 100644 --- a/examples/blog-multiple-authors/astro.config.mjs +++ b/examples/blog-multiple-authors/astro.config.mjs @@ -8,6 +8,6 @@ // @ts-check export default /** @type {import('astro').AstroUserConfig} */ ({ - // Enable the Preact renderer to support Preact JSX components. - renderers: ['@astrojs/renderer-preact'], + // Enable the Preact renderer to support Preact JSX components. + renderers: ['@astrojs/renderer-preact'], }); diff --git a/examples/blog-multiple-authors/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro index 0bf1ec4b0..ffdc0f1c7 100644 --- a/examples/blog-multiple-authors/src/components/MainHead.astro +++ b/examples/blog-multiple-authors/src/components/MainHead.astro @@ -1,45 +1,45 @@ --- export interface Props { - title: string; - description: string; - image?: string; - type?: string; - next?: string; - prev?: string; - canonicalURL?: string | URL; + title: string; + description: string; + image?: string; + type?: string; + next?: string; + prev?: string; + canonicalURL?: string | URL; } const { title, description, image, type, next, prev, canonicalURL } = Astro.props as Props; --- <!-- Common --> -<meta charset="UTF-8"> +<meta charset="UTF-8" /> <title>{title}</title> -<meta name="description" content={description}> -<link rel="preconnect" href="https://fonts.gstatic.com"> -<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> +<meta name="description" content={description} /> +<link rel="preconnect" href="https://fonts.gstatic.com" /> +<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href={Astro.resolve('../styles/global.css')} /> <!-- Sitemap --> -<link rel="sitemap" href="/sitemap.xml"> +<link rel="sitemap" href="/sitemap.xml" /> <!-- RSS --> -<link rel="alternate" type="application/rss+xml" href="/feed/posts.xml"> +<link rel="alternate" type="application/rss+xml" href="/feed/posts.xml" /> <!-- Favicon --> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <!-- SEO --> -<link rel="canonical" href={canonicalURL}> +<link rel="canonical" href={canonicalURL} /> {next && <link rel="next" aria-label="Previous Page" href={new URL(next, canonicalURL).href}>} {prev && <link rel="prev" aria-label="Next Page" href={new URL(prev, canonicalURL).href}>} <!-- OpenGraph --> -<meta property="og:title" content={title}> -<meta property="og:description" content={description}> +<meta property="og:title" content={title} /> +<meta property="og:description" content={description} /> {image && (<meta property="og:image" content={new URL(image, canonicalURL)}>)} <!-- Twitter --> -<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'}> -<meta name="twitter:site" content="@astro"> -<meta name="twitter:title" content={title}> -<meta name="twitter:description" content={description}> +<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} /> +<meta name="twitter:site" content="@astro" /> +<meta name="twitter:title" content={title} /> +<meta name="twitter:description" content={description} /> {image && (<meta name="twitter:image" content={image}>)} diff --git a/examples/blog-multiple-authors/src/components/Nav.astro b/examples/blog-multiple-authors/src/components/Nav.astro index 04a537f87..a2a5fc3a3 100644 --- a/examples/blog-multiple-authors/src/components/Nav.astro +++ b/examples/blog-multiple-authors/src/components/Nav.astro @@ -1,63 +1,63 @@ --- export interface Props { - title: string; + title: string; } const { title } = Astro.props; --- -<style lang="scss"> -.header { - text-align: center; - - @media (min-width: 600px) { - display: flex; - align-items: center; - padding: 2rem; - } -} - -.title { - margin: 0; - font-size: 1.2em; - letter-spacing: -0.03em; - font-weight: 400; - margin-right: 1em; -} - -.nav { - text-align: center; - - @media (min-width: 600px) { - display: flex; - } -} - -ul { - list-style: none; - margin: 0; - padding: 0; -} - -li { - margin: 0; -} - -a { - display: block; - font-size: 1.2em; - letter-spacing: -0.02em; - margin-left: 0.75em; - margin-right: 0.75em; -} -</style> - <nav class="header"> - <h1 class="title">Don’s Blog</h1> - <ul class="nav"> - <li><a href="/">Home</a></li> - <li><a href="/posts">All Posts</a></li> - <li><a href="/authors/don">Author: Don</a></li> - <li><a href="/authors/sancho">Author: Sancho</a></li> - <li><a href="/about">About</a></li> - </ul> + <h1 class="title">Don’s Blog</h1> + <ul class="nav"> + <li><a href="/">Home</a></li> + <li><a href="/posts">All Posts</a></li> + <li><a href="/authors/don">Author: Don</a></li> + <li><a href="/authors/sancho">Author: Sancho</a></li> + <li><a href="/about">About</a></li> + </ul> </nav> + +<style lang="scss"> + .header { + text-align: center; + + @media (min-width: 600px) { + display: flex; + align-items: center; + padding: 2rem; + } + } + + .title { + margin: 0; + font-size: 1.2em; + letter-spacing: -0.03em; + font-weight: 400; + margin-right: 1em; + } + + .nav { + text-align: center; + + @media (min-width: 600px) { + display: flex; + } + } + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + li { + margin: 0; + } + + a { + display: block; + font-size: 1.2em; + letter-spacing: -0.02em; + margin-left: 0.75em; + margin-right: 0.75em; + } +</style> diff --git a/examples/blog-multiple-authors/src/components/Pagination.astro b/examples/blog-multiple-authors/src/components/Pagination.astro index 401931c07..8cc3941f6 100644 --- a/examples/blog-multiple-authors/src/components/Pagination.astro +++ b/examples/blog-multiple-authors/src/components/Pagination.astro @@ -1,44 +1,44 @@ --- export interface Props { - prevUrl: string; - nextUrl: string; + prevUrl: string; + nextUrl: string; } const { prevUrl, nextUrl } = Astro.props; --- +<div class="wrapper"> + <nav class="nav"> + <a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a> + <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a> + </nav> +</div> + <style lang="scss"> -.nav { - display: flex; - margin-right: auto; - margin-left: auto; - padding-top: 4rem; - padding-bottom: 4rem; -} + .nav { + display: flex; + margin-right: auto; + margin-left: auto; + padding-top: 4rem; + padding-bottom: 4rem; + } -.prev, -.next { - display: block; - text-transform: uppercase; - font-size: 0.8em; + .prev, + .next { + display: block; + text-transform: uppercase; + font-size: 0.8em; - &[href="#"] { - display: none; - } -} + &[href='#'] { + display: none; + } + } -.prev { - margin-right: auto; -} + .prev { + margin-right: auto; + } -.next { - margin-left: auto; -} + .next { + margin-left: auto; + } </style> - -<div class="wrapper"> - <nav class="nav"> - <a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a> - <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a> - </nav> -</div> diff --git a/examples/blog-multiple-authors/src/components/PostPreview.astro b/examples/blog-multiple-authors/src/components/PostPreview.astro index 19e1362e5..81e80ba6c 100644 --- a/examples/blog-multiple-authors/src/components/PostPreview.astro +++ b/examples/blog-multiple-authors/src/components/PostPreview.astro @@ -1,66 +1,65 @@ --- export interface Props { - post: any; - author: string; + post: any; + author: string; } const { post, author } = Astro.props; function formatDate(date) { - return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY + return new Date(date).toUTCString().replace(/(\d\d\d\d) .*/, '$1'); // remove everything after YYYY } --- +<article class="post"> + <div class="data"> + <h2>{post.title}</h2> + <a class="author" href={`/authors/${post.author}`}>{author.name}</a> + <time class="date" datetime={post.date}>{formatDate(post.date)}</time> + <p class="description"> + {post.description} + <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a> + </p> + </div> +</article> + <style lang="scss"> -.post { - padding-top: 6rem; - padding-bottom: 6rem; - border-bottom: 1px solid rgba(black, 0.25); - text-align: center; -} + .post { + padding-top: 6rem; + padding-bottom: 6rem; + border-bottom: 1px solid rgba(black, 0.25); + text-align: center; + } -.author { - text-transform: uppercase; -} + .author { + text-transform: uppercase; + } -.date { - font-style: italic; -} + .date { + font-style: italic; + } -.description { - font-size: 1.25em; -} + .description { + font-size: 1.25em; + } -.link { - text-transform: uppercase; - font-size: 0.8em; - margin-left: 1em; -} + .link { + text-transform: uppercase; + font-size: 0.8em; + margin-left: 1em; + } -h2 { - font-weight: 700; - font-size: 2.75em; - line-height: 1; - letter-spacing: -0.04em; - margin-top: 0; - margin-bottom: 0; -} + h2 { + font-weight: 700; + font-size: 2.75em; + line-height: 1; + letter-spacing: -0.04em; + margin-top: 0; + margin-bottom: 0; + } -time { - display: block; - margin-top: 0.25rem; - margin-bottom: 0.5em; -} + time { + display: block; + margin-top: 0.25rem; + margin-bottom: 0.5em; + } </style> - -<article class="post"> - - <div class="data"> - <h2>{post.title}</h2> - <a class="author" href={`/authors/${post.author}`}>{author.name}</a> - <time class="date" datetime={post.date}>{formatDate(post.date)}</time> - <p class="description"> - {post.description} - <a class="link" href={post.url} aria-label={`Read ${post.title}`}>Read</a> - </p> - </div> -</article> diff --git a/examples/blog-multiple-authors/src/layouts/post.astro b/examples/blog-multiple-authors/src/layouts/post.astro index 64ad9fabd..fd8fcefa6 100644 --- a/examples/blog-multiple-authors/src/layouts/post.astro +++ b/examples/blog-multiple-authors/src/layouts/post.astro @@ -7,73 +7,72 @@ const { content } = Astro.props; let canonicalURL = Astro.request.canonicalURL; --- -<html lang={ content.lang || 'en' }> - <head> - <title>{content.title}</title> - <MainHead title={content.title} description={content.description} image={content.image} canonicalURL={canonicalURL} /> - <style lang="scss"> - .title { - margin-top: 4rem; - margin-bottom: 4rem; - font-size: 3em; - letter-spacing: -0.04em; - text-align: center; - } +<html lang={content.lang || 'en'}> + <head> + <title>{content.title}</title> + <MainHead title={content.title} description={content.description} image={content.image} {canonicalURL} /> + <style lang="scss"> + .title { + margin-top: 4rem; + margin-bottom: 4rem; + font-size: 3em; + letter-spacing: -0.04em; + text-align: center; + } - .description { - margin-bottom: 4rem; - font-size: 1.4em; - font-weight: 400; - text-align: justify; - text-transform: uppercase; - } + .description { + margin-bottom: 4rem; + font-size: 1.4em; + font-weight: 400; + text-align: justify; + text-transform: uppercase; + } - .img { - display: block; - width: 100%; - height: auto; - } + .img { + display: block; + width: 100%; + height: auto; + } - .article { - margin-top: 4rem; - margin-bottom: 6rem; + .article { + margin-top: 4rem; + margin-bottom: 6rem; - :global(p) { - font-size: 1.3em; - line-height: 2; - margin-top: 2em; - margin-bottom: 2em; - } - } + :global(p) { + font-size: 1.3em; + line-height: 2; + margin-top: 2em; + margin-bottom: 2em; + } + } - .posts { - text-transform: uppercase; - } + .posts { + text-transform: uppercase; + } - .footer { - margin-top: 6rem; - padding-bottom: 6rem; - text-align: center; - } - </style> - </head> + .footer { + margin-top: 6rem; + padding-bottom: 6rem; + text-align: center; + } + </style> + </head> - <body> - <Nav /> + <body> + <Nav /> - <main class="wrapper"> - <h2 class="title">{content.title}</h2> - <p class="description">{content.description}</p> - <img class="img" src={content.image} alt=""> - <article class="article"> - <slot /> - </article> - <footer class="footer"> - <a class="posts" href="/posts">All Posts</a> - </footer> - </main> + <main class="wrapper"> + <h2 class="title">{content.title}</h2> + <p class="description">{content.description}</p> + <img class="img" src={content.image} alt="" /> + <article class="article"> + <slot /> + </article> + <footer class="footer"> + <a class="posts" href="/posts">All Posts</a> + </footer> + </main> - <footer> - </footer> - </body> + <footer></footer> + </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/about.astro b/examples/blog-multiple-authors/src/pages/about.astro index 69124a3fa..ad101368b 100644 --- a/examples/blog-multiple-authors/src/pages/about.astro +++ b/examples/blog-multiple-authors/src/pages/about.astro @@ -2,65 +2,69 @@ import MainHead from '../components/MainHead.astro'; import Nav from '../components/Nav.astro'; -let title = "About"; -let description = "About page of an example blog on Astro"; +let title = 'About'; +let description = 'About page of an example blog on Astro'; let canonicalURL = Astro.request.canonicalURL; --- -<html lang="en"> - <head> - <MainHead - title={title} - description={description} - canonicalURL={canonicalURL} - /> - <style lang="scss"> - - .text { - padding-bottom: 6rem; - p { - font-size: 1.2em; - line-height: 2; - margin-top: 2em; - margin-bottom: 2em; - } - } +<html lang="en"> + <head> + <MainHead {title} {description} {canonicalURL} /> + <style lang="scss"> + .text { + padding-bottom: 6rem; - .hero { - display: block; - height: 16rem; - overflow: hidden; - margin: 4rem 0; + p { + font-size: 1.2em; + line-height: 2; + margin-top: 2em; + margin-bottom: 2em; + } + } - &-img { - width: 100%; - height: 100%; - object-fit: cover; - } - } + .hero { + display: block; + height: 16rem; + overflow: hidden; + margin: 4rem 0; - .title { - font-size: 3em; - letter-spacing: -0.04em; - margin-top: 2rem; - margin-bottom: 0; - text-align: center; - } - </style> - </head> - <body> - <Nav title={title} /> + &-img { + width: 100%; + height: 100%; + object-fit: cover; + } + } - <main class="wrapper"> - <h2 class="title">{title}</h2> - <div class="hero"> - <img class="hero-img" src="/images/chapter-01.jpg" alt=""> - </div> - <div class="text"> - <p>The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark, illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections from Motteaux.”</p> - <p>See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others feel these woodcuts and steel engravings well match Quixote’s dreams.</p> - </div> - </main> + .title { + font-size: 3em; + letter-spacing: -0.04em; + margin-top: 2rem; + margin-bottom: 0; + text-align: center; + } + </style> + </head> + <body> + <Nav {title} /> - </body> + <main class="wrapper"> + <h2 class="title">{title}</h2> + <div class="hero"> + <img class="hero-img" src="/images/chapter-01.jpg" alt="" /> + </div> + <div class="text"> + <p> + The book cover and spine above and the images which follow were not part of the original Ormsby translation—they are taken from the 1880 edition of J. W. Clark, + illustrated by Gustave Doré. Clark in his edition states that, “The English text of ‘Don Quixote’ adopted in this edition is that of Jarvis, with occasional corrections + from Motteaux.” + </p> + <p> + See in the introduction below John Ormsby’s critique of both the Jarvis and Motteaux translations. It has been elected in the present Project Gutenberg edition to attach + the famous engravings of Gustave Doré to the Ormsby translation instead of the Jarvis/Motteaux. The detail of many of the Doré engravings can be fully appreciated only by + utilizing the “Full Size” button to expand them to their original dimensions. Ormsby in his Preface has criticized the fanciful nature of Doré’s illustrations; others + feel these woodcuts and steel engravings well match Quixote’s dreams. + </p> + </div> + </main> + </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/authors/[author].astro b/examples/blog-multiple-authors/src/pages/authors/[author].astro index a4dbeb129..21aab27a5 100644 --- a/examples/blog-multiple-authors/src/pages/authors/[author].astro +++ b/examples/blog-multiple-authors/src/pages/authors/[author].astro @@ -1,5 +1,4 @@ --- - import MainHead from '../../components/MainHead.astro'; import Nav from '../../components/Nav.astro'; import PostPreview from '../../components/PostPreview.astro'; @@ -7,16 +6,16 @@ import Pagination from '../../components/Pagination.astro'; import authorData from '../../data/authors.json'; export function getStaticPaths() { - const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); - let allAuthorsUnique = [...new Set(allPosts.map(p => p.author))]; - return allAuthorsUnique.map(author => ({params: {author}, props: {allPosts}})); + const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); + let allAuthorsUnique = [...new Set(allPosts.map((p) => p.author))]; + return allAuthorsUnique.map((author) => ({ params: { author }, props: { allPosts } })); } interface MarkdownFrontmatter { - date: number; - description: string; - title: string; - author: string; + date: number; + description: string; + title: string; + author: string; } const { allPosts } = Astro.props; @@ -25,65 +24,58 @@ const title = 'Don’s Blog'; const description = 'An example blog on Astro'; /** filter posts by author, sort by date */ -const posts = allPosts - .filter((post) => post.author === params.author) - .sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); +const posts = allPosts.filter((post) => post.author === params.author).sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); const author = authorData[posts[0].author]; --- <html lang="en"> - <head> - <title>{title}</title> - <MainHead - title={title} - description={description} - image={posts[0].image} - canonicalURL={canonicalURL.toString()} - /> + <head> + <title>{title}</title> + <MainHead {title} {description} image={posts[0].image} canonicalURL={canonicalURL.toString()} /> - <style lang="scss"> - .title { - display: flex; - align-items: center; - justify-content: center; - font-size: 3em; - letter-spacing: -0.04em; - margin-top: 2rem; - margin-bottom: 0; - } + <style lang="scss"> + .title { + display: flex; + align-items: center; + justify-content: center; + font-size: 3em; + letter-spacing: -0.04em; + margin-top: 2rem; + margin-bottom: 0; + } - .avatar { - width: 1em; - height: 1em; - margin-right: 0.5em; - border-radius: 50%; - overflow:hidden; + .avatar { + width: 1em; + height: 1em; + margin-right: 0.5em; + border-radius: 50%; + overflow: hidden; - &-img { - display: block; - width: 100%; - height: 100%; - object-fit: cover; - } - } + &-img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + } - .count { - font-size: 1em; - display: block; - text-align: center; - } - </style> - </head> + .count { + font-size: 1em; + display: block; + text-align: center; + } + </style> + </head> - <body> - <Nav title={title} /> + <body> + <Nav {title} /> - <main class="wrapper"> - <h2 class="title"> - <div class="avatar"><img class="avatar-img" src={author.image} alt="" /></div> - {author.name} - </h2> - {posts.map((post) => <PostPreview post={post} author={author} />)} - </main> - </body> + <main class="wrapper"> + <h2 class="title"> + <div class="avatar"><img class="avatar-img" src={author.image} alt="" /></div> + {author.name} + </h2> + {posts.map((post) => <PostPreview post={post} author={author} />)} + </main> + </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/index.astro b/examples/blog-multiple-authors/src/pages/index.astro index 5c18a87f0..8ad01c190 100644 --- a/examples/blog-multiple-authors/src/pages/index.astro +++ b/examples/blog-multiple-authors/src/pages/index.astro @@ -7,9 +7,9 @@ import Pagination from '../components/Pagination.astro'; import authorData from '../data/authors.json'; interface MarkdownFrontmatter { - date: number; - image: string; - author: string; + date: number; + image: string; + author: string; } // Component Script: @@ -28,26 +28,22 @@ let firstPage = allPosts.slice(0, 2); // Full Astro Component Syntax: // https://docs.astro.build/core-concepts/astro-components/ --- + <html lang="en"> - <head> - <title>{title}</title> - <MainHead - title={title} - description={description} - image={allPosts[0].image} - canonicalURL={canonicalURL} - /> - </head> - - <body> - <Nav title={title} /> - - <main class="wrapper"> - {allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} - </main> - - <footer> - <Pagination prevUrl="/posts" nextUrl="/posts/2" /> - </footer> - </body> + <head> + <title>{title}</title> + <MainHead {title} {description} image={allPosts[0].image} {canonicalURL} /> + </head> + + <body> + <Nav {title} /> + + <main class="wrapper"> + {allPosts.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} + </main> + + <footer> + <Pagination prevUrl="/posts" nextUrl="/posts/2" /> + </footer> + </body> </html> diff --git a/examples/blog-multiple-authors/src/pages/posts/[...page].astro b/examples/blog-multiple-authors/src/pages/posts/[...page].astro index b615d762f..d0f95ce5b 100644 --- a/examples/blog-multiple-authors/src/pages/posts/[...page].astro +++ b/examples/blog-multiple-authors/src/pages/posts/[...page].astro @@ -5,26 +5,26 @@ import PostPreview from '../../components/PostPreview.astro'; import Pagination from '../../components/Pagination.astro'; import authorData from '../../data/authors.json'; -export async function getStaticPaths({paginate, rss}) { - const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); - const sortedPosts = allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); +export async function getStaticPaths({ paginate, rss }) { + const allPosts = Astro.fetchContent<MarkdownFrontmatter>('../post/*.md'); + const sortedPosts = allPosts.sort((a, b) => new Date(b.date).valueOf() - new Date(a.date).valueOf()); - // Generate an RSS feed from this collection of posts. - // NOTE: This is disabled by default, since it requires `buildOptions.site` to be set in your "astro.config.mjs" file. - // rss({ - // title: 'Don’s Blog', - // description: 'An example blog on Astro', - // customData: `<language>en-us</language>`, - // items: sortedPosts.map(item => ({ - // title: item.title, - // description: item.description, - // link: item.url, - // pubDate: item.date, - // })), - // }); + // Generate an RSS feed from this collection of posts. + // NOTE: This is disabled by default, since it requires `buildOptions.site` to be set in your "astro.config.mjs" file. + // rss({ + // title: 'Don’s Blog', + // description: 'An example blog on Astro', + // customData: `<language>en-us</language>`, + // items: sortedPosts.map(item => ({ + // title: item.title, + // description: item.description, + // link: item.url, + // pubDate: item.date, + // })), + // }); - // Return a paginated collection of paths for all posts - return paginate(sortedPosts, {pageSize: 1}); + // Return a paginated collection of paths for all posts + return paginate(sortedPosts, { pageSize: 1 }); } // page @@ -34,55 +34,47 @@ let canonicalURL = Astro.request.canonicalURL; // collection interface MarkdownFrontmatter { - date: number; - description: string; - title: string; + date: number; + description: string; + title: string; } - const { page } = Astro.props; --- <html lang="en"> - <head> - <title>{title}</title> - <MainHead - title={title} - description={description} - image={page.data[0].image} - canonicalURL={canonicalURL.toString()} - prev={page.url.prev} - next={page.url.next} - /> + <head> + <title>{title}</title> + <MainHead {title} {description} image={page.data[0].image} canonicalURL={canonicalURL.toString()} prev={page.url.prev} next={page.url.next} /> - <style lang="scss"> - .title { - font-size: 3em; - letter-spacing: -0.04em; - margin-top: 2rem; - margin-bottom: 0; - text-align: center; - } + <style lang="scss"> + .title { + font-size: 3em; + letter-spacing: -0.04em; + margin-top: 2rem; + margin-bottom: 0; + text-align: center; + } - .count { - font-size: 1em; - display: block; - text-align: center; - } - </style> - </head> + .count { + font-size: 1em; + display: block; + text-align: center; + } + </style> + </head> - <body> - <Nav title={title} /> + <body> + <Nav {title} /> - <main class="wrapper"> - <h2 class="title">All Posts</h2> - <small class="count">{page.start + 1}–{page.end + 1} of {page.total}</small> - {page.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} - </main> + <main class="wrapper"> + <h2 class="title">All Posts</h2> + <small class="count">{page.start + 1}–{page.end + 1} of {page.total}</small> + {page.data.map((post) => <PostPreview post={post} author={authorData[post.author]} />)} + </main> - <footer> - <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} /> - </footer> - </body> + <footer> + <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} /> + </footer> + </body> </html> diff --git a/examples/blog-multiple-authors/src/styles/global.css b/examples/blog-multiple-authors/src/styles/global.css index d5891f6b4..408d2b9de 100644 --- a/examples/blog-multiple-authors/src/styles/global.css +++ b/examples/blog-multiple-authors/src/styles/global.css @@ -1,25 +1,25 @@ body { - font-family: 'Spectral', serif; - line-height: 1.4; + font-family: 'Spectral', serif; + line-height: 1.4; } p { - line-height: 2; + line-height: 2; } a { - color: crimson; + color: crimson; } img { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } .wrapper { - max-width: 60rem; - margin-left: auto; - margin-right: auto; - padding-left: 2rem; - padding-right: 2rem; + max-width: 60rem; + margin-left: auto; + margin-right: auto; + padding-left: 2rem; + padding-right: 2rem; } |