From b4435b11ef2d9013913768a32148b3a76d06a5cc Mon Sep 17 00:00:00 2001
From: Jeff See <jeffsee.55@gmail.com>
Date: Thu, 18 May 2023 13:09:44 -0700
Subject: [PATCH 1/4] Add vercel edit info data attribute

---
 components/blocks-renderer.tsx |  4 ++--
 package.json                   |  1 +
 pages/[filename].tsx           | 25 ++++++++++++++++++++++++-
 yarn.lock                      | 13 +++++++++++++
 4 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/components/blocks-renderer.tsx b/components/blocks-renderer.tsx
index fa52f9d2..ee50c3ed 100644
--- a/components/blocks-renderer.tsx
+++ b/components/blocks-renderer.tsx
@@ -3,7 +3,7 @@ import { Content } from "./blocks/content";
 import { Features } from "./blocks/features";
 import { Hero } from "./blocks/hero";
 import { Testimonial } from "./blocks/testimonial";
-import { tinaField } from "tinacms/dist/react";
+import { vercelEditInfo } from "@tinacms/vercel-previews";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
   return (
@@ -11,7 +11,7 @@ export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
       {props.blocks
         ? props.blocks.map(function (block, i) {
             return (
-              <div key={i} data-tina-field={tinaField(block)}>
+              <div key={i} data-vercel-edit-info={vercelEditInfo(block)}>
                 <Block {...block} />
               </div>
             );
diff --git a/package.json b/package.json
index b686796e..5cc41484 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
   "dependencies": {
     "@headlessui/react": "1.7.5",
     "@tailwindcss/typography": "^0.5.8",
+    "@tinacms/vercel-previews": "^0.0.1",
     "date-fns": "^2.23.0",
     "next": "^13.3.1",
     "react": "^18.2.0",
diff --git a/pages/[filename].tsx b/pages/[filename].tsx
index 4fba4513..f93e9e98 100644
--- a/pages/[filename].tsx
+++ b/pages/[filename].tsx
@@ -4,11 +4,34 @@ import { Blocks } from "../components/blocks-renderer";
 import { useTina } from "tinacms/dist/react";
 import { Layout } from "../components/layout";
 import { client } from "../tina/__generated__/client";
+import { useVisualEditing } from "@tinacms/vercel-previews";
 
 export default function HomePage(
   props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
-  const { data } = useTina(props);
+  const { data: tinaData } = useTina(props);
+  const data = useVisualEditing({
+    data: tinaData,
+    // metadata is derived from the query and variables
+    query: props.query,
+    variables: props.variables,
+    // When clicking on an editable element for the first time, redirect to the TinaCMS app
+    redirect: "/admin",
+    // Only enable visual editing on preview deploys
+    enabled: true,
+    // stringEncoding automatically adds metadata to strings
+    stringEncoding: false,
+    // Alternatively, you can skip some strings from being encoded
+    // stringEncoding: {
+    //   skipPaths: (path) => {
+    //     if ('page.blocks.0.image' === path) {
+    //       return true
+    //     }
+
+    //     return false
+    //   }
+    // }
+  });
 
   return (
     <Layout rawData={data} data={data.global as any}>
diff --git a/yarn.lock b/yarn.lock
index 601c40f7..d15ae4e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2610,6 +2610,14 @@
     slate-react "^0.81.0"
     webfontloader "1.6.28"
 
+"@tinacms/vercel-previews@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@tinacms/vercel-previews/-/vercel-previews-0.0.1.tgz#f595ab9c2b4e68faa9fd4b63c74c1bdce5409cdc"
+  integrity sha512-74hS/J2uZmKz06NluE4/0SZNsWwfhGT7TSE4QfGZi17NC10dCeTT1bHTekmAPW5a6glNUw0dJcau3LLNtIX9pg==
+  dependencies:
+    "@vercel/stega" "^0.0.4"
+    tinacms "1.5.6"
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
@@ -3266,6 +3274,11 @@
     immer "^9.0.6"
     react-tracked "^1.7.9"
 
+"@vercel/stega@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@vercel/stega/-/stega-0.0.4.tgz#1c44ec91d9eda78b4803b95502413d7120e80d51"
+  integrity sha512-4c9AibBOJ9oGvvev0f5QFbdcDPmOjkxdlrKb5Y70DnAc0ThtFujod8DRGA/RLFQ5lAvgRTdpvoczl8GhHuxFJQ==
+
 "@vitejs/plugin-react@3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz#d1091f535eab8b83d6e74034d01e27d73c773240"

From eb0348a7c9e98b5799b2b5b2a6e4ff0cec753a08 Mon Sep 17 00:00:00 2001
From: Jeff See <jeffsee.55@gmail.com>
Date: Thu, 18 May 2023 13:19:00 -0700
Subject: [PATCH 2/4] Use vercelEditInfo helper

---
 components/blocks/content.tsx     |  4 ++--
 components/blocks/features.tsx    | 10 +++++-----
 components/blocks/hero.tsx        | 10 +++++-----
 components/blocks/testimonial.tsx |  6 +++---
 components/layout/header.tsx      | 10 ++++++----
 components/posts/post.tsx         | 16 ++++++++--------
 components/util/actions.tsx       |  6 +++---
 7 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/components/blocks/content.tsx b/components/blocks/content.tsx
index e0ccdf4c..6e1dcfa0 100644
--- a/components/blocks/content.tsx
+++ b/components/blocks/content.tsx
@@ -4,7 +4,7 @@ import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import type { TinaTemplate } from "tinacms";
 import { PageBlocksContent } from "../../tina/__generated__/types";
-import { tinaField } from "tinacms/dist/react";
+import { vercelEditInfo } from "@tinacms/vercel-previews";
 
 export const Content = ({ data }: { data: PageBlocksContent }) => {
   return (
@@ -13,7 +13,7 @@ export const Content = ({ data }: { data: PageBlocksContent }) => {
         className={`prose prose-lg ${
           data.color === "primary" ? `prose-primary` : `dark:prose-dark`
         }`}
-        data-tina-field={tinaField(data, "body")}
+        data-vercel-edit-info={vercelEditInfo(data, "body")}
         size="large"
         width="medium"
       >
diff --git a/components/blocks/features.tsx b/components/blocks/features.tsx
index 70c59fa1..fe160c16 100644
--- a/components/blocks/features.tsx
+++ b/components/blocks/features.tsx
@@ -6,7 +6,7 @@ import {
   PageBlocksFeatures,
   PageBlocksFeaturesItems,
 } from "../../tina/__generated__/types";
-import { tinaField } from "tinacms/dist/react";
+import { vercelEditInfo } from "@tinacms/vercel-previews";
 
 export const Feature = ({
   featuresColor,
@@ -17,20 +17,20 @@ export const Feature = ({
 }) => {
   return (
     <div
-      data-tina-field={tinaField(data)}
+      data-vercel-edit-info={vercelEditInfo(data)}
       className="flex-1 flex flex-col gap-6 text-center items-center lg:items-start lg:text-left max-w-xl mx-auto"
       style={{ flexBasis: "16rem" }}
     >
       {data.icon && (
         <Icon
-          tinaField={tinaField(data, "icon")}
+          tinaField={vercelEditInfo(data, "icon")}
           parentColor={featuresColor}
           data={{ size: "large", ...data.icon }}
         />
       )}
       {data.title && (
         <h3
-          data-tina-field={tinaField(data, "title")}
+          data-vercel-edit-info={vercelEditInfo(data, "title")}
           className="text-2xl font-semibold title-font"
         >
           {data.title}
@@ -38,7 +38,7 @@ export const Feature = ({
       )}
       {data.text && (
         <p
-          data-tina-field={tinaField(data, "text")}
+          data-vercel-edit-info={vercelEditInfo(data, "text")}
           className="text-base opacity-80 leading-relaxed"
         >
           {data.text}
diff --git a/components/blocks/hero.tsx b/components/blocks/hero.tsx
index 055f4c08..8d11af17 100644
--- a/components/blocks/hero.tsx
+++ b/components/blocks/hero.tsx
@@ -6,7 +6,7 @@ import { useTheme } from "../layout";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import type { TinaTemplate } from "tinacms";
 import { PageBlocksHero } from "../../tina/__generated__/types";
-import { tinaField } from "tinacms/dist/react";
+import { vercelEditInfo } from "@tinacms/vercel-previews";
 
 export const Hero = ({ data }: { data: PageBlocksHero }) => {
   const theme = useTheme();
@@ -30,7 +30,7 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
         <div className="row-start-2 md:row-start-1 md:col-span-3 text-center md:text-left">
           {data.tagline && (
             <h2
-              data-tina-field={tinaField(data, "tagline")}
+              data-vercel-edit-info={vercelEditInfo(data, "tagline")}
               className="relative inline-block px-3 py-1 mb-8 text-md font-bold tracking-wide title-font z-20"
             >
               {data.tagline}
@@ -39,7 +39,7 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
           )}
           {data.headline && (
             <h3
-              data-tina-field={tinaField(data, "headline")}
+              data-vercel-edit-info={vercelEditInfo(data, "headline")}
               className={`w-full relative	mb-10 text-5xl font-extrabold tracking-normal leading-tight title-font`}
             >
               <span
@@ -55,7 +55,7 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
           )}
           {data.text && (
             <div
-              data-tina-field={tinaField(data, "text")}
+              data-vercel-edit-info={vercelEditInfo(data, "text")}
               className={`prose prose-lg mx-auto md:mx-0 mb-10 ${
                 data.color === "primary" ? `prose-primary` : `dark:prose-dark`
               }`}
@@ -73,7 +73,7 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
         </div>
         {data.image && (
           <div
-            data-tina-field={tinaField(data.image, "src")}
+            data-vercel-edit-info={vercelEditInfo(data.image, "src")}
             className="relative row-start-1 md:col-span-2 flex justify-center"
           >
             <img
diff --git a/components/blocks/testimonial.tsx b/components/blocks/testimonial.tsx
index 4a572c8b..c3cfd209 100644
--- a/components/blocks/testimonial.tsx
+++ b/components/blocks/testimonial.tsx
@@ -3,7 +3,7 @@ import { Container } from "../util/container";
 import { Section } from "../util/section";
 import type { TinaTemplate } from "tinacms";
 import { PageBlocksTestimonial } from "../../tina/__generated__/types";
-import { tinaField } from "tinacms/dist/react";
+import { vercelEditInfo } from "@tinacms/vercel-previews";
 
 export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
   return (
@@ -23,7 +23,7 @@ export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
               &ldquo;
             </span>
             <p
-              data-tina-field={tinaField(data, `quote`)}
+              data-vercel-edit-info={vercelEditInfo(data, `quote`)}
               className="relative opacity-95"
             >
               {data.quote}
@@ -45,7 +45,7 @@ export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
           </div>
           <footer className="text-center">
             <p
-              data-tina-field={tinaField(data, `author`)}
+              data-vercel-edit-info={vercelEditInfo(data, `author`)}
               className={`tracking-wide title-font font-bold text-lg ${
                 data.color === "primary"
                   ? `text-blue-200`
diff --git a/components/layout/header.tsx b/components/layout/header.tsx
index 4ab6249b..a865cfbf 100644
--- a/components/layout/header.tsx
+++ b/components/layout/header.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { Container } from "../util/container";
 import { useTheme } from ".";
 import { Icon } from "../util/icon";
-import { tinaField } from "tinacms/dist/react";
+import { vercelEditInfo } from "@tinacms/vercel-previews";
 import { GlobalHeader } from "../../tina/__generated__/types";
 
 export const Header = ({ data }: { data: GlobalHeader }) => {
@@ -73,7 +73,7 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
               className="flex gap-1 items-center whitespace-nowrap tracking-[.002em]"
             >
               <Icon
-                tinaField={tinaField(data, "icon")}
+                tinaField={vercelEditInfo(data, "icon")}
                 parentColor={data.color}
                 data={{
                   name: data.icon.name,
@@ -81,7 +81,9 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                   style: data.icon.style,
                 }}
               />
-              <span data-tina-field={tinaField(data, "name")}>{data.name}</span>
+              <span data-vercel-edit-info={vercelEditInfo(data, "name")}>
+                {data.name}
+              </span>
             </Link>
           </h4>
           <ul className="flex gap-6 sm:gap-8 lg:gap-10 tracking-[.002em] -mx-4">
@@ -99,7 +101,7 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                     }`}
                   >
                     <Link
-                      data-tina-field={tinaField(item, "label")}
+                      data-vercel-edit-info={vercelEditInfo(item, "label")}
                       href={`/${item.href}`}
                       className={`relative select-none	text-base inline-block tracking-wide transition duration-150 ease-out hover:opacity-100 py-8 px-4 ${
                         activeItem ? `` : `opacity-70`
diff --git a/components/posts/post.tsx b/components/posts/post.tsx
index 4b9c2c03..7d512676 100644
--- a/components/posts/post.tsx
+++ b/components/posts/post.tsx
@@ -20,7 +20,7 @@ import { TinaMarkdown } from "tinacms/dist/rich-text";
 import { Prism } from "tinacms/dist/rich-text/prism";
 import type { TinaMarkdownContent, Components } from "tinacms/dist/rich-text";
 import { PostType } from "../../pages/posts/[filename]";
-import { tinaField } from "tinacms/dist/react";
+import { vercelEditInfo } from "@tinacms/vercel-previews";
 
 const components: Components<{
   BlockQuote: {
@@ -138,7 +138,7 @@ export const Post = (props: PostType) => {
     <Section className="flex-1">
       <Container width="small" className={`flex-1 pb-2`} size="large">
         <h2
-          data-tina-field={tinaField(props, "title")}
+          data-vercel-edit-info={vercelEditInfo(props, "title")}
           className={`w-full relative	mb-8 text-6xl font-extrabold tracking-normal text-center title-font`}
         >
           <span
@@ -150,21 +150,21 @@ export const Post = (props: PostType) => {
           </span>
         </h2>
         <div
-          data-tina-field={tinaField(props, "author")}
+          data-vercel-edit-info={vercelEditInfo(props, "author")}
           className="flex items-center justify-center mb-16"
         >
           {props.author && (
             <>
               <div className="flex-shrink-0 mr-4">
                 <img
-                  data-tina-field={tinaField(props.author, "avatar")}
+                  data-vercel-edit-info={vercelEditInfo(props.author, "avatar")}
                   className="h-14 w-14 object-cover rounded-full shadow-sm"
                   src={props.author.avatar}
                   alt={props.author.name}
                 />
               </div>
               <p
-                data-tina-field={tinaField(props.author, "name")}
+                data-vercel-edit-info={vercelEditInfo(props.author, "name")}
                 className="text-base font-medium text-gray-600 group-hover:text-gray-800 dark:text-gray-200 dark:group-hover:text-white"
               >
                 {props.author.name}
@@ -175,7 +175,7 @@ export const Post = (props: PostType) => {
             </>
           )}
           <p
-            data-tina-field={tinaField(props, "date")}
+            data-vercel-edit-info={vercelEditInfo(props, "date")}
             className="text-base text-gray-400 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-150"
           >
             {formattedDate}
@@ -185,7 +185,7 @@ export const Post = (props: PostType) => {
       {props.heroImg && (
         <div className="px-4 w-full">
           <div
-            data-tina-field={tinaField(props, "heroImg")}
+            data-vercel-edit-info={vercelEditInfo(props, "heroImg")}
             className="relative max-w-4xl lg:max-w-5xl mx-auto"
           >
             <img
@@ -203,7 +203,7 @@ export const Post = (props: PostType) => {
       )}
       <Container className={`flex-1 pt-4`} width="small" size="large">
         <div
-          data-tina-field={tinaField(props, "_body")}
+          data-vercel-edit-info={vercelEditInfo(props, "_body")}
           className="prose dark:prose-dark w-full max-w-none"
         >
           <TinaMarkdown components={components} content={props._body} />
diff --git a/components/util/actions.tsx b/components/util/actions.tsx
index 39be6d02..50269e1c 100644
--- a/components/util/actions.tsx
+++ b/components/util/actions.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { BiRightArrowAlt } from "react-icons/bi";
 import { useTheme } from "../layout";
 import { PageBlocksHeroActions } from "../../tina/__generated__/types";
-import { tinaField } from "tinacms/dist/react";
+import { vercelEditInfo } from "@tinacms/vercel-previews";
 
 export const Actions = ({
   parentColor = "default",
@@ -69,7 +69,7 @@ export const Actions = ({
             element = (
               <Link key={index} href={action.link ? action.link : "/"}>
                 <button
-                  data-tina-field={tinaField(action)}
+                  data-vercel-edit-info={vercelEditInfo(action)}
                   className={`z-10 relative flex items-center px-7 py-3 font-semibold text-lg transition duration-150 ease-out  rounded-lg transform focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2 whitespace-nowrap ${
                     parentColor === "primary"
                       ? invertedButtonColorClasses[theme.color]
@@ -91,7 +91,7 @@ export const Actions = ({
               <Link
                 key={index}
                 href={action.link ? action.link : "/"}
-                data-tina-field={tinaField(action)}
+                data-vercel-edit-info={vercelEditInfo(action)}
                 className={`group inline-flex items-center font-semibold text-lg transition duration-150 ease-out ${
                   parentColor === "primary"
                     ? `text-white  hover:text-gray-50`

From 6f9fe56c452ca99410672048c9ab48ba38193351 Mon Sep 17 00:00:00 2001
From: Jeff See <jeffsee.55@gmail.com>
Date: Thu, 18 May 2023 13:21:47 -0700
Subject: [PATCH 3/4] Fix icon data attribute name

---
 components/util/icon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/util/icon.tsx b/components/util/icon.tsx
index b108c7b1..d3de7565 100644
--- a/components/util/icon.tsx
+++ b/components/util/icon.tsx
@@ -106,7 +106,7 @@ export const Icon = ({
   if (style == "circle") {
     return (
       <div
-        data-tina-field={tinaField}
+        data-vercel-edit-info={tinaField}
         className={`relative z-10 inline-flex items-center justify-center flex-shrink-0 ${iconSizeClasses} rounded-full ${iconColorClass[iconColor].circle} ${className}`}
       >
         <IconSVG className="w-2/3 h-2/3" />
@@ -122,7 +122,7 @@ export const Icon = ({
       ].regular;
     return (
       <IconSVG
-        data-tina-field={tinaField}
+        data-vercel-edit-info={tinaField}
         className={`${iconSizeClasses} ${iconColorClasses} ${className}`}
       />
     );

From 3ce3ebadc49e43974452d3c79be66cddc810b022 Mon Sep 17 00:00:00 2001
From: Jeff See <jeffsee.55@gmail.com>
Date: Thu, 18 May 2023 13:25:18 -0700
Subject: [PATCH 4/4] Add hook to post as well

---
 pages/posts/[filename].tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/pages/posts/[filename].tsx b/pages/posts/[filename].tsx
index 4a1144c9..cee136aa 100644
--- a/pages/posts/[filename].tsx
+++ b/pages/posts/[filename].tsx
@@ -3,16 +3,23 @@ import { client } from "../../tina/__generated__/client";
 import { useTina } from "tinacms/dist/react";
 import { Layout } from "../../components/layout";
 import { InferGetStaticPropsType } from "next";
+import { useVisualEditing } from "@tinacms/vercel-previews";
 
 // Use the props returned by get static props
 export default function BlogPostPage(
   props: InferGetStaticPropsType<typeof getStaticProps>
 ) {
-  const { data } = useTina({
+  const { data: tinaData } = useTina(props);
+  const data = useVisualEditing({
+    data: tinaData,
+    // metadata is derived from the query and variables
     query: props.query,
     variables: props.variables,
-    data: props.data,
+    redirect: "/admin",
+    enabled: true,
+    stringEncoding: false,
   });
+
   if (data && data.post) {
     return (
       <Layout rawData={data} data={data.global}>