Fix logo link

Author: amirhhashemi

src/i18n/dictionaries/en/ui.ts

@@ -1,4 +1,10 @@
 export default {
+	// meta
+	"meta.title.solid_start": "SolidStart Docs",
+	"meta.title.solid_router": "Solid Router Docs",
+	"meta.title.solid_meta": "Solid Meta Docs",
+	"meta.title.solid": "Solid Docs",
+
 	// hero
 	"hero.title": "Effortless UIs with Reactive Precision.",
 	"hero.subtitle": "Solid is a modern JavaScript framework for today's web.",

src/i18n/helpers.ts

@@ -1,21 +1,12 @@
-import { useLocation } from "@solidjs/router";
-import { SUPPORTED_LOCALES } from "./config";
+import { useLocation, useMatch } from "@solidjs/router";
 import { useCurrentRouteMetaData } from "~/utils/route-metadata-helper";
+import { SUPPORTED_LOCALES } from "./config";
 
-export function getLocaleFromPathname(pathname: string) {
-	return pathname.split("/")[1];
-}
-
-export function isValidLocale(
-	locale: string
-): locale is (typeof SUPPORTED_LOCALES)[number] {
-	return SUPPORTED_LOCALES.includes(locale);
-}
-
-export function getValidLocaleFromPathname(pathname: string) {
-	const locale = getLocaleFromPathname(pathname);
-
-	return isValidLocale(locale) ? locale : null;
+export function getCurrentLocale() {
+	const match = useMatch(() => "/:locale?/*", {
+		locale: SUPPORTED_LOCALES,
+	});
+	return match()?.params.project ?? null;
 }
 
 export function getEntryFileName() {

src/i18n/i18n-context.tsx

@@ -1,22 +1,22 @@
-import { useLocation } from "@solidjs/router";
+import { useMatch } from "@solidjs/router";
 import { type JSX, createContext, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { createTranslator } from "./translator";
-import { getValidLocaleFromPathname } from "./helpers";
+import { SUPPORTED_LOCALES } from "./config";
 
 type ProviderProps = { children: JSX.Element };
 
 const initialI18nStore = {
 	get t() {
-		const { pathname } = useLocation();
-		const locale = getValidLocaleFromPathname(pathname);
+		const match = useMatch(() => "/:locale?/*", {
+			locale: SUPPORTED_LOCALES,
+		});
 
-		return createTranslator(locale);
+		return createTranslator(match()?.params.project ?? null);
 	},
 };
 
-export const I18nContext =
-	createContext<typeof initialI18nStore>(initialI18nStore);
+export const I18nContext = createContext(initialI18nStore);
 
 export function I18nProvider(props: ProviderProps) {
 	const [i18n] = createStore(initialI18nStore);

src/solidbase-theme/Layout.tsx

@@ -4,15 +4,14 @@ import { ErrorBoundary } from "solid-js";
 import { Layout } from "~/ui/layout";
 import { NotFound } from "~/ui/not-found";
 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";
+import { Title } from "@solidjs/meta";
+import { useProjectTitle } from "~/ui/use-project";
 
 export default function (props: RouteSectionProps) {
 	useThemeListener();
 	usePace();
-
 	const projectTitle = useProjectTitle();
 
 	return (

src/ui/docs-layout.tsx

@@ -5,7 +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";
+import { useProjectTitle } from "./use-project";
 
 interface DocsLayoutProps {
 	entries: typeof coreEntries;

src/ui/i18n-anchor.tsx

@@ -4,15 +4,14 @@ import {
 	type AnchorProps,
 } from "@solidjs/router";
 import { Match, Switch, splitProps } from "solid-js";
-import { getValidLocaleFromPathname, isExternalURL } from "~/i18n/helpers";
+import { getCurrentLocale, isExternalURL } from "~/i18n/helpers";
 
 export type RouterLinkProps = AnchorProps & {
 	addLocale?: boolean;
 };
 
 export function A(props: RouterLinkProps) {
-	const { pathname } = useLocation();
-	const locale = () => getValidLocaleFromPathname(pathname);
+	const locale = () => getCurrentLocale();
 	const external = () => isExternalURL(props.href);
 
 	const [_, rest] = splitProps(props, ["addLocale"]);

src/ui/layout.tsx

@@ -18,7 +18,7 @@ import { query, createAsync, useMatch } from "@solidjs/router";
 import { DocsLayout } from "./docs-layout";
 import { SidePanel } from "./layout/side-panel";
 import { SUPPORTED_LOCALES } from "~/i18n/config";
-import { getValidLocaleFromPathname } from "~/i18n/helpers";
+import { getCurrentLocale } from "~/i18n/helpers";
 import { useCurrentRouteMetaData } from "~/utils/route-metadata-helper";
 
 const PROJECTS = ["solid-router", "solid-start", "solid-meta"] as const;
@@ -72,7 +72,7 @@ const getDocsMetadata = query(
 
 		const { path } = (isFirstMatch || isI18nOrProject || isCore) as PathMatch;
 
-		const locale = getValidLocaleFromPathname(path);
+		const locale = getCurrentLocale();
 		const project = getProjectFromUrl(path);
 
 		if (project) {

src/ui/layout/language-selector.tsx

@@ -4,7 +4,7 @@ import { Icon } from "solid-heroicons";
 import { language } from "solid-heroicons/solid";
 import { A, useLocation } from "@solidjs/router";
 import { languages } from "~/i18n/dictionaries";
-import { getValidLocaleFromPathname } from "~/i18n/helpers";
+import { getCurrentLocale } from "~/i18n/helpers";
 
 const getLocalizedPath = ({
 	selectedLanguage,
@@ -30,8 +30,7 @@ const languageEntries = Object.entries(languages);
 
 export const LanguageSelector: Component = () => {
 	const location = useLocation();
-	const selectedLanguage =
-		getValidLocaleFromPathname(location.pathname) ?? "en";
+	const selectedLanguage = getCurrentLocale() ?? "en";
 
 	return (
 		<DropdownMenu.Root gutter={10}>

src/ui/layout/main-header.tsx

@@ -11,6 +11,7 @@ import { LanguageSelector } from "./language-selector";
 
 import { useCurrentRouteMetaData } from "~/utils/route-metadata-helper";
 import { clientOnly } from "@solidjs/start";
+import { useProject } from "~/ui/use-project";
 
 const ClientSearch = clientOnly(() =>
 	import("../search").then((m) => ({ default: m.Search }))
@@ -33,9 +34,7 @@ interface NavProps {
 
 export function MainHeader(props: NavProps) {
 	const [isScrolled, setIsScrolled] = createSignal(false);
-	const notSolidCore = useMatch(() => "/:project/*", {
-		project: ["solid-router", "solid-start", "solid-meta"],
-	});
+	const project = useProject();
 	const translatedLocale = useMatch(() => "/:locale/:project/*", {
 		locale: SUPPORTED_LOCALES,
 		project: ["solid-router", "solid-start", "solid-meta"],
@@ -60,6 +59,19 @@ export function MainHeader(props: NavProps) {
 		return useCurrentRouteMetaData();
 	});
 
+	const homePageUrl = createMemo(() => {
+		switch (project()) {
+			case "solid-start":
+				return "/solid-start";
+			case "solid-router":
+				return "/solid-router";
+			case "solid-meta":
+				return "/solid-meta";
+			default:
+				return "/";
+		}
+	});
+
 	return (
 		<header
 			class="sticky top-0 z-50 flex items-center justify-between bg-blue-50/80 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none backdrop-blur"
@@ -74,7 +86,7 @@ export function MainHeader(props: NavProps) {
 					<div class="flex lg:hidden">
 						<MobileNavigation tree={props.tree} />
 					</div>
-					<A href="/" aria-label="Home page" addLocale>
+					<A href={homePageUrl()} aria-label="Home page" addLocale>
 						<Logo class="h-9" />
 					</A>
 				</div>
@@ -86,7 +98,7 @@ export function MainHeader(props: NavProps) {
 							class="text-slate-900 dark:text-slate-200 relative overflow-hidden drop-shadow-[0_35px_35px_rgba(1,1,1,1.75)] px-2"
 							classList={{
 								"border-b-2 border-b-blue-500 dark:bottom-b-blue-500 transition-all duration-250":
-									!notSolidCore() && !translatedLocale(),
+									project() === "solid" && !translatedLocale(),
 							}}
 							addLocale
 						>

src/ui/not-found.tsx

@@ -2,7 +2,7 @@ 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";
+import { useProjectTitle } from "./use-project";
 
 export function NotFound() {
 	const projectTitle = useProjectTitle();