diff --git a/.changeset/odd-gorillas-sleep.md b/.changeset/odd-gorillas-sleep.md new file mode 100644 index 0000000..9a1ee57 --- /dev/null +++ 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 \ No newline at end of file diff --git a/packages/create-drupal-decoupled/src/index.ts b/packages/create-drupal-decoupled/src/index.ts index 9407a68..d726030 100644 --- 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 index ed39f83..9ffbfb7 100644 --- 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 = ({ 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() + const { node } = useLoaderData() return ( -
-

{data.route.entity.title}

-
+
+

+ {node.title} +

+ {node.image && ( + {node.image.alt} + )} +
) } @@ -58,7 +117,7 @@ export function ErrorBoundary() { if (isRouteErrorResponse(error)) { if (error.data === GET_DRUPAL_CONTENT_ERROR) { return ( -
+

There was an error fetching the Drupal content

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 index 8bdaa76..66dd971 100644 --- 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"]