added prismic x astro example. (#2247)

23 files changed, 528 insertions, 0 deletions

diff --git a/examples/cms-prismic/src/api/prismic.js b/examples/cms-prismic/src/api/prismic.js
new file mode 100644
index 000000000..77d46184c
--- /dev/null
+++ b/examples/cms-prismic/src/api/prismic.js
@@ -0,0 +1,19 @@
+import Prismic from '@prismicio/client'
+
+const { Predicates } = Prismic;
+const { PUBLIC_PRISMIC_ENDPOINT } = import.meta.env;
+ 
+// https://prismic.io/docs/technologies/integrating-with-an-existing-project-javascript
+
+// Initialize the Prismic api
+function initApi(req){
+    return Prismic.client(PUBLIC_PRISMIC_ENDPOINT, {
+      // accessToken: 'your-access-token', // uncomment this if your API needs a token
+      req: req
+    });
+  }
+
+export {
+    initApi,
+    Predicates
+}
\ No newline at end of file
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
diff --git a/examples/cms-prismic/src/layouts/BaseLayout.astro b/examples/cms-prismic/src/layouts/BaseLayout.astro
new file mode 100644
index 000000000..3e7ec678f
--- /dev/null
+++ b/examples/cms-prismic/src/layouts/BaseLayout.astro
@@ -0,0 +1,37 @@
+---
+import MainHead from '@/components/Head.astro'
+import Header from '@/components/Header/Header.astro'
+import Footer from '@/components/Footer.astro'
+---
+
+<!DOCTYPE HTML>
+<!--
+	Dopetrope by HTML5 UP
+	html5up.net | @ajlkn
+	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+-->
+<html>
+	<head>
+		<MainHead/>
+	</head>
+	<body class="homepage is-preload">
+		<div id="page-wrapper">
+			<Header/>
+			<!-- Main -->
+				<section id="main">
+					<div class="container">
+						<slot/>
+					</div>
+				</section>
+			<!-- Footer -->
+				<Footer />
+		</div>
+		<!-- Scripts -->
+			<script src="/assets/js/jquery.min.js"></script>
+			<script src="/assets/js/jquery.dropotron.min.js"></script>
+			<script src="/assets/js/browser.min.js"></script>
+			<script src="/assets/js/breakpoints.min.js"></script>
+			<script src="/assets/js/util.js"></script>
+			<script src="/assets/js/main.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/pages/blog/[...uid].astro b/examples/cms-prismic/src/pages/blog/[...uid].astro
new file mode 100644
index 000000000..2251366db
--- /dev/null
+++ b/examples/cms-prismic/src/pages/blog/[...uid].astro
@@ -0,0 +1,26 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import AsText from '@/components/Prismic/AsText.astro'
+import AsHTML from '@/components/Prismic/AsHTML.astro'
+import Date from '@/components/Prismic/Date.astro'
+import { initApi, Predicates } from '@/api/prismic.js'
+
+export async function getStaticPaths() {
+    const api = await initApi()
+    const { results } = await api.query(Predicates.at('document.type', 'blog_post'))
+    return results.map(post => ({ params: { uid: post.uid}, props: { post }}))
+}
+
+const { post } = Astro.props
+const { first_publication_date, data } = post
+---
+<BaseLayout>
+  <article class="box post">
+    { data.image && <a href={data.image.url} target="_blank" class="image featured"><img src={data.image.url} alt={data.image.alt} style="max-height: 550px; object-fit: cover; object-position: 50% 65%;" /></a> }
+    <header>
+      <h2><AsText data={data.title}/></h2>
+      <p><Date dateRaw={first_publication_date}/></p>
+    </header>
+    <AsHTML data={data.content}/>
+  </article>
+</BaseLayout>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/pages/blogs/[...page].astro b/examples/cms-prismic/src/pages/blogs/[...page].astro
new file mode 100644
index 000000000..daec806f6
--- /dev/null
+++ b/examples/cms-prismic/src/pages/blogs/[...page].astro
@@ -0,0 +1,30 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import BlogCard from '@/components/BlogCard.astro'
+import Pagination from '@/components/Pagination.astro'
+import { initApi, Predicates } from '@/api/prismic.js'
+
+export async function getStaticPaths({paginate, rss}) {
+    const api = await initApi()
+    const document = await api.query(
+        Predicates.at('document.type', 'blog_post'),
+        { orderings : '[document.last_publication_date]' }
+    )
+    const { results } = document
+    return paginate(results, { pageSize: 4 })
+}
+
+const { page } = Astro.props
+---
+<BaseLayout>
+	<div class="row">
+        {
+            page.data.map(blog => (
+                <div class="col-6 col-6-medium col-12-small">
+                    <BlogCard data={blog} />
+                </div>
+            ))
+        }
+    </div>
+    { page.lastPage > 1 && <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} /> }
+</BaseLayout>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/pages/index.astro b/examples/cms-prismic/src/pages/index.astro
new file mode 100644
index 000000000..d9f69628b
--- /dev/null
+++ b/examples/cms-prismic/src/pages/index.astro
@@ -0,0 +1,37 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import Portfolio from '@/components/Portfolio.astro'
+import Blog from '@/components/Blog.astro'
+import { initApi, Predicates } from '@/api/prismic.js'
+
+const api = await initApi()
+const { results } = await api.query(
+	Predicates.at('document.type', 'homepage'),
+	{ 
+		'fetchLinks' : [
+			'project.title', 'project.description',
+			'blog_post.title', 'blog_post.content', 'blog_post.image',
+			'event.title', 'event.date', 'event.description'
+			] 
+	})
+	
+const { body } = results[0].data
+---
+<BaseLayout>
+	<div class="row">
+	{
+		body.map(slice => (
+			slice.slice_type === 'featured_projects' ?
+			<div class="col-12">
+				<Portfolio portfolioData={slice} />
+			</div> :
+			slice.slice_type === 'featured_posts' ?
+			<div class="col-12">
+				<Blog blogData={slice} />
+			</div> :
+			null
+		))
+	}
+		
+	</div>
+</BaseLayout>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/pages/portfolio/[...uid].astro b/examples/cms-prismic/src/pages/portfolio/[...uid].astro
new file mode 100644
index 000000000..486a0c667
--- /dev/null
+++ b/examples/cms-prismic/src/pages/portfolio/[...uid].astro
@@ -0,0 +1,26 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import AsText from '@/components/Prismic/AsText.astro'
+import AsHTML from '@/components/Prismic/AsHTML.astro'
+import Date from '@/components/Prismic/Date.astro'
+import { initApi, Predicates } from '@/api/prismic.js'
+
+export async function getStaticPaths() {
+    const api = await initApi()
+    const { results } = await api.query(Predicates.at('document.type', 'project'))
+    return results.map(project => ({ params: { uid: project.uid}, props: { project }}))
+}
+
+const { project } = Astro.props
+const { first_publication_date, data } = project
+---
+<BaseLayout>
+  <article class="box post">
+    { data.image && <a href={data.image.url} target="_blank" class="image featured"><img src={data.image.url} alt={data.image.alt} style="max-height: 550px; object-fit: cover; object-position: 50% 65%;" /></a> }
+    <header>
+      <h2><AsText data={data.title}/></h2>
+      <p><Date dateRaw={first_publication_date}/></p>
+    </header>
+    <AsHTML data={data.description}/>
+  </article>
+</BaseLayout>
\ No newline at end of file
diff --git a/examples/cms-prismic/src/pages/portfolios/[...page].astro b/examples/cms-prismic/src/pages/portfolios/[...page].astro
new file mode 100644
index 000000000..f0625b674
--- /dev/null
+++ b/examples/cms-prismic/src/pages/portfolios/[...page].astro
@@ -0,0 +1,30 @@
+---
+import BaseLayout from '@/layouts/BaseLayout.astro'
+import PortfolioCard from '@/components/PortfolioCard.astro'
+import Pagination from '@/components/Pagination.astro'
+import { initApi, Predicates } from '@/api/prismic.js'
+
+export async function getStaticPaths({paginate, rss}) {
+    const api = await initApi()
+    const document = await api.query(
+        Predicates.at('document.type', 'project'),
+        { orderings : '[document.last_publication_date]' }
+    )
+    const { results } = document
+    return paginate(results, { pageSize: 4 })
+}
+
+const { page } = Astro.props
+---
+<BaseLayout>
+	<div class="row">
+        {
+            page.data.map(portfolio => (
+                <div class="col-6 col-6-medium col-12-small">
+                    <PortfolioCard data={portfolio} />
+                </div>
+            ))
+        }
+    </div>
+    { page.lastPage > 1 && <Pagination prevUrl={page.url.prev} nextUrl={page.url.next} /> }
+</BaseLayout>
\ No newline at end of file