Feature/preview edit links

README.md

@@ -249,6 +249,10 @@ if (this.language) {
 
 For the not found resources, prefixed 404 pages are used for both languages. As the content on one page should be in one language, this approach might help you to optimize SEO. If language is not set in the URL the application uses the last used language, which is set in cookies.
 
+## Smart Links
+
+Pages have [Smart Link](https://github.com/kontent-ai/smart-link) data attributes to create edit links when in preview mode. To enable Smart Links, you will need to [configure previews within your Kontent environment](https://kontent.ai/learn/docs/preview/preview-configuration/typescript). The application will render Smart Links when it recognizes it's in preview mode. This is done by providing the environment variable `REACT_APP_PREVIEW_API_KEY` in a `.env` file.
+
 ## Deployment
 
 You can use eg. [surge](http://surge.sh/) to deploy your app live. Check out the step-by-step guide on our [blog](https://kontent.ai/blog/3-steps-to-rapidly-deploy-headless-single-page-app).

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@kontent-ai/delivery-sdk": "^14.0.1",
     "@kontent-ai/react-components": "0.3.0",
+    "@kontent-ai/smart-link": "^3.1.0",
     "@simply007org/react-spinners": "0.0.3",
     "qs": "^6.9.4",
     "react": "^18.2.0",

src/Client.tsx

@@ -48,10 +48,10 @@ const getEnvironmentIdFromCookies = (): string | null => {
   return environmentIdFromCookie;
 };
 
-const currentEnvironmentId =
+export const currentEnvironmentId =
   getEnvironmentIdFromEnvironment() ?? getEnvironmentIdFromCookies() ?? '';
 
-const isPreview = (): boolean => previewApiKey !== '';
+export const isPreview = (): boolean => previewApiKey !== '';
 
 type GlobalHeadersType = {
   header: string;

src/Components/Banner.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { HeroUnit } from '../Models/content-types/hero_unit';
 import RichText from './RichText';
+import { contentTypes } from '../Models';
 
 interface BannerProps {
   heroUnit: HeroUnit;
@@ -14,15 +15,28 @@ const Banner: React.FC<BannerProps> = (props) => {
   return (
     <section
       className="banner-section"
+      data-kontent-item-id={props.heroUnit.system.id}
+      data-kontent-element-codename={contentTypes.hero_unit.codename}
       style={
         imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : undefined
       }
     >
-      <h2 className="banner-heading">
+      <h2
+        className="banner-heading"
+        data-kontent-element-codename={
+          contentTypes.hero_unit.elements.title.codename
+        }
+      >
         {heroUnit.title && heroUnit.title.value}
       </h2>
       {heroUnit.marketingMessage && (
-        <RichText element={heroUnit.marketingMessage} className="banner-text" />
+        <RichText
+          element={heroUnit.marketingMessage}
+          className="banner-text"
+          data-kontent-element-codename={
+            contentTypes.hero_unit.elements.marketing_message.codename
+          }
+        />
       )}
     </section>
   );

src/Components/BrewerStoreContainer.tsx

@@ -13,6 +13,7 @@ import { useIntl } from 'react-intl';
 import { Brewer } from '../Models/content-types/brewer';
 import { contentTypes } from '../Models/project/contentTypes';
 import { useClient } from '../Client';
+import { useKontentSmartLink } from '../Utilities/SmartLink';
 
 interface filterType {
   [index: string]: string[];
@@ -45,6 +46,8 @@ const BrewerStoreContainer: React.FC = () => {
 
   const [Client] = useClient();
 
+  useKontentSmartLink([language, brewers, manufacturers, productStatuses, filter]);
+
   useEffect(() => {
     spinnerService.show('apiSpinner');
 

src/Components/BrewerStoreListing.tsx

@@ -4,6 +4,7 @@ import { resolveContentLink } from '../Utilities/ContentLinks';
 import { formatPrice, renderProductStatus } from '../Utilities/StoreListing';
 import { useIntl } from 'react-intl';
 import { Brewer } from '../Models/content-types/brewer';
+import { contentTypes } from '../Models';
 
 interface BrewerStoreListingProps {
   brewers: Brewer[];
@@ -25,7 +26,11 @@ const BrewerStoreListing: React.FC<BrewerStoreListingProps> = ({ brewers }) => {
 
     const imageLink =
       brewer.elements.image.value[0] !== undefined ? (
-        <img alt={name} src={brewer.elements.image.value[0].url} title={name} />
+        <img
+          alt={name}
+          src={brewer.elements.image.value[0].url}
+          title={name}
+        />
       ) : (
         <div style={{ height: '257.15px' }} className="placeholder-tile-image">
           {formatMessage({ id: 'BrewerStoreListing.noTeaserValue' })}
@@ -40,7 +45,13 @@ const BrewerStoreListing: React.FC<BrewerStoreListingProps> = ({ brewers }) => {
 
     return (
       <div className="col-md-6 col-lg-4" key={brewer.system.codename}>
-        <article className="product-tile">
+        <article
+          className="product-tile"
+          data-kontent-item-id={brewer.system.id}
+          data-kontent-element-codename={
+            contentTypes.brewer.elements.product_name.codename
+          }
+        >
           <Link to={link}>
             <h1 className="product-heading">{name}</h1>
             {status}

src/Components/CoffeeStoreContainer.tsx

@@ -12,6 +12,7 @@ import { useIntl } from 'react-intl';
 import { Coffee } from '../Models/content-types/coffee';
 import { contentTypes } from '../Models/project/contentTypes';
 import { useClient } from '../Client';
+import { useKontentSmartLink } from '../Utilities/SmartLink';
 
 interface filterType {
   [index: string]: string[];
@@ -34,6 +35,8 @@ const CoffeeStoreContainer: React.FC = () => {
 
   const [Client] = useClient();
 
+  useKontentSmartLink([language, coffees, processings, productStatuses, filter]);
+
   useEffect(() => {
     spinnerService.show('apiSpinner');
 

src/Components/CoffeeStoreListing.tsx

@@ -4,6 +4,7 @@ import { resolveContentLink } from '../Utilities/ContentLinks';
 import { formatPrice, renderProductStatus } from '../Utilities/StoreListing';
 import { useIntl } from 'react-intl';
 import { Coffee } from '../Models/content-types/coffee';
+import { contentTypes } from '../Models';
 
 interface CoffeeStoreListingProps {
   coffees: Coffee[];
@@ -47,7 +48,13 @@ const CoffeeStoreListing: React.FC<CoffeeStoreListingProps> = ({ coffees }) => {
 
     return (
       <div className="col-md-6 col-lg-4" key={coffee.system.codename}>
-        <article className="product-tile">
+        <article
+          className="product-tile"
+          data-kontent-item-id={coffee.system.id}
+          data-kontent-element-codename={
+            contentTypes.coffee.elements.product_name.codename
+          }
+        >
           <Link to={link}>
             <h1 className="product-heading">{name}</h1>
             {status}

src/Components/LatestArticles.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Link from '../Components/LowerCaseUrlLink';
 import { FormattedDate, useIntl } from 'react-intl';
 import { Article } from '../Models/content-types/article';
+import { contentTypes } from '../Models';
 
 interface LatestArticlesProps {
   articles: Article[];
@@ -28,6 +29,9 @@ const LatestArticles: React.FC<LatestArticlesProps> = (props) => {
             className="article-tile-image"
             src={article.elements.teaserImage.value[0].url}
             title={'Article ' + title}
+            data-kontent-element-codename={
+              contentTypes.article.elements.teaser_image.codename
+            }
           />
         ) : (
           <div className="article-tile-image placeholder-tile-image">
@@ -43,10 +47,15 @@ const LatestArticles: React.FC<LatestArticlesProps> = (props) => {
       const link = `/${language.toLowerCase()}/articles/${article.system.id}`;
 
       return (
-        <div className="col-md-3" key={index}>
+        <div className="col-md-3" key={index} data-kontent-item-id={article.system.id}>
           <div className="article-tile">
             <Link to={link}>{imageLink}</Link>
-            <div className="article-tile-date">
+            <div
+              className="article-tile-date"
+              data-kontent-element-codename={
+                contentTypes.article.elements.post_date.codename
+              }
+            >
               <FormattedDate
                 value={article.elements.postDate.value!!}
                 day="numeric"
@@ -55,9 +64,23 @@ const LatestArticles: React.FC<LatestArticlesProps> = (props) => {
             </div>
             <div className="article-tile-content">
               <h2 className="h4">
-                <Link to={link}>{title}</Link>
+                <Link
+                  to={link}
+                  data-kontent-element-codename={
+                    contentTypes.article.elements.title.codename
+                  }
+                >
+                  {title}
+                </Link>
               </h2>
-              <p className="article-tile-text">{summary}</p>
+              <p
+                className="article-tile-text"
+                data-kontent-element-codename={
+                  contentTypes.article.elements.summary.codename
+                }
+              >
+                {summary}
+              </p>
             </div>
           </div>
         </div>
@@ -78,6 +101,9 @@ const LatestArticles: React.FC<LatestArticlesProps> = (props) => {
         className="article-tile-image"
         src={articleElements.teaserImage.value[0].url}
         title={'Article ' + title}
+        data-kontent-element-codename={
+          contentTypes.article.elements.teaser_image.codename
+        }
       />
     ) : (
       <div className="article-tile-image placeholder-tile-image">
@@ -94,14 +120,19 @@ const LatestArticles: React.FC<LatestArticlesProps> = (props) => {
   const tabTitle = formatMessage({ id: 'LatestArticles.title' });
 
   return (
-    <div className="row">
+    <div className="row" data-kontent-element-codename={contentTypes.home.elements.articles.codename}>
       <h1 className="title-tab">{tabTitle}</h1>
-      <div className="article-tile article-tile-large">
+      <div className="article-tile article-tile-large" data-kontent-item-id={system.id}>
         <div className="col-md-12 col-lg-6">
           <Link to={link}>{imageLink}</Link>
         </div>
         <div className="col-md-12 col-lg-6">
-          <div className="article-tile-date">
+          <div
+            className="article-tile-date"
+            data-kontent-element-codename={
+              contentTypes.article.elements.post_date.codename
+            }
+          >
             <FormattedDate
               value={articleElements.postDate.value!!}
               day="numeric"
@@ -110,9 +141,23 @@ const LatestArticles: React.FC<LatestArticlesProps> = (props) => {
           </div>
           <div className="article-tile-content">
             <h2>
-              <Link to={link}>{title}</Link>
+              <Link
+                to={link}
+                data-kontent-element-codename={
+                  contentTypes.article.elements.title.codename
+                }
+              >
+                {title}
+              </Link>
             </h2>
-            <p className="article-tile-text lead-paragraph">{summary}</p>
+            <p
+              className="article-tile-text lead-paragraph"
+              data-kontent-element-codename={
+                contentTypes.article.elements.summary.codename
+              }
+            >
+              {summary}
+            </p>
           </div>
         </div>
       </div>

src/Components/OurStory.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FactAboutUs } from '../Models/content-types/fact_about_us';
 import RichText from './RichText';
+import { contentTypes } from '../Models';
 
 interface OurStoryProps {
   fact: FactAboutUs;
@@ -12,14 +13,32 @@ const OurStory: React.FC<OurStoryProps> = (props) => {
   const imageUrl = images && images.length && images[0].url;
 
   return (
-    <div className="row">
-      <h1 className="title-tab">{fact.title && fact.title.value}</h1>
-      <div className="col-sm-12">
+    <div
+      className="row"
+      data-kontent-item-id={props.fact.system.id}
+      data-kontent-element-codename={
+        contentTypes.home.elements.our_story.codename
+      }
+    >
+      <h1
+        className="title-tab"
+        data-kontent-element-codename={
+          contentTypes.fact_about_us.elements.title.codename
+        }
+      >
+        {fact.title && fact.title.value}
+      </h1>
+      <div className="col-sm-12" data-kontent-element-codename={
+            contentTypes.fact_about_us.elements.image.codename
+          }>
         <div
           className="ourstory-section center-text"
           style={
             imageUrl ? { backgroundImage: 'url(' + imageUrl + ')' } : undefined
           }
+          data-kontent-element-codename={
+            contentTypes.fact_about_us.elements.description.codename
+          }
         >
           {fact.description && <RichText element={fact.description} />}
         </div>

src/Components/RichText.tsx

@@ -17,9 +17,11 @@ import {
 interface RichTextProps {
   element: Elements.RichTextElement;
   className?: string;
+  // Pass-through props
+  [x: string]: any;
 }
 
-const RichText: React.FC<RichTextProps> = (props) => {
+const RichText: React.FC<RichTextProps> = ({ element, className, ...passThroughProps }) => {
   const resolvers: ResolversType = {
     resolveLinkedItem: (
       linkedItem: IContentItem | undefined,
@@ -115,8 +117,8 @@ const RichText: React.FC<RichTextProps> = (props) => {
   };
 
   return (
-    <div className={props.className}>
-      <RichTextElement richTextElement={props.element} resolvers={resolvers} />
+    <div className={className} {...passThroughProps}>
+      <RichTextElement richTextElement={element} resolvers={resolvers} />
     </div>
   );
 };