GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: translate react props to solid props

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-19 19:52:57 +02:00
parent 8321753573
commit 81aa2da4a6
18 changed files with 359 additions and 344 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Button.tsx
View File

@ -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 = {

21
app/components/Callout.tsx
View File

@ -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",
},
};

4
app/components/Form.tsx
View File

@ -42,9 +42,7 @@ export function Toggle(props: ToggleProps) {
/>
</span>
<span class="ml-2 text-sm text-slate-700 dark:text-slate-300">
{props.label}
</span>
<span class="ml-2 text-sm text-slate-700">{props.label}</span>
</label>
</div>
);

8
app/components/PrevNextLinks.tsx
View File

@ -31,20 +31,20 @@ function PageLink(props: PageLinkProps) {
return (
<div {...cleanProps(props, "dir", "title")}>
<dt class="font-display text-sm font-medium text-slate-900 dark:text-white">
<dt class="font-display text-sm font-medium text-slate-900">
{props.dir === "next" ? "Suivant" : "Précédent"}
</dt>
<dd class="mt-1">
<Link
href={props.href}
class={clsx(
"flex items-center gap-x-2 text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300",
"flex items-center gap-x-2 text-base font-semibold text-slate-500 hover:text-slate-600",
props.dir === "previous" && "flex-row-reverse",
)}
>
<p class="flex flex-col gap-0">
{pageCategory && (
<span class="text-violet-600 dark:text-violet-400 text-sm mb-1 leading-3">
<span class="text-violet-600 text-sm mb-1 leading-3">
{pageCategory.title}
</span>
)}
@ -89,7 +89,7 @@ export function PrevNextLinks() {
if (!nextPage && !previousPage) return null;
return (
<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6 dark:border-slate-800">
<dl class="mt-12 flex gap-4 border-t border-slate-200 pt-6">
{previousPage && <PageLink dir="previous" {...previousPage} />}
{nextPage && <PageLink class="ml-auto text-right" {...nextPage} />}
</dl>

12
app/components/Prose.tsx
View File

@ -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}
/>

10
app/components/QuickLinks.tsx
View File

@ -25,21 +25,19 @@ type QuickLinkProps = {
export function QuickLink(props: QuickLinkProps) {
return (
<div class="group relative rounded-xl border border-slate-200 dark:border-slate-800">
<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]" />
<div class="group relative rounded-xl border border-slate-200">
<div class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-violet-50)),var(--quick-links-hover-bg,var(--color-violet-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-violet-500))_border-box] group-hover:opacity-100" />
<div class="relative overflow-hidden rounded-xl p-6">
<Icon icon={props.icon} class="h-8 w-8" />
<h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
<h2 class="mt-4 font-display text-base text-slate-900">
<Link href={props.href}>
<span class="absolute -inset-px rounded-xl" />
{props.title}
</Link>
</h2>
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
{props.description}
</p>
<p class="mt-1 text-sm text-slate-700">{props.description}</p>
</div>
</div>
);

78
app/icons/LightbulbIcon.tsx
View File

@ -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<typeof Gradient>["color"] }) {
return (
<>
<defs>
<Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 11)" />
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5001 -19.2498 0 16 5.5)" />
</defs>
<LightMode>
<circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M20 24.995c0-1.855 1.094-3.501 2.427-4.792C24.61 18.087 26 15.07 26 12.231 26 7.133 21.523 3 16 3S6 7.133 6 12.23c0 2.84 1.389 5.857 3.573 7.973C10.906 21.494 12 23.14 12 24.995V27a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.005Z"
className="fill-[var(--icon-background)]"
fillOpacity={0.5}
/>
<path
d="M25 12.23c0 2.536-1.254 5.303-3.269 7.255l1.391 1.436c2.354-2.28 3.878-5.547 3.878-8.69h-2ZM16 4c5.047 0 9 3.759 9 8.23h2C27 6.508 21.998 2 16 2v2Zm-9 8.23C7 7.76 10.953 4 16 4V2C10.002 2 5 6.507 5 12.23h2Zm3.269 7.255C8.254 17.533 7 14.766 7 12.23H5c0 3.143 1.523 6.41 3.877 8.69l1.392-1.436ZM13 27v-2.005h-2V27h2Zm1 1a1 1 0 0 1-1-1h-2a3 3 0 0 0 3 3v-2Zm4 0h-4v2h4v-2Zm1-1a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2Zm0-2.005V27h2v-2.005h-2ZM8.877 20.921C10.132 22.136 11 23.538 11 24.995h2c0-2.253-1.32-4.143-2.731-5.51L8.877 20.92Zm12.854-1.436C20.32 20.852 19 22.742 19 24.995h2c0-1.457.869-2.859 2.122-4.074l-1.391-1.436Z"
className="fill-[var(--icon-foreground)]"
/>
<path
d="M20 26a1 1 0 1 0 0-2v2Zm-8-2a1 1 0 1 0 0 2v-2Zm2 0h-2v2h2v-2Zm1 1V13.5h-2V25h2Zm-5-11.5v1h2v-1h-2Zm3.5 4.5h5v-2h-5v2Zm8.5-3.5v-1h-2v1h2ZM20 24h-2v2h2v-2Zm-2 0h-4v2h4v-2Zm-1-10.5V25h2V13.5h-2Zm2.5-2.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2ZM18.5 18a3.5 3.5 0 0 0 3.5-3.5h-2a1.5 1.5 0 0 1-1.5 1.5v2ZM10 14.5a3.5 3.5 0 0 0 3.5 3.5v-2a1.5 1.5 0 0 1-1.5-1.5h-2Zm2.5-3.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2Z"
className="fill-[var(--icon-foreground)]"
/>
</LightMode>
<DarkMode>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M16 2C10.002 2 5 6.507 5 12.23c0 3.144 1.523 6.411 3.877 8.691.75.727 1.363 1.52 1.734 2.353.185.415.574.726 1.028.726H12a1 1 0 0 0 1-1v-4.5a.5.5 0 0 0-.5-.5A3.5 3.5 0 0 1 9 14.5V14a3 3 0 1 1 6 0v9a1 1 0 1 0 2 0v-9a3 3 0 1 1 6 0v.5a3.5 3.5 0 0 1-3.5 3.5.5.5 0 0 0-.5.5V23a1 1 0 0 0 1 1h.36c.455 0 .844-.311 1.03-.726.37-.833.982-1.626 1.732-2.353 2.354-2.28 3.878-5.547 3.878-8.69C27 6.507 21.998 2 16 2Zm5 25a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1 3 3 0 0 0 3 3h4a3 3 0 0 0 3-3Zm-8-13v1.5a.5.5 0 0 1-.5.5 1.5 1.5 0 0 1-1.5-1.5V14a1 1 0 1 1 2 0Zm6.5 2a.5.5 0 0 1-.5-.5V14a1 1 0 1 1 2 0v.5a1.5 1.5 0 0 1-1.5 1.5Z"
fill={`url(#${id}-gradient-dark)`}
/>
</DarkMode>
</>
);
import { Gradient } from "@/components/Icon";
type GradientProps = {
id: string;
color?: IconColor;
};
export function LightbulbIcon(props: GradientProps) {
return (
<>
<defs>
<Gradient
id={`${props.id}-gradient`}
color={props.color}
gradientTransform="matrix(0 21 -21 0 20 11)"
/>
<Gradient
id={`${props.id}-gradient-dark`}
color={props.color}
gradientTransform="matrix(0 24.5001 -19.2498 0 16 5.5)"
/>
</defs>
<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20 24.995c0-1.855 1.094-3.501 2.427-4.792C24.61 18.087 26 15.07 26 12.231 26 7.133 21.523 3 16 3S6 7.133 6 12.23c0 2.84 1.389 5.857 3.573 7.973C10.906 21.494 12 23.14 12 24.995V27a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-2.005Z"
class="fill-[var(--icon-background)]"
fill-opacity={0.5}
/>
<path
d="M25 12.23c0 2.536-1.254 5.303-3.269 7.255l1.391 1.436c2.354-2.28 3.878-5.547 3.878-8.69h-2ZM16 4c5.047 0 9 3.759 9 8.23h2C27 6.508 21.998 2 16 2v2Zm-9 8.23C7 7.76 10.953 4 16 4V2C10.002 2 5 6.507 5 12.23h2Zm3.269 7.255C8.254 17.533 7 14.766 7 12.23H5c0 3.143 1.523 6.41 3.877 8.69l1.392-1.436ZM13 27v-2.005h-2V27h2Zm1 1a1 1 0 0 1-1-1h-2a3 3 0 0 0 3 3v-2Zm4 0h-4v2h4v-2Zm1-1a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2Zm0-2.005V27h2v-2.005h-2ZM8.877 20.921C10.132 22.136 11 23.538 11 24.995h2c0-2.253-1.32-4.143-2.731-5.51L8.877 20.92Zm12.854-1.436C20.32 20.852 19 22.742 19 24.995h2c0-1.457.869-2.859 2.122-4.074l-1.391-1.436Z"
class="fill-[var(--icon-foreground)]"
/>
<path
d="M20 26a1 1 0 1 0 0-2v2Zm-8-2a1 1 0 1 0 0 2v-2Zm2 0h-2v2h2v-2Zm1 1V13.5h-2V25h2Zm-5-11.5v1h2v-1h-2Zm3.5 4.5h5v-2h-5v2Zm8.5-3.5v-1h-2v1h2ZM20 24h-2v2h2v-2Zm-2 0h-4v2h4v-2Zm-1-10.5V25h2V13.5h-2Zm2.5-2.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2ZM18.5 18a3.5 3.5 0 0 0 3.5-3.5h-2a1.5 1.5 0 0 1-1.5 1.5v2ZM10 14.5a3.5 3.5 0 0 0 3.5 3.5v-2a1.5 1.5 0 0 1-1.5-1.5h-2Zm2.5-3.5a2.5 2.5 0 0 0-2.5 2.5h2a.5.5 0 0 1 .5-.5v-2Zm2.5 2.5a2.5 2.5 0 0 0-2.5-2.5v2a.5.5 0 0 1 .5.5h2Z"
class="fill-[var(--icon-foreground)]"
/>
</>
);
}

101
app/icons/PluginsIcon.tsx
View File

@ -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<typeof Gradient>["color"] }) {
return (
<>
<defs>
<Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 11)" />
<Gradient id={`${id}-gradient-dark-1`} color={color} gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)" />
<Gradient id={`${id}-gradient-dark-2`} color={color} gradientTransform="matrix(0 14 -14 0 16 10)" />
</defs>
<LightMode>
<circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
<g
fillOpacity={0.5}
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M3 9v14l12 6V15L3 9Z" />
<path d="M27 9v14l-12 6V15l12-6Z" />
</g>
<path d="M11 4h8v2l6 3-10 6L5 9l6-3V4Z" fillOpacity={0.5} className="fill-[var(--icon-background)]" />
<g
className="stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M20 5.5 27 9l-12 6L3 9l7-3.5" />
<path d="M20 5c0 1.105-2.239 2-5 2s-5-.895-5-2m10 0c0-1.105-2.239-2-5-2s-5 .895-5 2m10 0v3c0 1.105-2.239 2-5 2s-5-.895-5-2V5" />
</g>
</LightMode>
<DarkMode strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
<path
d="M17.676 3.38a3.887 3.887 0 0 0-3.352 0l-9 4.288C3.907 8.342 3 9.806 3 11.416v9.168c0 1.61.907 3.073 2.324 3.748l9 4.288a3.887 3.887 0 0 0 3.352 0l9-4.288C28.093 23.657 29 22.194 29 20.584v-9.168c0-1.61-.907-3.074-2.324-3.748l-9-4.288Z"
stroke={`url(#${id}-gradient-dark-1)`}
/>
<path
d="M16.406 8.087a.989.989 0 0 0-.812 0l-7 3.598A1.012 1.012 0 0 0 8 12.61v6.78c0 .4.233.762.594.925l7 3.598a.989.989 0 0 0 .812 0l7-3.598c.361-.163.594-.525.594-.925v-6.78c0-.4-.233-.762-.594-.925l-7-3.598Z"
fill={`url(#${id}-gradient-dark-2)`}
stroke={`url(#${id}-gradient-dark-2)`}
/>
</DarkMode>
</>
);
import { Gradient } from "@/components/Icon";
type GradientProps = {
id: string;
color?: IconColor;
};
export function PluginsIcon(props: GradientProps) {
return (
<>
<defs>
<Gradient
id={`${props.id}-gradient`}
color={props.color}
gradientTransform="matrix(0 21 -21 0 20 11)"
/>
<Gradient
id={`${props.id}-gradient-dark-1`}
color={props.color}
gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)"
/>
<Gradient
id={`${props.id}-gradient-dark-2`}
color={props.color}
gradientTransform="matrix(0 14 -14 0 16 10)"
/>
</defs>
<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
<g
fill-opacity={0.5}
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 9v14l12 6V15L3 9Z" />
<path d="M27 9v14l-12 6V15l12-6Z" />
</g>
<path
d="M11 4h8v2l6 3-10 6L5 9l6-3V4Z"
fill-opacity={0.5}
class="fill-[var(--icon-background)]"
/>
<g
class="stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M20 5.5 27 9l-12 6L3 9l7-3.5" />
<path d="M20 5c0 1.105-2.239 2-5 2s-5-.895-5-2m10 0c0-1.105-2.239-2-5-2s-5 .895-5 2m10 0v3c0 1.105-2.239 2-5 2s-5-.895-5-2V5" />
</g>
</>
);
}

72
app/icons/PresetsIcon.tsx
View File

@ -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<typeof Gradient>["color"] }) {
return (
<>
<defs>
<Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 20 3)" />
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)" />
</defs>
<LightMode>
<circle cx={20} cy={12} r={12} fill={`url(#${id}-gradient)`} />
<g
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
fillOpacity={0.5}
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M3 5v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
<path d="M18 17v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V17a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
<path d="M18 5v4a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
<path d="M3 25v2a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
</g>
</LightMode>
<DarkMode fill={`url(#${id}-gradient-dark)`}>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3 17V4a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Zm16 10v-9a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2Zm0-23v5a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-8a1 1 0 0 0-1 1ZM3 28v-3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1Z"
/>
<path d="M2 4v13h2V4H2Zm2-2a2 2 0 0 0-2 2h2V2Zm8 0H4v2h8V2Zm2 2a2 2 0 0 0-2-2v2h2Zm0 13V4h-2v13h2Zm-2 2a2 2 0 0 0 2-2h-2v2Zm-8 0h8v-2H4v2Zm-2-2a2 2 0 0 0 2 2v-2H2Zm16 1v9h2v-9h-2Zm3-3a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1v-2Zm6 0h-6v2h6v-2Zm3 3a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2Zm0 9v-9h-2v9h2Zm-3 3a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2Zm-6 0h6v-2h-6v2Zm-3-3a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1h-2Zm2-18V4h-2v5h2Zm0 0h-2a2 2 0 0 0 2 2V9Zm8 0h-8v2h8V9Zm0 0v2a2 2 0 0 0 2-2h-2Zm0-5v5h2V4h-2Zm0 0h2a2 2 0 0 0-2-2v2Zm-8 0h8V2h-8v2Zm0 0V2a2 2 0 0 0-2 2h2ZM2 25v3h2v-3H2Zm2-2a2 2 0 0 0-2 2h2v-2Zm9 0H4v2h9v-2Zm2 2a2 2 0 0 0-2-2v2h2Zm0 3v-3h-2v3h2Zm-2 2a2 2 0 0 0 2-2h-2v2Zm-9 0h9v-2H4v2Zm-2-2a2 2 0 0 0 2 2v-2H2Z" />
</DarkMode>
</>
);
import { Gradient } from "@/components/Icon";
type GradientProps = {
id: string;
color?: IconColor;
};
export function PresetsIcon(props: GradientProps) {
return (
<>
<defs>
<Gradient
id={`${props.id}-gradient`}
color={props.color}
gradientTransform="matrix(0 21 -21 0 20 3)"
/>
<Gradient
id={`${props.id}-gradient-dark`}
color={props.color}
gradientTransform="matrix(0 22.75 -22.75 0 16 6.25)"
/>
</defs>
<circle cx={20} cy={12} r={12} fill={`url(#${props.id}-gradient)`} />
<g
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
fill-opacity={0.5}
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M3 5v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
<path d="M18 17v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V17a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
<path d="M18 5v4a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-7a2 2 0 0 0-2 2Z" />
<path d="M3 25v2a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2Z" />
</g>
</>
);
}

96
app/icons/QuestionIcon.tsx
View File

@ -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<typeof Gradient>["color"] }) {
return (
<>
<defs>
<Gradient id={`${id}-gradient`} color={color} gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)" />
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
</defs>
<LightMode>
<circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
<path
d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
fillOpacity={0.5}
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="m 16.39 14.617 l 1.179 -3.999 C 17.38 9.304 16.133 9.127 15.469 10.645 C 15.306 11.269 14.71 11.12 14.71 10.537 a 1.66 1.66 5 1 1 3.808 0.217 l -1.5182 5.4314 a 0.602 0.602 5 0 1 -1.1795 -0.1032 Z"
className="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
fillOpacity={0.5}
stroke="currentColor"
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</LightMode>
<DarkMode>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16Zm11.386-4.85a2.66 2.66 0 1 1 5.228 0l-1.039 5.543a1.602 1.602 0 0 1-3.15 0l-1.04-5.543ZM16 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
fill={`url(#${id}-gradient-dark)`}
/>
</DarkMode>
</>
);
import { Gradient } from "@/components/Icon";
type GradientProps = {
id: string;
color?: IconColor;
};
export function QuestionIcon(props: GradientProps) {
return (
<>
<defs>
<Gradient
id={`${props.id}-gradient`}
color={props.color}
gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)"
/>
<Gradient
id={`${props.id}-gradient-dark`}
color={props.color}
gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
/>
</defs>
<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
<path
d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
fill-opacity={0.5}
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="m 16.39 14.617 l 1.179 -3.999 C 17.38 9.304 16.133 9.127 15.469 10.645 C 15.306 11.269 14.71 11.12 14.71 10.537 a 1.66 1.66 5 1 1 3.808 0.217 l -1.5182 5.4314 a 0.602 0.602 5 0 1 -1.1795 -0.1032 Z"
class="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
fill-opacity={0.5}
stroke="currentColor"
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
</>
);
}

104
app/icons/ThemingIcon.tsx
View File

@ -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<typeof Gradient>["color"] }) {
return (
<>
<defs>
<Gradient id={`${id}-gradient`} color={color} gradientTransform="matrix(0 21 -21 0 12 11)" />
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
</defs>
<LightMode>
<circle cx={12} cy={20} r={12} fill={`url(#${id}-gradient)`} />
<path
d="M27 12.13 19.87 5 13 11.87v14.26l14-14Z"
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
fillOpacity={0.5}
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M3 3h10v22a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V3Z"
className="fill-[var(--icon-background)]"
fillOpacity={0.5}
/>
<path
d="M3 9v16a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4V9M3 9V3h10v6M3 9h10M3 15h10M3 21h10"
className="stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M29 29V19h-8.5L13 26c0 1.5-2.5 3-5 3h21Z"
fillOpacity={0.5}
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</LightMode>
<DarkMode>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3 2a1 1 0 0 0-1 1v21a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H3Zm16.752 3.293a1 1 0 0 0-1.593.244l-1.045 2A1 1 0 0 0 17 8v13a1 1 0 0 0 1.71.705l7.999-8.045a1 1 0 0 0-.002-1.412l-6.955-6.955ZM26 18a1 1 0 0 0-.707.293l-10 10A1 1 0 0 0 16 30h13a1 1 0 0 0 1-1V19a1 1 0 0 0-1-1h-3ZM5 18a1 1 0 1 0 0 2h6a1 1 0 1 0 0-2H5Zm-1-5a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Zm1-7a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2H5Z"
fill={`url(#${id}-gradient-dark)`}
/>
</DarkMode>
</>
);
import { Gradient } from "@/components/Icon";
type GradientProps = {
id: string;
color?: IconColor;
};
export function ThemingIcon(props: GradientProps) {
return (
<>
<defs>
<Gradient
id={`${props.id}-gradient`}
color={props.color}
gradientTransform="matrix(0 21 -21 0 12 11)"
/>
<Gradient
id={`${props.id}-gradient-dark`}
color={props.color}
gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
/>
</defs>
<circle cx={12} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
<path
d="M27 12.13 19.87 5 13 11.87v14.26l14-14Z"
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
fill-opacity={0.5}
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M3 3h10v22a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V3Z"
class="fill-[var(--icon-background)]"
fill-opacity={0.5}
/>
<path
d="M3 9v16a4 4 0 0 0 4 4h2a4 4 0 0 0 4-4V9M3 9V3h10v6M3 9h10M3 15h10M3 21h10"
class="stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M29 29V19h-8.5L13 26c0 1.5-2.5 3-5 3h21Z"
fill-opacity={0.5}
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
</>
);
}

96
app/icons/WarningIcon.tsx
View File

@ -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<typeof Gradient>["color"] }) {
return (
<>
<defs>
<Gradient id={`${id}-gradient`} color={color} gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)" />
<Gradient id={`${id}-gradient-dark`} color={color} gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)" />
</defs>
<LightMode>
<circle cx={20} cy={20} r={12} fill={`url(#${id}-gradient)`} />
<path
d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
fillOpacity={0.5}
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="m15.408 16.509-1.04-5.543a1.66 1.66 0 1 1 3.263 0l-1.039 5.543a.602.602 0 0 1-1.184 0Z"
className="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
fillOpacity={0.5}
stroke="currentColor"
className="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
/>
</LightMode>
<DarkMode>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 16C2 8.268 8.268 2 16 2s14 6.268 14 14-6.268 14-14 14S2 23.732 2 16Zm11.386-4.85a2.66 2.66 0 1 1 5.228 0l-1.039 5.543a1.602 1.602 0 0 1-3.15 0l-1.04-5.543ZM16 20a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
fill={`url(#${id}-gradient-dark)`}
/>
</DarkMode>
</>
);
import { Gradient } from "@/components/Icon";
type GradientProps = {
id: string;
color?: IconColor;
};
export function WarningIcon(props: GradientProps) {
return (
<>
<defs>
<Gradient
id={`${props.id}-gradient`}
color={props.color}
gradientTransform="rotate(65.924 1.519 20.92) scale(25.7391)"
/>
<Gradient
id={`${props.id}-gradient-dark`}
color={props.color}
gradientTransform="matrix(0 24.5 -24.5 0 16 5.5)"
/>
</defs>
<circle cx={20} cy={20} r={12} fill={`url(#${props.id}-gradient)`} />
<path
d="M3 16c0 7.18 5.82 13 13 13s13-5.82 13-13S23.18 3 16 3 3 8.82 3 16Z"
fill-opacity={0.5}
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="m15.408 16.509-1.04-5.543a1.66 1.66 0 1 1 3.263 0l-1.039 5.543a.602.602 0 0 1-1.184 0Z"
class="fill-[var(--icon-foreground)] stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M16 23a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
fill-opacity={0.5}
stroke="currentColor"
class="fill-[var(--icon-background)] stroke-[color:var(--icon-foreground)]"
stroke-width={2}
stroke-linecap="round"
stroke-linejoin="round"
/>
</>
);
}

30
app/layouts/DocsLayout.tsx
View File

@ -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<Node>;
}) {
const tableOfContents = collectSections(nodes);
// nodes: Array<Node>;
};
export function DocsLayout(props: DocsLayoutProps) {
// const tableOfContents = collectSections(nodes);
return (
<>
<div class="max-w-2xl min-w-0 flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16 grow">
<article>
<DocsHeader
title={title}
estimatedReadingTime={estimatedReadingTime}
title={props.title}
estimatedReadingTime={props.estimatedReadingTime}
/>
<Prose>{children}</Prose>
<Prose>{props.children}</Prose>
</article>
<PrevNextLinks />
</div>
<TableOfContents tableOfContents={tableOfContents} />
{/* <TableOfContents tableOfContents={tableOfContents} /> */}
</>
);
}
@ -62,12 +60,12 @@ export function DocsHeader(props: DocsHeaderProps) {
</p>
)}
{props.title && (
<h1 class="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
<h1 class="font-display text-3xl tracking-tight text-slate-900">
{props.title}
</h1>
)}
{/* {props.estimatedReadingTime && (
<p class="text-sm text-slate-500 dark:text-slate-400 inline-flex items-center gap-1">
<p class="text-sm text-slate-500 inline-flex items-center gap-1">
<ClockIcon class="w-4" /> {props.estimatedReadingTime}
</p>
)} */}

28
app/layouts/LayoutDefault.tsx
View File

@ -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 (
<header
class={clsx(
"sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8 dark:shadow-none",
isScrolled()
? "dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75"
: "dark:bg-transparent",
"sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8",
)}
>
<div class="mr-6 flex lg:hidden">
@ -62,15 +60,15 @@ function Header() {
<div class="relative flex grow basis-0 items-center">
<Link href="/" aria-label="Home page" class="flex items-center gap-2">
<Logo class="h-9 w-auto" />
<span class="hidden lg:inline text-2xl font-bold -tracking-tight text-slate-900 dark:text-slate-50">
<span class="hidden lg:inline text-2xl font-bold -tracking-tight text-slate-900">
Memento Dev
</span>
</Link>
</div>
<div class="-my-5 mr-6 sm:mr-8 md:mr-0">
{/* <Search fallback={<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700" />} /> */}
<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200 dark:bg-slate-700" />
{/* <Search fallback={<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200" />} /> */}
<div class="h-6 w-6 animate-pulse rounded-full bg-slate-200" />
</div>
<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
@ -79,7 +77,7 @@ function Header() {
class="group"
aria-label="GitHub"
>
<GitHubIcon class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
<GitHubIcon class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500" />
</Link>
</div>
</header>
@ -88,7 +86,7 @@ function Header() {
function Footer() {
return (
<footer class="bg-slate-50 dark:bg-slate-950 text-slate-700 dark:text-slate-200">
<footer class="bg-slate-50 text-slate-700">
<div class="mx-auto w-full flex flex-col max-w-8xl sm:px-2 lg:px-8 xl:px-12 py-8">
<section>
<header class="flex items-center gap-2 mb-2">
@ -103,7 +101,7 @@ function Footer() {
</p>
</section>
<hr class="my-6 border-slate-200 dark:border-slate-600" />
<hr class="my-6 border-slate-200" />
<section>
<header class="flex items-center gap-2">
@ -113,7 +111,7 @@ function Footer() {
</h2>
</header>
<p class="text-sm text-slate-500 dark:text-slate-400">
<p class="text-sm text-slate-500">
Memento Dev est une plateforme open-source, développée par{" "}
<Link href="https://gauthierdaniels.fr" class="font-bold">
Gauthier Daniels
@ -144,14 +142,14 @@ export default function DefaultLayout(props: DefaultLayoutProps) {
<div class="relative mx-auto w-full flex max-w-8xl flex-auto justify-center sm:px-2 lg:px-8 xl:px-12">
<div class="hidden lg:relative lg:block lg:flex-none">
<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800 dark:block" />
<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800 dark:block" />
<div class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50" />
<div class="absolute top-16 right-0 bottom-0 hidden h-12 w-px bg-linear-to-t from-slate-800" />
<div class="absolute top-28 right-0 bottom-0 hidden w-px bg-slate-800" />
<div class="sticky top-[4.75rem] -ml-0.5 h-[calc(100vh-4.75rem)] w-64 overflow-x-hidden overflow-y-auto py-16 pr-8 pl-0.5 xl:w-72 xl:pr-16">
<Navigation />
</div>
</div>
{props.children}
<DocsLayout>{props.children}</DocsLayout>
</div>
<Footer />

9
app/pages/+config.ts
View File

@ -1,18 +1,25 @@
import type { Config } from "vike/types";
import Layout from "@/layouts/LayoutDefault";
import vikeSolid from "vike-solid/config";
import Layout from "../layouts/LayoutDefault.js";
// Default config (can be overridden by pages)
// https://vike.dev/config
export default {
// https://vike.dev/Layout
// @ts-ignore
Layout,
// https://vike.dev/head-tags
title: "My Vike App",
description: "Demo showcasing Vike",
htmlAttributes: {
class: "h-full antialiased",
},
bodyAttributes: {
class: "flex min-h-full bg-white dark:bg-slate-900",
},
prerender: true,

2
app/partials/MobileNavigation.tsx
View File

@ -70,7 +70,7 @@ export function MobileNavigation() {
class="fixed inset-0 z-50 flex items-start overflow-y-auto bg-slate-900/50 pr-10 backdrop-blur-sm lg:hidden"
aria-label="Navigation"
>
<DialogPanel class="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 sm:px-6 dark:bg-slate-900">
<DialogPanel class="min-h-full w-full max-w-xs bg-white px-4 pt-5 pb-12 sm:px-6">
<div class="flex items-center">
<button
type="button"

28
app/partials/Navigation.tsx
View File

@ -27,9 +27,7 @@ function NavigationItem(props: NavigationItemProps) {
<h2
class={clsx(
"font-display font-medium cursor-pointer",
isOpened()
? "text-violet-600 dark:text-violet-200"
: "text-slate-900 dark:text-white ",
isOpened() ? "text-violet-600" : "text-slate-900",
)}
>
<button
@ -54,14 +52,11 @@ function NavigationItem(props: NavigationItemProps) {
{props.section.title}
<span class="text-slate-400 dark:text-slate-500">
{" "}
({props.section.links.length})
</span>
<span class="text-slate-400"> ({props.section.links.length})</span>
</button>
</h2>
{isOpened() && (
<ul class="!mt-0 ml-2 space-y-1 border-l-2 border-slate-100 lg:mt-4 lg:space-y-2 lg:border-slate-200 dark:border-slate-800 mb-4">
<ul class="!mt-0 ml-2 space-y-1 border-l-2 border-slate-100 lg:mt-4 lg:space-y-2 lg:border-slate-200">
<For each={props.section.links}>
{(link) => (
<li class="relative">
@ -139,20 +134,17 @@ function NavigationSubItem(props: NavigationSubItemProps) {
props.link.href !== urlPathname && "before:hidden",
isOpened()
? "text-violet-500 before:bg-violet-500"
: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300",
: "text-slate-500 before:bg-slate-300 hover:text-slate-600 hover:before:block",
)}
>
{props.link.title}
{props.link.subitems.length > 0 && (
<span class="text-slate-400 dark:text-slate-500">
{" "}
({props.link.subitems.length})
</span>
<span class="text-slate-400"> ({props.link.subitems.length})</span>
)}
</Link>
</span>
{props.link.subitems.length > 0 && isOpened() && (
<ul class="ml-4 border-l-2 border-slate-100 space-y-1 lg:space-y-2 lg:border-slate-200 dark:border-slate-800 mb-4">
<ul class="ml-4 border-l-2 border-slate-100 space-y-1 lg:space-y-2 lg:border-slate-200 mb-4">
<For each={props.link.subitems}>
{(subitem) => (
<li class="relative">
@ -163,7 +155,7 @@ function NavigationSubItem(props: NavigationSubItemProps) {
"block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
subitem.href === urlPathname
? "font-semibold text-violet-500 before:bg-violet-500"
: "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300",
: "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block",
)}
>
{subitem.title}
@ -208,7 +200,7 @@ export function Navigation(props: {
<nav class={clsx("text-base lg:text-sm", props.class)}>
<ul class="space-y-4">
<li>
<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
<h2 class="font-display font-bold text-base text-slate-900">
{firstSections[0]?.type}
</h2>
<For each={firstSections}>
@ -224,7 +216,7 @@ export function Navigation(props: {
<For each={Object.entries(filteredSections)}>
{([type, sections]) => (
<li>
<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
<h2 class="font-display font-bold text-base text-slate-900">
{type}
</h2>
@ -241,7 +233,7 @@ export function Navigation(props: {
</For>
<li>
<h2 class="font-display font-bold text-base text-slate-900 dark:text-white">
<h2 class="font-display font-bold text-base text-slate-900">
{lastSections[0]?.type}
</h2>
<For each={lastSections}>

2
app/partials/TableOfContents.tsx
View File

@ -65,7 +65,7 @@ export function TableOfContents(props: TableOfContentsProps) {
<>
<h2
id="on-this-page-title"
class="font-display text-sm font-medium text-slate-900 dark:text-white"
class="font-display text-sm font-medium text-slate-900"
>
Table des matières
</h2>