diff options
Diffstat (limited to 'examples/blog-multiple-authors/src/components')
4 files changed, 215 insertions, 0 deletions
diff --git a/examples/blog-multiple-authors/src/components/MainHead.astro b/examples/blog-multiple-authors/src/components/MainHead.astro new file mode 100644 index 000000000..fbdaa2965 --- /dev/null +++ b/examples/blog-multiple-authors/src/components/MainHead.astro @@ -0,0 +1,42 @@ +--- +export interface Props { + title: string; + description: string; + image?: string; + type?: string; + next?: string; + prev?: string; + canonicalURL?: string; +} + +const { title, description, image, type, next, prev, canonicalURL } = Astro.props as Props; +--- + +<!-- Common --> +<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"> +<link rel="stylesheet" href="/global.css"> +<!-- Sitemap --> +<link rel="sitemap" href="/sitemap.xml"> +<!-- RSS --> +<link rel="alternate" type="application/rss+xml" href="/feed/posts.xml"> + +<!-- SEO --> +<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}> +{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}> +{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 new file mode 100644 index 000000000..a7ef0985f --- /dev/null +++ b/examples/blog-multiple-authors/src/components/Nav.astro @@ -0,0 +1,63 @@ +--- +export interface Props { + 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="/author/don">Author: Don</a></li> + <li><a href="/author/sancho">Author: Sancho</a></li> + <li><a href="/about">About</a></li> + </ul> +</nav> diff --git a/examples/blog-multiple-authors/src/components/Pagination.astro b/examples/blog-multiple-authors/src/components/Pagination.astro new file mode 100644 index 000000000..401931c07 --- /dev/null +++ b/examples/blog-multiple-authors/src/components/Pagination.astro @@ -0,0 +1,44 @@ +--- +export interface Props { + prevUrl: string; + nextUrl: string; +} + +const { prevUrl, nextUrl } = Astro.props; +--- + +<style lang="scss"> +.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; + + &[href="#"] { + display: none; + } +} + +.prev { + margin-right: 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 new file mode 100644 index 000000000..b126ca2fb --- /dev/null +++ b/examples/blog-multiple-authors/src/components/PostPreview.astro @@ -0,0 +1,66 @@ +--- +export interface Props { + 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 +} +--- + +<style lang="scss"> +.post { + padding-top: 6rem; + padding-bottom: 6rem; + border-bottom: 1px solid rgba(black, 0.25); + text-align: center; +} + +.author { + text-transform: uppercase; +} + +.date { + font-style: italic; +} + +.description { + font-size: 1.25em; +} + +.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; +} + +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={`/author/${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> |