From bc4729a5de8cc2b44af8f779add4a833865dc803 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Fri, 18 Apr 2025 11:48:19 +0200 Subject: [PATCH] style: Import React in multiple components --- app/components/syntax/Prose.tsx | 1 + app/components/syntax/QuickLinks.tsx | 1 + app/components/syntax/SSRSnippet.tsx | 2 +- app/components/syntax/Search.tsx | 2 +- app/components/syntax/Snippet.tsx | 1 + app/components/syntax/TableOfContents.tsx | 32 +++++++------------ app/components/syntax/ThemeSelector.tsx | 6 ++-- .../syntax/icons/InstallationIcon.tsx | 1 + app/components/syntax/icons/LightbulbIcon.tsx | 1 + app/components/syntax/icons/PluginsIcon.tsx | 1 + app/components/syntax/icons/PresetsIcon.tsx | 1 + app/components/syntax/icons/QuestionIcon.tsx | 1 + app/components/syntax/icons/ThemingIcon.tsx | 1 + app/components/syntax/icons/WarningIcon.tsx | 1 + app/layouts/LayoutDefault.tsx | 2 +- app/lib/navigation.ts | 9 +++--- app/lib/search.ts | 4 +-- 17 files changed, 35 insertions(+), 32 deletions(-) diff --git a/app/components/syntax/Prose.tsx b/app/components/syntax/Prose.tsx index 01bd70b..3a3e982 100644 --- a/app/components/syntax/Prose.tsx +++ b/app/components/syntax/Prose.tsx @@ -1,3 +1,4 @@ +import React from "react"; import clsx from "clsx"; export function Prose({ diff --git a/app/components/syntax/QuickLinks.tsx b/app/components/syntax/QuickLinks.tsx index ac0b39f..4d6d551 100644 --- a/app/components/syntax/QuickLinks.tsx +++ b/app/components/syntax/QuickLinks.tsx @@ -1,5 +1,6 @@ import { Link } from "@/components/common/Link"; import { Icon } from "@syntax/Icon"; +import React from "react"; export function QuickLinks({ children }: { children: React.ReactNode }) { return
{children}
; diff --git a/app/components/syntax/SSRSnippet.tsx b/app/components/syntax/SSRSnippet.tsx index c623496..876e295 100644 --- a/app/components/syntax/SSRSnippet.tsx +++ b/app/components/syntax/SSRSnippet.tsx @@ -1,7 +1,7 @@ import { Highlight, Prism } from "prism-react-renderer"; import { prismThemes } from "@/data/themes/prism"; +import React, { Fragment, useMemo } from "react"; import { useTheme } from "@/hooks/useTheme"; -import { Fragment, useMemo } from "react"; import clsx from "clsx"; export function SSRSnippet({ diff --git a/app/components/syntax/Search.tsx b/app/components/syntax/Search.tsx index 1bfde89..80c3d5c 100644 --- a/app/components/syntax/Search.tsx +++ b/app/components/syntax/Search.tsx @@ -1,4 +1,4 @@ -import { useId, useState, useEffect, createContext, useContext, Fragment } from "react"; +import React, { useId, useState, useEffect, createContext, useContext, Fragment } from "react"; import { SearchResult } from "@/services/FlexSearchService"; import { Dialog, DialogPanel } from "@headlessui/react"; import { useDebounce } from "@/hooks/useDebounce"; diff --git a/app/components/syntax/Snippet.tsx b/app/components/syntax/Snippet.tsx index 76b58df..c9050de 100644 --- a/app/components/syntax/Snippet.tsx +++ b/app/components/syntax/Snippet.tsx @@ -3,6 +3,7 @@ import type { Data } from "@/pages/docs/+data"; import { clientOnly } from "vike-react/clientOnly"; import { useData } from "vike-react/useData"; import { SSRSnippet } from "./SSRSnippet"; +import React from "react"; const CSRSnippet = clientOnly(() => import("./CSRSnippet")); diff --git a/app/components/syntax/TableOfContents.tsx b/app/components/syntax/TableOfContents.tsx index 4c94268..ff0fa6a 100644 --- a/app/components/syntax/TableOfContents.tsx +++ b/app/components/syntax/TableOfContents.tsx @@ -1,25 +1,23 @@ -"use client"; - -import { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { Link } from "@/components/common/Link"; import clsx from "clsx"; import { type Section, type Subsection } from "@/lib/sections"; export function TableOfContents({ tableOfContents }: { tableOfContents: Array
}) { - let [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id); + const [currentSection, setCurrentSection] = useState(tableOfContents[0]?.id); - let getHeadings = useCallback((tableOfContents: Array
) => { + const getHeadings = useCallback((tableOfContents: Array
) => { return tableOfContents .flatMap((node) => [node.id, ...node.children.map((child) => child.id)]) .map((id) => { - let el = document.getElementById(id); + const el = document.getElementById(id); if (!el) return null; - let style = window.getComputedStyle(el); - let scrollMt = parseFloat(style.scrollMarginTop); + const style = window.getComputedStyle(el); + const scrollMt = parseFloat(style.scrollMarginTop); - let top = window.scrollY + el.getBoundingClientRect().top - scrollMt; + const top = window.scrollY + el.getBoundingClientRect().top - scrollMt; return { id, top }; }) .filter((x): x is { id: string; top: number } => x !== null); @@ -35,11 +33,8 @@ export function TableOfContents({ tableOfContents }: { tableOfContents: Array= heading.top - 10) { - current = heading.id; - } else { - break; - } + if (top < heading.top - 10) break; + current = heading.id; } setCurrentSection(current); } @@ -51,12 +46,9 @@ export function TableOfContents({ tableOfContents }: { tableOfContents: Array -1; } diff --git a/app/components/syntax/ThemeSelector.tsx b/app/components/syntax/ThemeSelector.tsx index a100e94..e067857 100644 --- a/app/components/syntax/ThemeSelector.tsx +++ b/app/components/syntax/ThemeSelector.tsx @@ -1,5 +1,5 @@ import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react"; -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; import { useTheme } from "@/hooks/useTheme"; import clsx from "clsx"; @@ -33,8 +33,8 @@ function DarkIcon(props: React.ComponentPropsWithoutRef<"svg">) { } export function ThemeSelector(props: React.ComponentPropsWithoutRef>) { - let [mounted, setMounted] = useState(false); - let { theme, setTheme } = useTheme(); + const [mounted, setMounted] = useState(false); + const { theme, setTheme } = useTheme(); useEffect(() => { setMounted(true); diff --git a/app/components/syntax/icons/InstallationIcon.tsx b/app/components/syntax/icons/InstallationIcon.tsx index 20c1bc7..f9ed190 100644 --- a/app/components/syntax/icons/InstallationIcon.tsx +++ b/app/components/syntax/icons/InstallationIcon.tsx @@ -1,4 +1,5 @@ import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; +import React from "react"; export function InstallationIcon({ id, diff --git a/app/components/syntax/icons/LightbulbIcon.tsx b/app/components/syntax/icons/LightbulbIcon.tsx index f0e2439..137f02e 100644 --- a/app/components/syntax/icons/LightbulbIcon.tsx +++ b/app/components/syntax/icons/LightbulbIcon.tsx @@ -1,4 +1,5 @@ import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; +import React from "react"; export function LightbulbIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { return ( diff --git a/app/components/syntax/icons/PluginsIcon.tsx b/app/components/syntax/icons/PluginsIcon.tsx index 4797471..5dd5de1 100644 --- a/app/components/syntax/icons/PluginsIcon.tsx +++ b/app/components/syntax/icons/PluginsIcon.tsx @@ -1,4 +1,5 @@ import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; +import React from "react"; export function PluginsIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { return ( diff --git a/app/components/syntax/icons/PresetsIcon.tsx b/app/components/syntax/icons/PresetsIcon.tsx index d6e29b2..4342463 100644 --- a/app/components/syntax/icons/PresetsIcon.tsx +++ b/app/components/syntax/icons/PresetsIcon.tsx @@ -1,4 +1,5 @@ import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; +import React from "react"; export function PresetsIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { return ( diff --git a/app/components/syntax/icons/QuestionIcon.tsx b/app/components/syntax/icons/QuestionIcon.tsx index 2f89f4c..002f853 100644 --- a/app/components/syntax/icons/QuestionIcon.tsx +++ b/app/components/syntax/icons/QuestionIcon.tsx @@ -1,4 +1,5 @@ import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; +import React from "react"; export function QuestionIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { return ( diff --git a/app/components/syntax/icons/ThemingIcon.tsx b/app/components/syntax/icons/ThemingIcon.tsx index 15a6960..e68d30c 100644 --- a/app/components/syntax/icons/ThemingIcon.tsx +++ b/app/components/syntax/icons/ThemingIcon.tsx @@ -1,4 +1,5 @@ import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; +import React from "react"; export function ThemingIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { return ( diff --git a/app/components/syntax/icons/WarningIcon.tsx b/app/components/syntax/icons/WarningIcon.tsx index 091536f..24e12df 100644 --- a/app/components/syntax/icons/WarningIcon.tsx +++ b/app/components/syntax/icons/WarningIcon.tsx @@ -1,4 +1,5 @@ import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; +import React from "react"; export function WarningIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { return ( diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx index 24227b3..b7c9760 100644 --- a/app/layouts/LayoutDefault.tsx +++ b/app/layouts/LayoutDefault.tsx @@ -3,10 +3,10 @@ import { usePageContext } from "vike-react/usePageContext"; import { ThemeProvider } from "@/providers/ThemeProvider"; import { ThemeSelector } from "@syntax/ThemeSelector"; import { clientOnly } from "vike-react/clientOnly"; +import React, { useEffect, useState } from "react"; import { ToastContainer } from "react-toastify"; import { Navigation } from "@syntax/Navigation"; import { Link } from "@/components/common/Link"; -import { useEffect, useState } from "react"; import { Hero } from "@syntax/Hero"; import { Logo } from "@syntax/Logo"; import clsx from "clsx"; diff --git a/app/lib/navigation.ts b/app/lib/navigation.ts index b3e4200..c584b75 100644 --- a/app/lib/navigation.ts +++ b/app/lib/navigation.ts @@ -119,16 +119,17 @@ export const navigation: NavigationSection[] = [ }, ]; +export function doesLinkSubitemExist(link: NavigationLink, subitemHref: string): boolean { + return link.subitems.some((subitem) => subitem.href === subitemHref); +} + export function findNavigationLink(namespace: string, href: string): NavigationLink | undefined { const currentUrl = `/${namespace}/${href}`.replace(/\/+/g, "/").replace(/\/$/, ""); const foundLink = navigation .flatMap((section) => section.links) .find((link) => { - link.href === currentUrl || - link.subitems.some((subitem) => { - subitem.href === currentUrl; - }); + return link.href === currentUrl || doesLinkSubitemExist(link, currentUrl); }); return foundLink; diff --git a/app/lib/search.ts b/app/lib/search.ts index bb3ad9e..d56e1e9 100644 --- a/app/lib/search.ts +++ b/app/lib/search.ts @@ -50,8 +50,8 @@ function extractSections(node: Node, sections: Section[], isRoot: boolean = true if (node.type === "heading" || node.type === "paragraph") { const content = toString(node).trim(); - if (node.type === "heading" && node.attributes?.level! <= 2) { - let hash = node.attributes?.id ?? slugify(content); + if (node.attributes?.level && node.type === "heading" && node.attributes.level <= 2) { + const hash = node.attributes?.id ?? slugify(content); sections.push({ content, hash, subsections: [] }); } else { sections[sections.length - 1].subsections.push(content);