Remove @remix-run/v1-meta (#226)

* Remove uses of @remix-run/v1-meta

* Remove @remix-run/v1-meta package

* Remove .npmrc from Dockerfile

* FIx og image for docs

Dockerfile

@@ -15,7 +15,7 @@ FROM base as deps
 
 WORKDIR /remixapp
 
-ADD package.json package-lock.json .npmrc ./
+ADD package.json package-lock.json ./
 RUN npm install --include=dev
 
 # Setup production node_modules
@@ -24,7 +24,7 @@ FROM base as production-deps
 WORKDIR /remixapp
 
 COPY --from=deps /remixapp/node_modules /remixapp/node_modules
-ADD package.json package-lock.json .npmrc ./
+ADD package.json package-lock.json ./
 RUN npm prune --omit=dev
 
 # Build the app

app/lib/meta/meta.ts

@@ -2,7 +2,7 @@ import type { MetaDescriptor } from "@remix-run/node";
 
 type CustomMetaArgs = {
   title: string;
-  description: string;
+  description?: string;
   siteUrl?: string;
   image?: string;
 } & { additionalMeta?: MetaDescriptor[] };

app/routes/_extras.blog.$slug.tsx

@@ -25,7 +25,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 };
 
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
-  // Inherit the caching headers from the loader so we do't cache 404s
+  // Inherit the caching headers from the loader so we don't cache 404s
   return loaderHeaders;
 };
 

app/routes/_marketing._index.tsx

@@ -60,7 +60,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 };
 
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
-  // Inherit the caching headers from the loader so we do't cache 404s
+  // Inherit the caching headers from the loader so we don't cache 404s
   return loaderHeaders;
 };
 

app/routes/_marketing.newsletter.tsx

@@ -2,14 +2,13 @@ import { useNavigation, useActionData } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
 import { useEffect, useRef } from "react";
 import { Subscribe } from "~/ui/subscribe";
-import { metaV1 } from "@remix-run/v1-meta";
 import type { action } from "~/routes/[_]actions.newsletter";
 
-export const meta: MetaFunction = (args) => {
-  return metaV1(args, {
+export const meta: MetaFunction = () => [
+  {
     title: "Remix Newsletter",
-  });
-};
+  },
+];
 
 export default function Newsletter() {
   let navigation = useNavigation();

app/routes/docs.$lang.$ref.$.tsx

@@ -14,7 +14,6 @@ import type {
   SerializeFrom,
 } from "@remix-run/node";
 import type { MetaFunction } from "@remix-run/react";
-import { metaV1, getMatchesData } from "@remix-run/v1-meta";
 import { CACHE_CONTROL, handleRedirects } from "~/lib/http.server";
 import invariant from "tiny-invariant";
 import type { Doc } from "~/lib/gh-docs";
@@ -24,10 +23,13 @@ import cx from "clsx";
 import { useDelegatedReactRouterLinks } from "~/ui/delegate-links";
 import type { loader as docsLayoutLoader } from "~/routes/docs.$lang.$ref";
 import type { loader as rootLoader } from "~/root";
+import { getMeta } from "~/lib/meta";
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
   let url = new URL(request.url);
-  let pageUrl = url.protocol + "//" + url.host + url.pathname;
+  let baseUrl = url.protocol + "//" + url.host;
+  let siteUrl = baseUrl + url.pathname;
+  let ogImageUrl = baseUrl + "/img/og.1.jpg";
   invariant(params.ref, "expected `ref` params");
   try {
     let slug = params["*"]?.endsWith("/changelog")
@@ -36,7 +38,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
     let doc = await getRepoDoc(params.ref, slug);
     if (!doc) throw null;
     return json(
-      { doc, pageUrl },
+      { doc, siteUrl, ogImageUrl },
       { headers: { "Cache-Control": CACHE_CONTROL.doc } },
     );
   } catch (_) {
@@ -51,7 +53,7 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 }
 
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
-  // Inherit the caching headers from the loader so we do't cache 404s
+  // Inherit the caching headers from the loader so we don't cache 404s
   let headers = new Headers(loaderHeaders);
   headers.set("Vary", "Cookie");
   return headers;
@@ -68,12 +70,18 @@ type MatchLoaders = {
 export const meta: MetaFunction<Loader, MatchLoaders> = (args) => {
   let { data } = args;
 
-  let matchesData = getMatchesData<Loader, MatchLoaders>(args);
-  let parentData = matchesData[LAYOUT_LOADER_KEY];
+  let parentData = args.matches.find(
+    (match) => match.id === LAYOUT_LOADER_KEY,
+  )?.data;
+  let rootData = args.matches.find((match) => match.id === "root")?.data;
+  invariant(
+    parentData && "latestVersion" in parentData,
+    "No parent data found",
+  );
+  invariant(rootData && "isProductionHost" in rootData, "No root data found");
+
   if (!data) {
-    return metaV1(args, {
-      title: "Not Found",
-    });
+    return [{ title: "Not Found" }];
   }
 
   let { doc } = data;
@@ -95,48 +103,26 @@ export const meta: MetaFunction<Loader, MatchLoaders> = (args) => {
   let isMainBranch = currentGitHubRef === releaseBranch;
 
   let robots =
-    matchesData.root.isProductionHost && isMainBranch
+    rootData.isProductionHost && isMainBranch
       ? "index,follow"
       : "noindex,nofollow";
 
-  let pageUrl = data.pageUrl;
-
-  // TODO: add more + better SEO stuff
-  // let url = new URL(data.pageUrl);
-  // let siteUrl = url.protocol + "//" + url.host;
-  // let ogImage = `${siteUrl}/image.jpg`;
-  // let ogImageAlt = title;
-  // let twitterImage = ogImage;
-  // let twitterImageAlt = title;
-  // let description: 'some description';
+  let { siteUrl, ogImageUrl } = data;
 
-  return metaV1(args, {
+  return getMeta({
     title: `${title} | Remix`,
-    // description,
-
-    "og:title": title,
-    // "og:description": description,
-    "og:url": pageUrl,
-    "og:type": "article",
-    "og:site_name": "Remix",
-    // "og:image": ogImage,
-    // "og:image:alt": ogImageAlt,
-    // "og:image:secure_url": ogImage,
-    // "og:image:type": "image/jpeg",
-    // "og:image:width": "1200",
-    // "og:image:height": "630",
-    // "og:locale": "en_US",
-
-    "twitter:title": title,
-    "twitter:site": "@remix_run",
-    "twitter:creator": "@remix_run",
-    // "twitter:image": twitterImage,
-    // "twitter:image:alt": twitterImageAlt,
-    // "twitter:description": description,
-    // "twitter:card": "summary",
-
-    robots: robots,
-    googlebot: robots,
+    // TODO: add a description
+    // let description: 'some description';
+    siteUrl,
+    image: ogImageUrl,
+    additionalMeta: [
+      { name: "og:type", content: "article" },
+      { name: "og:site_name", content: "Remix" },
+      { name: "docsearch:language", content: args.params.lang || "en" },
+      { name: "docsearch:version", content: args.params.ref || "v1" },
+      { name: "robots", content: robots },
+      { name: "googlebot", content: robots },
+    ],
   });
 };
 

app/routes/docs.$lang.$ref.tsx

@@ -11,10 +11,8 @@ import {
   useResolvedPath,
   matchPath,
 } from "@remix-run/react";
-import type { MetaFunction } from "@remix-run/react";
 import { json, redirect } from "@remix-run/node";
 import type { LoaderFunctionArgs, HeadersFunction } from "@remix-run/node";
-import { metaV1 } from "@remix-run/v1-meta";
 import cx from "clsx";
 import { DocSearch } from "~/ui/docsearch";
 import { useNavigate } from "react-router-dom";
@@ -75,13 +73,6 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   });
 };
 
-export const meta: MetaFunction<typeof loader> = (args) => {
-  return metaV1(args, {
-    "docsearch:language": args.params.lang || "en",
-    "docsearch:version": args.params.ref || "v1",
-  });
-};
-
 export const headers: HeadersFunction = () => {
   return {
     "Cache-Control": CACHE_CONTROL.doc,

package.json

@@ -25,7 +25,6 @@
     "@remix-run/express": "0.0.0-experimental-9989381a2",
     "@remix-run/node": "0.0.0-experimental-9989381a2",
     "@remix-run/react": "0.0.0-experimental-9989381a2",
-    "@remix-run/v1-meta": "0.1.3",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "cheerio": "^1.0.0-rc.12",
     "clsx": "^2.1.0",