Merge remote-tracking branch 'origin/fix-unify-datetime-formats-netli…

…fy' into fix-unify-datetime-formats-netlify

packages/example-site/content/project/ongoing-project2.json

@@ -0,0 +1,26 @@
+{
+  "slug": "ongoing-project-2",
+  "question": "Hello world (from json)?",
+  "mainContact": "first-contact",
+  "projectTeam": [
+    "first-contact",
+    "second-contact"
+  ],
+  "agency": "example agency",
+  "deliverable": "example deliverable",
+  "description": "example description",
+  "emailContent": "example emailContent",
+  "endDate": "2016-12-15",
+  "expertise": "example expertise",
+  "fundingInfo": "example fundingInfo",
+  "keyDates": "example keyDates",
+  "lastModified": "example lastModified",
+  "opportunityCloses": "2022-10-28",
+  "purpose": "example purpose",
+  "requirement": "example requirement",
+  "startDate": "2022-06-17",
+  "status": "ongoing",
+  "statusOfData": "example statusOfData",
+  "summary": "example summary",
+  "topics": ["example topics"]
+}

packages/example-site/content/project/open-project-2.json

@@ -0,0 +1,26 @@
+{
+  "slug": "open-project-2",
+  "question": "Hello world (from json)?",
+  "mainContact": "the-boss",
+  "projectTeam": [
+    "first-contact",
+    "second-contact"
+  ],
+  "agency": "example agency",
+  "deliverable": "example deliverable",
+  "description": "example description",
+  "emailContent": "example emailContent",
+  "endDate": "2016-12-15",
+  "expertise": "example expertise",
+  "fundingInfo": "example fundingInfo",
+  "keyDates": "example keyDates",
+  "lastModified": "example lastModified",
+  "opportunityCloses": "2022-10-28",
+  "purpose": "example purpose",
+  "requirement": "example requirement",
+  "startDate": "2022-06-17",
+  "status": "open",
+  "statusOfData": "example statusOfData",
+  "summary": "example summary",
+  "topics": ["example topics"]
+}

packages/gatsby-theme-project-portal/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.3",
+    "@headlessui/react": "^1.7.3",
     "autoprefixer": "^10.0.4",
     "gatsby-plugin-image": "^2.24.0",
     "gatsby-plugin-postcss": "^5.24.0",

packages/gatsby-theme-project-portal/src/pages/about.tsx

@@ -0,0 +1,135 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { Disclosure } from "@headlessui/react"
+import { Layout } from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/layouts"
+import {
+  HeaderWithImage,
+  MarkdownText,
+} from "@thepolicylab-projectportals/gatsby-theme-project-portal/src/components"
+import { FaPlus, FaMinus } from "react-icons/fa"
+import { useStaticText, useSiteMetadata } from "../hooks"
+import { isNA } from "../utils"
+
+interface AboutProps {
+  data: {
+    bgImage: {
+      childImageSharp: {
+        resize: {
+          src: string
+        }
+      }
+    }
+  }
+}
+
+interface AccordionProps {
+  title: string
+  text: string
+}
+
+const Accordion: React.FC<AccordionProps> = ({ title, text }) => {
+  return (
+    <div className="w-full my-6">
+      <Disclosure>
+        {({ open }) => (
+          <>
+            <Disclosure.Button className="flex items-center justify-between w-full px-4 py-3 text-left bg-navbar">
+              <span className="text-h4 font-bold">{title}</span>
+              {open ? <FaMinus /> : <FaPlus />}
+            </Disclosure.Button>
+            <Disclosure.Panel className="text-body p-4 w-9/10">
+              <MarkdownText text={text} />
+            </Disclosure.Panel>
+          </>
+        )}
+      </Disclosure>
+    </div>
+  )
+}
+
+const AboutList = ({ aboutTitle, aboutText }) => {
+  return (
+    <div className="mb-8">
+      {aboutTitle && <h3 className="text-h3 mb-4">{aboutTitle}</h3>}
+      <MarkdownText text={aboutText} />
+    </div>
+  )
+}
+
+export default ({ data }: AboutProps) => {
+  const { title } = useSiteMetadata()
+  const language = useStaticText()
+  console.log("test")
+  console.log(data)
+  return (
+    <Layout activePage="About" title="About" description={`About the ${title}`}>
+      <main>
+        <header>
+          <HeaderWithImage
+            title="About"
+            lede=""
+            imageSrc={data?.bgImage?.childImageSharp.resize.src}
+          />
+        </header>
+
+        <article className="w-full pt-5 px-8 lg:px-16 xl:px-24 lg:w-2/3">
+          <section className="mb-20">
+            {language.about.header && (
+              <h2 className="text-h3 sm:text-h2 my-8 font-bold text-black">
+                {language.about.header}
+              </h2>
+            )}
+            {language.about.aims.map(({ title, text }, i) => (
+              <AboutList
+                key={"list_" + i}
+                aboutTitle={title}
+                aboutText={text}
+              />
+            ))}
+          </section>
+
+          <section className="mb-20">
+            <h2 className="text-h3 sm:text-h2 my-6">
+              Frequently Asked Questions
+            </h2>
+            {language.about.faq.map(({ title, text }, i) => (
+              <Accordion
+                key={"collapsibleList_" + i}
+                title={title}
+                text={text}
+              />
+            ))}
+          </section>
+
+          {!isNA(language.about.accessibility) && (
+            <section id="accessibility">
+              <h2 className="text-h3 sm:text-h2 my-6">
+                Accessibility Statement
+              </h2>
+              <MarkdownText
+                className="mb-10 leading-normal text-body lg:text-body"
+                text={language.about.accessibility}
+              />
+            </section>
+          )}
+        </article>
+      </main>
+    </Layout>
+  )
+}
+
+export const query = graphql`
+  query AboutQuery {
+    bgImage: file(
+      name: { eq: "about" }
+      extension: { in: ["png", "jpg", "jpeg"] }
+      sourceInstanceName: { eq: "themeImages" }
+    ) {
+      childImageSharp {
+        resize(width: 1536) {
+          src
+        }
+      }
+    }
+  }
+`

packages/gatsby-theme-project-portal/src/pages/index.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { CardProps } from "../components"
+import { useStaticText } from "../hooks"
+import { ProjectPageLayout } from "../layouts/ProjectPageLayout"
+
+export interface OpenProjectProps {
+  data: {
+    allProject: {
+      nodes: CardProps[]
+    }
+    bgImage: {
+      childImageSharp: {
+        resize: {
+          src: string
+        }
+      }
+    }
+  }
+}
+
+export default ({ data: { allProject, bgImage } }: OpenProjectProps) => {
+  const { open } = useStaticText()
+
+  return (
+    <ProjectPageLayout
+      allProject={allProject}
+      bgImage={bgImage}
+      title={open.title}
+      lede={open.lede}
+      pageName={open.pageName}
+      sortOptions={["created", "opportunityCloses"]}
+    />
+  )
+}
+export const query = graphql`
+  query ProjectPageQuery {
+    allProject(filter: { status: { eq: "open" } }) {
+      nodes {
+        question
+        slug
+        status
+        summary
+        deliverable
+        expertise
+        keyDates
+        endDate
+        agency
+        topics
+        statusOfData
+        priorResearch
+        fundingInfo
+        lastModified
+      }
+    }
+    bgImage: file(
+      name: { eq: "open" }
+      extension: { in: ["png", "jpg", "jpeg"] }
+      sourceInstanceName: { eq: "themeImages" }
+    ) {
+      childImageSharp {
+        resize(width: 1536) {
+          src
+        }
+      }
+    }
+  }
+`

packages/gatsby-theme-project-portal/src/pages/ongoing.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { graphql } from "gatsby"
+import { CardProps } from "../components"
+import { useStaticText } from "../hooks"
+import { ProjectPageLayout } from "../layouts/ProjectPageLayout"
+
+export interface OngoingProjectProps {
+  data: {
+    allProject: {
+      nodes: CardProps[]
+    }
+    bgImage: {
+      childImageSharp: {
+        resize: {
+          src: string
+        }
+      }
+    }
+  }
+}
+
+export default ({ data: { allProject, bgImage } }: OngoingProjectProps) => {
+  const { ongoing } = useStaticText()
+
+  return (
+    <ProjectPageLayout
+      allProject={allProject}
+      bgImage={bgImage}
+      title={ongoing.title}
+      lede={ongoing.lede}
+      pageName={ongoing.pageName}
+      sortOptions={["startDate", "created"]}
+    />
+  )
+}
+export const query = graphql`
+  query ProjectPageQuery {
+    allProject(filter: { status: { eq: "ongoing" } }) {
+      nodes {
+        question
+        slug
+        status
+        summary
+        deliverable
+        expertise
+        keyDates
+        endDate
+        agency
+        topics
+        statusOfData
+        priorResearch
+        fundingInfo
+        lastModified
+      }
+    }
+    bgImage: file(
+      name: { eq: "ongoing" }
+      extension: { in: ["png", "jpg", "jpeg"] }
+      sourceInstanceName: { eq: "themeImages" }
+    ) {
+      childImageSharp {
+        resize(width: 1536) {
+          src
+        }
+      }
+    }
+  }
+`

yarn.lock

@@ -1490,6 +1490,11 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@headlessui/react@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.3.tgz#853c598ff47b37cdd192c5cbee890d9b610c3ec0"
+  integrity sha512-LGp06SrGv7BMaIQlTs8s2G06moqkI0cb0b8stgq7KZ3xcHdH3qMP+cRyV7qe5x4XEW/IGY48BW4fLesD6NQLng==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"