Nextjs // Micro Service Social Previews

.gitignore

@@ -3,6 +3,8 @@
 # dependencies
 */node_modules
 /node_modules
+node_modules
+
 /.pnp
 .pnp.js
 
@@ -31,4 +33,5 @@ yarn-error.log*
 .eslintcache
 .parcel-cache
 
-.next
+.next
+dist

micro-service/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

micro-service/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

micro-service/package.json

@@ -4,57 +4,31 @@
   "version": "0.1.0",
   "license": "MIT",
   "dependencies": {
-    "@algolia/autocomplete-js": "^1.9.2",
-    "@algolia/autocomplete-plugin-query-suggestions": "^1.9.2",
-    "@algolia/autocomplete-plugin-recent-searches": "^1.9.2",
-    "@algolia/autocomplete-preset-algolia": "^1.9.2",
-    "@algolia/autocomplete-theme-classic": "^1.9.2",
     "@apollo/client": "^3.7.4",
     "@apollosproject/web-shared": "link:../packages/web-shared",
-    "@babel/preset-react": "^7.22.5",
     "@craco/craco": "^7.0.0",
     "@segment/analytics-next": "^1.62.0",
     "@sentry/react": "^7.40.0",
     "@styled-system/theme-get": "^5.1.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@phosphor-icons/react": "2.0.15",
-    "algoliasearch": "^4.17.0",
     "amplitude-js": "^8.21.9",
-    "apollo-upload-client": "^17.0.0",
-    "apollo3-cache-persist": "^0.14.1",
     "autoprefixer": "^9.8.6",
-    "base-64": "^1.0.0",
-    "color": "^4.2.3",
-    "date-fns": "^2.29.3",
-    "dompurify": "^2.4.3",
-    "graphql": "^16.6.0",
-    "lodash": "^4.17.21",
-    "moment": "^2.29.1",
-    "postcss": "^7.0.39",
+    "next": "^14.1.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-image-crop": "^10.0.11",
-    "react-instantsearch-dom": "^6.40.0",
-    "react-instantsearch-hooks-web": "^6.44.0",
-    "react-multi-carousel": "^2.8.2",
-    "react-player": "^2.11.2",
-    "react-router-dom": "^6.7.0",
     "react-scripts": "^5.0.1",
     "react-transition-group": "^4.4.5",
-    "styled-components": "^5.3.6",
     "styled-system": "^5.1.5",
     "tldts": "^6.0.20",
-    "uuid": "^9.0.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
     "eject": "react-scripts eject",
-    "dev": "craco start",
-    "build": "craco build",
-    "test": "craco test"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
   },
   "eslintConfig": {
     "extends": [
@@ -75,11 +49,8 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/runtime": "^7.22.5",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "babel-plugin-styled-components": "^2.1.4"
+    "@types/react": "18.2.72",
+    "typescript": "5.4.3"
   },
   "targets": {
     "global": {

micro-service/src/App.js

@@ -1,8 +1,12 @@
+'use client';
 import React from 'react';
 import * as Sentry from '@sentry/react';
 import { FeatureFeed } from '@apollosproject/web-shared/embeds';
-import { AppProvider } from '@apollosproject/web-shared/providers';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import {
+  AppProvider,
+  createBrowserRouter,
+  RouterProvider,
+} from '@apollosproject/web-shared/providers';
 
 import { Button, Box, BodyText } from '@apollosproject/web-shared/ui-kit';
 import { Logo } from '@apollosproject/web-shared/components';
@@ -11,6 +15,7 @@ import Styled from './App.styles';
 
 import ErrorPage from './error-page';
 import { parseSlugToIdAndType } from '@apollosproject/web-shared/utils';
+import { getChurchSlug } from './utils';
 
 Sentry.init({
   dsn: process.env.REACT_APP_SENTRY_DSN,
@@ -21,54 +26,55 @@ Sentry.init({
 
 function ChurchLogo(props) {
   const { currentChurch } = useCurrentChurch();
-  const favicon = document.getElementById('favicon');
-  if (currentChurch?.logo) {
-    favicon.href = currentChurch.logo;
+
+  //Can't set favicon in SSR
+  if (typeof document !== 'undefined') {
+    const favicon = document.querySelector('link[rel="icon"]');
+    if (currentChurch?.logo) {
+      favicon.href = currentChurch.logo;
+    }
   }
+
   return <Logo source={currentChurch?.logo} {...props} />;
 }
 
-function App(props) {
-  let subdomain =
-    process.env.NODE_ENV === 'production'
-      ? window.location.hostname.split('.').slice(0, -2).join('.')
-      : window.location.hostname.split('.').slice(0, -1).join('.');
-
-  if (process.env.NODE_ENV !== 'production' && !subdomain) {
-    subdomain = 'apollos-demo';
-  }
-  const churchSlug = subdomain.replace(/-/g, '_');
-  const searchParams = new URLSearchParams(window.location.search);
-  const _root = searchParams.get('root');
+function App({ searchParams, url }) {
+  const churchSlug = getChurchSlug(url);
+  const _root = searchParams?.root;
 
   const { type, randomId } = parseSlugToIdAndType(_root) ?? {};
 
-  const router = createBrowserRouter([
+  const ssr = typeof document === 'undefined';
+
+  const mainRoute = (
+    <Styled.FeedWrapper>
+      <FeatureFeed featureFeed={`${type}:${randomId}`} church={churchSlug} />
+    </Styled.FeedWrapper>
+  );
+
+  const routerConfig = [
     {
       path: '/',
-      element: (
-        <Styled.FeedWrapper>
-          <FeatureFeed featureFeed={`${type}:${randomId}`} church={churchSlug} />
-        </Styled.FeedWrapper>
-      ),
+      element: mainRoute,
       errorElement: <ErrorPage />,
     },
-  ]);
+  ];
+
+  const router = ssr ? null : createBrowserRouter(routerConfig);
 
   // Widgets require a church slug to get the correct data
   if (churchSlug) {
     return (
       <AppProvider church={churchSlug} modal="true">
         <ChurchLogo display="flex" alignItems="center" justifyContent="center" marginTop="40px" />
-        <RouterProvider router={router} />
+        {/** When using SSR, avoid the router. it crashes */}
+        {ssr ? mainRoute : <RouterProvider router={router} />}
       </AppProvider>
     );
   }
 
   // eslint-disable-next-line no-console
-  console.log(
-    `⚠️  Feature Feed could not render feed of id "FeatureFeed:5aae43e6-3526-4cd2-8dfe-771d2ce8a333"`
-  );
+  console.log(`⚠️  Feature Feed could not render feed of id ${searchParams?.root}`);
 
   return (
     <AppProvider>

micro-service/src/App.styles.js

@@ -1,7 +1,5 @@
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
-import { H1, TypeStyles } from '@apollosproject/web-shared/ui-kit';
+import { H1, TypeStyles, withTheme, styled } from '@apollosproject/web-shared/ui-kit';
 
 import { system } from '@apollosproject/web-shared/ui-kit/_lib/system';
 

micro-service/src/app/[[...slug]]/client.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+
+const App = dynamic(() => import('../../App'), { ssr: true });
+
+export function ClientOnly(props) {
+  return <App {...props} />;
+}

micro-service/src/app/[[...slug]]/page.js

@@ -0,0 +1,66 @@
+import '../../index.css';
+import { ClientOnly } from './client';
+import { headers } from 'next/headers';
+import { getChurchSlug } from '../../utils/index';
+import parseSlugToIdAndType from '@apollosproject/web-shared/utils/parseSlugToIdAndType';
+import Head from 'next/head';
+
+export const dynamic = 'force-dynamic';
+
+export async function generateMetadata({ params, searchParams }, parent) {
+  const id = searchParams?.id;
+
+  if (!id) return parent;
+
+  const route = headers().get('referer');
+
+  const churchSlug = getChurchSlug(route);
+
+  const { type, randomId } = parseSlugToIdAndType(id) ?? [];
+
+  // fetch data
+  const response = await fetch('https://cdn.apollos.app/', {
+    headers: {
+      'content-type': 'application/json',
+      'x-church': churchSlug,
+    },
+    body: JSON.stringify({
+      query:
+        'query getItemMetadata($itemId:ID!){\n  node(id:$itemId){\n    ... on ContentItem  {\n      coverImage {\n        sources {uri(refresh:true) }\n      }\n      title\n      summary\n    }\n  }\n}',
+      variables: { itemId: `${type}:${randomId}` },
+      operationName: 'getItemMetadata',
+    }),
+    method: 'POST',
+  }).then((res) => res.json());
+
+  const title = response?.data?.node?.title;
+  const description = response?.data?.node?.summary;
+  const image = response?.data?.node?.coverImage?.sources[0]?.uri;
+
+  return {
+    title: title,
+    openGraph: {
+      title: title,
+      description: description,
+      images: [image],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: title,
+      description,
+      images: [image], // Must be an absolute URL
+    },
+  };
+}
+
+export default function Page(props) {
+  const headersList = headers();
+  return (
+    <>
+      <Head>
+        <link rel="icon" type="image/x-icon" href="../../file.svg" />
+      </Head>
+      <ClientOnly {...props} url={headersList.get('referer')} />
+    </>
+  );
+}

micro-service/src/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Apollos Embeds',
+  description: 'Apollos Web Embeds',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head></head>
+
+      <body>
+        <div id="root">{children}</div>
+      </body>
+    </html>
+  );
+}