rework/lightweight #12
@ -1,128 +1,15 @@
|
|||||||
import type { JSX, JSXElement } from "solid-js";
|
import type { JSXElement } from "solid-js";
|
||||||
|
|
||||||
// import { CookiesContainer } from "@/components/common/Cookies";
|
|
||||||
import { MobileNavigation } from "@/partials/MobileNavigation";
|
|
||||||
import { usePageContext } from "vike-solid/usePageContext";
|
import { usePageContext } from "vike-solid/usePageContext";
|
||||||
// import { clientOnly } from "vike-solid/clientOnly";
|
|
||||||
import { Search } from "@/components/Search";
|
|
||||||
import { createEffect, createSignal } from "solid-js";
|
|
||||||
import { HeroSection } from "@/partials/HeroSection";
|
import { HeroSection } from "@/partials/HeroSection";
|
||||||
import { Navigation } from "@/partials/Navigation";
|
import { Navigation } from "@/partials/Navigation";
|
||||||
|
import { Header } from "@/partials/Header";
|
||||||
|
import { Footer } from "@/partials/Footer";
|
||||||
import { DocsLayout } from "./DocsLayout";
|
import { DocsLayout } from "./DocsLayout";
|
||||||
import { Link } from "@/components/Link";
|
|
||||||
import { Logo } from "@/components/Logo";
|
|
||||||
import { Toaster } from "solid-toast";
|
import { Toaster } from "solid-toast";
|
||||||
import clsx from "clsx";
|
|
||||||
|
|
||||||
import "./tailwind.css";
|
import "./tailwind.css";
|
||||||
|
|
||||||
// const Search = clientOnly(() =>
|
|
||||||
// import("@/components/Search").then((module) => module.Search),
|
|
||||||
// );
|
|
||||||
|
|
||||||
function GitHubIcon(props: JSX.IntrinsicElements["svg"]) {
|
|
||||||
return (
|
|
||||||
<svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
|
|
||||||
<path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" />
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Header() {
|
|
||||||
const [isScrolled, setIsScrolled] = createSignal(false);
|
|
||||||
|
|
||||||
createEffect(() => {
|
|
||||||
function onScroll() {
|
|
||||||
setIsScrolled(window.scrollY > 0);
|
|
||||||
}
|
|
||||||
onScroll();
|
|
||||||
window.addEventListener("scroll", onScroll, { passive: true });
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener("scroll", onScroll);
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
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",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<div class="mr-6 flex lg:hidden">
|
|
||||||
<MobileNavigation />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
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" />
|
|
||||||
// }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
|
|
||||||
<Link
|
|
||||||
href="https://github.com/GauthierWebDev/memento-dev"
|
|
||||||
class="group"
|
|
||||||
aria-label="GitHub"
|
|
||||||
>
|
|
||||||
<GitHubIcon class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Footer() {
|
|
||||||
return (
|
|
||||||
<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">
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-2 mb-2">
|
|
||||||
<Logo class="h-8 w-auto" />
|
|
||||||
<strong class="font-display text-2xl">Memento Dev</strong>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Plateforme de ressources et documentations synthétiques et concises,
|
|
||||||
conçue pour les développeurs ou passionnés de l‘informatique
|
|
||||||
en quête de savoir.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr class="my-6 border-slate-200" />
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<strong class="font-display">
|
|
||||||
© 2022 - {new Date().getFullYear()} Memento Dev. Tous droits
|
|
||||||
réservés
|
|
||||||
</strong>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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
|
|
||||||
</Link>
|
|
||||||
, soutenue et maintenue par une communauté de contributeurs
|
|
||||||
passionnés.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
type DefaultLayoutProps = {
|
type DefaultLayoutProps = {
|
||||||
children: JSXElement;
|
children: JSXElement;
|
||||||
};
|
};
|
||||||
|
|||||||
43
app/partials/Footer.tsx
Normal file
43
app/partials/Footer.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import { Logo } from "@/components/Logo";
|
||||||
|
import { Link } from "@/components/Link";
|
||||||
|
|
||||||
|
export function Footer() {
|
||||||
|
return (
|
||||||
|
<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">
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2 mb-2">
|
||||||
|
<Logo class="h-8 w-auto" />
|
||||||
|
<strong class="font-display text-2xl">Memento Dev</strong>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Plateforme de ressources et documentations synthétiques et concises,
|
||||||
|
conçue pour les développeurs ou passionnés de l‘informatique
|
||||||
|
en quête de savoir.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="my-6 border-slate-200" />
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<strong class="font-display">
|
||||||
|
© 2022 - {new Date().getFullYear()} Memento Dev. Tous droits
|
||||||
|
réservés
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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
|
||||||
|
</Link>
|
||||||
|
, soutenue et maintenue par une communauté de contributeurs
|
||||||
|
passionnés.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
70
app/partials/Header.tsx
Normal file
70
app/partials/Header.tsx
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import type { JSX } from "solid-js";
|
||||||
|
|
||||||
|
import { MobileNavigation } from "@/partials/MobileNavigation";
|
||||||
|
import { createEffect, createSignal } from "solid-js";
|
||||||
|
import { Search } from "@/components/Search";
|
||||||
|
import { Link } from "@/components/Link";
|
||||||
|
import { Logo } from "@/components/Logo";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
function GitHubIcon(props: JSX.IntrinsicElements["svg"]) {
|
||||||
|
return (
|
||||||
|
<svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
|
||||||
|
<path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Header() {
|
||||||
|
const [isScrolled, setIsScrolled] = createSignal(false);
|
||||||
|
|
||||||
|
createEffect(() => {
|
||||||
|
function onScroll() {
|
||||||
|
setIsScrolled(window.scrollY > 0);
|
||||||
|
}
|
||||||
|
onScroll();
|
||||||
|
window.addEventListener("scroll", onScroll, { passive: true });
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("scroll", onScroll);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
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",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div class="mr-6 flex lg:hidden">
|
||||||
|
<MobileNavigation />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
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" />
|
||||||
|
// }
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
|
||||||
|
<Link
|
||||||
|
href="https://github.com/GauthierWebDev/memento-dev"
|
||||||
|
class="group"
|
||||||
|
aria-label="GitHub"
|
||||||
|
>
|
||||||
|
<GitHubIcon class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user