Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add vercel edit info data attribute #467

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Add vercel edit info data attribute #467

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b4435b1
Add vercel edit info data attribute
jeffsee55 May 18, 2023
eb0348a
Use vercelEditInfo helper
jeffsee55 May 18, 2023
6f9fe56
Fix icon data attribute name
jeffsee55 May 18, 2023
3ce3eba
Add hook to post as well
jeffsee55 May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/blocks-renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@ 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 (
<>
{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>
);
Expand Down
4 changes: 2 additions & 2 deletions components/blocks/content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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"
>
Expand Down
10 changes: 5 additions & 5 deletions components/blocks/features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -17,28 +17,28 @@ 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}
</h3>
)}
{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}
Expand Down
10 changes: 5 additions & 5 deletions components/blocks/hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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}
Expand All @@ -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
Expand All @@ -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`
}`}
Expand All @@ -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
Expand Down
6 changes: 3 additions & 3 deletions components/blocks/testimonial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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}
Expand All @@ -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`
Expand Down
10 changes: 6 additions & 4 deletions components/layout/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -73,15 +73,17 @@ 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,
color: data.icon.color,
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">
Expand All @@ -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`
Expand Down
16 changes: 8 additions & 8 deletions components/posts/post.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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
Expand All @@ -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} />
Expand Down
6 changes: 3 additions & 3 deletions components/util/actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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]
Expand All @@ -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`
Expand Down
4 changes: 2 additions & 2 deletions components/util/icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -122,7 +122,7 @@ export const Icon = ({
].regular;
return (
<IconSVG
data-tina-field={tinaField}
data-vercel-edit-info={tinaField}
className={`${iconSizeClasses} ${iconColorClasses} ${className}`}
/>
);
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
25 changes: 24 additions & 1 deletion pages/[filename].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
// }
Comment on lines +23 to +32
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Intentionally leaving string encoding off for this, it breaks a lot of stuff in the demo site. Still not sure on a better strategy for how this would work... turning it on and just showing one field with zero-width encoding via the skipPaths option helps to show that it works without breaking everything else.

// }
});

return (
<Layout rawData={data} data={data.global as any}>
Expand Down
11 changes: 9 additions & 2 deletions pages/posts/[filename].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
13 changes: 13 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
Expand Down Expand Up @@ -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/[email protected]":
version "3.1.0"
resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-3.1.0.tgz#d1091f535eab8b83d6e74034d01e27d73c773240"
Expand Down