Compare commits
No commits in common. "9e27c0bef3b291214bdac3efbcc7dce6d73556ae" and "8ed5451c37a473a15b29b6a5502581bceaa81c07" have entirely different histories.
9e27c0bef3
...
8ed5451c37
Binary file not shown.
75
app/assets/logo.svg
Normal file → Executable file
75
app/assets/logo.svg
Normal file → Executable file
@ -1,10 +1,67 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 57 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(-1.76727,0,0,1.76727,49.1089,-3.53454)">
|
||||
<path d="M16.161,18.989L20.49,23.32L21.9,21.91L2.1,2.1L0.69,3.51L2.714,5.535L-4.085,11.253L-4.085,13.054L3.185,19.167L4.629,17.337L-1.61,12.165L4.397,7.219L9.588,12.412L6,16L6.01,16.01L6,16.01L6,22L18,22L18,20.83L16.161,18.989ZM14.417,17.244L16,18.83L16,20L8,20L8,16.5L10.837,13.663L14.417,17.244ZM8,4L16,4L16,7.5L13.16,10.34L14.41,11.59L18,8.01L17.99,8L18,8L18,2L6,2L6,3.17L8,5.17L8,4ZM25.294,12.164L19.071,17.34L20.542,19.164L27.788,13.075L27.788,11.274L20.597,5.22L19.158,7.075L25.294,12.164Z" style="fill:url(#_Linear1);"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(12.792,-21.32,-21.32,-12.792,5.208,23.32)"><stop offset="0" style="stop-color:rgb(43,127,255);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(142,81,255);stop-opacity:1"/></linearGradient>
|
||||
</defs>
|
||||
<svg class="hammer" width="41.217" height="41.217" version="1.1" viewBox="-50 -50 41.217 41.217" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<mask id="mask111">
|
||||
<rect x="-19.21" y="-25.7" width="46.217" height="41.217" fill="url(#linearGradient115)"/>
|
||||
</mask>
|
||||
<linearGradient id="linearGradient115" x1="-25.395" x2="-25.395" y1="-9.3005" y2="-18.03" gradientTransform="matrix(1.0589 0 0 .94436 30.79 24.3)" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0"/>
|
||||
<stop stop-color="#fff" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-33.29,-24.3)" mask="url(#mask111)">
|
||||
<g stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m-8.511-10.449 1.126 4.064 2.707-2.765z" fill="#ababab"/>
|
||||
<path d="m-2.273-24.496-6.238 14.047 3.833 1.299 6.238-14.048z" fill="#949494"/>
|
||||
<path d="m-2.273-24.496 3.465-1.204.368 2.502z" fill="#ababab"/>
|
||||
<path d="m17.511 4.674-2.707 2.766-22.189-13.825 2.707-2.765z" fill="#949494"/>
|
||||
</g>
|
||||
<g stroke="#878787">
|
||||
<path d="m-9.045 20.369-1.169 2.634" stroke-width="9.6"/>
|
||||
<path d="m-12.418 23.191c-1.85-1.153-2.326-2.132-1.086-2.238 1.239-.106 3.642.709 5.493 1.862s2.326 2.132 1.087 2.238c-1.24.106-3.643-.709-5.494-1.862" fill="#878787" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="m-11.248 20.557c1.851 1.153 4.254 1.968 5.493 1.862 1.24-.106.764-1.085-1.086-2.238-1.851-1.153-4.254-1.968-5.494-1.862-1.239.106-.764 1.085 1.087 2.238" fill="#878787" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<g stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m-16.71-9.748 8.199-.701 1.126 4.064-8.199.701z" fill="#949494"/>
|
||||
<path d="m23.749-9.373-6.238 14.047-22.189-13.824 6.238-14.048z" fill="#757575"/>
|
||||
<path d="m10.271-16.073 3.751 3.534c.062.058.083.156.052.238l-1.95 5.128c-.046.121-.18.153-.268.065l-1.024-1.03c-.095-.096-.242-.048-.275.091l-.516 2.152c-.034.145-.191.19-.284.082 0 0-.606-.696-.606-.696-.094-.108-.25-.063-.285.082l-.803 3.384c-.05.212-.317.178-.336-.043l-.014-.147s.058-9.892.058-9.892c.001-.165.165-.253.277-.148l1.077 1.009c.101.095.25.034.274-.111l.597-3.587c.025-.146.174-.206.275-.111z" fill="#fbbf28" stroke="#fbbf28" stroke-width=".6"/>
|
||||
</g>
|
||||
<g stroke="#808080">
|
||||
<path d="m-8.362 18.833-.39.878" stroke-width="9.1"/>
|
||||
<path d="m-10.956 19.899c-1.85-1.153-2.326-2.132-1.086-2.238 1.239-.106 3.642.708 5.493 1.861s2.326 2.132 1.087 2.238c-1.24.106-3.643-.708-5.494-1.861" fill="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
|
||||
<path d="m-10.566 19.021c1.851 1.153 4.254 1.967 5.494 1.861 1.239-.106.764-1.085-1.087-2.238s-4.254-1.967-5.494-1.861c-1.239.106-.764 1.085 1.087 2.238" fill="#808080" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
|
||||
</g>
|
||||
<path d="m-16.71-9.748 8.199-.701 6.238-14.047-8.199.701z" fill="#757575" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="m-1.754 3.951-6.511 14.662" stroke="#91512b" stroke-width="8.6"/>
|
||||
<g stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m-10.468 18.801c-1.851-1.153-2.327-2.132-1.087-2.238 1.239-.106 3.643.709 5.493 1.862 1.851 1.153 2.327 2.132 1.087 2.238-1.239.106-3.643-.708-5.493-1.862" fill="#91512b"/>
|
||||
<path d="m-3.958 4.139c1.851 1.153 4.254 1.968 5.494 1.862 1.239-.106.764-1.086-1.087-2.239s-4.254-1.967-5.493-1.861c-1.24.106-.764 1.085 1.086 2.238" fill="#91512b"/>
|
||||
<path d="m1.192-25.7.368 2.502 22.189 13.825-.368-2.503z" fill="#949494"/>
|
||||
<path d="m-10.472-23.795 8.199-.701 3.465-1.204-8.199.701z" fill="#949494"/>
|
||||
</g>
|
||||
<g stroke="#6e6e6e">
|
||||
<path d="m-.487 1.097-1.17 2.634" stroke-width="9.1"/>
|
||||
<path d="m-3.86 3.92c-1.851-1.153-2.326-2.132-1.087-2.238s3.643.708 5.493 1.861c1.851 1.153 2.327 2.132 1.087 2.238-1.239.106-3.643-.708-5.493-1.861" fill="#6e6e6e" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
|
||||
<path d="m-2.691 1.286c1.851 1.153 4.254 1.967 5.494 1.861 1.239-.106.764-1.085-1.087-2.238s-4.254-1.967-5.493-1.861c-1.24.106-.764 1.085 1.086 2.238" fill="#6e6e6e" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5"/>
|
||||
</g>
|
||||
<g stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m18.269 6.236-3.465 1.204 2.707-2.766z" fill="#ababab"/>
|
||||
<path d="m14.804 7.44-8.199.701-22.189-13.825 8.199-.701z" fill="#757575"/>
|
||||
<path d="m-16.71-9.748 1.126 4.064-.367-2.502z" fill="#ababab"/>
|
||||
<path d="m24.507-7.812-6.238 14.048-.758-1.562 6.238-14.047z" fill="#949494"/>
|
||||
<path d="m-10.472-23.795-6.238 14.047.759 1.562 6.237-14.048z" fill="#949494"/>
|
||||
<path d="m24.507-7.812-1.126-4.064.368 2.503z" fill="#ababab"/>
|
||||
<path d="m23.381-11.876-8.199.701-22.189-13.824 8.199-.701z" fill="#757575"/>
|
||||
<path d="m-10.472-23.795 3.465-1.204-2.707 2.765z" fill="#ababab"/>
|
||||
<path d="m18.269 6.236-8.199.701-3.465 1.204 8.199-.701z" fill="#949494"/>
|
||||
<path d="m-15.951-8.186.367 2.502 22.189 13.825-.367-2.503z" fill="#949494"/>
|
||||
<path d="m18.269 6.236-8.199.701 6.238-14.048 8.199-.701z" fill="#757575"/>
|
||||
<path d="m-9.714-22.234-6.237 14.048 22.189 13.824 6.237-14.047z" fill="#757575"/>
|
||||
<path d="m2.545-12.79-4.583-1.659c-.076-.027-.156.008-.195.085 0 0-2.463 4.808-2.463 4.808-.058.114-.005.263.107.298l1.296.416c.122.039.171.21.093.321 0 0-1.205 1.722-1.205 1.722-.081.116-.024.294.105.325l.827.196c.128.031.186.209.104.325 0 0-1.899 2.701-1.899 2.701-.118.169.056.41.22.304l.11-.07 6.849-5.661c.115-.095.083-.304-.054-.354l-1.312-.48c-.123-.045-.165-.224-.078-.331 0 0 2.157-2.615 2.157-2.615.087-.106.045-.286-.079-.331z" fill="#fbbf28" stroke="#fbbf28" stroke-width=".6"/>
|
||||
<path d="m24.507-7.812-8.199.701-1.126-4.064 8.199-.701z" fill="#949494"/>
|
||||
<path d="m15.182-11.175-2.707 2.766-22.189-13.825 2.707-2.765z" fill="#949494"/>
|
||||
<path d="m10.07 6.937-3.465 1.204-.367-2.503z" fill="#ababab"/>
|
||||
<path d="m16.308-7.111-6.238 14.048-3.832-1.299 6.237-14.047z" fill="#949494"/>
|
||||
<path d="m16.308-7.111-1.126-4.064-2.707 2.766z" fill="#ababab"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 5.8 KiB |
@ -1,15 +1,128 @@
|
||||
import type { JSXElement } from "solid-js";
|
||||
import type { JSX, JSXElement } from "solid-js";
|
||||
|
||||
// import { CookiesContainer } from "@/components/common/Cookies";
|
||||
import { MobileNavigation } from "@/partials/MobileNavigation";
|
||||
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 { Navigation } from "@/partials/Navigation";
|
||||
import { Header } from "@/partials/Header";
|
||||
import { Footer } from "@/partials/Footer";
|
||||
import { DocsLayout } from "./DocsLayout";
|
||||
import { Link } from "@/components/Link";
|
||||
import { Logo } from "@/components/Logo";
|
||||
import { Toaster } from "solid-toast";
|
||||
import clsx from "clsx";
|
||||
|
||||
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 = {
|
||||
children: JSXElement;
|
||||
};
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import logoUrl from "@/assets/logo.svg";
|
||||
|
||||
/* eslint-disable solid/no-innerhtml */
|
||||
|
||||
// https://vike.dev/Head
|
||||
@ -7,8 +5,6 @@ import logoUrl from "@/assets/logo.svg";
|
||||
export default function HeadDefault() {
|
||||
return (
|
||||
<>
|
||||
<link rel="icon" href={logoUrl} />
|
||||
|
||||
<script
|
||||
async
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.PUBLIC_ENV__GOOGLE_ANALYTICS}`}
|
||||
|
||||
@ -11,13 +11,9 @@ export default {
|
||||
// @ts-ignore
|
||||
Layout,
|
||||
|
||||
lang: "fr",
|
||||
|
||||
// https://vike.dev/head-tags
|
||||
title: "Memento Dev",
|
||||
description:
|
||||
"Découvrez des synthèses et ressources open-source dans le développement informatique.",
|
||||
|
||||
title: "My Vike App",
|
||||
description: "Demo showcasing Vike",
|
||||
htmlAttributes: {
|
||||
class: "h-full antialiased",
|
||||
},
|
||||
@ -25,10 +21,7 @@ export default {
|
||||
class: "flex min-h-full bg-white",
|
||||
},
|
||||
|
||||
image: "/og.webp",
|
||||
|
||||
prerender: true,
|
||||
prefetchStaticAssets: "hover",
|
||||
|
||||
extends: [vikeSolid],
|
||||
} satisfies Config;
|
||||
|
||||
@ -1,27 +1,9 @@
|
||||
import type { PageContext } from "vike/types";
|
||||
|
||||
import { useConfig } from "vike-solid/useConfig";
|
||||
import buildTitle from "./buildTitle";
|
||||
|
||||
export type Data = Awaited<ReturnType<typeof data>>;
|
||||
|
||||
export async function data(pageContext: PageContext) {
|
||||
const config = useConfig();
|
||||
|
||||
const {
|
||||
exports: { tableOfContents, frontmatter },
|
||||
urlParsed,
|
||||
} = pageContext;
|
||||
const isRoot = urlParsed.pathname === "/";
|
||||
|
||||
console.log({ isRoot, urlParsed });
|
||||
|
||||
config({
|
||||
title: buildTitle(isRoot ? undefined : frontmatter?.title),
|
||||
description: frontmatter?.description,
|
||||
});
|
||||
|
||||
return {
|
||||
tableOfContents,
|
||||
tableOfContents: pageContext.exports.tableOfContents,
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import config from "./+config";
|
||||
|
||||
export function title() {
|
||||
return `Synthèses et ressources pour développeurs | ${config.title}`;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
import { title } from "./+title";
|
||||
|
||||
export default function buildTitle(pageTitle?: string) {
|
||||
return pageTitle || title();
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
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-6 lg:px-8 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>
|
||||
);
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
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