summaryrefslogtreecommitdiff
path: root/examples/blog-multiple-authors/src/components/PostPreview.astro
diff options
context:
space:
mode:
Diffstat (limited to 'examples/blog-multiple-authors/src/components/PostPreview.astro')
-rw-r--r--examples/blog-multiple-authors/src/components/PostPreview.astro97
1 files changed, 48 insertions, 49 deletions
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>