🔍️ feat(packages): Add metatags support (#74)

* 🔖 feat(packages): Update package version * 🔍️ feat(packages): Add metatags support
octahedroid · Jul 29, 2024 · e4fc813 · e4fc813
1 parent 298ad29
commit e4fc813
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 9 deletions.
diff --git a/.changeset/odd-gorillas-sleep.md b/.changeset/odd-gorillas-sleep.md
@@ -0,0 +1,6 @@
+---
+"@octahedroid/create-drupal-decoupled": patch
+---
+
+Add Remix meta tags integration
+Update Layout in the scaffolded splat route
diff --git a/packages/create-drupal-decoupled/src/index.ts b/packages/create-drupal-decoupled/src/index.ts
@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import { Command } from 'commander'
+import packageJson from '../package.json'
 import { isJavascriptProject, scaffoldFrontend } from './helpers/scaffolding'
 import { getFrontendMachineName, SUPPORTED_FRONTENDS } from './constants'
 
@@ -12,7 +13,7 @@ async function main() {
   const program = new Command()
     .name('create-drupal-decoupled') // Temporary name
     .description('Scaffold the integration with Drupal in a decoupled frontend')
-    .version('1.0.0', '-v, --version, -V', 'display the version number')
+    .version(packageJson.version, '-v, --version, -V', 'display the version number')
     .argument(
       '[project-directory]',
       'Project directory to scaffold the integration',

diff --git a/packages/create-drupal-decoupled/src/templates/remix-graphql/$.tsx b/packages/create-drupal-decoupled/src/templates/remix-graphql/$.tsx
@@ -2,14 +2,26 @@ import {
   isRouteErrorResponse,
   useRouteError,
   useLoaderData,
+  MetaFunction,
 } from '@remix-run/react'
-import { LoaderFunctionArgs } from '@remix-run/node'
+import { LoaderFunctionArgs, redirect } from '@remix-run/node'
 import { gql } from 'urql'
+import { metaTags } from 'drupal-remix'
 
 import { getDrupalClient } from '~/utils/drupal-client.server'
 
 const GET_DRUPAL_CONTENT_ERROR = 'Error fetching data from Drupal'
 
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  if (!data) {
+    return []
+  }
+
+  return metaTags({
+    tags: data.node.metatag,
+  })
+}
+
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   const path = params['*']
   const drupalClient = await getDrupalClient()
@@ -22,12 +34,41 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
               ... on NodeArticle {
                 title
                 path
+                image {
+                  url
+                  alt
+                }
                 body {
                   value
                 }
+                metatag {
+                  __typename
+                  ... on MetaTagLink {
+                    attributes {
+                      rel
+                      href
+                    }
+                  }
+                  ... on MetaTagValue {
+                    attributes {
+                      name
+                      content
+                    }
+                  }
+                  ... on MetaTagProperty {
+                    attributes {
+                      property
+                      content
+                    }
+                  }
+                }
               }
             }
           }
+          ... on RouteRedirect {
+            url
+            status
+          }
         }
       }
     `,
@@ -40,15 +81,33 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
     throw new Response(GET_DRUPAL_CONTENT_ERROR, { status: 500 })
   }
 
-  return { data }
+  if (data.route.__typename === 'RouteRedirect') {
+    return redirect(data.route.url, {
+      status: data.route.status || 302,
+    })
+  }
+
+  return { node: data.route.entity }
 }
 
 export default function Index() {
-  const { data } = useLoaderData<typeof loader>()
+  const { node } = useLoaderData<typeof loader>()
   return (
-    <div>
-      <h1 className="text-3xl">{data.route.entity.title}</h1>
-      <div dangerouslySetInnerHTML={{ __html: data.route.entity.body.value }} />
+    <div className="container mx-auto">
+      <h1 className="text-6xl font-bold tracking-tighter leading-none mb-6 text-left">
+        {node.title}
+      </h1>
+      {node.image && (
+        <img
+          src={node.image.url}
+          alt={node.image.alt}
+          className="mb-6 mx-auto max-w-lg"
+        />
+      )}
+      <div
+        className="max-w-sm lg:max-w-4xl mx-auto text-lg"
+        dangerouslySetInnerHTML={{ __html: node.body.value }}
+      />
     </div>
   )
 }
@@ -58,7 +117,7 @@ export function ErrorBoundary() {
   if (isRouteErrorResponse(error)) {
     if (error.data === GET_DRUPAL_CONTENT_ERROR) {
       return (
-        <div className='p-4 text-center'>
+        <div className="p-4 text-center">
           <p>There was an error fetching the Drupal content</p>
           <p>
             Hint: Make sure that the query in the loader function is correct and

diff --git a/packages/create-drupal-decoupled/tsconfig.json b/packages/create-drupal-decoupled/tsconfig.json
@@ -15,7 +15,8 @@
     "skipLibCheck": true,
     "strict": true,
     "isolatedModules": false,
-    "baseUrl": "."
+    "baseUrl": ".",
+    "resolveJsonModule": true
   },
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules", "src/templates"]