diff options
Diffstat (limited to 'examples/blog-multiple-authors/src/components')
4 files changed, 154 insertions, 155 deletions
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> |