Add a title to all pages (#127)

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

frontend/src/components/MetaTitle/index.tsx

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+interface MetaTitleProps {
+  children: string;
+}
+
+export function MetaTitle({ children }: MetaTitleProps) {
+  useEffect(() => {
+    document.title = `${children} - OpenTofu Registry`;
+
+    return () => {
+      document.title = "OpenTofu Registry";
+    };
+  }, [children]);
+
+  return null;
+}

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

@@ -2,6 +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";
 
 export function ModuleDependencies() {
   const { namespace, name, target, version } = useModuleParams();
@@ -11,9 +12,12 @@ export function ModuleDependencies() {
   );
 
   return (
-    <ModuleDependenciesComponent
-      moduleDependencies={data.dependencies}
-      providerDependencies={data.providers}
-    />
+    <>
+      <ModuleMetaTitle page="Dependencies" />
+      <ModuleDependenciesComponent
+        moduleDependencies={data.dependencies}
+        providerDependencies={data.providers}
+      />
+    </>
   );
 }

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

@@ -2,6 +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";
 
 export function ModuleInputs() {
   const { namespace, name, target, version } = useModuleParams();
@@ -10,5 +11,10 @@ export function ModuleInputs() {
     getModuleVersionDataQuery(namespace, name, target, version),
   );
 
-  return <ModuleInputsComponent inputs={data.variables} />;
+  return (
+    <>
+      <ModuleMetaTitle page="Inputs" />
+      <ModuleInputsComponent inputs={data.variables} />
+    </>
+  );
 }

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

@@ -2,6 +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";
 
 export function ModuleOutputs() {
   const { namespace, name, target, version } = useModuleParams();
@@ -10,5 +11,10 @@ export function ModuleOutputs() {
     getModuleVersionDataQuery(namespace, name, target, version),
   );
 
-  return <ModuleOutputsComponent outputs={data.outputs} />;
+  return (
+    <>
+      <ModuleMetaTitle page="Outputs" />
+      <ModuleOutputsComponent outputs={data.outputs} />
+    </>
+  );
 }

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

@@ -5,6 +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";
 
 function ModuleReadmeContent() {
   const { namespace, name, version, target } = useModuleParams();
@@ -47,6 +48,7 @@ function ModuleReadmeContentSkeleton() {
 export function ModuleReadme() {
   return (
     <div className="p-5">
+      <ModuleMetaTitle />
       <Suspense fallback={<ModuleReadmeContentSkeleton />}>
         <ModuleReadmeContent />
       </Suspense>

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

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

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

@@ -0,0 +1,38 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { getModuleDataQuery } from "../query";
+
+import { MetaTitle } from "@/components/MetaTitle";
+import { useModuleParams } from "../hooks/useModuleParams";
+import { Suspense } from "react";
+
+interface ModuleMetaTitleProps {
+  page?: string;
+}
+
+function ModuleMetaTitleContent({ page }: ModuleMetaTitleProps) {
+  const { namespace, name, target, version, isLatest } = useModuleParams();
+
+  const { data } = useSuspenseQuery(
+    getModuleDataQuery(namespace, name, target),
+  );
+
+  let title = `${data.addr.namespace}/${data.addr.name}/${data.addr.target}`;
+
+  if (!isLatest) {
+    title = `${version} - ${title}`;
+  }
+
+  if (page) {
+    title = `${page} - ${title}`;
+  }
+
+  return <MetaTitle>{title}</MetaTitle>;
+}
+
+export function ModuleMetaTitle({ page }: ModuleMetaTitleProps) {
+  return (
+    <Suspense fallback={null}>
+      <ModuleMetaTitleContent page={page} />
+    </Suspense>
+  );
+}

frontend/src/routes/Module/hooks/useModuleParams.ts

@@ -1,9 +1,10 @@
 import { useParams, useRouteLoaderData } from "react-router-dom";
+import { ModuleRouteContext } from "../types";
 
 export function useModuleParams() {
-  const { version } = useRouteLoaderData("module-version") as {
-    version: string;
-  };
+  const { version, rawVersion } = useRouteLoaderData(
+    "module-version",
+  ) as ModuleRouteContext;
 
   const { namespace, name, target } = useParams<{
     namespace: string;
@@ -16,5 +17,6 @@ export function useModuleParams() {
     namespace,
     name,
     target,
+    isLatest: rawVersion === "latest",
   };
 }

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

@@ -2,6 +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";
 
 export function ModuleExampleInputs() {
   const { namespace, name, target, version, example } =
@@ -11,5 +12,10 @@ export function ModuleExampleInputs() {
     getModuleExampleDataQuery(namespace, name, target, version, example),
   );
 
-  return <ModuleInputs inputs={data.variables} />;
+  return (
+    <>
+      <ModuleExampleMetaTitle page="Inputs" />
+      <ModuleInputs inputs={data.variables} />
+    </>
+  );
 }

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

@@ -2,6 +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";
 
 export function ModuleExampleOutputs() {
   const { namespace, name, target, version, example } =
@@ -11,5 +12,10 @@ export function ModuleExampleOutputs() {
     getModuleExampleDataQuery(namespace, name, target, version, example),
   );
 
-  return <ModuleOutputsComponent outputs={data.outputs} />;
+  return (
+    <>
+      <ModuleExampleMetaTitle page="Outputs" />
+      <ModuleOutputsComponent outputs={data.outputs} />
+    </>
+  );
 }

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

@@ -4,6 +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";
 
 function ModuleExampleReadmeContent() {
   const { namespace, name, target, version, example } =
@@ -37,6 +38,7 @@ function ModuleExampleReadmeContentSkeleton() {
 export function ModuleExampleReadme() {
   return (
     <div className="p-5">
+      <ModuleExampleMetaTitle />
       <Suspense fallback={<ModuleExampleReadmeContentSkeleton />}>
         <ModuleExampleReadmeContent />
       </Suspense>

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

@@ -0,0 +1,39 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+import { MetaTitle } from "@/components/MetaTitle";
+import { useModuleExampleParams } from "../hooks/useModuleExampleParams";
+import { getModuleDataQuery } from "@/routes/Module/query";
+import { Suspense } from "react";
+
+interface ModuleMetaTitleProps {
+  page?: string;
+}
+
+function ModuleExampleMetaTitleContent({ page }: ModuleMetaTitleProps) {
+  const { namespace, name, target, version, isLatest, example } =
+    useModuleExampleParams();
+
+  const { data } = useSuspenseQuery(
+    getModuleDataQuery(namespace, name, target),
+  );
+
+  let title = `Example: ${example} - ${data.addr.namespace}/${data.addr.name}/${data.addr.target}`;
+
+  if (!isLatest) {
+    title = `${version} - ${title}`;
+  }
+
+  if (page) {
+    title = `${page} - ${title}`;
+  }
+
+  return <MetaTitle>{title}</MetaTitle>;
+}
+
+export function ModuleExampleMetaTitle({ page }: ModuleMetaTitleProps) {
+  return (
+    <Suspense fallback={null}>
+      <ModuleExampleMetaTitleContent page={page} />
+    </Suspense>
+  );
+}

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

@@ -2,6 +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";
 
 export function ModuleSubmoduleDependencies() {
   const { namespace, name, target, version, submodule } =
@@ -12,9 +13,12 @@ export function ModuleSubmoduleDependencies() {
   );
 
   return (
-    <ModuleDependenciesComponent
-      moduleDependencies={data.dependencies}
-      providerDependencies={data.providers}
-    />
+    <>
+      <ModuleSubmoduleMetaTitle page="Dependencies" />
+      <ModuleDependenciesComponent
+        moduleDependencies={data.dependencies}
+        providerDependencies={data.providers}
+      />
+    </>
   );
 }

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

@@ -2,6 +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";
 
 export function ModuleSubmoduleInputs() {
   const { namespace, name, target, version, submodule } =
@@ -11,5 +12,10 @@ export function ModuleSubmoduleInputs() {
     getModuleSubmoduleDataQuery(namespace, name, target, version, submodule),
   );
 
-  return <ModuleInputs inputs={data.variables} />;
+  return (
+    <>
+      <ModuleSubmoduleMetaTitle page="Inputs" />
+      <ModuleInputs inputs={data.variables} />
+    </>
+  );
 }

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

@@ -2,6 +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";
 
 export function ModuleSubmoduleOutputs() {
   const { namespace, name, target, version, submodule } =
@@ -11,5 +12,10 @@ export function ModuleSubmoduleOutputs() {
     getModuleSubmoduleDataQuery(namespace, name, target, version, submodule),
   );
 
-  return <ModuleOutputsComponent outputs={data.outputs} />;
+  return (
+    <>
+      <ModuleSubmoduleMetaTitle page="Outputs" />
+      <ModuleOutputsComponent outputs={data.outputs} />
+    </>
+  );
 }

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

@@ -4,6 +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";
 
 function ModuleSubmoduleReadmeContent() {
   const { namespace, name, target, version, submodule } =
@@ -37,6 +38,7 @@ function ModuleSubmoduleReadmeContentSkeleton() {
 export function ModuleSubmoduleReadme() {
   return (
     <div className="p-5">
+      <ModuleSubmoduleMetaTitle />
       <Suspense fallback={<ModuleSubmoduleReadmeContentSkeleton />}>
         <ModuleSubmoduleReadmeContent />
       </Suspense>

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

@@ -3,6 +3,7 @@ import { getModuleSubmoduleDataQuery } from "../query";
 
 import { ModuleResources as ModuleResourcesComponent } from "@/components/ModuleResources";
 import { useModuleSubmoduleParams } from "../hooks/useModuleSubmoduleParams";
+import { ModuleSubmoduleMetaTitle } from "../components/MetaTitle";
 
 export function ModuleSubmoduleResources() {
   const { namespace, name, target, version, submodule } =
@@ -12,5 +13,10 @@ export function ModuleSubmoduleResources() {
     getModuleSubmoduleDataQuery(namespace, name, target, version, submodule),
   );
 
-  return <ModuleResourcesComponent resources={data.resources} />;
+  return (
+    <>
+      <ModuleSubmoduleMetaTitle page="Resources" />
+      <ModuleResourcesComponent resources={data.resources} />
+    </>
+  );
 }