From b8608c493cf19fbad8abda809a559dfe67673589 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Fri, 11 Apr 2025 11:56:22 +0200
Subject: [PATCH] refactor: Rename SearchResult to SearchResultItem and fix
 types

---
 app/components/syntax/Search.tsx | 15 ++++++++-------
 app/data/docs/react/page.md      |  4 ++--
 app/pages/+title.ts              |  5 +++++
 app/pages/buildTitle.ts          |  7 +++++++
 app/pages/docs/+data.ts          |  6 ++++--
 5 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 app/pages/+title.ts
 create mode 100644 app/pages/buildTitle.ts

diff --git a/app/components/syntax/Search.tsx b/app/components/syntax/Search.tsx
index 26d8241..6f76292 100644
--- a/app/components/syntax/Search.tsx
+++ b/app/components/syntax/Search.tsx
@@ -111,7 +111,7 @@ function HighlightQuery({ text, query }: { text: string; query: string }) {
   );
 }
 
-function SearchResult({
+function SearchResultItem({
   result,
   autocomplete,
   collection,
@@ -187,7 +187,7 @@ function SearchResults({
   return (
     <ul {...autocomplete.getListProps()}>
       {collection.items.map((result) => (
-        <SearchResult
+        <SearchResultItem
           key={result.url}
           result={result}
           autocomplete={autocomplete}
@@ -269,9 +269,9 @@ function SearchDialog({
   setOpen: (open: boolean) => void;
   className?: string;
 }) {
-  let formRef = useRef<React.ElementRef<"form">>(null);
-  let panelRef = useRef<React.ElementRef<"div">>(null);
-  let inputRef = useRef<React.ElementRef<typeof SearchInput>>(null);
+  let formRef = useRef<React.ComponentRef<"form">>(null);
+  let panelRef = useRef<React.ComponentRef<"div">>(null);
+  let inputRef = useRef<React.ComponentRef<typeof SearchInput>>(null);
 
   let close = useCallback(
     (autocomplete: Autocomplete) => {
@@ -352,7 +352,7 @@ function SearchDialog({
 }
 
 function useSearchProps() {
-  let buttonRef = useRef<React.ElementRef<"button">>(null);
+  let buttonRef = useRef<React.ComponentRef<"button">>(null);
   let [open, setOpen] = useState(false);
 
   return {
@@ -379,7 +379,8 @@ export function Search() {
   let { buttonProps, dialogProps } = useSearchProps();
 
   useEffect(() => {
-    setModifierKey(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? "⌘" : "Ctrl ");
+    const platform = navigator.userAgentData?.platform || navigator.platform;
+    setModifierKey(/(Mac|iPhone|iPod|iPad)/i.test(platform) ? "⌘" : "Ctrl ");
   }, []);
 
   return (
diff --git a/app/data/docs/react/page.md b/app/data/docs/react/page.md
index 8baf0aa..1902f6d 100644
--- a/app/data/docs/react/page.md
+++ b/app/data/docs/react/page.md
@@ -1,6 +1,6 @@
 ---
-title: "Introduction à React"
-description: "Parlons un peu de React, ce qu'il est, ce qu'il fait et pourquoi il est si populaire."
+title: Introduction à React
+description: Parlons un peu de React, ce qu'il est, ce qu'il fait et pourquoi il est si populaire.
 tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI)]
 ---
 
diff --git a/app/pages/+title.ts b/app/pages/+title.ts
new file mode 100644
index 0000000..3176684
--- /dev/null
+++ b/app/pages/+title.ts
@@ -0,0 +1,5 @@
+import config from "./+config";
+
+export function title() {
+  return `Synthèses et ressources pour développeurs - ${config.title}`;
+}
diff --git a/app/pages/buildTitle.ts b/app/pages/buildTitle.ts
new file mode 100644
index 0000000..c04b38d
--- /dev/null
+++ b/app/pages/buildTitle.ts
@@ -0,0 +1,7 @@
+import { title } from "./+title";
+import config from "./+config";
+
+export default function buildTitle(pageTitle?: string) {
+  if (!pageTitle) return title();
+  return `${pageTitle} - ${config.title}`;
+}
diff --git a/app/pages/docs/+data.ts b/app/pages/docs/+data.ts
index 9213dc1..c0c3613 100644
--- a/app/pages/docs/+data.ts
+++ b/app/pages/docs/+data.ts
@@ -2,7 +2,7 @@ import type { PageContext } from "vike/types";
 
 import { docsService } from "@/services/DocsService";
 import { useConfig } from "vike-react/useConfig";
-import Markdoc from "@markdoc/markdoc";
+import buildTitle from "@/pages/buildTitle";
 import { render } from "vike/abort";
 
 export type Data = Awaited<ReturnType<typeof data>>;
@@ -18,8 +18,10 @@ export async function data(pageContext: PageContext) {
     throw render(404);
   }
 
+  console.log({ doc });
+
   config({
-    title: doc.title,
+    title: buildTitle(doc.title),
     description: doc.description,
   });