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

This reverts commit be36113b791094357f6259fe1419e9a19e1e5d0b.

16 files changed, 323 insertions, 0 deletions

diff --git a/examples/cms-prismic/src/components/Blog.astro b/examples/cms-prismic/src/components/Blog.astro
new file mode 100644
index 000000000..11d79d85a
--- /dev/null
+++ b/examples/cms-prismic/src/components/Blog.astro
@@ -0,0 +1,27 @@
+---
+import BlogCard from './BlogCard.astro';
+import AsText from './Prismic/AsText.astro'
+
+export interface Props {
+  slice_type: string | null;
+  slice_label: string | null;
+  items: Array<object>;
+  primary: object;
+}
+const { blogData } = Astro.props
+---
+
+<section>
+    <header class="major">
+        <h2><AsText data={blogData.primary.featured_blogpost_title}/></h2>
+    </header>
+    <div class="row">
+        {
+            blogData.items.map(item => (
+                <div class="col-4 col-6-medium col-12-small">
+                    <BlogCard data={item.featured_blogpost}/>
+                </div>
+            ))
+        }
+    </div>
+</section>
\ No newline at end of file
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>
diff --git a/examples/cms-prismic/src/components/Event.astro b/examples/cms-prismic/src/components/Event.astro
new file mode 100644
index 000000000..e29e24062
--- /dev/null
+++ b/examples/cms-prismic/src/components/Event.astro
@@ -0,0 +1,18 @@
+---
+import AsText from './Prismic/AsText.astro'
+import Excerpt from './Prismic/Excerpt.astro'
+
+const { eventItem } = Astro.props
+const { event_image, event_link} = eventItem
+const { title, date, description} = event_link.data
+const monthNames = ["January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December"
+];
+const [year, month, day] = date.split('-')
+const monthName = monthNames[parseInt(month) - 1].length > 3 ? monthNames[parseInt(month) - 1].substring(0, 3) : monthNames[parseInt(month) - 1]
+---
+<li>
+    <span class="date">{monthName} <strong>{day}</strong></span>
+    <h3><a href="#"><AsText data={title}/></a></h3>
+    <p><Excerpt data={description}/></p>
+</li>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Events.astro b/examples/cms-prismic/src/components/Events.astro
new file mode 100644
index 000000000..5dba07363
--- /dev/null
+++ b/examples/cms-prismic/src/components/Events.astro
@@ -0,0 +1,8 @@
+---
+import Event from './Event.astro'
+
+const { data } = Astro.props
+---
+<ul class="dates">
+    { data.map(event => (<Event eventItem={event}/>)) }
+</ul>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Footer.astro b/examples/cms-prismic/src/components/Footer.astro
new file mode 100644
index 000000000..886b9527e
--- /dev/null
+++ b/examples/cms-prismic/src/components/Footer.astro
@@ -0,0 +1,77 @@
+---
+import Events from './Events.astro'
+import AsText from './Prismic/AsText.astro'
+import AsHTML from './Prismic/AsHTML.astro'
+import PrismicDOM from 'prismic-dom'
+import { initApi, Predicates } from '@/api/prismic.js'
+
+const api = await initApi()
+const { results } = await api.query(
+    Predicates.at('document.type', 'footer'),
+    { 'fetchLinks' : ['event.title', 'event.date', 'event.description'] }
+)
+const { heading, address_label, address, email_label, email, phone_label, phone, body } = results[0].data
+---
+<section id="footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-8 col-12-medium">
+                <section>
+                {
+                    body.map(slice => (
+                        slice.slice_type === 'events' && 
+                        <header>
+                            <h2><AsText data={slice.primary.events_section_title}/></h2>
+                        </header>
+                        <Events data={slice.items}/>
+                    ))
+                }
+                </section>
+            </div>
+            <div class="col-4 col-12-medium" style="">
+                <section>
+                    <header>
+                        <h2><AsText data={heading}/></h2>
+                    </header>
+                    <ul class="social">
+                        {
+                            body.map(slice => (
+                                slice.slice_type === 'social_media' &&
+                                <li><a class="icon brands fa-facebook-f" href={PrismicDOM.Link.url(slice.primary.facebook)}><span class="label">Facebook</span></a></li>
+                                <li><a class="icon brands fa-twitter" href={PrismicDOM.Link.url(slice.primary.twitter)}><span class="label">Twitter</span></a></li>
+                                <li><a class="icon brands fa-dribbble" href={PrismicDOM.Link.url(slice.primary.dribbble)}><span class="label">Dribbble</span></a></li>
+                                <li><a class="icon brands fa-tumblr" href={PrismicDOM.Link.url(slice.primary.tumblr)}><span class="label">Tumblr</span></a></li>
+                                <li><a class="icon brands fa-linkedin-in" href={PrismicDOM.Link.url(slice.primary.linkedin)}><span class="label">LinkedIn</span></a></li>
+                            ))
+                        }
+                        
+                    </ul>
+                    <ul class="contact">
+                        <li>
+                            <h3><AsText data={address_label}/></h3>
+                            <AsHTML data={address}/>
+                        </li>
+                        <li>
+                            <h3><AsText data={email_label}/></h3>
+                            <p><a href="#"><AsText data={email}/></a></p>
+                        </li>
+                        <li>
+                            <h3><AsText data={phone_label}/></h3>
+                            <p><AsText data={phone}/></p>
+                        </li>
+                    </ul>
+                </section>
+            </div>
+            <div class="col-12">
+
+                <!-- Copyright -->
+                    <div id="copyright">
+                        <ul class="links">
+                            <li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
+                        </ul>
+                    </div>
+
+            </div>
+        </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Head.astro b/examples/cms-prismic/src/components/Head.astro
new file mode 100644
index 000000000..bbcf4a917
--- /dev/null
+++ b/examples/cms-prismic/src/components/Head.astro
@@ -0,0 +1,7 @@
+---
+
+---
+<title>Astro + Prismic</title>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+<link rel="stylesheet" href="/assets/css/main.css" />
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Header/Header.astro b/examples/cms-prismic/src/components/Header/Header.astro
new file mode 100644
index 000000000..be872de3a
--- /dev/null
+++ b/examples/cms-prismic/src/components/Header/Header.astro
@@ -0,0 +1,24 @@
+---
+import Navbar from './Navbar.astro'
+import AsText from '../Prismic/AsText.astro'
+import { initApi, Predicates } from '@/api/prismic.js'
+
+const api = await initApi()
+const { results } = await api.query(Predicates.at('document.type', 'header'))
+const { title, hero_image, subheading, tag_line } = results[0].data
+const { pathname } = Astro.request.url
+---
+
+<section id="header">
+  <h1><a href="/"><AsText data={title}/></a></h1>
+  <Navbar/>
+  {
+    pathname === '/' &&
+    <section id="banner" style={`background: #CCE8F4 url(${hero_image.url}); background-position: center center; background-size: cover; background-repeat: no-repeat;`}>
+      <header>
+        <h2><AsText data={subheading}/></h2>
+        <p><AsText data={tag_line}/></p>
+      </header>
+    </section>
+  }
+</section>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Header/Navbar.astro b/examples/cms-prismic/src/components/Header/Navbar.astro
new file mode 100644
index 000000000..a3c1d67b4
--- /dev/null
+++ b/examples/cms-prismic/src/components/Header/Navbar.astro
@@ -0,0 +1,11 @@
+---
+const { pathname } = Astro.request.url
+---
+
+<nav id="nav">
+    <ul>
+        <li class={pathname === '/' ? 'current' : ''}><a href="/">Home</a></li>
+        <li class={pathname === '/blogs' ? 'current' : ''}><a href="/blogs">Blogs</a></li>
+        <li class={pathname === '/portfolios' ? 'current' : ''}><a href="/portfolios">Portfolios</a></li>
+    </ul>
+</nav>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Pagination.astro b/examples/cms-prismic/src/components/Pagination.astro
new file mode 100644
index 000000000..d15ed23d1
--- /dev/null
+++ b/examples/cms-prismic/src/components/Pagination.astro
@@ -0,0 +1,36 @@
+---
+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 {
+  margin-right: auto;
+}
+.next {
+  margin-left: auto;
+}
+.prev span {
+  margin-right: .5rem;
+}
+.next span {
+  margin-left: .5rem;
+}
+</style>
+
+<div class="wrapper">
+  <nav class="nav">
+    <a class="prev button" href={prevUrl || '#'} aria-label="Previous Page" style={!prevUrl && "pointer-events: none; background-color: gray;"}><span class="fas fa-arrow-left"></span>Prev</a>
+    <a class="next button" href={nextUrl || '#'} aria-label="Next Page" style={!nextUrl && "pointer-events: none; background-color: gray;"}>Next<span class="fas fa-arrow-right"></span></a>
+  </nav>
+</div>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Portfolio.astro b/examples/cms-prismic/src/components/Portfolio.astro
new file mode 100644
index 000000000..988341444
--- /dev/null
+++ b/examples/cms-prismic/src/components/Portfolio.astro
@@ -0,0 +1,25 @@
+---
+import PortfolioCard from './PortfolioCard.astro'
+import AsText from './Prismic/AsText.astro'
+
+export interface Props {
+  slice_type: string | null;
+  slice_label: string | null;
+  items: Array<object>;
+  primary: object;
+}
+const { portfolioData } = Astro.props
+---
+
+<section>
+    <header class="major">
+        <h2><AsText data={portfolioData.primary.featured_projects_title}/></h2>
+    </header>
+    <div class="row">
+        {
+            portfolioData.items.map(item => (
+                <PortfolioCard data={item}/>
+            ))
+        }
+    </div>
+</section>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/PortfolioCard.astro b/examples/cms-prismic/src/components/PortfolioCard.astro
new file mode 100644
index 000000000..372531ed0
--- /dev/null
+++ b/examples/cms-prismic/src/components/PortfolioCard.astro
@@ -0,0 +1,24 @@
+---
+import AsText from './Prismic/AsText.astro'
+import Excerpt from './Prismic/Excerpt.astro'
+
+const { data } = Astro.props
+const image = data.featured_project_thumbnail ? data.featured_project_thumbnail : data.data.image 
+const portfolioData = "featured_project" in data ? data.featured_project.data : data.data
+const uid = "uid" in data ? data.uid : data.featured_project.uid
+---
+
+<div class="col-4 col-6-medium col-12-small">
+    <section class="box">
+        <a href={`/portfolio/${uid}`} class="image featured"><img src={image.url} alt={image.alt} style="max-height: 250px; object-fit: cover; object-position: 50% 65%;" /></a>
+        <header>
+            <h3><AsText data={portfolioData.title}/></h3>
+        </header>
+        <p class="excerpt"><Excerpt data={portfolioData.description}/></p>
+        <footer>
+            <ul class="actions">
+                <li><a href={`/portfolio/${uid}`} class="button alt">Find out more</a></li>
+            </ul>
+        </footer>
+    </section>
+</div>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Prismic/AsHTML.astro b/examples/cms-prismic/src/components/Prismic/AsHTML.astro
new file mode 100644
index 000000000..06890e916
--- /dev/null
+++ b/examples/cms-prismic/src/components/Prismic/AsHTML.astro
@@ -0,0 +1,8 @@
+---
+import PrismicDOM from 'prismic-dom'
+
+const { data } = Astro.props
+
+const HTML = PrismicDOM.RichText.asHtml(data)
+---
+{ HTML }
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Prismic/AsText.astro b/examples/cms-prismic/src/components/Prismic/AsText.astro
new file mode 100644
index 000000000..f54ac8141
--- /dev/null
+++ b/examples/cms-prismic/src/components/Prismic/AsText.astro
@@ -0,0 +1,8 @@
+---
+import PrismicDOM from 'prismic-dom'
+
+const { data } = Astro.props
+
+const Text = PrismicDOM.RichText.asText(data)
+---
+{ Text }
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Prismic/Date.astro b/examples/cms-prismic/src/components/Prismic/Date.astro
new file mode 100644
index 000000000..f10a24469
--- /dev/null
+++ b/examples/cms-prismic/src/components/Prismic/Date.astro
@@ -0,0 +1,14 @@
+---
+import PrismicDOM from 'prismic-dom'
+
+const { dateRaw, locale = "en-US" } = Astro.props
+
+const date = PrismicDOM.Date(dateRaw)
+
+const formattedDate = new Intl.DateTimeFormat(locale,{
+  year: "numeric",
+  month: "short",
+  day: "2-digit"
+}).format(date);
+---
+{ formattedDate }
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Prismic/Excerpt.astro b/examples/cms-prismic/src/components/Prismic/Excerpt.astro
new file mode 100644
index 000000000..496056970
--- /dev/null
+++ b/examples/cms-prismic/src/components/Prismic/Excerpt.astro
@@ -0,0 +1,8 @@
+---
+import PrismicDOM from 'prismic-dom'
+
+const { data } = Astro.props
+
+const Text = PrismicDOM.RichText.asText(data).substring(0,80) + "..."
+---
+{ Text }
\ No newline at end of file
diff --git a/examples/cms-prismic/src/components/Prismic/URL.astro b/examples/cms-prismic/src/components/Prismic/URL.astro
new file mode 100644
index 000000000..bf37ff2df
--- /dev/null
+++ b/examples/cms-prismic/src/components/Prismic/URL.astro
@@ -0,0 +1,7 @@
+---
+import PrismicDOM from 'prismic-dom'
+
+const { link } = Astro.props
+const URL = PrismicDOM.Link.url(link);
+---
+{ URL }
\ No newline at end of file