diff options
Diffstat (limited to 'examples/cms-prismic/src')
23 files changed, 0 insertions, 528 deletions
diff --git a/examples/cms-prismic/src/api/prismic.js b/examples/cms-prismic/src/api/prismic.js deleted file mode 100644 index 77d46184c..000000000 --- a/examples/cms-prismic/src/api/prismic.js +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index 11d79d85a..000000000 --- a/examples/cms-prismic/src/components/Blog.astro +++ /dev/null @@ -1,27 +0,0 @@ ---- -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 deleted file mode 100644 index 1f175f98f..000000000 --- a/examples/cms-prismic/src/components/BlogCard.astro +++ /dev/null @@ -1,21 +0,0 @@ ---- -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 deleted file mode 100644 index e29e24062..000000000 --- a/examples/cms-prismic/src/components/Event.astro +++ /dev/null @@ -1,18 +0,0 @@ ---- -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 deleted file mode 100644 index 5dba07363..000000000 --- a/examples/cms-prismic/src/components/Events.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -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 deleted file mode 100644 index 886b9527e..000000000 --- a/examples/cms-prismic/src/components/Footer.astro +++ /dev/null @@ -1,77 +0,0 @@ ---- -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>© 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 deleted file mode 100644 index bbcf4a917..000000000 --- a/examples/cms-prismic/src/components/Head.astro +++ /dev/null @@ -1,7 +0,0 @@ ---- - ---- -<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 deleted file mode 100644 index be872de3a..000000000 --- a/examples/cms-prismic/src/components/Header/Header.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -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 deleted file mode 100644 index a3c1d67b4..000000000 --- a/examples/cms-prismic/src/components/Header/Navbar.astro +++ /dev/null @@ -1,11 +0,0 @@ ---- -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 deleted file mode 100644 index d15ed23d1..000000000 --- a/examples/cms-prismic/src/components/Pagination.astro +++ /dev/null @@ -1,36 +0,0 @@ ---- -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 deleted file mode 100644 index 988341444..000000000 --- a/examples/cms-prismic/src/components/Portfolio.astro +++ /dev/null @@ -1,25 +0,0 @@ ---- -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 deleted file mode 100644 index 372531ed0..000000000 --- a/examples/cms-prismic/src/components/PortfolioCard.astro +++ /dev/null @@ -1,24 +0,0 @@ ---- -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 deleted file mode 100644 index 06890e916..000000000 --- a/examples/cms-prismic/src/components/Prismic/AsHTML.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -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 deleted file mode 100644 index f54ac8141..000000000 --- a/examples/cms-prismic/src/components/Prismic/AsText.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -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 deleted file mode 100644 index f10a24469..000000000 --- a/examples/cms-prismic/src/components/Prismic/Date.astro +++ /dev/null @@ -1,14 +0,0 @@ ---- -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 deleted file mode 100644 index 496056970..000000000 --- a/examples/cms-prismic/src/components/Prismic/Excerpt.astro +++ /dev/null @@ -1,8 +0,0 @@ ---- -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 deleted file mode 100644 index bf37ff2df..000000000 --- a/examples/cms-prismic/src/components/Prismic/URL.astro +++ /dev/null @@ -1,7 +0,0 @@ ---- -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 deleted file mode 100644 index 3e7ec678f..000000000 --- a/examples/cms-prismic/src/layouts/BaseLayout.astro +++ /dev/null @@ -1,37 +0,0 @@ ---- -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 deleted file mode 100644 index 2251366db..000000000 --- a/examples/cms-prismic/src/pages/blog/[...uid].astro +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 deleted file mode 100644 index daec806f6..000000000 --- a/examples/cms-prismic/src/pages/blogs/[...page].astro +++ /dev/null @@ -1,30 +0,0 @@ ---- -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 deleted file mode 100644 index d9f69628b..000000000 --- a/examples/cms-prismic/src/pages/index.astro +++ /dev/null @@ -1,37 +0,0 @@ ---- -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 deleted file mode 100644 index 486a0c667..000000000 --- a/examples/cms-prismic/src/pages/portfolio/[...uid].astro +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 deleted file mode 100644 index f0625b674..000000000 --- a/examples/cms-prismic/src/pages/portfolios/[...page].astro +++ /dev/null @@ -1,30 +0,0 @@ ---- -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 |