Revert "Revert "added prismic x astro example. (#2247)"" (#2252)

This reverts commit be36113b791094357f6259fe1419e9a19e1e5d0b.

1 files changed, 21 insertions, 0 deletions

diff --git a/examples/cms-prismic/src/components/BlogCard.astro b/examples/cms-prismic/src/components/BlogCard.astro
new file mode 100644
index 000000000..1f175f98f
--- /dev/null
+++ b/examples/cms-prismic/src/components/BlogCard.astro
@@ -0,0 +1,21 @@
+---
+import AsText from './Prismic/AsText.astro'
+import Date from './Prismic/Date.astro'
+import Excerpt from './Prismic/Excerpt.astro'
+
+const { data } = Astro.props
+const { uid, first_publication_date, data: postData } = data
+---
+<section class="box">
+    <a href={`/blog/${uid}`} class="image featured"><img src={postData.image.url} alt={postData.image.alt} style="max-height: 250px; object-fit: cover; object-position: 50% 65%;" /></a>
+    <header>
+        <h3><AsText data={postData.title}/></h3>
+        <p><Date dateRaw={first_publication_date}/></p>
+    </header>
+    <p><Excerpt data={postData.content}/></p>
+    <footer>
+        <ul class="actions">
+            <li><a href={`/blog/${uid}`} class="button icon solid fa-file-alt">Continue Reading</a></li>
+        </ul>
+    </footer>
+</section>