+
}>
diff --git a/frontend/src/routes/Module/Resources/index.tsx b/frontend/src/routes/Module/Resources/index.tsx
index 80fe99b3..41439c62 100644
--- a/frontend/src/routes/Module/Resources/index.tsx
+++ b/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
;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/frontend/src/routes/Module/components/MetaTitle.tsx b/frontend/src/routes/Module/components/MetaTitle.tsx
new file mode 100644
index 00000000..583ddd8b
--- /dev/null
+++ b/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
{title};
+}
+
+export function ModuleMetaTitle({ page }: ModuleMetaTitleProps) {
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/routes/Module/hooks/useModuleParams.ts b/frontend/src/routes/Module/hooks/useModuleParams.ts
index 91a8934f..3b859f7e 100644
--- a/frontend/src/routes/Module/hooks/useModuleParams.ts
+++ b/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",
};
}
diff --git a/frontend/src/routes/ModuleExample/Inputs/index.tsx b/frontend/src/routes/ModuleExample/Inputs/index.tsx
index 1e1a9a12..622b4a0f 100644
--- a/frontend/src/routes/ModuleExample/Inputs/index.tsx
+++ b/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
;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/frontend/src/routes/ModuleExample/Outputs/index.tsx b/frontend/src/routes/ModuleExample/Outputs/index.tsx
index 75dfbba7..c90857f8 100644
--- a/frontend/src/routes/ModuleExample/Outputs/index.tsx
+++ b/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
;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/frontend/src/routes/ModuleExample/Readme/index.tsx b/frontend/src/routes/ModuleExample/Readme/index.tsx
index 3f553733..8e791ea2 100644
--- a/frontend/src/routes/ModuleExample/Readme/index.tsx
+++ b/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 (
+
}>
diff --git a/frontend/src/routes/ModuleExample/components/MetaTitle.tsx b/frontend/src/routes/ModuleExample/components/MetaTitle.tsx
new file mode 100644
index 00000000..54d59764
--- /dev/null
+++ b/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
{title};
+}
+
+export function ModuleExampleMetaTitle({ page }: ModuleMetaTitleProps) {
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/routes/ModuleSubmodule/Dependencies/index.tsx b/frontend/src/routes/ModuleSubmodule/Dependencies/index.tsx
index f65509d1..03db46a5 100644
--- a/frontend/src/routes/ModuleSubmodule/Dependencies/index.tsx
+++ b/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 (
-
+ <>
+
+
+
);
}
diff --git a/frontend/src/routes/ModuleSubmodule/Inputs/index.tsx b/frontend/src/routes/ModuleSubmodule/Inputs/index.tsx
index 8062aedb..79973978 100644
--- a/frontend/src/routes/ModuleSubmodule/Inputs/index.tsx
+++ b/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
;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/frontend/src/routes/ModuleSubmodule/Outputs/index.tsx b/frontend/src/routes/ModuleSubmodule/Outputs/index.tsx
index 5816d13b..9a225185 100644
--- a/frontend/src/routes/ModuleSubmodule/Outputs/index.tsx
+++ b/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
;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/frontend/src/routes/ModuleSubmodule/Readme/index.tsx b/frontend/src/routes/ModuleSubmodule/Readme/index.tsx
index d79cfeda..722ae0f0 100644
--- a/frontend/src/routes/ModuleSubmodule/Readme/index.tsx
+++ b/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 (
+
}>
diff --git a/frontend/src/routes/ModuleSubmodule/Resources/index.tsx b/frontend/src/routes/ModuleSubmodule/Resources/index.tsx
index a7cee620..8f2e23dc 100644
--- a/frontend/src/routes/ModuleSubmodule/Resources/index.tsx
+++ b/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
;
+ return (
+ <>
+
+
+
+ );
}
diff --git a/frontend/src/routes/ModuleSubmodule/components/MetaTitle.tsx b/frontend/src/routes/ModuleSubmodule/components/MetaTitle.tsx
new file mode 100644
index 00000000..2954d6ae
--- /dev/null
+++ b/frontend/src/routes/ModuleSubmodule/components/MetaTitle.tsx
@@ -0,0 +1,41 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+import { MetaTitle } from "@/components/MetaTitle";
+import { useModuleSubmoduleParams } from "../hooks/useModuleSubmoduleParams";
+import { getModuleDataQuery } from "@/routes/Module/query";
+import { Suspense } from "react";
+
+interface ModuleMetaTitleProps {
+ page?: string;
+}
+
+export function ModuleSubmoduleMetaTitleContent({
+ page,
+}: ModuleMetaTitleProps) {
+ const { namespace, name, target, version, isLatest, submodule } =
+ useModuleSubmoduleParams();
+
+ const { data } = useSuspenseQuery(
+ getModuleDataQuery(namespace, name, target),
+ );
+
+ let title = `Submodule: ${submodule} - ${data.addr.namespace}/${data.addr.name}/${data.addr.target}`;
+
+ if (!isLatest) {
+ title = `${version} - ${title}`;
+ }
+
+ if (page) {
+ title = `${page} - ${title}`;
+ }
+
+ return
{title};
+}
+
+export function ModuleSubmoduleMetaTitle({ page }: ModuleMetaTitleProps) {
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/routes/Modules/index.tsx b/frontend/src/routes/Modules/index.tsx
index 34b93e62..a3ccbab3 100644
--- a/frontend/src/routes/Modules/index.tsx
+++ b/frontend/src/routes/Modules/index.tsx
@@ -4,10 +4,12 @@ import { PageTitle } from "@/components/PageTitle";
import { Paragraph } from "@/components/Paragraph";
import { SimpleLayout } from "@/components/SimpleLayout";
import { ModulesList, ModulesListSkeleton } from "./components/List";
+import { MetaTitle } from "@/components/MetaTitle";
export function Modules() {
return (
+ Modules
Modules
diff --git a/frontend/src/routes/Provider/components/Header.tsx b/frontend/src/routes/Provider/components/Header.tsx
index eb5cb4c5..d3fe877a 100644
--- a/frontend/src/routes/Provider/components/Header.tsx
+++ b/frontend/src/routes/Provider/components/Header.tsx
@@ -35,7 +35,7 @@ export function ProviderHeader() {
{data.description &&
{data.description}}
- {data.addr.Namespace}
+ {data.addr.namespace}
{data.versions[0].id}
diff --git a/frontend/src/routes/Provider/components/MetaTitle.tsx b/frontend/src/routes/Provider/components/MetaTitle.tsx
new file mode 100644
index 00000000..0be241a2
--- /dev/null
+++ b/frontend/src/routes/Provider/components/MetaTitle.tsx
@@ -0,0 +1,37 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { getProviderVersionDataQuery } from "../query";
+import { useProviderParams } from "../hooks/useProviderParams";
+import { getProviderDoc } from "../utils/getProviderDoc";
+import { MetaTitle } from "@/components/MetaTitle";
+import { Suspense } from "react";
+
+export function ProviderMetaTitleContent() {
+ const { namespace, provider, version, doc, type, isLatest } =
+ useProviderParams();
+
+ const { data } = useSuspenseQuery(
+ getProviderVersionDataQuery(namespace, provider, version),
+ );
+
+ const providerDoc = getProviderDoc(data.docs, type, doc);
+
+ if (!providerDoc) {
+ return null;
+ }
+
+ let title = `${namespace}/${provider}`;
+
+ if (!isLatest) {
+ title = `${version} - ${title}`;
+ }
+
+ return {`${providerDoc.title} - ${title}`};
+}
+
+export function ProviderMetaTitle() {
+ return (
+
+
+
+ );
+}
diff --git a/frontend/src/routes/Provider/components/PageTitle.tsx b/frontend/src/routes/Provider/components/PageTitle.tsx
deleted file mode 100644
index 67f0c7eb..00000000
--- a/frontend/src/routes/Provider/components/PageTitle.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
-import { getProviderVersionDataQuery } from "../query";
-import { useProviderParams } from "../hooks/useProviderParams";
-import { useEffect } from "react";
-import { getProviderDoc } from "../utils/getProviderDoc";
-
-export function ProviderPageTitle() {
- const { namespace, provider, version, doc, type, lang } = useProviderParams();
-
- const { data } = useSuspenseQuery(
- getProviderVersionDataQuery(namespace, provider, version),
- );
-
- useEffect(() => {
- const providerDoc = getProviderDoc(data, type, doc, lang);
-
- if (providerDoc) {
- document.title = `${providerDoc.title} - OpenTofu Registry`;
- }
-
- return () => {
- document.title = "OpenTofu Registry";
- };
- }, [data, doc, type, lang]);
-
- return null;
-}
diff --git a/frontend/src/routes/Provider/hooks/useProviderParams.ts b/frontend/src/routes/Provider/hooks/useProviderParams.ts
index 56133bb4..76eb229d 100644
--- a/frontend/src/routes/Provider/hooks/useProviderParams.ts
+++ b/frontend/src/routes/Provider/hooks/useProviderParams.ts
@@ -1,9 +1,8 @@
import { useLoaderData, useParams, useSearchParams } from "react-router-dom";
+import { ProviderRouteContext } from "../types";
export function useProviderParams() {
- const { version } = useLoaderData() as {
- version: string;
- };
+ const { version, rawVersion } = useLoaderData() as ProviderRouteContext;
const { namespace, provider, type, doc } = useParams<{
namespace: string;
@@ -21,5 +20,6 @@ export function useProviderParams() {
type,
doc,
lang: searchParams.get("lang"),
+ isLatest: rawVersion === "latest",
};
}
diff --git a/frontend/src/routes/Provider/index.tsx b/frontend/src/routes/Provider/index.tsx
index 19f8d984..e27dbf7c 100644
--- a/frontend/src/routes/Provider/index.tsx
+++ b/frontend/src/routes/Provider/index.tsx
@@ -24,7 +24,7 @@ import {
ProviderMetadataSidebarBlock,
ProviderMetadataSidebarBlockSkeleton,
} from "./components/MetadataSidebarBlock";
-import { ProviderPageTitle } from "./components/PageTitle";
+import { ProviderMetaTitle } from "./components/MetaTitle";
export function Provider() {
return (
@@ -54,6 +54,7 @@ export function Provider() {
}
>
+
}
>
-
diff --git a/frontend/src/routes/Providers/index.tsx b/frontend/src/routes/Providers/index.tsx
index 9953bb09..d103989c 100644
--- a/frontend/src/routes/Providers/index.tsx
+++ b/frontend/src/routes/Providers/index.tsx
@@ -6,10 +6,12 @@ import { SimpleLayout } from "@/components/SimpleLayout";
import { Suspense } from "react";
import { ProvidersList, ProvidersListSkeleton } from "./components/List";
+import { MetaTitle } from "@/components/MetaTitle";
export function Providers() {
return (
+ Providers
Providers
From a661e51957dafeed1bfe48820d597f137a96ae24 Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Tue, 3 Sep 2024 14:38:09 +0200
Subject: [PATCH 2/2] Adjust to latest state of the main branch
Signed-off-by: Damian Stasik <920747+damianstasik@users.noreply.github.com>
---
frontend/src/routes/Provider/components/MetaTitle.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/frontend/src/routes/Provider/components/MetaTitle.tsx b/frontend/src/routes/Provider/components/MetaTitle.tsx
index 0be241a2..542953e3 100644
--- a/frontend/src/routes/Provider/components/MetaTitle.tsx
+++ b/frontend/src/routes/Provider/components/MetaTitle.tsx
@@ -6,14 +6,14 @@ import { MetaTitle } from "@/components/MetaTitle";
import { Suspense } from "react";
export function ProviderMetaTitleContent() {
- const { namespace, provider, version, doc, type, isLatest } =
+ const { namespace, provider, version, doc, type, isLatest, lang } =
useProviderParams();
const { data } = useSuspenseQuery(
getProviderVersionDataQuery(namespace, provider, version),
);
- const providerDoc = getProviderDoc(data.docs, type, doc);
+ const providerDoc = getProviderDoc(data, type, doc, lang);
if (!providerDoc) {
return null;