rework/lightweight #12

Merged
GauthierWebDev merged 106 commits from rework/lightweight into main 2025-04-21 16:27:38 +00:00
6 changed files with 45 additions and 63 deletions
Showing only changes of commit 8321753573 - Show all commits

View File

@ -14,7 +14,6 @@
"fastify": "^5.3.0",
"prismjs": "^1.30.0",
"solid-heroicons": "^3.2.4",
"solid-highlight": "^0.1.26",
"solid-js": "^1.9.5",
"solid-jsx": "^1.1.4",
"solid-mdx": "^0.0.7",
@ -934,8 +933,6 @@
"solid-heroicons": ["solid-heroicons@3.2.4", "", { "dependencies": { "solid-js": "^1.7.6" } }, "sha512-u6BMdFLvkJnvUGYzdFcWp1wvJ4hb9Y1zd3AbZ9D3bUmmiy9jBzNZX+RcqBCI2EKRvdQwAb1UB9bkESfqfhayDg=="],
"solid-highlight": ["solid-highlight@0.1.26", "", { "peerDependencies": { "prismjs": "^1.29.0", "solid-js": "^1.8.0" } }, "sha512-Iw1mi3vE+YCBBBU/+HHc5y8VNULaGXUX4OK2c9TbzegOGCitzW0uNIvb0s3S0KoVv7Uma/KadWHNFXkwZCwPgQ=="],
"solid-js": ["solid-js@1.9.5", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "^1.1.0", "seroval-plugins": "^1.1.0" } }, "sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw=="],
"solid-jsx": ["solid-jsx@1.1.4", "", { "peerDependencies": { "solid-js": ">=1.4.0" } }, "sha512-A4E9cB+wZpHZrXzv3+OWr6zaGS0FjD/UAKqbI38R1JwogjlBXdSGC2PgaIMisnGYKL3oJ55FPLv4QRkENmdbWQ=="],

View File

@ -34,7 +34,7 @@ function LogomarkPaths() {
export function Logo(props: JSX.IntrinsicElements["svg"]) {
return (
<svg view-box="0 0 58 38" {...props}>
<svg viewBox="0 0 58 38" {...props}>
<title>Memento Dev</title>
<LogomarkPaths />
</svg>

View File

@ -1,9 +1,10 @@
import { type Node } from "@markdoc/markdoc";
import type { JSXElement } from "solid-js";
import { TableOfContents } from "@syntax/TableOfContents";
import { TableOfContents } from "@/partials/TableOfContents";
import { PrevNextLinks } from "@/components/PrevNextLinks";
import { collectSections } from "@/lib/sections";
import { DocsHeader } from "@syntax/DocsHeader";
import { usePageContext } from "vike-solid/usePageContext";
import { collectSections } from "@/libs/sections";
import { navigation } from "@/libs/navigation";
import { Prose } from "@/components/Prose";
export function DocsLayout({
@ -12,7 +13,7 @@ export function DocsLayout({
estimatedReadingTime,
nodes,
}: {
children: React.ReactNode;
children: JSXElement;
frontmatter: { title?: string };
estimatedReadingTime?: string;
nodes: Array<Node>;
@ -36,3 +37,40 @@ export function DocsLayout({
</>
);
}
type DocsHeaderProps = {
title?: string;
estimatedReadingTime?: string;
};
export function DocsHeader(props: DocsHeaderProps) {
const { urlPathname } = usePageContext();
const section = navigation.find((section) =>
section.links.find((link) => link.href === urlPathname),
);
if (!props.title && !section) {
return null;
}
return (
<header class="mb-9 space-y-1">
{section && (
<p class="font-display text-sm font-medium text-violet-500">
{section.title}
</p>
)}
{props.title && (
<h1 class="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
{props.title}
</h1>
)}
{/* {props.estimatedReadingTime && (
<p class="text-sm text-slate-500 dark:text-slate-400 inline-flex items-center gap-1">
<ClockIcon class="w-4" /> {props.estimatedReadingTime}
</p>
)} */}
</header>
);
}

View File

@ -1,52 +0,0 @@
import type { JSX } from "solid-js";
import "./tailwind.css";
import { Link } from "@/components/Link";
import logoUrl from "@/assets/logo.svg";
export default function LayoutDefault(props: { children?: JSX.Element }) {
return (
<div class={"flex max-w-5xl m-auto"}>
<Sidebar>
<Logo />
<Link href="/">Welcome</Link>
<Link href="/todo">Todo</Link>
<Link href="/star-wars">Data Fetching</Link>
{""}
</Sidebar>
<Content>{props.children}</Content>
</div>
);
}
function Sidebar(props: { children: JSX.Element }) {
return (
<div
id="sidebar"
class={"p-5 flex flex-col shrink-0 border-r-2 border-r-gray-200"}
>
{props.children}
</div>
);
}
function Content(props: { children: JSX.Element }) {
return (
<div id="page-container">
<div id="page-content" class={"p-5 pb-12 min-h-screen"}>
{props.children}
</div>
</div>
);
}
function Logo() {
return (
<div class={"p-5 mb-2"}>
<a href="/">
<img src={logoUrl} height={64} width={64} alt="logo" />
</a>
</div>
);
}

View File

@ -19,7 +19,6 @@
"fastify": "^5.3.0",
"prismjs": "^1.30.0",
"solid-heroicons": "^3.2.4",
"solid-highlight": "^0.1.26",
"solid-js": "^1.9.5",
"solid-jsx": "^1.1.4",
"solid-mdx": "^0.0.7",

View File

@ -1,7 +1,7 @@
export default function Page() {
return (
<>
<h1 class={"font-bold text-3xl pb-4"}>My Vike app</h1>
<h1>My Vike app</h1>
This page is:
<ul>
<li>Rendered to HTMLs.</li>