From 81aa2da4a69b259d60e7fd415c4d842988680170 Mon Sep 17 00:00:00 2001 From: GauthierWebDev Date: Sat, 19 Apr 2025 19:52:57 +0200 Subject: [PATCH] fix: translate react props to solid props --- app/components/Button.tsx | 2 +- app/components/Callout.tsx | 21 +++--- app/components/Form.tsx | 4 +- app/components/PrevNextLinks.tsx | 8 +-- app/components/Prose.tsx | 12 ++-- app/components/QuickLinks.tsx | 10 ++- app/icons/LightbulbIcon.tsx | 78 +++++++++++----------- app/icons/PluginsIcon.tsx | 101 ++++++++++++++++------------- app/icons/PresetsIcon.tsx | 72 +++++++++++---------- app/icons/QuestionIcon.tsx | 96 ++++++++++++++------------- app/icons/ThemingIcon.tsx | 104 ++++++++++++++++-------------- app/icons/WarningIcon.tsx | 96 ++++++++++++++------------- app/layouts/DocsLayout.tsx | 30 ++++----- app/layouts/LayoutDefault.tsx | 28 ++++---- app/pages/+config.ts | 9 ++- app/partials/MobileNavigation.tsx | 2 +- app/partials/Navigation.tsx | 28 +++----- app/partials/TableOfContents.tsx | 2 +- 18 files changed, 359 insertions(+), 344 deletions(-) diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 3ba46cb..1b374e0 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -9,7 +9,7 @@ const variantStyles = { secondary: "bg-slate-800 font-medium text-white hover:bg-slate-700 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400", ghost: - "bg-transparent font-medium text-slate-900 dark:text-slate-400 hover:bg-slate-100 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-300/50 active:bg-slate-200", + "bg-transparent font-medium text-slate-900 hover:bg-slate-100 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-300/50 active:bg-slate-200", }; const sizeStyles = { diff --git a/app/components/Callout.tsx b/app/components/Callout.tsx index 5b87c6e..e221ead 100644 --- a/app/components/Callout.tsx +++ b/app/components/Callout.tsx @@ -5,22 +5,19 @@ import clsx from "clsx"; const styles = { note: { - container: - "bg-violet-50 dark:bg-violet-800/60 dark:ring-1 dark:ring-violet-300/10", - title: "text-violet-900 dark:text-violet-400", - body: "text-slate-800 [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:prose-code:text-slate-300", + container: "bg-violet-50", + title: "text-violet-900", + body: "text-slate-800 [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900", }, warning: { - container: - "bg-amber-50 dark:bg-amber-800/60 dark:ring-1 dark:ring-amber-300/10", - title: "text-amber-900 dark:text-amber-500", - body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-slate-700)] dark:prose-code:text-slate-300", + container: "bg-amber-50", + title: "text-amber-900", + body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900", }, question: { - container: - "bg-amber-50 dark:bg-amber-800/60 dark:ring-1 dark:ring-amber-300/10", - title: "text-amber-900 dark:text-amber-500", - body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-slate-700)] dark:prose-code:text-slate-300", + container: "bg-amber-50", + title: "text-amber-900", + body: "text-slate-800 [--tw-prose-underline:var(--color-slate-400)] [--tw-prose-background:var(--color-slate-50)] prose-a:text-slate-900 prose-code:text-slate-900", }, }; diff --git a/app/components/Form.tsx b/app/components/Form.tsx index 6530311..dd04287 100644 --- a/app/components/Form.tsx +++ b/app/components/Form.tsx @@ -42,9 +42,7 @@ export function Toggle(props: ToggleProps) { /> - - {props.label} - + {props.label} ); diff --git a/app/components/PrevNextLinks.tsx b/app/components/PrevNextLinks.tsx index f3a6822..630121e 100644 --- a/app/components/PrevNextLinks.tsx +++ b/app/components/PrevNextLinks.tsx @@ -31,20 +31,20 @@ function PageLink(props: PageLinkProps) { return (
-
+
{props.dir === "next" ? "Suivant" : "Précédent"}

{pageCategory && ( - + {pageCategory.title} )} @@ -89,7 +89,7 @@ export function PrevNextLinks() { if (!nextPage && !previousPage) return null; return ( -

+
{previousPage && } {nextPage && }
diff --git a/app/components/Prose.tsx b/app/components/Prose.tsx index 8789a1c..5444381 100644 --- a/app/components/Prose.tsx +++ b/app/components/Prose.tsx @@ -16,19 +16,17 @@ export function Prose(props: ProseProps) { component={Component} class={clsx( props.class, - "prose max-w-none prose-slate dark:text-slate-400 dark:prose-invert", + "prose max-w-none prose-slate", // headings "prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]", // lead - "prose-lead:text-slate-500 dark:prose-lead:text-slate-400", + "prose-lead:text-slate-500", // links - "prose-a:font-semibold dark:prose-a:text-violet-400", + "prose-a:font-semibold", // link underline - "dark:[--tw-prose-background:var(--color-slate-900)] prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-violet-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-violet-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]", + "prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-violet-300))] prose-a:hover:[--tw-prose-underline-size:6px]", // pre - "prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:ring-1 dark:prose-pre:shadow-none dark:prose-pre:ring-slate-300/10", - // hr - "dark:prose-hr:border-slate-800", + "prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg", )} {...props} /> diff --git a/app/components/QuickLinks.tsx b/app/components/QuickLinks.tsx index 93d8468..36813db 100644 --- a/app/components/QuickLinks.tsx +++ b/app/components/QuickLinks.tsx @@ -25,21 +25,19 @@ type QuickLinkProps = { export function QuickLink(props: QuickLinkProps) { return ( -
-
+
+
-

+

{props.title}

-

- {props.description} -

+

{props.description}

); diff --git a/app/icons/LightbulbIcon.tsx b/app/icons/LightbulbIcon.tsx index 137f02e..12519f9 100644 --- a/app/icons/LightbulbIcon.tsx +++ b/app/icons/LightbulbIcon.tsx @@ -1,39 +1,43 @@ -import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; -import React from "react"; +import type { IconColor } from "@/components/Icon"; -export function LightbulbIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { - return ( - <> - - - - - - - - - - - - - - - ); +import { Gradient } from "@/components/Icon"; + +type GradientProps = { + id: string; + color?: IconColor; +}; + +export function LightbulbIcon(props: GradientProps) { + return ( + <> + + + + + + + + + + ); } diff --git a/app/icons/PluginsIcon.tsx b/app/icons/PluginsIcon.tsx index 5dd5de1..1be3cdd 100644 --- a/app/icons/PluginsIcon.tsx +++ b/app/icons/PluginsIcon.tsx @@ -1,48 +1,57 @@ -import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; -import React from "react"; +import type { IconColor } from "@/components/Icon"; -export function PluginsIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { - return ( - <> - - - - - - - - - - - - - - - - - - - - - - - ); +import { Gradient } from "@/components/Icon"; + +type GradientProps = { + id: string; + color?: IconColor; +}; + +export function PluginsIcon(props: GradientProps) { + return ( + <> + + + + + + + + + + + + + + + + + ); } diff --git a/app/icons/PresetsIcon.tsx b/app/icons/PresetsIcon.tsx index 4342463..f660851 100644 --- a/app/icons/PresetsIcon.tsx +++ b/app/icons/PresetsIcon.tsx @@ -1,36 +1,40 @@ -import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; -import React from "react"; +import type { IconColor } from "@/components/Icon"; -export function PresetsIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { - return ( - <> - - - - - - - - - - - - - - - - - - - ); +import { Gradient } from "@/components/Icon"; + +type GradientProps = { + id: string; + color?: IconColor; +}; + +export function PresetsIcon(props: GradientProps) { + return ( + <> + + + + + + + + + + + + + ); } diff --git a/app/icons/QuestionIcon.tsx b/app/icons/QuestionIcon.tsx index 002f853..303f9bc 100644 --- a/app/icons/QuestionIcon.tsx +++ b/app/icons/QuestionIcon.tsx @@ -1,48 +1,52 @@ -import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; -import React from "react"; +import type { IconColor } from "@/components/Icon"; -export function QuestionIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { - return ( - <> - - - - - - - - - - - - - - - ); +import { Gradient } from "@/components/Icon"; + +type GradientProps = { + id: string; + color?: IconColor; +}; + +export function QuestionIcon(props: GradientProps) { + return ( + <> + + + + + + + + + + ); } diff --git a/app/icons/ThemingIcon.tsx b/app/icons/ThemingIcon.tsx index e68d30c..dd7a433 100644 --- a/app/icons/ThemingIcon.tsx +++ b/app/icons/ThemingIcon.tsx @@ -1,52 +1,56 @@ -import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; -import React from "react"; +import type { IconColor } from "@/components/Icon"; -export function ThemingIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { - return ( - <> - - - - - - - - - - - - - - - - ); +import { Gradient } from "@/components/Icon"; + +type GradientProps = { + id: string; + color?: IconColor; +}; + +export function ThemingIcon(props: GradientProps) { + return ( + <> + + + + + + + + + + + ); } diff --git a/app/icons/WarningIcon.tsx b/app/icons/WarningIcon.tsx index 24e12df..10d7050 100644 --- a/app/icons/WarningIcon.tsx +++ b/app/icons/WarningIcon.tsx @@ -1,48 +1,52 @@ -import { DarkMode, Gradient, LightMode } from "@syntax/Icon"; -import React from "react"; +import type { IconColor } from "@/components/Icon"; -export function WarningIcon({ id, color }: { id: string; color?: React.ComponentProps["color"] }) { - return ( - <> - - - - - - - - - - - - - - - ); +import { Gradient } from "@/components/Icon"; + +type GradientProps = { + id: string; + color?: IconColor; +}; + +export function WarningIcon(props: GradientProps) { + return ( + <> + + + + + + + + + + ); } diff --git a/app/layouts/DocsLayout.tsx b/app/layouts/DocsLayout.tsx index 5f599ba..1cf16de 100644 --- a/app/layouts/DocsLayout.tsx +++ b/app/layouts/DocsLayout.tsx @@ -7,33 +7,31 @@ import { collectSections } from "@/libs/sections"; import { navigation } from "@/libs/navigation"; import { Prose } from "@/components/Prose"; -export function DocsLayout({ - children, - frontmatter: { title }, - estimatedReadingTime, - nodes, -}: { +type DocsLayoutProps = { children: JSXElement; - frontmatter: { title?: string }; + title?: string; + // frontmatter: { title?: string }; estimatedReadingTime?: string; - nodes: Array; -}) { - const tableOfContents = collectSections(nodes); + // nodes: Array; +}; + +export function DocsLayout(props: DocsLayoutProps) { + // const tableOfContents = collectSections(nodes); return ( <>
- {children} + {props.children}
- + {/* */} ); } @@ -62,12 +60,12 @@ export function DocsHeader(props: DocsHeaderProps) {

)} {props.title && ( -

+

{props.title}

)} {/* {props.estimatedReadingTime && ( -

+

{props.estimatedReadingTime}

)} */} diff --git a/app/layouts/LayoutDefault.tsx b/app/layouts/LayoutDefault.tsx index 9a77f50..107c87f 100755 --- a/app/layouts/LayoutDefault.tsx +++ b/app/layouts/LayoutDefault.tsx @@ -15,6 +15,7 @@ import clsx from "clsx"; // import "./style.css"; import "./tailwind.css"; +import { DocsLayout } from "./DocsLayout"; // import "./prism.css"; // import "unfonts.css"; @@ -49,10 +50,7 @@ function Header() { return (
@@ -62,15 +60,15 @@ function Header() {
-
- {/* } /> */} -
+ {/* } /> */} +
@@ -79,7 +77,7 @@ function Header() { class="group" aria-label="GitHub" > - +
@@ -88,7 +86,7 @@ function Header() { function Footer() { return ( -