Sync develop into main

README.md

@@ -7,7 +7,8 @@
   Prove Us Wrong
 </h1>
 
-[![Netlify Status](https://api.netlify.com/api/v1/badges/a791a4e1-44b5-4ba5-8703-ce89505a170f/deploy-status)](https://app.netlify.com/sites/proveuswrong/deploys) 
+[![Production](https://img.shields.io/website?label=production&url=https%3A%2F%2Fproveuswrong.io&logo=cloudflare&logoColor=white)](https://proveuswrong.io)
+[![Develop](https://img.shields.io/website?label=develop&url=https%3A%2F%2Fdevelop.proveuswrong.io&logo=cloudflare&logoColor=white)](https://develop.proveuswrong.io)
 
 
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=proveuswrong_website&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=proveuswrong_website)

gatsby-config.js

@@ -1,29 +1,63 @@
-const isProd = (branchName, isPullRequest) => {
-  if(!branchName) return false;
-  return branchName === 'main' 
-  || branchName.startsWith('hotfix/') 
-  || branchName.startsWith('release/') 
-  || (branchName === 'develop' && isPullRequest === 'true');
+const isProductionEnv = () => {
+  if (process.env.CF_PAGES_ENVIRONMENT) {
+    return process.env.CF_PAGES_ENVIRONMENT === "production";
+  }
+
+  const branchName =
+    process.env.CF_PAGES_BRANCH || process.env.BRANCH || process.env.HEAD;
+  if (!branchName) {
+    return process.env.NODE_ENV === "production";
+  }
+
+  return (
+    branchName === "main" ||
+    branchName.startsWith("hotfix/") ||
+    branchName.startsWith("release/") ||
+    (branchName === "develop" && process.env.PULL_REQUEST === "true")
+  );
 };
 
+const isProd = isProductionEnv();
 
 require("dotenv").config({
-  path: `${isProd(process.env.HEAD, process.env.PULL_REQUEST) ? ".env.production" : ".env.development"}`,
+  path: isProd ? ".env.production" : ".env.development",
 });
 
-const SITE_URL = "https://proveuswrong.io/"
+const withTrailingSlash = (url) => {
+  if (!url) return url;
+  return url.endsWith("/") ? url : `${url}/`;
+};
+
+const PROD_SITE_URL = withTrailingSlash("https://proveuswrong.io");
+const PREVIEW_SITE_URL = withTrailingSlash(
+  process.env.CF_PAGES_URL || "http://localhost:8000"
+);
+const SITE_URL = isProd ? PROD_SITE_URL : PREVIEW_SITE_URL;
+
+const branchName =
+  process.env.CF_PAGES_BRANCH || process.env.BRANCH || process.env.HEAD;
+const commitRef = process.env.CF_PAGES_COMMIT_SHA || process.env.COMMIT_REF;
+const pullRequest =
+  process.env.PULL_REQUEST ||
+  (process.env.CF_PAGES_ENVIRONMENT
+    ? process.env.CF_PAGES_ENVIRONMENT === "production"
+      ? "false"
+      : "true"
+    : undefined);
+const reviewID = process.env.CF_PAGES_DEPLOYMENT_ID || process.env.REVIEW_ID;
+const headRef = process.env.HEAD || branchName;
 
 module.exports = {
   siteMetadata: {
     title: `Prove Us Wrong`,
     description: `We are an organization that develops decentralized curation solutions as public goods. We build the next cool thing. Prove us wrong.`,
     author: `@0xferit`,
     siteUrl: SITE_URL,
-    head: process.env.HEAD,
-    pullRequest: process.env.PULL_REQUEST,
-    branch: process.env.BRANCH,
-    commitRef: process.env.COMMIT_REF,
-    reviewID: process.env.REVIEW_ID,
+    head: headRef,
+    pullRequest,
+    branch: branchName,
+    commitRef,
+    reviewID,
   },
   plugins: [
     {

src/components/footer.js

@@ -82,7 +82,7 @@ const Footer = () => (
       </div>
 
       <small>Copyright {new Date().getFullYear()} Prove Us Wrong</small>
-      <small>This site is powered by <a target="_blank" rel="noopener noreferrer" href="https://netlify.com">Netlify</a></small>
+      <small>This site is powered by <a target="_blank" rel="noopener noreferrer" href="https://pages.cloudflare.com/">Cloudflare Pages</a></small>
 
     </div>
   </footer>

src/components/seo.js

@@ -2,12 +2,26 @@ import * as React from "react";
 import PropTypes from "prop-types";
 import { Helmet } from "react-helmet";
 import { useStaticQuery, graphql } from "gatsby";
-import { useEffect, useState } from "react";
 
-const constructUrl = (baseUrl, path) =>
-  !baseUrl || !path ? null : `${baseUrl}${path}`;
+const joinUrl = (baseUrl, path) => {
+  if (!baseUrl) return null;
+  if (!path) return baseUrl;
+  const normalizedBase = baseUrl.endsWith("/")
+    ? baseUrl.slice(0, -1)
+    : baseUrl;
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  return `${normalizedBase}${normalizedPath}`;
+};
 
-function Seo({ description, lang, meta, title, customImageUrl, imageAlt }) {
+function Seo({
+  description,
+  lang,
+  meta,
+  title,
+  customImageUrl,
+  imageAlt,
+  pathname,
+}) {
   const { ogImageDefault, site } = useStaticQuery(
     graphql`
       query {
@@ -30,14 +44,10 @@ function Seo({ description, lang, meta, title, customImageUrl, imageAlt }) {
     `
   );
 
-  const [actualURL, setActualURL] = useState();
-
-  useEffect(() => {
-    setActualURL(window.location.href);
-  }, []); // Not working
-
   const metaDescription = description || site.siteMetadata.description;
   const defaultTitle = site.siteMetadata?.title;
+  const siteUrl = site.siteMetadata?.siteUrl;
+  const pageUrl = pathname ? joinUrl(siteUrl, pathname) : siteUrl;
 
   return (
     <Helmet
@@ -53,7 +63,7 @@ function Seo({ description, lang, meta, title, customImageUrl, imageAlt }) {
         },
         {
           property: `og:title`,
-          content: defaultTitle,
+          content: title || defaultTitle,
         },
         {
           property: `og:description`,
@@ -65,16 +75,13 @@ function Seo({ description, lang, meta, title, customImageUrl, imageAlt }) {
         },
         {
           property: `og:url`,
-          content: actualURL || site.siteMetadata.siteUrl,
+          content: pageUrl || siteUrl,
         },
         {
           name: `og:image`,
           content:
             customImageUrl ||
-            constructUrl(
-              actualURL || site.siteMetadata.siteUrl,
-              ogImageDefault?.childImageSharp?.fixed?.src
-            ),
+            joinUrl(siteUrl, ogImageDefault?.childImageSharp?.fixed?.src),
         },
         {
           name: `twitter:creator`,
@@ -108,6 +115,7 @@ Seo.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
+  pathname: PropTypes.string,
   title: PropTypes.string.isRequired,
 };
 

src/pages/404.js

@@ -3,9 +3,9 @@ import * as React from "react";
 import Layout from "../components/layout";
 import Seo from "../components/seo";
 
-const NotFoundPage = () => (
+const NotFoundPage = ({ location }) => (
   <Layout>
-    <Seo title="404: Not found" />
+    <Seo title="404: Not found" pathname={location?.pathname} />
     <div>
       <h1>404: Not Found</h1>
       <p>You just hit a route that doesn&#39;t exist... the sadness.</p>

src/pages/about.js

@@ -5,9 +5,9 @@ import Seo from "../components/seo";
 import { StaticImage } from "gatsby-plugin-image";
 import * as styles from "./about.module.scss";
 
-const About = () => (
+const About = ({ location }) => (
   <Layout>
-    <Seo title="About" />
+    <Seo title="About" pathname={location?.pathname} />
     <div className={styles.about}>
       <h1> Who We Are </h1>
 

src/pages/index.js

@@ -5,8 +5,7 @@ import Layout from "../components/layout";
 import Seo from "../components/seo";
 import * as styles from "./index.module.scss";
 
-const IndexPage = () => {
-  const isNetlify = Boolean(process.env.NETLIFY);
+const IndexPage = ({ location }) => {
   const { site } = useStaticQuery(
     graphql`
         query   {
@@ -44,7 +43,7 @@ const IndexPage = () => {
 
   return (
     <Layout>
-      <Seo title="Home" />
+      <Seo title="Home" pathname={location?.pathname} />
       <div className={styles.container}>
         <h1 id="slogan" className={`hero ` + styles.h1}>
           In Decentralized Curation We Trust

src/pages/{MarkdownRemark.frontmatter__slug}.js

@@ -5,7 +5,7 @@ import Seo from "../components/seo";
 import * as styles from "./markdownPage.module.scss";
 import * as cheerio from 'cheerio';
 
-export default function MarkdownPage({ data }) {
+export default function MarkdownPage({ data, location }) {
   const { markdownRemark } = data; // data.markdownRemark holds your post data
   const { frontmatter, html } = markdownRemark;
 
@@ -30,7 +30,7 @@ export default function MarkdownPage({ data }) {
 
   return (
     <Layout>
-      <Seo title={h1.text()} />
+      <Seo title={h1.text()} pathname={location?.pathname} />
 
         {!frontmatter.draft === true || process.env.ENV === "dev" ? (
           <div className={styles.markdownPage} dangerouslySetInnerHTML={{ __html: manipulatedHTML }} />