1 files changed, 66 insertions, 0 deletions
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>