Compare commits
4 Commits
8ed5451c37
...
9e27c0bef3
| Author | SHA1 | Date | |
|---|---|---|---|
| 9e27c0bef3 | |||
| da587d3eef | |||
| cd3addd710 | |||
| d2a5bf542c |
BIN
app/assets/logo.afdesign
Normal file
BIN
app/assets/logo.afdesign
Normal file
Binary file not shown.
71
app/assets/logo.svg
Executable file → Normal file
71
app/assets/logo.svg
Executable file → Normal file
@ -1,67 +1,10 @@
|
||||
<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">
|
||||
<?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>
|
||||
<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>
|
||||
<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>
|
||||
<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: 5.8 KiB After Width: | Height: | Size: 1.4 KiB |
@ -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 { 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,3 +1,5 @@
|
||||
import logoUrl from "@/assets/logo.svg";
|
||||
|
||||
/* eslint-disable solid/no-innerhtml */
|
||||
|
||||
// https://vike.dev/Head
|
||||
@ -5,6 +7,8 @@
|
||||
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,9 +11,13 @@ export default {
|
||||
// @ts-ignore
|
||||
Layout,
|
||||
|
||||
lang: "fr",
|
||||
|
||||
// https://vike.dev/head-tags
|
||||
title: "My Vike App",
|
||||
description: "Demo showcasing Vike",
|
||||
title: "Memento Dev",
|
||||
description:
|
||||
"Découvrez des synthèses et ressources open-source dans le développement informatique.",
|
||||
|
||||
htmlAttributes: {
|
||||
class: "h-full antialiased",
|
||||
},
|
||||
@ -21,7 +25,10 @@ export default {
|
||||
class: "flex min-h-full bg-white",
|
||||
},
|
||||
|
||||
image: "/og.webp",
|
||||
|
||||
prerender: true,
|
||||
prefetchStaticAssets: "hover",
|
||||
|
||||
extends: [vikeSolid],
|
||||
} satisfies Config;
|
||||
|
||||
@ -1,9 +1,27 @@
|
||||
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: pageContext.exports.tableOfContents,
|
||||
tableOfContents,
|
||||
};
|
||||
}
|
||||
|
||||
5
app/pages/+title.ts
Normal file
5
app/pages/+title.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import config from "./+config";
|
||||
|
||||
export function title() {
|
||||
return `Synthèses et ressources pour développeurs | ${config.title}`;
|
||||
}
|
||||
5
app/pages/buildTitle.ts
Normal file
5
app/pages/buildTitle.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { title } from "./+title";
|
||||
|
||||
export default function buildTitle(pageTitle?: string) {
|
||||
return pageTitle || title();
|
||||
}
|
||||
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-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>
|
||||
);
|
||||
}
|
||||
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