refactor: Rename SearchResult to SearchResultItem and fix types

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 (

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)]
 ---
 

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}`;
+}

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}`;
+}

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,
   });