layouts: added

bgoonz · Feb 27, 2022 · e6d077e · e6d077e
1 parent ca233a1
commit e6d077e
Show file tree

Hide file tree

Showing 5 changed files with 250 additions and 0 deletions.
diff --git a/src/layouts/contact.js b/src/layouts/contact.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { Layout } from '../components/index';
+import Header from '../components/Header';
+import FormField from '../components/FormField';
+import Footer from '../components/Footer';
+import { htmlToReact, markdownify } from '../utils';
+
+export default class Contact extends React.Component {
+    render() {
+        const data = _.get(this.props, 'data');
+        const config = _.get(data, 'config');
+        const header = _.get(config, 'header');
+        const page = _.get(this.props, 'page');
+        const title = _.get(page, 'title');
+        const subtitle = _.get(page, 'subtitle');
+        const headerImage = _.get(page, 'img_path') ? _.get(page, 'img_path') : _.get(header, 'background_img');
+        const markdownContent = _.get(page, 'markdown_content');
+        const formId = _.get(page, 'form_id');
+        const formAction = _.get(page, 'form_action');
+        const formFields = _.get(page, 'form_fields');
+        const submitLabel = _.get(page, 'submit_label');
+        const formHoneypotInputId = formId + '-honeypot';
+        const formHoneypotLabelId = formId + '-honeypot-label';
+        const formHoneypotName = formId + '-bot-field';
+
+        return (
+            <Layout page={page} config={config}>
+                <Header config={config} page={page} image={headerImage} />
+                <div id="content" className="site-content">
+                    <main id="main" className="site-main inner">
+                        <article className="post page post-full">
+                            <header className="post-header">
+                                <h1 className="post-title">{title}</h1>
+                            </header>
+                            {subtitle && <div className="post-subtitle">{htmlToReact(subtitle)}</div>}
+                            <div className="post-content">
+                                {markdownContent && markdownify(markdownContent)}
+                                <form
+                                    name={formId}
+                                    id={formId}
+                                    {...(formAction ? { action: formAction } : null)}
+                                    method="POST"
+                                    data-netlify="true"
+                                    data-netlify-honeypot={formHoneypotName}
+                                >
+                                    <div className="screen-reader-text">
+                                        <label id={formHoneypotLabelId} htmlFor={formHoneypotInputId}>
+                                            Don't fill this out if you're human:
+                                            <input aria-labelledby={formHoneypotLabelId} id={formHoneypotInputId} name={formHoneypotName} />
+                                        </label>
+                                    </div>
+                                    <input type="hidden" name="form-name" value={formId} />
+                                    {_.map(formFields, (field, index) => (
+                                        <FormField key={index} field={field} />
+                                    ))}
+                                    <div className="form-submit">
+                                        <button type="submit" className="button">
+                                            {submitLabel}
+                                        </button>
+                                    </div>
+                                </form>
+                            </div>
+                        </article>
+                    </main>
+                    <Footer config={config} />
+                </div>
+            </Layout>
+        );
+    }
+}
diff --git a/src/layouts/home.js b/src/layouts/home.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import _ from 'lodash';
+import moment from 'moment-strftime';
+
+import { Layout } from '../components/index';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import { getPageUrl, Link, withPrefix } from '../utils';
+
+export default class Home extends React.Component {
+    renderPost(post, index, hasMoreLink, moreLinkText) {
+        const title = _.get(post, 'title');
+        const thumbImage = _.get(post, 'thumb_img_path');
+        const thumbImageAlt = _.get(post, 'thumb_img_alt', '');
+        const excerpt = _.get(post, 'excerpt');
+        const date = _.get(post, 'date');
+        const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M');
+        const formattedDate = moment(date).strftime('%B %d, %Y');
+        const postUrl = getPageUrl(post, { withPrefix: true });
+
+        return (
+            <article key={index} className="post">
+                <header className="post-header">
+                    <h2 className="post-title">
+                        <Link href={postUrl}>{title}</Link>
+                    </h2>
+                    <div className="post-meta">
+                        Published on{' '}
+                        <time className="published" dateTime={dateTimeAttr}>
+                            {formattedDate}
+                        </time>
+                    </div>
+                </header>
+                {thumbImage && (
+                    <Link className="post-thumbnail" href={postUrl}>
+                        <img className="thumbnail" src={withPrefix(thumbImage)} alt={thumbImageAlt} />
+                    </Link>
+                )}
+                {excerpt && (
+                    <div className="post-content">
+                        <p>{excerpt}</p>
+                    </div>
+                )}
+                {hasMoreLink && moreLinkText && (
+                    <p className="read-more">
+                        <Link className="read-more-link" href={postUrl}>
+                            {moreLinkText} <span className="icon-arrow-right" aria-hidden="true" />
+                        </Link>
+                    </p>
+                )}
+            </article>
+        );
+    }
+
+    render() {
+        const data = _.get(this.props, 'data');
+        const config = _.get(data, 'config');
+        const header = _.get(config, 'header');
+        const headerImage = _.get(header, 'background_img');
+        const page = _.get(this.props, 'page');
+        const hasMoreLink = _.get(page, 'has_more_link');
+        const moreLinkText = _.get(page, 'more_link_text');
+        const posts = _.orderBy(_.get(this.props, 'posts', []), 'date', 'desc');
+
+        return (
+            <Layout page={page} config={config}>
+                <Header config={config} page={page} image={headerImage} />
+                <div id="content" className="site-content">
+                    <main id="main" className="site-main inner">
+                        <div className="post-feed">{_.map(posts, (post, index) => this.renderPost(post, index, hasMoreLink, moreLinkText))}</div>
+                    </main>
+                    <Footer config={config} />
+                </div>
+            </Layout>
+        );
+    }
+}
diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -0,0 +1,13 @@
+import contact from './contact';
+import home from './home';
+import page from './page';
+import post from './post';
+
+export { contact, home, page, post };
+
+export default {
+    contact,
+    home,
+    page,
+    post
+};
diff --git a/src/layouts/page.js b/src/layouts/page.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import _ from 'lodash';
+
+import { Layout } from '../components/index';
+import Header from '../components/Header';
+import Footer from '../components/Footer';
+import { htmlToReact, markdownify } from '../utils';
+
+export default class Page extends React.Component {
+    render() {
+        const data = _.get(this.props, 'data');
+        const config = _.get(data, 'config');
+        const header = _.get(config, 'header');
+        const page = _.get(this.props, 'page');
+        const title = _.get(page, 'title');
+        const subtitle = _.get(page, 'subtitle');
+        const headerImage = _.get(page, 'img_path') ? _.get(page, 'img_path') : _.get(header, 'background_img');
+        const markdownContent = _.get(page, 'markdown_content');
+
+        return (
+            <Layout page={page} config={config}>
+                <Header config={config} page={page} image={headerImage} />
+                <div id="content" className="site-content">
+                    <main id="main" className="site-main inner">
+                        <article className="post page post-full">
+                            <header className="post-header">
+                                <h1 className="post-title">{title}</h1>
+                            </header>
+                            {subtitle && <div className="post-subtitle">{htmlToReact(subtitle)}</div>}
+                            {markdownContent && <div className="post-content">{markdownify(markdownContent)}</div>}
+                        </article>
+                    </main>
+                    <Footer config={config} />
+                </div>
+            </Layout>
+        );
+    }
+}
diff --git a/src/layouts/post.js b/src/layouts/post.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import _ from 'lodash';
+import moment from 'moment-strftime';
+
+import { Layout } from '../components/index';
+import Header from '../components/Header';
+import HeaderAlt from '../components/HeaderAlt';
+import Footer from '../components/Footer';
+import { htmlToReact, markdownify } from '../utils';
+
+export default class Post extends React.Component {
+    render() {
+        const data = _.get(this.props, 'data');
+        const config = _.get(data, 'config');
+        const header = _.get(config, 'header');
+        const page = _.get(this.props, 'page');
+        const hideHeader = _.get(page, 'hide_header');
+        const title = _.get(page, 'title');
+        const subtitle = _.get(page, 'subtitle');
+        const headerImage = _.get(page, 'content_img_path') ? _.get(page, 'content_img_path') : _.get(header, 'background_img');
+        const date = _.get(page, 'date');
+        const dateTimeAttr = moment(date).strftime('%Y-%m-%d %H:%M');
+        const formattedDate = moment(date).strftime('%B %d, %Y');
+        const markdownContent = _.get(page, 'markdown_content');
+
+        return (
+            <Layout page={page} config={config}>
+                {hideHeader ? <HeaderAlt /> : <Header config={config} page={page} image={headerImage} />}
+                <div id="content" className="site-content">
+                    <main id="main" className="site-main inner">
+                        <article className="post post-full">
+                            <header className="post-header">
+                                <h1 className="post-title">{title}</h1>
+                                <div className="post-meta">
+                                    Published on{' '}
+                                    <time className="published" dateTime={dateTimeAttr}>
+                                        {formattedDate}
+                                    </time>
+                                </div>
+                            </header>
+                            {subtitle && <div className="post-subtitle">{htmlToReact(subtitle)}</div>}
+                            {markdownContent && <div className="post-content">{markdownify(markdownContent)}</div>}
+                        </article>
+                    </main>
+                    <Footer config={config} />
+                </div>
+            </Layout>
+        );
+    }
+}