shorted backdrop timeout, testing og:tag linkedin metadata

jonolane · Jan 11, 2024 · 13bfa8f · 13bfa8f
1 parent 612cc91
commit 13bfa8f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -7,7 +7,7 @@ export const wrapRootElement = ({ element }) => {
 };
 
 
-// accounting for black body. removed z-index: -1;
+// accounting for black body. removed z-index: -1. 2000 the right amount of time for production build?;
 export const onInitialClientRender = () => {
   const applyDelayedStyles = () => {
     const styleElement = document.createElement('style');
@@ -23,6 +23,6 @@ export const onInitialClientRender = () => {
     document.head.appendChild(styleElement);
   };
 
-  setTimeout(applyDelayedStyles, 2000); 
+  setTimeout(applyDelayedStyles, 100); 
   console.log("onInitialClientRender complete");
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -131,8 +131,12 @@ const Head: React.FC<HeadProps> = () => {
       <link rel="preconnect" href="https://fonts.gstatic.com" />
       <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet" />
 
-      {/* ::before directive might be creating slow bg image load. opacity-60 or 70 was here */}
-      {/* before:md:fixed before:absolute works on safari, before:fixed works on chrome | need to just somehow lose bg-background on sm: for chrome!*/}
+      {/* linkedin og: tags for preview */}
+      <meta property="og:title" content="Jono Lane" />
+      <meta property="og:description" content="Personal portfolio showcasing my projects." />
+      <meta property="og:image" content="https://jonolane.io/JonoPortfolioStill.png" />
+      <meta property="og:url" content="https://jonolane.io" />
+
       {/* fall back would be to lose the safari directives */}
 
       {/* for .svg background
@@ -141,6 +145,9 @@ const Head: React.FC<HeadProps> = () => {
           before:bg-center
           before:bg-no-repeat 
       */}
+
+      {/* safari:before:absolute
+          safari:before:md:fixed  not necessary? */}
       <body
         className={`
           ${isDarkMode
@@ -155,7 +162,7 @@ const Head: React.FC<HeadProps> = () => {
                before:z-[-1]`
           }
       `}
-      />    
+      />
     </>
   )
 }

diff --git a/static/JonoPortfolioStill.png b/static/JonoPortfolioStill.png