🌟Index - Visual edit feature (#893)

SSWConsulting · Jun 30, 2023 · 32b4dd6 · 32b4dd6
1 parent dcc80f0
commit 32b4dd6
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 16 deletions.
diff --git a/components/blocks/aboutUs.tsx b/components/blocks/aboutUs.tsx
@@ -1,16 +1,17 @@
-import React, { useEffect, useState } from "react";
-import Link from "next/link";
-import type { Template } from "tinacms";
+import classNames from "classnames";
 import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
-import classNames from "classnames";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import type { Template } from "tinacms";
 
 import { BiChevronRightCircle } from "react-icons/bi";
 
+import { tinaField } from "tinacms/dist/react";
+import layoutData from "../../content/global/index.json";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
-import layoutData from "../../content/global/index.json";
 import { VideoModal } from "../videoModal";
 
 dayjs.extend(timezone);
@@ -105,7 +106,10 @@ export const AboutUs = ({ data }) => {
 
   return (
     <Section color={data.backgroundColor}>
-      <Container className="w-full">
+      <Container
+        className="w-full"
+        data-tina-field={tinaField(data, aboutUsBlock.backgroundColor)}
+      >
         <div className="grid grid-cols-3 gap-6">
           <TV className="col-span-3 max-md:hidden sm:col-span-1" />
           <div className="col-span-3 md:col-span-2">
@@ -391,6 +395,10 @@ const Map = ({
   );
 };
 
+export const aboutUsBlock = {
+  backgroundColor: "backgroundColor",
+};
+
 export const aboutUsBlockSchema: Template = {
   name: "AboutUs",
   label: "About Us",

diff --git a/components/blocks/builtOnAzure.tsx b/components/blocks/builtOnAzure.tsx
@@ -1,7 +1,7 @@
-import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import type { Template } from "tinacms";
+import { tinaField } from "tinacms/dist/react";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 
@@ -11,6 +11,7 @@ export const BuiltOnAzure = ({ data }) => {
       <Container className="text-lg">
         <Link
           href="/consulting/azure"
+          data-tina-field={tinaField(data, builtOnAzureBlock.backgroundColor)}
           className="unstyled flex items-center justify-center hover:border-azure hover:text-azure"
         >
           <Image
@@ -28,6 +29,10 @@ export const BuiltOnAzure = ({ data }) => {
   );
 };
 
+export const builtOnAzureBlock = {
+  backgroundColor: "backgroundColor",
+};
+
 export const builtOnAzureBlockSchema: Template = {
   name: "BuiltOnAzure",
   label: "Built on Azure",

diff --git a/components/blocks/content.tsx b/components/blocks/content.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+import classNames from "classnames";
 import { Template } from "tinacms";
+import { tinaField } from "tinacms/dist/react";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import classNames from "classnames";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
-import { customImageBlockSchema } from "./customImage";
 import { clientLogosBlockSchema } from "./clientLogos";
+import { customImageBlockSchema } from "./customImage";
 import { componentRenderer } from "./mdxComponentRenderer";
 
 const alignmentClasses = {
@@ -26,17 +26,27 @@ export const Content = ({ data }) => {
   const alignment = alignmentClasses[data.align] ?? alignmentClasses.left;
   const size = sizeClasses[data.size] ?? sizeClasses.base;
   return (
-    <Section color={data.backgroundColor}>
+    <Section
+      color={data.backgroundColor}
+      data-tina-field={tinaField(data, contentBlock.title)}
+    >
       <Container size="medium" className={classNames("prose", alignment, size)}>
         {data.title && (
           <h2 className="pb-5 pt-16 text-3xl font-light">{data.title}</h2>
         )}
-        <TinaMarkdown content={data.content} components={componentRenderer} />
+        <span data-tina-field={tinaField(data, contentBlock.content)}>
+          <TinaMarkdown content={data.content} components={componentRenderer} />
+        </span>
       </Container>
     </Section>
   );
 };
 
+export const contentBlock = {
+  title: "title",
+  content: "content",
+};
+
 export const contentBlockSchema: Template = {
   name: "Content",
   label: "Content",
@@ -50,12 +60,12 @@ export const contentBlockSchema: Template = {
     {
       type: "string",
       label: "Title",
-      name: "title",
+      name: contentBlock.title,
     },
     {
       type: "rich-text",
       label: "Content",
-      name: "content",
+      name: contentBlock.content,
       templates: [customImageBlockSchema, clientLogosBlockSchema],
     },
     {

diff --git a/components/blocks/upcomingEvents.tsx b/components/blocks/upcomingEvents.tsx
@@ -6,6 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import type { Template } from "tinacms";
+import { tinaField } from "tinacms/dist/react";
 
 import axios from "axios";
 import { EventInfo, LiveStreamBannerInfo } from "../../services/server/events";
@@ -45,7 +46,12 @@ export const UpcomingEvents = ({ data }) => {
 
   return (
     <div className="prose max-w-none">
-      <h1 className="pb-5 font-light">{data.title}</h1>
+      <h1
+        data-tina-field={tinaField(data, upcomingEventsBlock.title)}
+        className="pb-5 font-light"
+      >
+        {data.title}
+      </h1>
       <div className="not-prose">
         <div className="max-h-150 grow overflow-x-hidden overflow-y-scroll border-2 bg-gray-100">
           {loading ? <p>Loading...</p> : events.map(renderEvent)}
@@ -104,6 +110,10 @@ const renderEvent = (e: EventInfo) => {
   );
 };
 
+export const upcomingEventsBlock = {
+  title: "title",
+};
+
 export const upcomingEventsBlockSchema: Template = {
   name: "UpcomingEvents",
   label: "Upcoming Events",

diff --git a/pages/[filename].tsx b/pages/[filename].tsx
@@ -50,8 +50,8 @@ export default function HomePage(
         <Container className={"flex-1 pt-4"}>
           <div className="gap-4 md:grid md:grid-cols-5">
             <div
-              data-tina-field={tinaField(data.page, "_body")}
               className={contentClass}
+              data-tina-field={tinaField(data.page, "_body")}
             >
               <TinaMarkdown
                 components={componentRenderer}