sharing

the-kwisatz-haderach · Jan 15, 2024 · 3fa774f · 3fa774f · vercel · Jan 15, 2024
1 parent 26b4dbc
commit 3fa774f
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 25 deletions.
diff --git a/components/Obituary/components/ObituaryLarge.tsx b/components/Obituary/components/ObituaryLarge.tsx
@@ -29,6 +29,7 @@ export const ObituaryLarge: ObituaryRenderer = ({
     initialData: props,
   })
   const {
+    _id,
     firstname,
     name_misc,
     surname,
@@ -51,12 +52,20 @@ export const ObituaryLarge: ObituaryRenderer = ({
   } = data
   const { t } = useTranslation()
 
-  const shareToFacebook = useCallback(() => {
+  const shareToFacebook = useCallback(async () => {
+    const shareUrl = `${window.location.origin}/${type}/${_id}`
     window?.FB?.ui({
       display: 'popup',
       method: 'share',
-      href: window.location.href,
+      href: shareUrl,
     })
+    // if (navigator?.canShare?.()) {
+    //   await navigator.share({
+    //     title: 'Herro',
+    //     text: 'Learn web development on MDN!',
+    //     url: 'https://developer.mozilla.org',
+    //   })
+    // }
   }, [])
 
   return (

diff --git a/lib/domain/formatLongText.ts b/lib/domain/formatLongText.ts
@@ -0,0 +1,11 @@
+import { IObituary } from './types'
+import ReactDOMServer from 'react-dom/server'
+
+import { render } from 'storyblok-rich-text-react-renderer'
+
+const htmlTagsRegexp = /<(?:"[^"]*"['"]*|'[^']*'['"]*|[^'">])+>/g
+
+export const stringifyLongText = (text: IObituary['long_text']): string =>
+  typeof text === 'string'
+    ? text.replace(htmlTagsRegexp, '')
+    : ReactDOMServer.renderToString(render(text)).replace(htmlTagsRegexp, '')
diff --git a/next.config.js b/next.config.js
@@ -21,6 +21,15 @@ module.exports = (phase, { defaultConfig }) => {
             },
           ],
         },
+        // {
+        //   source: '/',
+        //   headers: [
+        //     {
+        //       key: 'Permissions-Policy',
+        //       value: 'web-share=*',
+        //     },
+        //   ],
+        // },
       ]
     },
     async rewrites() {

diff --git a/pages/[category]/[id].tsx b/pages/[category]/[id].tsx
@@ -13,6 +13,7 @@ import { ObituaryLarge } from '../../components/Obituary/components/ObituaryLarg
 import { connectToDb } from '../../db'
 import { createMetaTitle } from '../../lib/domain'
 import { IObituary } from '../../lib/domain/types'
+import { stringifyLongText } from 'lib/domain/formatLongText'
 
 const capitalize = (str = '') => str?.[0]?.toLocaleUpperCase() + str.slice(1)
 
@@ -49,8 +50,11 @@ export default function Obituary({
             content={typeof image === 'string' ? image : image.filename}
           />
         )}
-        {typeof long_text === 'string' && (
-          <meta property="og:description" content={long_text} />
+        {long_text && (
+          <meta
+            property="og:description"
+            content={stringifyLongText(long_text)}
+          />
         )}
         <meta
           property="og:title"

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -6,6 +6,33 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
+          <script
+            id="facebook"
+            async
+            dangerouslySetInnerHTML={{
+              __html: `window.fbAsyncInit = function() {
+              FB.init({
+                appId      : '${process.env.NEXT_PUBLIC_FACEBOOK_APP_ID}',
+                xfbml      : true,
+                version    : 'v18.0'
+              });
+              FB.AppEvents.logPageView();
+            };
+            (function(d, s, id){
+              var js, fjs = d.getElementsByTagName(s)[0];
+              if (d.getElementById(id)) {return;}
+              js = d.createElement(s); js.id = id;
+              js.src = "https://connect.facebook.net/en_US/sdk.js";
+              fjs.parentNode.insertBefore(js, fjs);
+            }(document, 'script', 'facebook-jssdk'));`,
+            }}
+          />
+          <script
+            async
+            defer
+            crossOrigin="anonymous"
+            src="https://connect.facebook.net/en_US/sdk.js"
+          />
           {process.env.NODE_ENV === 'production' && (
             <>
               {/* <!-- Google Tag Manager --> */}
@@ -38,27 +65,6 @@ class MyDocument extends Document {
           )}
           <Main />
           <NextScript />
-          <Script
-            id="facebook"
-            async
-            dangerouslySetInnerHTML={{
-              __html: `window.fbAsyncInit = function() {
-              FB.init({
-                appId      : '${process.env.NEXT_PUBLIC_FACEBOOK_APP_ID}',
-                xfbml      : true,
-                version    : 'v12.0'
-              });
-              FB.AppEvents.logPageView();
-            };
-            (function(d, s, id){
-              var js, fjs = d.getElementsByTagName(s)[0];
-              if (d.getElementById(id)) {return;}
-              js = d.createElement(s); js.id = id;
-              js.src = "https://connect.facebook.net/en_US/sdk.js";
-              fjs.parentNode.insertBefore(js, fjs);
-            }(document, 'script', 'facebook-jssdk'));`,
-            }}
-          />
         </body>
       </Html>
     )

diff --git a/types.d.ts b/types.d.ts
@@ -16,7 +16,9 @@ declare global {
   interface Window {
     storyblok
     IntersectionObserver: typeof IntersectionObserver
+    fbAsyncInit: () => void
     FB: {
+      init: (options: any) => void
       ui: (options: { display: string; method: string; href: string }) => void
     }
   }