2711-add-tina-to-footer

components/blocks/builtOnAzure.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import Image from "next/image";
 import type { Template } from "tinacms";
 import { tinaField } from "tinacms/dist/react";
@@ -8,27 +9,45 @@ import { Section } from "../util/section";
 export const BuiltOnAzure = ({ data }) => {
   return (
     <Section color={data.backgroundColor}>
-      <Container className="text-lg">
-        <CustomLink
+      <Container className="grid grid-cols-1 text-lg lg:grid-cols-2">
+        <Link
+          data={data}
           href="/consulting/azure"
-          data-tina-field={tinaField(data, builtOnAzureBlock.backgroundColor)}
-          className="unstyled flex items-center justify-center hover:border-azure hover:text-azure"
-        >
-          <Image
-            src="/images/logos/azure.png"
-            alt="Microsoft Azure Logo"
-            height={30}
-            width={30}
-          />
-          <div className="ml-2 text-center uppercase tracking-widest">
-            Built on the Microsoft Azure Platform
-          </div>
-        </CustomLink>
+          className="hover:border-azure hover:text-azure"
+          imgSrc="/images/logos/azure.png"
+          imgAlt="Microsoft Azure Logo"
+          text="Built on Microsoft Azure"
+        />
+
+        <Link
+          data={data}
+          href="https://tina.io"
+          className="hover:border-tina hover:text-tina"
+          imgSrc="/images/logos/tina-llama-orange.png"
+          imgAlt="TinaCMS logo"
+          text="Powered by TinaCMS"
+        />
       </Container>
     </Section>
   );
 };
 
+const Link = ({ data, href, className, imgSrc, imgAlt, text }) => {
+  return (
+    <CustomLink
+      href={href}
+      data-tina-field={tinaField(data, builtOnAzureBlock.backgroundColor)}
+      className={classNames(
+        "unstyled flex items-center justify-center",
+        className
+      )}
+    >
+      <Image src={imgSrc} alt={imgAlt} height={30} width={30} />
+      <div className="ml-2 text-center uppercase tracking-widest">{text}</div>
+    </CustomLink>
+  );
+};
+
 export const builtOnAzureBlock = {
   backgroundColor: "backgroundColor",
 };

components/customLink.tsx

@@ -9,9 +9,6 @@ interface CustomLinkProps extends PropsWithChildren {
   style?: React.CSSProperties;
 }
 
-const externalSSWSitePatterns =
-  /^(https:\/\/(?:www\.)?ssw\.com\.au\/(?:people|rules|ssw)(?:\/|$))/i;
-
 const isExternalLink = (href: string): boolean => {
   // i.e. href = https://anydomain.com.au => true | href = https://ssw.com.au/rule/* => true for SSW External Site | href = /company => false for relative path
   return (
@@ -21,9 +18,16 @@ const isExternalLink = (href: string): boolean => {
 };
 
 const isExternalSSWSite = (href: string): boolean => {
+  const externalSSWSitePatterns =
+    /^(https:\/\/(?:www\.)?ssw\.com\.au\/(?:people|rules|ssw)(?:\/|$))/i;
   return externalSSWSitePatterns.test(href);
 };
 
+const isTinaSite = (href: string): boolean => {
+  const tinaSitePatterns = /^(https:\/\/(?:www\.)?tina\.io(?:\/|$))/i;
+  return tinaSitePatterns.test(href);
+};
+
 export const CustomLink: React.FC<CustomLinkProps> = ({
   href,
   target,
@@ -34,8 +38,7 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
   ...props
 }) => {
   const isExternal = isExternalLink(href);
-  const rel =
-    isExternal && !href.includes("ssw") ? "noopener noreferrer nofollow" : "";
+  const isAnSSWBrandedSite = isExternalSSWSite(href) || isTinaSite(href);
 
   if (!href) return <>{children}</>;
   return (
@@ -45,7 +48,7 @@ export const CustomLink: React.FC<CustomLinkProps> = ({
           className={className}
           href={href}
           target={target || "_blank"}
-          rel={rel}
+          rel={isAnSSWBrandedSite ? "" : "noopener noreferrer nofollow"}
           title={title}
           style={style}
           {...props}

tailwind.config.js

@@ -45,6 +45,11 @@ export const platform = [
     text: "PowerBI",
     color: "#F2C811",
   },
+  {
+    name: "tina",
+    text: "TinaCMS",
+    color: "#EC4815",
+  },
 ];
 
 // eslint-disable-next-line import/no-anonymous-default-export
@@ -271,6 +276,7 @@ export default {
           (acc, c) => ({ ...acc, [c.name]: c.color }),
           {}
         ),
+        ...platform.reduce((acc, c) => ({ ...acc, [c.name]: c.color }), {}),
         social: {
           phone: "#b31217",
           youtube: "#b31217",