feat: Pretty Preview OG Tag Data with Social Cards

__fixtures__/test-project/web/src/components/BlogPostCell/BlogPostCell.tsx

@@ -43,22 +43,27 @@ export const Success = ({
         image:
           'https://tailwindui.com/img/ecommerce-images/order-history-page-03-product-03.jpg',
         title: `${blogPost.title} | RedwoodJS Blog`,
-        description: blogPost.body,
+        description: blogPost.body.substring(0, 10),
+        site_name: 'redwoodjs.com',
+        url: `https://redwoodjs.com/blog-posts/${blogPost.id}`,
       }}
       article={{
         author: blogPost.author.fullName,
+        published_date: blogPost.createdAt,
         published_time: blogPost.createdAt,
       }}
       profile={{
         username: blogPost.author.fullName,
       }}
       twitter={{
         card: 'summary_large_image',
-        site: '@redwoodjs',
+        site: 'redwoodjs.com',
+        url: `https://redwoodjs.com/blog-posts/${blogPost.id}`,
         creator: `@${blogPost.author.fullName}`,
         title: `${blogPost.title} | RedwoodJS Blog`,
+        description: blogPost.body.substring(0, 10),
         image:
-          'https://tailwindui.com/img/ecommerce-images/order-history-page-03-product-04.jpg',
+          'https://tailwindui.com/img/ecommerce-images/order-history-page-03-product-03.jpg',
         'image:alt': 'this is a description of image',
       }}
     />

api/package.json

@@ -28,7 +28,8 @@
     "open-graph-scraper": "6.2.2",
     "prisma-json-schema-generator": "4.0.0",
     "smtp-server": "3.13.0",
-    "uuid": "9.0.1"
+    "uuid": "9.0.1",
+    "zod": "3.22.4"
   },
   "devDependencies": {
     "@types/better-sqlite3": "7.6.4",

api/src/graphql/config.sdl.ts

@@ -15,11 +15,19 @@ export const schema = gql`
     jwtSecret: String
   }
 
+  type WebConfig {
+    id: String!
+    host: String
+    port: Int
+    apiUrl: String
+  }
+
   type StudioConfig {
     id: String!
     basePort: Int
     graphiql: GraphiQLConfig
   }
+
   type EnabledStatus {
     status: Boolean
     message: String
@@ -33,6 +41,7 @@ export const schema = gql`
   type UserProjectConfig {
     id: String!
     ssr: StreamingSsrConfig
+    web: WebConfig
   }
 
   type Query {

api/src/graphql/ogTagPreview.sdl.ts

@@ -1,12 +1,39 @@
 export const schema = gql`
-  type OGTagPreview {
+  enum OGPreviewSeverity {
+    WARNING
+    ERROR
+    OK
+  }
+
+  enum OGPreviewProvider {
+    GENERIC
+    FACEBOOK
+    TWITTER
+    LINKEDIN
+    DISCORD
+    SLACK
+  }
+
+  type OGTagPreviewProviderAudit {
+    provider: OGPreviewProvider!
+    audit: OGTagPreviewAudit!
+  }
+
+  type OGTagPreviewAudit {
+    messages: [String]!
+    severity: OGPreviewSeverity!
+  }
+
+  type OGTagPreviewResponse {
     id: ID!
     userAgent: String!
     error: Boolean!
     result: JSON
+    audits: [OGTagPreviewProviderAudit!]
   }
 
   type Query {
-    ogTagPreview(url: String!, customUserAgent: String): OGTagPreview! @skipAuth
+    ogTagPreview(url: String!, customUserAgent: String): OGTagPreviewResponse!
+      @skipAuth
   }
 `

api/src/lib/og/auditors/discord.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod'
+
+import { GenericAuditor } from './generic'
+
+export const DiscordAuditor = GenericAuditor.extend({
+  ogDescription: z.string(),
+})

api/src/lib/og/auditors/facebook.ts

@@ -0,0 +1,4 @@
+import { GenericAuditor } from './generic'
+
+// https://developers.facebook.com/docs/sharing/webmasters/crawler
+export const FacebookAuditor = GenericAuditor.extend({})

api/src/lib/og/auditors/generic.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod'
+/**
+ * Basic Metdaata
+ * @see: https://ogp.me/#metadata
+ * The four required properties for every page are:
+ *
+ * og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
+ * og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
+ * og:image - An image URL which should represent your object within the graph.
+ * og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/".
+ */
+export const BasicMetadataAuditor = z.object({
+  ogTitle: z.string(),
+  ogType: z.string(),
+  ogUrl: z.string(),
+  ogDescription: z.string().optional(),
+  ogSiteName: z.string().optional(),
+})
+
+export const ArticleAuditor = BasicMetadataAuditor.extend({
+  articleAuthor: z.string().optional(),
+  articlePublisher: z.string().optional(),
+  articlePublishedDate: z.string().optional(),
+  articlePublishedTime: z.string().optional(),
+})
+
+export const GenericAuditor = ArticleAuditor.extend({})

api/src/lib/og/auditors/linkedin.ts

@@ -0,0 +1,3 @@
+import { GenericAuditor } from './generic'
+
+export const LinkedInAuditor = GenericAuditor.extend({})

api/src/lib/og/auditors/slack.ts

@@ -0,0 +1,3 @@
+import { GenericAuditor } from './generic'
+
+export const SlackAuditor = GenericAuditor.extend({})

api/src/lib/og/auditors/twitter.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod'
+
+import { GenericAuditor } from './generic'
+
+const TwitterImageSchema = z.object({
+  url: z.string(),
+  alt: z.string().optional(),
+})
+
+// https://dev.twitter.com/cards/getting-started
+export const TwitterAuditor = GenericAuditor.extend({
+  twitterTitle: z.string(),
+  twitterCard: z.string(),
+  twitterImage: z.array(TwitterImageSchema),
+  twitterSite: z.string().optional(),
+  twitterUrl: z.string().optional(),
+  twitterDescription: z.string().optional(),
+})

api/src/lib/og/og.ts

@@ -0,0 +1,95 @@
+import type {
+  OGTagPreviewResponse,
+  OGTagPreviewProviderAudit,
+  OGPreviewProvider,
+  OGTagPreviewAudit,
+} from '../../../types/graphql'
+
+import { DiscordAuditor } from './auditors/discord'
+import { FacebookAuditor } from './auditors/facebook'
+import { GenericAuditor } from './auditors/generic'
+import { LinkedInAuditor } from './auditors/linkedin'
+import { SlackAuditor } from './auditors/slack'
+import { TwitterAuditor } from './auditors/twitter'
+
+const PROVIDERS = [
+  'GENERIC',
+  'DISCORD',
+  'FACEBOOK',
+  'LINKEDIN',
+  'SLACK',
+  'TWITTER',
+] as OGPreviewProvider[]
+
+const formatMessages = (validationResult): OGTagPreviewAudit['messages'] => {
+  const messages = []
+  const formatted = validationResult['error'].format()
+
+  Object.entries(formatted).forEach(([key, value]) => {
+    if (key !== '_errors') {
+      const errors = value['_errors'] || []
+      messages.push(`${key}: ${errors.join(', ')}`)
+    }
+  })
+
+  return messages
+}
+
+const getProviderAuditor = (provider: OGPreviewProvider) => {
+  switch (provider) {
+    case 'DISCORD':
+      return DiscordAuditor
+      break
+    case 'FACEBOOK':
+      return FacebookAuditor
+      break
+    case 'LINKEDIN':
+      return LinkedInAuditor
+      break
+    case 'SLACK':
+      return SlackAuditor
+      break
+      break
+    case 'TWITTER':
+      return TwitterAuditor
+      break
+    default:
+      return GenericAuditor
+  }
+}
+
+const auditForProvider = (
+  result,
+  provider: OGPreviewProvider
+): OGTagPreviewProviderAudit => {
+  const auditResult = getProviderAuditor(provider).safeParse(result)
+
+  if (!auditResult.success) {
+    return {
+      provider,
+      audit: {
+        severity: 'WARNING',
+        messages: formatMessages(auditResult),
+      },
+    }
+  }
+
+  return {
+    provider,
+    audit: { severity: 'OK', messages: ['All required tags provided.'] },
+  }
+}
+
+export const auditor = (
+  result: OGTagPreviewResponse['result'],
+  error: boolean
+): OGTagPreviewProviderAudit[] => {
+  if (error) {
+    return PROVIDERS.map((provider) => ({
+      provider,
+      audit: { severity: 'ERROR', messages: ['Unable to preview'] },
+    }))
+  }
+
+  return PROVIDERS.map((provider) => auditForProvider(result, provider))
+}

api/src/services/config/config.ts

@@ -33,10 +33,18 @@ export const userProjectConfig = async (): Promise<
   const status = config.experimental?.streamingSsr?.enabled
   const message = status ? 'SSR is enabled' : 'SSR is not enabled'
 
+  const { host, port, apiUrl } = config.web
+
   // TODO: initially SSR will be behind a feature flag that’s on by default in
   // our new (yet to be created) Bighorn template
   return {
     id: 'user-project-config-id',
+    web: {
+      id: 'user-project-config-web-id',
+      host: host ?? 'localhost',
+      port,
+      apiUrl,
+    },
     ssr: { id: 'user-project-config-ssr-id', enabled: { status, message } },
   }
 }

api/src/services/ogTagPreview/ogTagPreview.ts

@@ -1,44 +1,49 @@
 import openGraphScraper from 'open-graph-scraper'
 import type { QueryResolvers } from 'types/graphql'
 
+import { SyntaxError } from '@redwoodjs/graphql-server'
+
+import { auditor } from 'src/lib/og/og'
 import { getUserProjectConfig } from 'src/util/project'
 
 export const ogTagPreview: QueryResolvers['ogTagPreview'] = async ({
   url,
   customUserAgent,
 }) => {
-  const config = await getUserProjectConfig()
-
   // Use an example of Google's user agent if none is provided
   customUserAgent ??=
     'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/W.X.Y.Z Safari/537.36'
 
+  const config = await getUserProjectConfig()
+
   // short-cut in the case that SSR is disabled
   if (!config.experimental?.streamingSsr?.enabled) {
-    return {
-      id: url,
-      userAgent: customUserAgent,
-      error: true,
-      result: {
-        message: 'No OG Tag Preview possible because SSR is disabled.',
-      },
-    }
+    throw new SyntaxError('SSR is not enabled')
   }
 
-  const res = await fetch(url, {
-    headers: {
-      'User-Agent': customUserAgent,
-    },
-  })
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'User-Agent': customUserAgent,
+      },
+    })
 
-  const html = await res.text()
+    const html = await response.text()
+    const customResult = await openGraphScraper({ html })
 
-  const customResult = await openGraphScraper({ html })
+    const { result, error } = customResult
+    const audits = auditor(result, error)
 
-  return {
-    id: url,
-    userAgent: customUserAgent,
-    error: customResult.error,
-    result: customResult.result,
+    return {
+      id: url,
+      userAgent: customUserAgent,
+      error,
+      result,
+      audits,
+    }
+  } catch {
+    throw new SyntaxError(
+      `Unable to preview ${url} with user agent ${customUserAgent}`
+    )
   }
 }

api/src/util/graphqlProxy.ts

@@ -1,11 +1,7 @@
 import httpProxy from '@fastify/http-proxy'
 import type { FastifyInstance, HookHandlerDoneFunction } from 'fastify'
 
-import {
-  getUserProjectWebHost,
-  getUserProjectWebPort,
-  getUserProjectGraphQlEndpoint,
-} from './project'
+import { getUserProjectConfig } from './project'
 
 /**
  * Graphql Proxy - Takes studio "/proxies/graphql" and forwards to the projects
@@ -26,7 +22,7 @@ export async function graphqlProxy(
     upstream: `http://${webHost}:${webConfig.port}`,
     prefix: '/proxies/graphql',
     // Strip the initial scheme://host:port from the graphqlEndpoint
-    rewritePrefix,
+    rewritePrefix: '/' + graphqlEndpoint.split('/').slice(3).join('/'),
     disableCache: true,
   })
 

redwood.toml

@@ -18,7 +18,7 @@
   # projects using their own server file
   port = 4319
 [browser]
-  open = true
+  open = false
 [notifications]
   versionUpdates = ["latest"]
 [generate]