Theology101.church website setup (#2)

# Status
Ready

# Description
Theology101.church website implementation

# Screenshot

![theologyawesome2](https://github.com/aweandreverence/www.theology101.church/assets/7629076/59237f1c-6947-4ad0-8582-4fff99b8299d)

.editorconfig

@@ -0,0 +1,22 @@
+# See http://EditorConfig.org for details
+
+# Top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+
+[*.js]
+max_line_length = 80
+indent_size = 4
+
+[*.html]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.github/CODEOWNERS

@@ -0,0 +1,40 @@
+# https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners
+
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+*       @aweandreverence/web
+
+# Order is important; the last matching pattern takes the most
+# precedence. When someone opens a pull request that only
+# modifies JS files, only @js-owner and not the global
+# owner(s) will be requested for a review.
+#*.js    @js-owner
+
+# You can also use email addresses if you prefer. They'll be
+# used to look up users just like we do for commit author
+# emails.
+#*.go [email protected]
+
+# In this example, @doctocat owns any files in the build/logs
+# directory at the root of the repository and any of its
+# subdirectories.
+#/build/logs/ @doctocat
+
+# The `docs/*` pattern will match files like
+# `docs/getting-started.md` but not further nested files like
+# `docs/build-app/troubleshooting.md`.
+#docs/*  [email protected]
+
+# In this example, @octocat owns any file in an apps directory
+# anywhere in your repository.
+#apps/ @octocat
+
+# In this example, @doctocat owns any file in the `/docs`
+# directory in the root of your repository and any of its
+# subdirectories.
+#/docs/ @doctocat

.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage/
+
+# next.js
+.next/
+out/
+
+# production
+build/
+
+# misc
+.DS_Store
+*.pem
+*~
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc

@@ -0,0 +1,23 @@
+{
+  "printWidth": 80,
+  "tabWidth": 4,
+  "tabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "rangeStart": 0,
+  //"rangeEnd": Infinity,
+  //"parser": null,
+  //"filepath": null,
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false,
+  "endOfLine": "lf",
+  "embeddedLanguageFormatting": "auto"
+}

Makefile

@@ -0,0 +1,33 @@
+## help - Display help about make targets for this Makefile
+help:
+	@cat Makefile | grep '^## ' --color=never | cut -c4- | sed -e "`printf 's/ - /\t- /;'`" | column -s "`printf '\t'`" -t
+
+## install - install dependency packages
+install:
+	yarn install
+
+## dev - starts the Next.js development server on port 3000
+dev: install
+	yarn run dev
+
+## run - run the Next.js app server
+run: install
+	yarn run build && yarn run start
+
+## clean - clean previous builds
+clean:
+	rm -rf out/*
+
+## build - build the app for release
+build: clean install
+	yarn build
+	cp CNAME out/
+	touch out/.nojekyll
+
+## deploy - build and deploy the app
+deploy: clean build
+	rm -rf docs/
+	mv out docs
+	git add docs
+	git commit -m "Deploy `git rev-parse --verify HEAD`"
+	git push origin master

components/base_page.js

@@ -0,0 +1,48 @@
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+
+import { CommonCSS } from '../components/css/common';
+import { Footer } from '../components/footer';
+import { Header } from '../components/header';
+import { CommonJS } from '../components/js/common';
+import { NonBlockingJS } from '../components/js/nonblocking';
+
+import { PAGE_TITLES, SITE_TITLE } from '../constants/seo.js';
+
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import css from '../styles/common.module.scss';
+
+export default function Page({ children }) {
+    const router = useRouter();
+    const path = router.pathname;
+    return (
+        <div className={css.container}>
+            <Head>
+                <title>
+                    {PAGE_TITLES[path]} | {SITE_TITLE}
+                </title>
+
+                <meta charSet="utf-8" />
+                <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1, shrink-to-fit=no"
+                />
+
+                <link
+                    rel="stylesheet"
+                    href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
+                    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
+                    crossorigin="anonymous"
+                />
+
+                <link rel="icon" href="/favicon.ico" />
+            </Head>
+            <CommonCSS />
+            <CommonJS />
+            <Header />
+            <main className={css.main}>{children}</main>
+            <Footer />
+            <NonBlockingJS />
+        </div>
+    );
+}

components/css/common.js

@@ -0,0 +1,5 @@
+export function CommonCSS() {
+    // already using react-bootstrap
+    // <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
+    return <></>;
+}

components/footer.js

@@ -0,0 +1,48 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+    faFacebookF,
+    faTwitter,
+    fab,
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import '@fortawesome/fontawesome-svg-core/styles.css';
+import css from '../styles/footer.module.scss';
+
+library.add(fab, faFacebookF, faTwitter);
+
+export function Footer({ children }) {
+    return (
+        <>
+            <footer className={css.footer}>
+                <div className={css.socialmedia}>
+                    <div className={css.facebook}>
+                        <a
+                            href="https://www.facebook.com/AweAndReverence"
+                            title="Awe & Reverence on Facebook"
+                            target="_blank"
+                        >
+                            <div className={css.icon}>
+                                <FontAwesomeIcon icon={['fab', 'facebook-f']} />
+                            </div>
+                        </a>
+                    </div>
+                    <div className={css.twitter}>
+                        <a
+                            href="https://twitter.com/aweandreverence"
+                            title="Awe & Reverence on Twitter"
+                            target="_blank"
+                        >
+                            <div className={css.icon}>
+                                <FontAwesomeIcon icon={['fab', 'twitter']} />
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                <div className={css.copyright}>
+                    <p>&copy; Awe and Reverence 2020</p>
+                </div>
+            </footer>
+        </>
+    );
+}

components/header.js

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+
+import Nav from 'react-bootstrap/Nav';
+
+import { useRouter } from 'next/router';
+
+import { NAV_LINKS } from '../constants/nav_links.js';
+import css from '../styles/header.module.scss';
+
+export function Header({ children }) {
+    const router = useRouter();
+    const navItemsJSX = NAV_LINKS.map((link, index) => {
+        const classes = classNames({
+            [css.active]: link.url === router.pathname,
+        });
+        const target = link.url.substring(0, 4) === 'http' ? '_blank' : null;
+        return (
+            <Nav.Item key={`link-${index}`}>
+                <Nav.Link href={link.url} className={classes} target={target}>
+                    {link.name}
+                </Nav.Link>
+            </Nav.Item>
+        );
+    });
+    return (
+        <div className={css.header}>
+            <Nav>{navItemsJSX}</Nav>
+        </div>
+    );
+}

components/js/common.js

@@ -0,0 +1,7 @@
+import { GoogleAnalytics } from './google/analytics';
+
+export function CommonJS() {
+    // TODO: please change the following with the theology101.church trackging Id
+    const jsx = <GoogleAnalytics trackingId="UA-8680690-4" />;
+    return jsx;
+}

components/js/google/analytics.js

@@ -0,0 +1,31 @@
+import Safe from 'react-safe';
+
+import Head from 'next/head';
+
+export function GoogleAnalytics(props) {
+    const gtagJS = `
+window.dataLayer = window.dataLayer || [];
+function gtag() {
+    dataLayer.push(arguments);
+}
+gtag('js', new Date());
+
+gtag('config', '${props.trackingId}');
+`;
+
+    return (
+        <>
+            <Head>
+                <script
+                    async
+                    src={
+                        'https://www.googletagmanager.com/gtag/js?id=' +
+                        props.trackingId
+                    }
+                    key="google-analytics"
+                ></script>
+                <Safe.script>{gtagJS}</Safe.script>
+            </Head>
+        </>
+    );
+}

components/js/nonblocking.js

@@ -0,0 +1,10 @@
+export function NonBlockingJS() {
+    return (
+<>
+    <script src="https://unpkg.com/react/umd/react.production.min.js" crossOrigin="crossorigin"></script>
+    <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js" crossOrigin="crossorigin"></script>
+    <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossOrigin="crossorigin"></script>
+    <script>var Alert = ReactBootstrap.Alert;</script>
+</>
+    );
+}

components/tags.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import THEOLOGY101_DATA from '../data/theology101.json';
+
+const BASE_URL = '/prototypes/theology101';
+
+export default class Tags extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const tags = THEOLOGY101_DATA.tags;
+        const lookupByTag = THEOLOGY101_DATA.lookups.tag;
+
+        return (
+            <div>
+                <h5>Tags ({tags.length})</h5>
+                <ul className="mx-0 px-0 mt-4">
+                    {tags.map((tag) => (
+                        <ol className="p-0">
+                            <a
+                                href
+                                className="link-light"
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    this.props.selectTag(tag);
+                                }}
+                                role="button"
+                            >
+                                {tag} ({lookupByTag[tag].length})
+                            </a>
+                        </ol>
+                    ))}
+                </ul>
+            </div>
+        );
+    }
+}