v1 convert to Agility

components/agility-global/AgilityPage.tsx

@@ -0,0 +1,23 @@
+import pageTemplates from "components/agility-pageTemplates"
+
+const AgilityPage = (props:any) => {
+
+	if (!props || !props.pageTemplateName) {
+		console.error(`Page object or template was not found.`)
+		return null
+	}
+
+	let AgilityPageTemplate = pageTemplates(props.pageTemplateName)
+	if (! AgilityPageTemplate) {
+		console.error(`${props.pageTemplateName} not found.`)
+		return null
+	}
+
+	return (
+		<AgilityPageTemplate {...props} />
+	)
+
+
+}
+
+export default AgilityPage

components/agility-global/ContentZone.js

@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import moduleComponents from "components/agility-modules"
+
+
+ function ContentZone({ name, page, dynamicPageItem }) {
+	function RenderModules() {
+
+		if (!page) return null
+
+		let modules = page.zones[name];
+
+		const modulesToRender = modules.map(m => {
+
+			const AgilityModule = moduleComponents(m.moduleName)
+
+			if (AgilityModule) {
+				return <AgilityModule key={m.item.contentID} page={page} dynamicPageItem={dynamicPageItem} {...m.item} />
+			} else {
+				console.error(`React Component for ${m.moduleName} was not found in the Agility Modules list.`)
+			}
+
+		})
+
+		return modulesToRender;
+	}
+
+
+	return (
+		<div>
+			<RenderModules />
+		</div>
+	)
+}
+
+export default ContentZone

components/agility-global/GlobalFooter.js

@@ -0,0 +1,75 @@
+import React, { Component, useState } from 'react';
+import Link from 'next/link';
+
+import {expandLinkedList} from "@agility/utils"
+
+const GlobalFooter = (props) => {
+	const { globalFooterProps } = props;
+
+	return (
+		<div>FOOTER</div>
+	)
+
+}
+
+GlobalFooter.getCustomInitialProps = async function ({agility, languageCode, channelName}) {
+
+	const api = agility;
+
+	let contentItem = null;
+
+	//hack
+	return {}
+
+	try {
+		//get the global footer
+		let contentItemList = await api.getContentList({
+			referenceName: "globalfooter",
+			languageCode: languageCode
+		});
+
+		if (contentItemList?.length > 0) {
+			contentItem = contentItemList[0];
+
+			//resolve the links...
+			contentItem = await expandLinkedList({ agility, contentItem, languageCode,
+				fieldName: "column2Links",
+				sortIDField: "column2SortIDs"
+			})
+
+			contentItem = await expandLinkedList({ agility, contentItem, languageCode,
+				fieldName: "column3Links",
+				sortIDField: "column3SortIDs"
+			})
+
+			contentItem = await expandLinkedList({ agility, contentItem, languageCode,
+				fieldName: "column4Links",
+				sortIDField: "column4SortIDs"
+			})
+
+		}
+
+
+	} catch (error) {
+		if (console) console.error("Could not load global footer item.", error);
+	}
+
+	//return a clean object...
+	return {
+		siteName: contentItem.fields.siteName,
+		siteDescription: contentItem.fields.siteDescription,
+		column2Title: contentItem.fields.column2Title,
+		column3Title: contentItem.fields.column3Title,
+		column4Title: contentItem.fields.column4Title,
+		facebookURL: contentItem.fields.facebookURL,
+		twitterURL: contentItem.fields.twitterURL,
+		youTubeURL: contentItem.fields.youTubeURL,
+		column2Links: contentItem.fields.column2Links.map(link => link.fields.link),
+		column3Links: contentItem.fields.column3Links.map(link => link.fields.link),
+		column4Links: contentItem.fields.column4Links.map(link => link.fields.link),
+
+	}
+}
+
+
+export default GlobalFooter

components/agility-global/GlobalHeader.js

@@ -0,0 +1,73 @@
+import React, { Component, useState } from 'react';
+import Link from 'next/link';
+
+
+const GlobalHeader = (props) => {
+	const { globalHeaderProps, sitemapNode, page } = props;
+
+	const globalHeaderItem = globalHeaderProps.contentItem;
+	let siteName = globalHeaderItem?.fields.siteName || "Agility Starter 2020"
+	let logo = globalHeaderItem?.fields.logo || nulll
+
+	return (
+		<div>HEADER</div>
+	)
+
+}
+
+GlobalHeader.getCustomInitialProps = async function (props) {
+
+	const api = props.agility;
+	const languageCode = props.languageCode;
+	const channelName = props.channelName;
+	let contentItem = null;
+	let links = [];
+
+	//hack
+	return {}
+
+	try {
+		//get the global header
+		let contentItemList = await api.getContentList({
+			referenceName: "globalheader",
+			languageCode: languageCode
+		});
+
+		if (contentItemList && contentItemList.length) {
+			contentItem = contentItemList[0];
+
+		}
+	} catch (error) {
+		if (console) console.error("Could not load global header item.", error);
+	}
+
+
+	try {
+		//get the nested sitemap
+		let sitemap = await api.getSitemapNested({
+			channelName: channelName,
+			languageCode: languageCode,
+		});
+
+		//grab the top level links that are visible on menu
+		links = sitemap
+			.filter(node => node.visible.menu)
+			.map(node => {
+				return {
+					text: node.menuText || node.title,
+					path: node.path
+				}
+			})
+
+	} catch (error) {
+		if (console) console.error("Could not load nested sitemap.", error);
+	}
+
+	return {
+		contentItem,
+		links
+	}
+}
+
+
+export default GlobalHeader

components/agility-global/Layout.js

@@ -0,0 +1,62 @@
+import PreviewBar from './PreviewBar'
+import GlobalHeader from './GlobalHeader'
+import GlobalFooter from './GlobalFooter'
+import { useRouter } from 'next/router'
+import Head from 'next/head'
+import dynamic from 'next/dynamic'
+import tw from "twin.macro"
+
+const MainElem = tw.main`p-8`;
+
+import AnimationRevealPage from "helpers/AnimationRevealPage"
+import Error from 'next/error'
+
+function Layout(props) {
+	const { page, sitemapNode, dynamicPageItem, notFound } = props
+
+	// If the page is not yet generated, this will be displayed
+	// initially until getStaticProps() finishes running
+	const router = useRouter()
+	if (router.isFallback) {
+		return <div>Loading page...</div>
+	}
+
+	if (notFound === true) {
+		return <Error statusCode="404" />
+	}
+
+	const AgilityPageTemplate = dynamic(() => import('components/agility-pageTemplates/' + props.pageTemplateName));
+
+	if (dynamicPageItem?.seo?.metaDescription) {
+		page.seo.metaDescription = dynamicPageItem.seo.metaDescription
+	}
+
+	return (
+		<>
+			<Head>
+				<title>{sitemapNode?.title} - Agility CMS Sample Blog</title>
+				<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+				<meta name="description" content={page.seo.metaDescription} />
+				<meta name="generator" content="Agility CMS" />
+				<meta name="agility_timestamp" content={new Date().toLocaleString()} />
+				{dynamicPageItem?.seo?.ogImage &&
+					<meta property="og:image" content={dynamicPageItem.seo.ogImage} />
+				}
+				<link rel="stylesheet" href="/prose.css" />
+
+			</Head>
+			<PreviewBar {...props} />
+
+			<MainElem>
+				{/* <AnimationRevealPage disabled> */}
+				<GlobalHeader {...props} />
+				<AgilityPageTemplate {...props} />
+				<GlobalFooter {...props} />
+				{/* </AnimationRevealPage> */}
+			</MainElem>
+
+		</>
+	)
+}
+
+export default Layout

components/agility-global/PreviewBar.js

@@ -0,0 +1,60 @@
+import React from 'react';
+
+const PreviewBar = ({ isPreview, isDevelopmentMode }) => {
+
+	if (isPreview && !isDevelopmentMode) {
+		return (
+			<div className="agility-preview-bar">
+				<img className="agility-preview-bar__logo" src="https://media.agilitycms.com/preview-bar/2018-11/agility-logo-preview-bar-1.png" alt="Powered by Agility CMS" />
+				<span className="agility-preview-bar__text">You are viewing the latest changes in <strong>Preview Mode</strong>.</span>
+				<div>
+					<button className="agility-preview-bar__btn agility-preview-bar__btn-share" title="Click to generate a share-able link" onClick={getPreviewLink}>Share</button>
+					<button className="agility-preview-bar__btn" title="Click to exit preview" onClick={exitPreview}>Exit Preview</button>
+				</div>
+			</div>
+		)
+	} else if(isDevelopmentMode) {
+		return (
+			<div className="agility-preview-bar">
+				<img className="agility-preview-bar__logo" src="https://media.agilitycms.com/preview-bar/2018-11/agility-logo-preview-bar-1.png" alt="Powered by Agility CMS" />
+				<span className="agility-preview-bar__text">You are viewing the latest changes in <strong>Development Mode</strong>.</span>
+				<div></div>
+			</div>
+		)
+	} else {
+		return null
+	}
+}
+
+const exitPreview = () => {
+	const exit = confirm("Would you like to exit Preview Mode?");
+	if (exit === true) {
+		window.location = `/api/exitPreview?slug=${window.location.pathname}`;
+	}
+}
+
+const getPreviewLink = () => {
+	const xhr = new XMLHttpRequest();
+	xhr.onload = function () {
+
+		// Process our return data
+		if (xhr.status >= 200 && xhr.status < 300) {
+			// What do when the request is successful
+
+			const previewKey = xhr.responseText;
+			const previewLink = `${window.location.pathname}?agilitypreviewkey=${escape(previewKey)}`;
+
+			prompt("To share this page in preview mode with others, copy the link below:", previewLink);
+
+		} else {
+			// What do when the request fails
+			alert('Could not generate Preview Link. This indicates a problem with the API route that generates a Preview Link.')
+		}
+	};
+
+	// Create and send a GET request
+	xhr.open('GET', '/api/generatePreviewKey');
+	xhr.send();
+}
+
+export default PreviewBar;