refactor: Rename SearchResult to SearchResultItem and fix types

This commit is contained in:
Gauthier Daniels 2025-04-11 11:56:22 +02:00
parent 7828846362
commit b8608c493c
5 changed files with 26 additions and 11 deletions

View File

@ -111,7 +111,7 @@ function HighlightQuery({ text, query }: { text: string; query: string }) {
); );
} }
function SearchResult({ function SearchResultItem({
result, result,
autocomplete, autocomplete,
collection, collection,
@ -187,7 +187,7 @@ function SearchResults({
return ( return (
<ul {...autocomplete.getListProps()}> <ul {...autocomplete.getListProps()}>
{collection.items.map((result) => ( {collection.items.map((result) => (
<SearchResult <SearchResultItem
key={result.url} key={result.url}
result={result} result={result}
autocomplete={autocomplete} autocomplete={autocomplete}
@ -269,9 +269,9 @@ function SearchDialog({
setOpen: (open: boolean) => void; setOpen: (open: boolean) => void;
className?: string; className?: string;
}) { }) {
let formRef = useRef<React.ElementRef<"form">>(null); let formRef = useRef<React.ComponentRef<"form">>(null);
let panelRef = useRef<React.ElementRef<"div">>(null); let panelRef = useRef<React.ComponentRef<"div">>(null);
let inputRef = useRef<React.ElementRef<typeof SearchInput>>(null); let inputRef = useRef<React.ComponentRef<typeof SearchInput>>(null);
let close = useCallback( let close = useCallback(
(autocomplete: Autocomplete) => { (autocomplete: Autocomplete) => {
@ -352,7 +352,7 @@ function SearchDialog({
} }
function useSearchProps() { function useSearchProps() {
let buttonRef = useRef<React.ElementRef<"button">>(null); let buttonRef = useRef<React.ComponentRef<"button">>(null);
let [open, setOpen] = useState(false); let [open, setOpen] = useState(false);
return { return {
@ -379,7 +379,8 @@ export function Search() {
let { buttonProps, dialogProps } = useSearchProps(); let { buttonProps, dialogProps } = useSearchProps();
useEffect(() => { 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 ( return (

View File

@ -1,6 +1,6 @@
--- ---
title: "Introduction à React" title: Introduction à React
description: "Parlons un peu de React, ce qu'il est, ce qu'il fait et pourquoi il est si populaire." 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)] tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI)]
--- ---

5
app/pages/+title.ts Normal file
View File

@ -0,0 +1,5 @@
import config from "./+config";
export function title() {
return `Synthèses et ressources pour développeurs - ${config.title}`;
}

7
app/pages/buildTitle.ts Normal file
View File

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

View File

@ -2,7 +2,7 @@ import type { PageContext } from "vike/types";
import { docsService } from "@/services/DocsService"; import { docsService } from "@/services/DocsService";
import { useConfig } from "vike-react/useConfig"; import { useConfig } from "vike-react/useConfig";
import Markdoc from "@markdoc/markdoc"; import buildTitle from "@/pages/buildTitle";
import { render } from "vike/abort"; import { render } from "vike/abort";
export type Data = Awaited<ReturnType<typeof data>>; export type Data = Awaited<ReturnType<typeof data>>;
@ -18,8 +18,10 @@ export async function data(pageContext: PageContext) {
throw render(404); throw render(404);
} }
console.log({ doc });
config({ config({
title: doc.title, title: buildTitle(doc.title),
description: doc.description, description: doc.description,
}); });