focusreactive · chenaski · Oct 26, 2023 · Oct 26, 2023 · Nov 1, 2023 · Nov 3, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 

diff --git a/app/(frontend)/layout.tsx b/app/(frontend)/layout.tsx
@@ -1,13 +1,19 @@
 import './globals.css';
 
 import { DM_Sans } from 'next/font/google';
+import { VisualEditingOverlay } from '@focusreactive/sanity-overlay';
+import { draftMode } from 'next/headers';
 
 const dmSans = DM_Sans({ subsets: ['latin'] });
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  // const isDraftMode = draftMode().isEnabled;
+  const isDraftMode = true;
+
   return (
     <html lang="en">
       <body className={dmSans.className}>{children}</body>
+      <VisualEditingOverlay isDraftMode={isDraftMode} />
     </html>
   );
 }
diff --git a/components/Page.tsx b/components/Page.tsx
@@ -1,23 +1,31 @@
 import { Footer, Header } from '@focusreactive/cms-kit';
 import { ContentBlocks } from '@/components/ContentBlocks';
 import { SanityDocument } from 'sanity';
+import { enableVisualEditing } from '@focusreactive/sanity-overlay';
 
 export const Page = ({ page }: { page: SanityDocument }) => {
+  const start = performance.now();
+  const editablePage = enableVisualEditing({
+    data: page,
+    excludedPaths: [/.*footer\.socials\[\d+\]\.icon.*/, /.*\.(bgColor|sectionConfig)/],
+  });
+  console.log('enableVisualEditing', performance.now() - start);
+
   return (
     <>
       <Header
-        {...(page?.header as any)}
+        {...(editablePage?.header as any)}
         isFixed={false}
         buttonsColor=""
         linksColor="white"
         heroBackgroundColor="default"
       />
 
       <main>
-        <ContentBlocks blocks={page?.content as any} />;
+        <ContentBlocks blocks={editablePage?.content as any} />;
       </main>
 
-      <Footer {...(page?.footer as any)} />
+      <Footer {...(editablePage?.footer as any)} />
     </>
   );
 };
diff --git a/focus-reactive/cms-kit/src/components/common/socials/Socials.tsx b/focus-reactive/cms-kit/src/components/common/socials/Socials.tsx
@@ -135,6 +135,8 @@ const iconsSet = {
 const Item = ({ icon, link }: { icon: keyof typeof iconsSet; link: string }) => {
   const Icon = iconsSet[icon];
 
+  if (!Icon) return null;
+
   return (
     <Link href={link || 'https://harcodedsocials.com'} target="_blank" aria-label={icon}>
       {/* @ts-ignore */}