Show proper title based on project

Author: amirhhashemi

src/solidbase-theme/Layout.tsx

@@ -7,14 +7,17 @@ import { I18nProvider } from "~/i18n/i18n-context";
 import { Title } from "@solidjs/meta";
 import { useThemeListener } from "@kobalte/solidbase/client";
 import { usePace } from "@kobalte/solidbase/default-theme/pace.js";
+import { useProjectTitle } from "~/ui/use-project-title";
 
 export default function (props: RouteSectionProps) {
 	useThemeListener();
 	usePace();
 
+	const projectTitle = useProjectTitle();
+
 	return (
 		<I18nProvider>
-			<Title>Solid Docs</Title>
+			<Title>{projectTitle()}</Title>
 			<ErrorBoundary fallback={() => <NotFound />}>
 				<Layout>{props.children}</Layout>
 			</ErrorBoundary>

src/ui/docs-layout.tsx

@@ -5,6 +5,7 @@ import { coreEntries } from "solid:collection";
 import { Pagination } from "~/ui/pagination";
 import { EditPageLink } from "./edit-page-link";
 import { PageIssueLink } from "./page-issue-link";
+import { useProjectTitle } from "./use-project-title";
 
 interface DocsLayoutProps {
 	entries: typeof coreEntries;
@@ -13,6 +14,7 @@ interface DocsLayoutProps {
 
 export const DocsLayout = (props: DocsLayoutProps) => {
 	const location = useLocation();
+	const projectTitle = useProjectTitle();
 
 	const collection = () =>
 		location.pathname.includes("/reference/")
@@ -40,7 +42,7 @@ export const DocsLayout = (props: DocsLayoutProps) => {
 		<Show when={props.entries} keyed>
 			<>
 				<Show when={titles()?.title} fallback={<Title>SolidDocs</Title>}>
-					{(title) => <Title>{`${title()} - SolidDocs`}</Title>}
+					{(title) => <Title>{`${title()} - ${projectTitle()}`}</Title>}
 				</Show>
 				<div id="rr" class="flex relative justify-center">
 					<article class="w-fit overflow-hidden pb-16 lg:px-5 expressive-code-overrides lg:max-w-none">

src/ui/not-found.tsx

@@ -2,11 +2,14 @@ import { Title } from "@solidjs/meta";
 import { Layout } from "./layout";
 import { HttpStatusCode } from "@solidjs/start";
 import { A } from "~/ui/i18n-anchor";
+import { useProjectTitle } from "./use-project-title";
 
 export function NotFound() {
+	const projectTitle = useProjectTitle();
+
 	return (
 		<>
-			<Title>404 - SolidDocs</Title>
+			<Title>Not Found - {projectTitle()}</Title>
 			<Layout isError>
 				<HttpStatusCode code={404} />
 				<div class="flex flex-col items-center">

src/ui/use-project-title.ts

@@ -0,0 +1,35 @@
+import { type Accessor, createEffect, createSignal } from "solid-js";
+import { useMatch } from "@solidjs/router";
+
+const SOLID_START_TITLE = "SolidStart Docs";
+const SOLID_ROUTER_TITLE = "Solid Router Docs";
+const SOLID_META_TITLE = "Solid Meta Docs";
+const SOLID_TITLE = "Solid Docs";
+
+type ProjectTitle =
+	| typeof SOLID_START_TITLE
+	| typeof SOLID_ROUTER_TITLE
+	| typeof SOLID_META_TITLE
+	| typeof SOLID_TITLE;
+
+export function useProjectTitle(): Accessor<ProjectTitle> {
+	const [title, setTitle] = createSignal<ProjectTitle>(SOLID_TITLE);
+
+	const isStart = useMatch(() => "/solid-start/*");
+	const isRouter = useMatch(() => "/solid-router/*");
+	const isMeta = useMatch(() => "/solid-meta/*");
+
+	createEffect(() => {
+		if (isStart()) {
+			setTitle(SOLID_START_TITLE);
+		} else if (isRouter()) {
+			setTitle(SOLID_ROUTER_TITLE);
+		} else if (isMeta()) {
+			setTitle(SOLID_META_TITLE);
+		} else {
+			setTitle(SOLID_TITLE);
+		}
+	});
+
+	return title;
+}