Staging Environment (#58)

* Feature/article content creator (#40) (#42)

* Created new post src/lib/articles/content/articles/2020-7-1-An-Introduction-to-Value-Innovation}.json with TinaCMS

* Fix bad name

* Remove example post

* Created new post src/lib/articles/content/articles/2020-08-31-test.json with TinaCMS

* Created new post src/lib/articles/content/articles/2020-08-31-test-2.json with TinaCMS

* Upload

* Update from TinaCMS

* Upload

* Update from TinaCMS

* Refactor to support content creation

* Fix article slugs on archive

* Make left aligned hero prettier

* Fix vertical alignment

* Update timestamp format

* Update timestamp format

* Add proper reading time and post date

* Created new post src/lib/articles/content/articles/2020-08-31-test-3.json with TinaCMS

* Fix on 0 length content:

* Properly working reading time and english post time

* Remove test files

* Refactor data fetching to be more terse in controllers, and fix article creation oddities

* Fix post time in kitchen sink

* Created new post src/lib/articles/content/articles/2020-09-01-test.json with TinaCMS

* Fix branching

* Remove test doc

* Set preview branch on creation of new file

* Remove annoying mac file

* Fix kitchen sink

* Remove console.log

* Fetch articles from remote in editing mode

* Fix path

* Enable incremental SSG for articles

* Fix fallback behaviour

* Enable dynamic paging

* Enable dynamic paging

* Try fixing 500?

* Refactor to a packages setup

* Fix SSR

* Fix syntax error

* Fix build

* Fix build

* Fix build

* Fix build

* Fix styling and editing

* Fix build

* Fix build

.gitignore

@@ -114,4 +114,7 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
-.vercel
+.vercel
+
+# Custom
+.DS_Store

next.config.js

@@ -1,4 +1,5 @@
 require('dotenv').config()
+const { resolve } = require("path")
 
 const VERCEL_BRANCH = process.env.VERCEL_GITHUB_COMMIT_REF;
 const SYSTEM_BRANCH = require("child_process")
@@ -13,13 +14,19 @@ module.exports = {
     GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
     REPO_FULL_NAME: process.env.REPO_FULL_NAME,
     BASE_BRANCH: BRANCH ? BRANCH : process.env.BASE_BRANCH,
-    USE_REMOTE: false
+    USE_REMOTE: process.env.USE_REMOTE == "true"
   },
   webpack: (config, options) => {
     config.node = {
       fs: 'empty'
     }
 
+    config.resolve.alias = {
+      ...(config.resolve.alias || {}),
+      "cdm-content": resolve(__dirname, "./packages/cdm-content"),
+      "cdm-ui": resolve(__dirname, "./packages/cdm-ui"),
+    }
+
     return config;
   }
 }

package.json

@@ -13,22 +13,22 @@
     "antd": "^4.3.4",
     "bootstrap": "^4.5.2",
     "dotenv": "^8.2.0",
-    "next": "9.4.4",
+    "next": "^10.0.3",
     "next-tinacms-github": "^0.1.1",
     "react": "16.13.1",
     "react-aria": "^0.9.5",
     "react-bootstrap": "^1.3.0",
     "react-dom": "16.13.1",
     "react-three-fiber": "^4.2.20",
-    "react-tinacms-editor": "^0.29.0",
-    "react-tinacms-github": "^0.4.3",
-    "react-tinacms-inline": "^0.8.0",
+    "react-tinacms-editor": "^0.34.0",
+    "react-tinacms-github": "^0.34.0",
+    "react-tinacms-inline": "^0.34.0",
     "remark": "^12.0.1",
     "remark-html": "^12.0.0",
     "remark-preset-lint-markdown-style-guide": "^3.0.1",
     "slugify": "^1.4.5",
     "styled-components": "^5.1.1",
-    "tinacms": "^0.21.2",
+    "tinacms": "^0.34.0",
     "use-color-scheme": "^1.1.1",
     "use-dark-mode": "^2.3.1",
     "vercel": "^19.1.1"

packages/cdm-content/articles/index.ts

@@ -0,0 +1,2 @@
+export { default as articleArchiveData } from "./content/articles.json";
+export * from "./models"

packages/cdm-content/articles/models/article.ts

@@ -0,0 +1,22 @@
+import { Block } from "react-tinacms-inline";
+import { ArticleHeroProps } from "../../../cdm-ui/articles/components/Hero";
+
+export interface Article {
+  title: string;
+  description: string;
+  featured_image: string | undefined;
+  created_date: string | Date;
+  edited_date: string | Date;
+  categories: [] | [{
+      title: string
+      href: string
+  }],
+  author: {
+    fullName: string,
+    photo: string
+  },
+  hero: {
+    variant: ArticleHeroProps['variant'];
+  }
+  body: Block[]
+}

packages/cdm-content/articles/models/index.ts

@@ -0,0 +1 @@
+export * from "./article"

packages/cdm-content/general/index.ts

@@ -0,0 +1,3 @@
+export { default as footerData } from "./content/footer.json"
+export { default as homeData } from "./content/home.json"
+export { default as kitchenSinkData } from "./content/kitchen-sink.json"

packages/cdm-content/index.ts

@@ -0,0 +1,2 @@
+export * from "./articles"
+export * from "./general"

src/lib/articles/blocks/Figure.tsx → packages/cdm-ui/articles/blocks/Figure.tsx

@@ -1,6 +1,4 @@
-import { useState } from "react";
 import { BlocksControls } from "react-tinacms-inline";
-import { useCMS } from "tinacms";
 import { Figure, FigureVariants } from "../components/Figure";
 
 export interface RichTextBlockProps {

src/lib/articles/routes/article/article.form.tsx → packages/cdm-ui/articles/routes/article/article.form.tsx

@@ -1,7 +1,7 @@
 import { GithubClient, useGithubJsonForm } from "react-tinacms-github";
-import { GitFile } from "react-tinacms-github/dist/form/useGitFileSha";
 import { useCMS, FormOptions } from "tinacms";
-import { Article } from "../../models/article";
+import { Article } from "cdm-content/articles/models/article";
+import { GitFile } from "react-tinacms-github/dist/src/form/useGitFileSha";
 
 type ArticleFormOptions = (...args: any) => Omit<FormOptions<Article>, "onSubmit">;
 

src/lib/articles/routes/article/article.tsx → packages/cdm-ui/articles/routes/article/article.tsx

@@ -13,8 +13,9 @@ export interface ArticleRouteProps {
   footer: any;
 }
 
-export function ArticleRoute({ page, footer }: ArticleRouteProps) {
-  const [data, form] = useArticleForm(page.file);
+export function ArticleRoute(props: ArticleRouteProps) {
+  const { page, footer } = props;
+  const [data, form] = useArticleForm(page?.file);
   const seo = {
     title: data.title,
     description: data.description

packages/cdm-ui/articles/routes/article/index.tsx

@@ -0,0 +1,58 @@
+import { readdirSync, readFileSync } from 'fs';
+import path from "path";
+import slugify from 'slugify';
+import { getFiles } from 'next-tinacms-github';
+import { articlesRelPath } from '../articles';
+
+export * from "./article";
+
+export const useArticleData = async (articleRelPath: string) => {
+  return JSON.parse(readFileSync(path.resolve(process.cwd(), articleRelPath), { encoding: "utf-8" }))
+};
+export const articlesRelDir = 'packages/cdm-content/articles/content/articles';
+
+export function getArticleMetaBySlug (slug: string) {
+  const fileName = `${slug}.json`;
+  const articleRelPath = `${articlesRelDir}/${fileName}`;
+  const articleAbsolutePath = path.resolve(process.cwd(), articlesRelPath);
+
+  return {
+    slug: slug,
+    fileName,
+    articleRelPath,
+    articleAbsolutePath
+  }
+}
+
+export async function getAllArticlePaths(isEditing?: boolean, branch?: string, accessToken?: string) {
+  const articlesDir = path.resolve(process.cwd(), articlesRelDir);
+  let filePaths;
+
+  if (isEditing) {
+    const repoName = process.env.REPO_FULL_NAME;
+    const branchName = branch ?? process.env.BASE_BRANCH;
+    const currentAccessToken = accessToken ?? process.env.GITHUB_ACCESS_TOKEN;
+
+    filePaths = (await getFiles(articlesRelDir, repoName, branchName, currentAccessToken))
+      .map(file => file.replace(articlesRelDir + "/", ""));
+  }
+  else {
+    filePaths = readdirSync(articlesDir);
+  }
+
+  return filePaths.map(fileName => {
+    const slug = slugify(
+      fileName
+        .replace(/\.json$/, '')
+    );
+    const articleRelPath = `${articlesRelDir}/${fileName}`;
+    const articleAbsolutePath = path.resolve(process.cwd(), articleRelPath);
+
+    return {
+      slug,
+      fileName,
+      articleRelPath,
+      articleAbsolutePath
+    }
+  });
+}

packages/cdm-ui/articles/routes/articles/articles.module.css

@@ -0,0 +1,6 @@
+#articles,
+#articles > div,
+#articles > div > div {
+  min-height: 100%;
+  height: 100%;
+}

packages/cdm-ui/articles/routes/articles/articles.tsx

@@ -0,0 +1,124 @@
+import React, { Fragment, useContext, useMemo } from 'react';
+import { useForm, usePlugin } from 'tinacms';
+import { InlineForm } from 'react-tinacms-inline';
+import { Container, Row, Col } from 'react-bootstrap';
+import MainLayout from '../../../core/layouts/Main';
+import { useArticlesForm } from './articles.form';
+import { ReferenceCallout } from '../../../core/components/Reference/Callout';
+import { ReferenceCard } from '../../../core/components/Reference/Card';
+import { Heading } from '../../../core/components/Typography/Heading';
+import styles from "./articles.module.css";
+
+export interface ArticlesProps {
+  page: any;
+  articles?: any;
+  footer: any;
+  isEditing?: boolean;
+  children?: React.ReactChild;
+}
+
+export function ArticlesRoute({ page, articles, footer }: ArticlesProps) {
+  const [data, form] = useArticlesForm(page.file);
+  const [, form2] = useForm({
+    id: "example",
+    label: "example",
+    fields: [],
+    initialValues: {
+      email: null
+    },
+    validate: function (values) { return undefined },
+    onSubmit: () => undefined
+  })
+  const featuredArticles = useMemo(() => articles?.filter(article => article.featured === true), [articles]);
+  const seo = {
+    title: data.title,
+    description: data.description
+  }
+
+  usePlugin(form2);
+  usePlugin(form);
+
+  return (
+    <div id={styles.articles}>
+      <InlineForm form={form}>
+        <MainLayout seo={seo} page={page} footer={footer}>
+          <Container>
+            <Row>
+              <Col>
+                <ReferenceCallout
+                  title={data.title}
+                  body={data.description}
+                  image={data.image}
+                  variant="dark"
+                  className="bg-lightblue"
+                />
+              </Col>
+            </Row>
+            {featuredArticles.length > 0 && (
+              <Row className="pt-4 pb-4">
+                <Col xs={12}>
+                  <Heading as="h5" border={true} bold={true}>
+                    Featured Stories
+                  </Heading>
+                </Col>
+                <Col md="6">
+                  <ReferenceCard
+                    size="lg"
+                    reference={{
+                      title: "Hello world",
+                      description: "I am alive",
+                      href: "#",
+                      author: {
+                        name: "Chris D. Macrae",
+                        readingTime: 1000 * 60 * 60 * 5
+                      }
+                    }}
+                  />
+                </Col>
+                <Col md="6">
+                  {[0, 1, 2].map((n, index) => (
+                    <ReferenceCard
+                      size="sm"
+                      reference={{
+                        title: "Hello world",
+                        description: "I am alive",
+                        href: "#",
+                        author: {
+                          name: "Chris D. Macrae"
+                        }
+                      }}
+                      key={index}
+                    />
+                  ))}
+                </Col>
+              </Row>
+            )}
+            <Row className="pt-4 pb-4">
+              <Col>
+                <Heading as="h5" border={true} bold={true}>
+                  All Stories
+                </Heading>
+                {articles.map((article, index) => (
+                  <Fragment key={index}>
+                    {article.file && (
+                      <ReferenceCard
+                        size="md"
+                        reference={{
+                          ...article.file.data,
+                          href: `/articles/${article.slug}`,
+                          image: article.file.data.featured_image
+                        }}
+                      />
+                    )}
+                  </Fragment>
+                ))}
+              </Col>
+            </Row>
+          </Container>
+        </MainLayout>
+      </InlineForm>
+    </div>
+  );
+}
+
+export default ArticlesRoute;

packages/cdm-ui/articles/routes/articles/index.tsx

@@ -0,0 +1,5 @@
+export * from "./articles";
+
+export const useArticlesData = async () => await (await import("cdm-content")).articleArchiveData;
+
+export const articlesRelPath  = 'packages/cdm-content/articles/content/articles.json';

src/lib/cms/components/EditLink.tsx → packages/cdm-ui/cms/components/EditLink.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useGithubEditing } from "react-tinacms-github"
 import { useCMS } from 'tinacms';
 
 export interface EditLinkProps {
@@ -9,16 +8,15 @@ export interface EditLinkProps {
 export const EditLink = ({ children }: EditLinkProps) => {
   const cms = useCMS();
   const isEditing = cms.enabled;
-  const github = useGithubEditing();
-  let message: React.ReactChild = isEditing ? 'Exit edit modedsafdsdasf' : 'Edit this site'
+  let message: React.ReactChild = isEditing ? 'Exit edit mode' : 'Edit this site'
 
   if (children) {
     message = children;
   }
 
   return (
-    <span onClick={isEditing ? github.exitEditMode : github.enterEditMode}>
+    <a href="#" onClick={() => cms.toggle()}>
       {message}
-    </span>
+    </a>
   )
 }

packages/cdm-ui/cms/components/index.ts

@@ -0,0 +1 @@
+export * from "./EditLink";

packages/cdm-ui/cms/index.ts

@@ -0,0 +1,3 @@
+export * from "./components"
+export * from "./providers"
+export * from "./utils"