Add remaining OG tags (#143)

Signed-off-by: Damian Stasik <[email protected]>

frontend/index.html

@@ -24,7 +24,6 @@
     <meta property="og:title" content="OpenTofu Registry" />
     <meta property="og:locale" content="en" />
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://search.opentofu.org/" />
     <meta
       property="og:description"
       content="A fast and easy-to-use UI for quickly browsing and viewing OpenTofu modules and providers."

frontend/package.json

@@ -38,6 +38,7 @@
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^6.26.1",
     "react-virtuoso": "^4.10.2",
     "rehype-raw": "^7.0.0",

frontend/src/components/MetaTags/index.tsx

@@ -0,0 +1,24 @@
+import { Helmet } from "react-helmet-async";
+
+interface MetaTagsProps {
+  title?: string;
+  description?: string;
+}
+
+export function MetaTags({ title, description }: MetaTagsProps) {
+  const siteTitle = title
+    ? `${title} - OpenTofu Registry`
+    : "OpenTofu Registry";
+
+  return (
+    <Helmet>
+      <title>{siteTitle}</title>
+      <meta property="og:title" content={siteTitle} />
+      <meta name="twitter:title" content={siteTitle} />
+      {description && <meta name="description" content={description} />}
+      {description && <meta property="og:description" content={description} />}
+      {description && <meta name="twitter:description" content={description} />}
+      <meta property="og:url" content={location.href} />
+    </Helmet>
+  );
+}

frontend/src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { QueryClientProvider } from "@tanstack/react-query";
+import { HelmetProvider } from "react-helmet-async";
 import { queryClient } from "./query";
 import { router } from "./router";
 import { AnnouncementBar } from "./components/AnnouncementBar";
@@ -11,10 +12,12 @@ import "./index.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <QueryClientProvider client={queryClient}>
-      {!!announcement && <AnnouncementBar content={announcement} />}
-      <RouterProvider router={router} future={{ v7_startTransition: true }} />
-      <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+    <HelmetProvider>
+      <QueryClientProvider client={queryClient}>
+        {!!announcement && <AnnouncementBar content={announcement} />}
+        <RouterProvider router={router} future={{ v7_startTransition: true }} />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </HelmetProvider>
   </StrictMode>,
 );

frontend/src/routes/Home/index.tsx

@@ -3,10 +3,12 @@ import { Header } from "../../components/Header";
 import { Paragraph } from "../../components/Paragraph";
 import PatternBg from "../../components/PatternBg";
 import { Footer } from "@/components/Footer";
+import { MetaTags } from "@/components/MetaTags";
 
 export function Home() {
   return (
     <>
+      <MetaTags />
       <PatternBg />
       <Header />
       <main className="container m-auto flex flex-col items-center text-center">

frontend/src/routes/Module/Dependencies/index.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleVersionDataQuery } from "../query";
 import { useModuleParams } from "../hooks/useModuleParams";
 import { ModuleDependencies as ModuleDependenciesComponent } from "@/components/ModuleDependencies";
-import { ModuleMetaTitle } from "../components/MetaTitle";
+import { ModuleMetaTags } from "../components/MetaTags";
 
 export function ModuleDependencies() {
   const { namespace, name, target, version } = useModuleParams();
@@ -13,7 +13,7 @@ export function ModuleDependencies() {
 
   return (
     <>
-      <ModuleMetaTitle page="Dependencies" />
+      <ModuleMetaTags page="Dependencies" />
       <ModuleDependenciesComponent
         moduleDependencies={data.dependencies}
         providerDependencies={data.providers}

frontend/src/routes/Module/Inputs/index.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleVersionDataQuery } from "../query";
 import { useModuleParams } from "../hooks/useModuleParams";
 import { ModuleInputs as ModuleInputsComponent } from "@/components/ModuleInputs";
-import { ModuleMetaTitle } from "../components/MetaTitle";
+import { ModuleMetaTags } from "../components/MetaTags";
 
 export function ModuleInputs() {
   const { namespace, name, target, version } = useModuleParams();
@@ -13,7 +13,7 @@ export function ModuleInputs() {
 
   return (
     <>
-      <ModuleMetaTitle page="Inputs" />
+      <ModuleMetaTags page="Inputs" />
       <ModuleInputsComponent inputs={data.variables} />
     </>
   );

frontend/src/routes/Module/Outputs/index.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleVersionDataQuery } from "../query";
 import { useModuleParams } from "../hooks/useModuleParams";
 import { ModuleOutputs as ModuleOutputsComponent } from "@/components/ModuleOutputs";
-import { ModuleMetaTitle } from "../components/MetaTitle";
+import { ModuleMetaTags } from "../components/MetaTags";
 
 export function ModuleOutputs() {
   const { namespace, name, target, version } = useModuleParams();
@@ -13,7 +13,7 @@ export function ModuleOutputs() {
 
   return (
     <>
-      <ModuleMetaTitle page="Outputs" />
+      <ModuleMetaTags page="Outputs" />
       <ModuleOutputsComponent outputs={data.outputs} />
     </>
   );

frontend/src/routes/Module/Readme/index.tsx

@@ -5,7 +5,7 @@ import { getModuleReadmeQuery, getModuleVersionDataQuery } from "../query";
 import { useModuleParams } from "../hooks/useModuleParams";
 import { Suspense } from "react";
 import { EditLink } from "@/components/EditLink";
-import { ModuleMetaTitle } from "../components/MetaTitle";
+import { ModuleMetaTags } from "../components/MetaTags";
 
 function ModuleReadmeContent() {
   const { namespace, name, version, target } = useModuleParams();
@@ -48,7 +48,7 @@ function ModuleReadmeContentSkeleton() {
 export function ModuleReadme() {
   return (
     <div className="p-5">
-      <ModuleMetaTitle />
+      <ModuleMetaTags />
       <Suspense fallback={<ModuleReadmeContentSkeleton />}>
         <ModuleReadmeContent />
       </Suspense>

frontend/src/routes/Module/Resources/index.tsx

@@ -3,7 +3,7 @@ import { getModuleVersionDataQuery } from "../query";
 
 import { useModuleParams } from "../hooks/useModuleParams";
 import { ModuleResources as ModuleResourcesComponent } from "@/components/ModuleResources";
-import { ModuleMetaTitle } from "../components/MetaTitle";
+import { ModuleMetaTags } from "../components/MetaTags";
 
 export function ModuleResources() {
   const { namespace, name, target, version } = useModuleParams();
@@ -14,7 +14,7 @@ export function ModuleResources() {
 
   return (
     <>
-      <ModuleMetaTitle page="Resources" />
+      <ModuleMetaTags page="Resources" />
       <ModuleResourcesComponent resources={data.resources} />
     </>
   );

frontend/src/routes/Module/components/MetaTitle.tsx → frontend/src/routes/Module/components/MetaTags.tsx

@@ -1,15 +1,15 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleDataQuery } from "../query";
 
-import { MetaTitle } from "@/components/MetaTitle";
+import { MetaTags } from "@/components/MetaTags";
 import { useModuleParams } from "../hooks/useModuleParams";
 import { Suspense } from "react";
 
-interface ModuleMetaTitleProps {
+interface ModuleMetaTagsProps {
   page?: string;
 }
 
-function ModuleMetaTitleContent({ page }: ModuleMetaTitleProps) {
+function ModuleMetaTagsContent({ page }: ModuleMetaTagsProps) {
   const { namespace, name, target, version, isLatest } = useModuleParams();
 
   const { data } = useSuspenseQuery(
@@ -26,13 +26,13 @@ function ModuleMetaTitleContent({ page }: ModuleMetaTitleProps) {
     title = `${page} - ${title}`;
   }
 
-  return <MetaTitle>{title}</MetaTitle>;
+  return <MetaTags title={title} description={data.description} />;
 }
 
-export function ModuleMetaTitle({ page }: ModuleMetaTitleProps) {
+export function ModuleMetaTags({ page }: ModuleMetaTagsProps) {
   return (
     <Suspense fallback={null}>
-      <ModuleMetaTitleContent page={page} />
+      <ModuleMetaTagsContent page={page} />
     </Suspense>
   );
 }

frontend/src/routes/ModuleExample/Inputs/index.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleExampleDataQuery } from "../query";
 import { ModuleInputs } from "@/components/ModuleInputs";
 import { useModuleExampleParams } from "../hooks/useModuleExampleParams";
-import { ModuleExampleMetaTitle } from "../components/MetaTitle";
+import { ModuleExampleMetaTags } from "../components/MetaTags";
 
 export function ModuleExampleInputs() {
   const { namespace, name, target, version, example } =
@@ -14,7 +14,7 @@ export function ModuleExampleInputs() {
 
   return (
     <>
-      <ModuleExampleMetaTitle page="Inputs" />
+      <ModuleExampleMetaTags page="Inputs" />
       <ModuleInputs inputs={data.variables} />
     </>
   );

frontend/src/routes/ModuleExample/Outputs/index.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleExampleDataQuery } from "../query";
 import { ModuleOutputs as ModuleOutputsComponent } from "@/components/ModuleOutputs";
 import { useModuleExampleParams } from "../hooks/useModuleExampleParams";
-import { ModuleExampleMetaTitle } from "../components/MetaTitle";
+import { ModuleExampleMetaTags } from "../components/MetaTags";
 
 export function ModuleExampleOutputs() {
   const { namespace, name, target, version, example } =
@@ -14,7 +14,7 @@ export function ModuleExampleOutputs() {
 
   return (
     <>
-      <ModuleExampleMetaTitle page="Outputs" />
+      <ModuleExampleMetaTags page="Outputs" />
       <ModuleOutputsComponent outputs={data.outputs} />
     </>
   );

frontend/src/routes/ModuleExample/Readme/index.tsx

@@ -4,7 +4,7 @@ import { Markdown } from "@/components/Markdown";
 import { getModuleExampleReadmeQuery } from "../query";
 import { useModuleExampleParams } from "../hooks/useModuleExampleParams";
 import { Suspense } from "react";
-import { ModuleExampleMetaTitle } from "../components/MetaTitle";
+import { ModuleExampleMetaTags } from "../components/MetaTags";
 
 function ModuleExampleReadmeContent() {
   const { namespace, name, target, version, example } =
@@ -38,7 +38,7 @@ function ModuleExampleReadmeContentSkeleton() {
 export function ModuleExampleReadme() {
   return (
     <div className="p-5">
-      <ModuleExampleMetaTitle />
+      <ModuleExampleMetaTags />
       <Suspense fallback={<ModuleExampleReadmeContentSkeleton />}>
         <ModuleExampleReadmeContent />
       </Suspense>

frontend/src/routes/ModuleExample/components/MetaTitle.tsx → frontend/src/routes/ModuleExample/components/MetaTags.tsx

@@ -1,15 +1,15 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 
-import { MetaTitle } from "@/components/MetaTitle";
+import { MetaTags } from "@/components/MetaTags";
 import { useModuleExampleParams } from "../hooks/useModuleExampleParams";
 import { getModuleDataQuery } from "@/routes/Module/query";
 import { Suspense } from "react";
 
-interface ModuleMetaTitleProps {
+interface ModuleMetaTagsProps {
   page?: string;
 }
 
-function ModuleExampleMetaTitleContent({ page }: ModuleMetaTitleProps) {
+function ModuleExampleMetaTagsContent({ page }: ModuleMetaTagsProps) {
   const { namespace, name, target, version, isLatest, example } =
     useModuleExampleParams();
 
@@ -27,13 +27,13 @@ function ModuleExampleMetaTitleContent({ page }: ModuleMetaTitleProps) {
     title = `${page} - ${title}`;
   }
 
-  return <MetaTitle>{title}</MetaTitle>;
+  return <MetaTags title={title} description={data.description} />;
 }
 
-export function ModuleExampleMetaTitle({ page }: ModuleMetaTitleProps) {
+export function ModuleExampleMetaTags({ page }: ModuleMetaTagsProps) {
   return (
     <Suspense fallback={null}>
-      <ModuleExampleMetaTitleContent page={page} />
+      <ModuleExampleMetaTagsContent page={page} />
     </Suspense>
   );
 }

frontend/src/routes/ModuleSubmodule/Dependencies/index.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleSubmoduleDataQuery } from "../query";
 import { ModuleDependencies as ModuleDependenciesComponent } from "@/components/ModuleDependencies";
 import { useModuleSubmoduleParams } from "../hooks/useModuleSubmoduleParams";
-import { ModuleSubmoduleMetaTitle } from "../components/MetaTitle";
+import { ModuleSubmoduleMetaTags } from "../components/MetaTags";
 
 export function ModuleSubmoduleDependencies() {
   const { namespace, name, target, version, submodule } =
@@ -14,7 +14,7 @@ export function ModuleSubmoduleDependencies() {
 
   return (
     <>
-      <ModuleSubmoduleMetaTitle page="Dependencies" />
+      <ModuleSubmoduleMetaTags page="Dependencies" />
       <ModuleDependenciesComponent
         moduleDependencies={data.dependencies}
         providerDependencies={data.providers}

frontend/src/routes/ModuleSubmodule/Inputs/index.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleSubmoduleDataQuery } from "../query";
 import { ModuleInputs } from "@/components/ModuleInputs";
 import { useModuleSubmoduleParams } from "../hooks/useModuleSubmoduleParams";
-import { ModuleSubmoduleMetaTitle } from "../components/MetaTitle";
+import { ModuleSubmoduleMetaTags } from "../components/MetaTags";
 
 export function ModuleSubmoduleInputs() {
   const { namespace, name, target, version, submodule } =
@@ -14,7 +14,7 @@ export function ModuleSubmoduleInputs() {
 
   return (
     <>
-      <ModuleSubmoduleMetaTitle page="Inputs" />
+      <ModuleSubmoduleMetaTags page="Inputs" />
       <ModuleInputs inputs={data.variables} />
     </>
   );

frontend/src/routes/ModuleSubmodule/Outputs/index.tsx

@@ -2,7 +2,7 @@ import { useSuspenseQuery } from "@tanstack/react-query";
 import { getModuleSubmoduleDataQuery } from "../query";
 import { ModuleOutputs as ModuleOutputsComponent } from "@/components/ModuleOutputs";
 import { useModuleSubmoduleParams } from "../hooks/useModuleSubmoduleParams";
-import { ModuleSubmoduleMetaTitle } from "../components/MetaTitle";
+import { ModuleSubmoduleMetaTags } from "../components/MetaTags";
 
 export function ModuleSubmoduleOutputs() {
   const { namespace, name, target, version, submodule } =
@@ -14,7 +14,7 @@ export function ModuleSubmoduleOutputs() {
 
   return (
     <>
-      <ModuleSubmoduleMetaTitle page="Outputs" />
+      <ModuleSubmoduleMetaTags page="Outputs" />
       <ModuleOutputsComponent outputs={data.outputs} />
     </>
   );

frontend/src/routes/ModuleSubmodule/Readme/index.tsx

@@ -4,7 +4,7 @@ import { Markdown } from "@/components/Markdown";
 import { getModuleSubmoduleReadmeQuery } from "../query";
 import { useModuleSubmoduleParams } from "../hooks/useModuleSubmoduleParams";
 import { Suspense } from "react";
-import { ModuleSubmoduleMetaTitle } from "../components/MetaTitle";
+import { ModuleSubmoduleMetaTags } from "../components/MetaTags";
 
 function ModuleSubmoduleReadmeContent() {
   const { namespace, name, target, version, submodule } =
@@ -38,7 +38,7 @@ function ModuleSubmoduleReadmeContentSkeleton() {
 export function ModuleSubmoduleReadme() {
   return (
     <div className="p-5">
-      <ModuleSubmoduleMetaTitle />
+      <ModuleSubmoduleMetaTags />
       <Suspense fallback={<ModuleSubmoduleReadmeContentSkeleton />}>
         <ModuleSubmoduleReadmeContent />
       </Suspense>