From 1a33ca58693234fcda8607dd01d94e637e8abadd Mon Sep 17 00:00:00 2001 From: enZane <57777002+enZane@users.noreply.github.com> Date: Mon, 12 Aug 2024 14:22:54 -0600 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(drupal-remix)=20Add=20multiple?= =?UTF-8?q?s=20overrides=20(#95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ feat(drupal-remix) Add multiples overrides * 📝 feat(drupal-remix) Update Readme --- .changeset/eighty-bears-yawn.md | 5 + packages/drupal-remix/README.md | 168 ++++++++++--------------------- packages/drupal-remix/src/seo.ts | 91 +++++++++-------- 3 files changed, 105 insertions(+), 159 deletions(-) create mode 100644 .changeset/eighty-bears-yawn.md diff --git a/.changeset/eighty-bears-yawn.md b/.changeset/eighty-bears-yawn.md new file mode 100644 index 0000000..d1c219f --- /dev/null +++ b/.changeset/eighty-bears-yawn.md @@ -0,0 +1,5 @@ +--- +"drupal-remix": major +--- + +Updates the shape of the meta tags, and support multiple replace diff --git a/packages/drupal-remix/README.md b/packages/drupal-remix/README.md index 6c7667c..87120d7 100644 --- a/packages/drupal-remix/README.md +++ b/packages/drupal-remix/README.md @@ -4,7 +4,7 @@ A list of utilities to help you integrate your Drupal site with Remix. ## Prerequisites -Make sure your Drupal site is using the [Metatag](https://www.drupal.org/project/metatag), [GraphQL Compose](https://www.drupal.org/project/graphql_compose) and [Remix](https://www.drupal.org/project/remix) modules. +Make sure your Drupal site is using the [Metatag](https://www.drupal.org/project/metatag), and [GraphQL Compose](https://www.drupal.org/project/graphql_compose) modules. ## Usage of Metatags helper @@ -30,39 +30,30 @@ export const meta: MetaFunction = ({ ### Overriding values (optional) -You can override specific values in the meta tags by providing a metaTagOverrides object to the metaTags function. This object consists of three keys: MetaTagLink, MetaTagProperty, and MetaTagValue. Each key corresponds to a specific kind of meta tag. - -MetaTagLink Overrides -To override the `` tag with the canonical attribute, use the MetaTagLink key. For example: +You can override specific values in the meta tags by providing a metaTagOverrides object to the metaTags function. This object consists of three keys: MetaTagLink, MetaTagProperty, and MetaTagValue. Each key corresponds to a specific kind of meta tag and you can set the overrides for each key as needed. ```typescript -export const meta: MetaFunction = ({ - data, -}: { - data: { node: { metatag } }; -}) => { - return metaTags({ - tags: data.node.metatag, - metaTagOverrides: { - MetaTagLink: { - canonical: { - kind: "replace", - pattern: "drupal-api-url.pantheonsite.io", - replacement: "drupal-site.pages.dev", - }, - }, +return metaTags({ + tags: data.node.metatag, + metaTagOverrides: { + MetaTagLink: { + ... }, - }); -}; + MetaTagProperty: { + ... + }, + MetaTagValue: { + ... + }, + }, +}); ``` -In this example, the canonical attribute of the `` tag will be overridden. The kind property determines the type of override to perform. The available options are: +There is two ways to override the values, one is fully overriding the value with the provided replacement, and the other is searching and replacing a specific pattern within the value. -- "replace": Replaces a specific pattern within the value with the provided replacement. -- "override": Fully replaces the value with the provided replacement. +#### Override -MetaTagProperty Overrides -To override a `` tag with the property attribute, use the MetaTagProperty key. For example: +To fully override the value with a desired value, you can pass the desired value as string to the replacement key. For example, to override the `canonical` attribute of the `` tag, use the MetaTagLink key. ```typescript export const meta: MetaFunction = ({ @@ -73,22 +64,31 @@ export const meta: MetaFunction = ({ return metaTags({ tags: data.node.metatag, metaTagOverrides: { - MetaTagProperty: { - "og:url": { - kind: "replace", - pattern: "drupal-api-url.pantheonsite.io", - replacement: "drupal-site.pages.dev", - }, + MetaTagLink: { + canonical: "https://your-site-url.com", }, }, }); }; ``` -In this example, the `` tag with the property attribute set to "og:url" will be overridden. The kind property determines the type of override to perform. +It will produce the following output in the HTML: -MetaTagValue Overrides -To override a `` tag with the name attribute, use the MetaTagValue key. For example: +```html + + + + + +``` + +Ignoring the original value of the `canonical` attribute. + +#### Search and Replace + +To search and replace a specific pattern within the value, you can pass an array of objects that contains the `pattern` and `replacement` keys. It allows you to add multiple search and replace operations to the same value. For example, replace the domain name in the `canonical` attribute of the `` tag. + +It is useful when you want to replace the Drupal site URL with the Remix site URL. ```typescript export const meta: MetaFunction = ({ @@ -99,96 +99,30 @@ export const meta: MetaFunction = ({ return metaTags({ tags: data.node.metatag, metaTagOverrides: { - MetaTagValue: { - "twitter:url": { - kind: "replace", - pattern: "drupal-api-url.pantheonsite.io", - replacement: "drupal-site.pages.dev", - }, + MetaTagLink: { + canonical: [ + { + pattern: "drupal-site-url.com", + replacement: "your-site-url.com", + }, + ], }, }, }); }; ``` -In this example, the `` tag with the name attribute set to "twitter:url" will be overridden. The kind property determines the type of override to perform. - -The available kind options for MetaTagProperty and MetaTagValue are the same as mentioned earlier: "replace" and "override". - -## Fetching data form Drupal using GraphQL - -```typescript -export const loader = async ({ params, context, request }: LoaderFunctionArgs) => { - const path = calculatePath({path: params["*"], url: request.url}); - const client = await getClient({ - url: context.cloudflare.env.DRUPAL_GRAPHQL_URI, - auth: { - uri: context.cloudflare.env.DRUPAL_AUTH_URI, - clientId: context.cloudflare.env.DRUPAL_CLIENT_ID, - clientSecret: context.cloudflare.env.DRUPAL_CLIENT_SECRET, - }, - }); - - const nodeRouteQuery = graphql(` - query route ($path: String!){ - route(path: $path) { - __typename - ... on RouteInternal { - entity { - __typename - ... on NodePage { - title - metatag { - __typename - ... on MetaTagLink { - attributes { - rel - href - } - } - ... on MetaTagValue { - attributes { - name - content - } - } - ... on MetaTagProperty { - attributes { - property - content - } - } - } - } - } - } - } - }`) - - const { data, error } = await client.query( - nodeRouteQuery, - { - path, - } - ); - - if (error) { - throw error; - } - - if (!data || !data?.route || data?.route.__typename !== "RouteInternal" || !data.route.entity) { - return redirect("/404"); - } +It will produce the following output in the HTML: - return json({ - type: data.route.entity.__typename, - node: data.route.entity, - environment: context.cloudflare.env.ENVIRONMENT, - }) -} +```html + + + + + ``` -> NOTE: This example is using Cloudflare and taking advantage of Environemt Settings to define "environment" key/value, that is why we are using the `context.cloudflare.env.ENVIRONMENT` object to obtain the value and pass it from Server to Client. +and will respect the original path. For example, if the original path was `https://drupal-site-url.com/path/to/page`, it will be replaced with `https://your-site-url.com/path/to/page`. ## Supporting organizations diff --git a/packages/drupal-remix/src/seo.ts b/packages/drupal-remix/src/seo.ts index 864d645..f2cc03e 100644 --- a/packages/drupal-remix/src/seo.ts +++ b/packages/drupal-remix/src/seo.ts @@ -1,23 +1,30 @@ // Keep in sync with the types in Remix MetaTags -type MetaDescriptor = { - charSet: "utf-8"; -} | { - title: string; -} | { - name: string; - content: string; -} | { - property: string; - content: string; -} | { - httpEquiv: string; - content: string; -} | { - [name: string]: string; - tagName: "meta" | "link"; -} | { - [name: string]: unknown; -} +type MetaDescriptor = + | { + charSet: "utf-8"; + } + | { + title: string; + } + | { + name: string; + content: string; + } + | { + property: string; + content: string; + } + | { + httpEquiv: string; + content: string; + } + | { + [name: string]: string; + tagName: "meta" | "link"; + } + | { + [name: string]: unknown; + }; type MetaTagUnion = (MetaTagLink | MetaTagValue | MetaTagProperty) & { __isUnion?: true; @@ -28,7 +35,7 @@ interface MetaTagLink { __typename: "MetaTagLink"; } -export type MetaTag = (MetaTagLink | MetaTagValue | MetaTagProperty) +export type MetaTag = MetaTagLink | MetaTagValue | MetaTagProperty; interface MetaTagLinkAttributes { rel?: string | null; @@ -55,13 +62,12 @@ interface MetaTagPropertyAttributes { content?: string | null; } -type OverrideKind = "replace" | "override"; - -type OverrideOptions = { - kind: OverrideKind; - pattern?: string; +type OverrideOptionsReplace = { + pattern: string; replacement: string; -}; +}[]; + +type OverrideOptions = string | OverrideOptionsReplace; type MetaTagOverrides = { [key in MetaTagUnion["__typename"]]?: { @@ -74,6 +80,20 @@ const DEFAULT_TAGS = [ { name: "viewport", content: "width=device-width,initial-scale=1" }, ]; +const applyOverrides = ( + overrides: OverrideOptions, + initial: string | null | undefined +) => { + if (typeof overrides === "string") { + return overrides; + } + + return overrides.reduce( + (acc, { pattern, replacement }) => acc?.replace(pattern, replacement), + initial + ); +}; + export const metaTags = ({ tags, defaultTags = [], @@ -102,10 +122,7 @@ export const metaTags = ({ }; } - const { kind, pattern, replacement } = willOverrideTag; - - const hrefOverride = - kind === "override" ? replacement : href?.replace(pattern!, replacement); + const hrefOverride = applyOverrides(willOverrideTag, href); return { tagName: "link", @@ -123,12 +140,7 @@ export const metaTags = ({ }; } - const { kind, pattern, replacement } = willOverrideTag; - - const contentOverride = - kind === "override" - ? replacement - : content?.replace(pattern!, replacement); + const contentOverride = applyOverrides(willOverrideTag, content); return { property, @@ -146,12 +158,7 @@ export const metaTags = ({ }; } - const { kind, pattern, replacement } = willOverrideTag; - - const contentOverride = - kind === "override" - ? replacement - : content?.replace(pattern!, replacement); + const contentOverride = applyOverrides(willOverrideTag, content); return { name,