rework/lightweight #12
@ -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=="],
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user