@anywayseo/tools 5.5.0 → 5.7.0

package/dist/layout/index.mjs

@@ -0,0 +1,598 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Box, Divider, AbsoluteCenter, useColorModeValue, Text, SimpleGrid, Flex, Menu, MenuButton, Button, HStack, Icon, MenuList, MenuItem, Popover, PopoverTrigger, PopoverContent, List, ListItem, Stack, Collapse, useDisclosure, IconButton, Heading } from "@chakra-ui/react";
+import { useTranslation } from "react-i18next";
+import "@mdx-js/react";
+import { L as Link, a as useSiteContext, u as usePageContext } from "../index-ksqN4RPm.mjs";
+import "../index-BJRvnR8Q.mjs";
+import "../index-CVN8I7r9.mjs";
+import "react-medium-image-zoom";
+import { useMemo, forwardRef, useState, useEffect } from "react";
+import { a as Container, c as Logo, d as SocialNetworks, L as LinkButton } from "../index-Lln67Kfn.mjs";
+import { ChevronDownIcon, ChevronRightIcon, CloseIcon, HamburgerIcon, ChevronUpIcon } from "@chakra-ui/icons";
+import "i18next";
+import "react-markdown";
+import { g as getCurrentYear } from "../index-C7z5qqm_.mjs";
+import { b as buildPath } from "../index-Bph7a3PR.mjs";
+const Content = ({ children }) => {
+  return /* @__PURE__ */ jsx(Box, { as: "section", py: 4, children: /* @__PURE__ */ jsx(Container, { children }) });
+};
+const Brand$1 = ({ brand }) => {
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", my: 2, py: 8, children: [
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(AbsoluteCenter, { display: "flex", bgColor: useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsx(Link, { to: "/", children: brand }) })
+  ] });
+};
+const Copyright = () => {
+  const { metadata } = useSiteContext();
+  const { t } = useTranslation("footer");
+  const siteName = metadata.name;
+  const lang = metadata.lang;
+  return /* @__PURE__ */ jsx(Text, { as: "small", colorScheme: "gray", display: "flex", align: "center", justifyContent: "center", children: t("copyright", { year: getCurrentYear(lang), siteName }) });
+};
+const Disclaimer = () => {
+  const { metadata } = useSiteContext();
+  const { t } = useTranslation("footer");
+  const siteName = metadata.name;
+  return /* @__PURE__ */ jsxs(Text, { as: "small", colorScheme: "gray", fontSize: "sm", children: [
+    /* @__PURE__ */ jsx(Text, { as: "span", fontWeight: "bold", color: "red.600", children: t("disclaimer.title") }),
+    t("disclaimer.description", { siteName })
+  ] });
+};
+const Extra = ({ children }) => {
+  return /* @__PURE__ */ jsx(Box, { as: "section", my: 2, children });
+};
+const Navigation$1 = ({ menu }) => {
+  return /* @__PURE__ */ jsx(
+    SimpleGrid,
+    {
+      as: "ul",
+      columns: { base: 1, sm: 2, md: 4 },
+      mt: 4,
+      mb: 6,
+      p: 0,
+      spacing: 4,
+      justifyItems: { base: "flex-start", md: "center" },
+      justifyContent: "space-between",
+      children: menu.map(({ slug, label }, index) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: Link,
+          to: slug,
+          fontSize: "md",
+          fontWeight: "semibold",
+          colorScheme: "gray",
+          _hover: { textDecoration: "none", color: "brand.400" },
+          children: label
+        }
+      ) }, index))
+    }
+  );
+};
+const Footer = () => {
+  const { metadata, navigation, config } = useSiteContext();
+  const { currentLocale } = usePageContext();
+  const menu = navigation.footer[currentLocale.code] ?? [];
+  const socialNetworks = metadata.socialNetworks ?? [];
+  const { extra, showDisclaimer = true } = (config == null ? void 0 : config.footer) ?? {};
+  const hasNavigation = !!menu.length;
+  const hasSocialNetworks = !!socialNetworks.length;
+  const hasExtra = !!extra;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "footer",
+      bg: useColorModeValue("gray.50", "gray.900"),
+      color: useColorModeValue("gray.700", "gray.200"),
+      py: 4,
+      children: /* @__PURE__ */ jsxs(Container, { children: [
+        hasNavigation && /* @__PURE__ */ jsx(Navigation$1, { menu }),
+        hasExtra && /* @__PURE__ */ jsx(Extra, { children: extra }),
+        showDisclaimer && /* @__PURE__ */ jsx(Disclaimer, {}),
+        /* @__PURE__ */ jsx(Brand$1, { brand: /* @__PURE__ */ jsx(Logo, {}) }),
+        hasSocialNetworks && /* @__PURE__ */ jsx(SocialNetworks, { socialNetworks, justify: "center", my: 2 }),
+        /* @__PURE__ */ jsx(Copyright, {})
+      ] })
+    }
+  );
+};
+const Brand = ({ brand }) => {
+  return /* @__PURE__ */ jsx(Link, { to: "/", children: brand });
+};
+const BrazilIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsBr0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsBr0)", children: [
+      /* @__PURE__ */ jsx("path", { fill: "#6da544", d: "M0 0h512v512H0z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#ffda44", d: "M256 100.2L467.5 256L256 411.8L44.5 256z" }),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#eee",
+          d: "M174.2 221a87 87 0 0 0-7.2 36.3l162 49.8a88.5 88.5 0 0 0 14.4-34c-40.6-65.3-119.7-80.3-169.1-52z"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#0052b4",
+          d: "M255.7 167a89 89 0 0 0-41.9 10.6a89 89 0 0 0-39.6 43.4a181.7 181.7 0 0 1 169.1 52.2a89 89 0 0 0-9-59.4a89 89 0 0 0-78.6-46.8M212 250.5a149 149 0 0 0-45 6.8a89 89 0 0 0 10.5 40.9a89 89 0 0 0 120.6 36.2a89 89 0 0 0 30.7-27.3A151 151 0 0 0 212 250.5"
+        }
+      )
+    ] })
+  ] });
+};
+const BulgariaIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsBg0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsBg0)", children: [
+      /* @__PURE__ */ jsx("path", { fill: "#496e2d", d: "m0 166.9l258-31.7l254 31.7v178l-251.4 41.3L0 344.9z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#eee", d: "M0 0h512v166.9H0z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#d80027", d: "M0 344.9h512V512H0z" })
+    ] })
+  ] });
+};
+const DenmarkIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsDk0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsDk0)", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#d80027",
+          d: "M0 0h133.6l32.7 20.3l34-20.3H512v222.6L491.4 256l20.6 33.4V512H200.3l-31.7-20.4l-35 20.4H0V289.4l29.4-33L0 222.7z"
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { fill: "#eee", d: "M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z" })
+    ] })
+  ] });
+};
+const FinlandIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsFi0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsFi0)", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#eee",
+          d: "M0 0h133.6l35.3 16.7L200.3 0H512v222.6l-22.6 31.7l22.6 35.1V512H200.3l-32-19.8l-34.7 19.8H0V289.4l22.1-33.3L0 222.6z"
+        }
+      ),
+      /* @__PURE__ */ jsx("path", { fill: "#0052b4", d: "M133.6 0v222.6H0v66.8h133.6V512h66.7V289.4H512v-66.8H200.3V0z" })
+    ] })
+  ] });
+};
+const FranceIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsFr0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsFr0)", children: [
+      /* @__PURE__ */ jsx("path", { fill: "#eee", d: "M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#0052b4", d: "M0 0h167v512H0z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#d80027", d: "M345 0h167v512H345z" })
+    ] })
+  ] });
+};
+const GeorgiaIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsGe0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsGe0)", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#eee",
+          d: "M0 0h224l32 32l32-32h224v224l-32 32l32 32v224H288l-32-32l-32 32H0V288l32-32l-32-32Z"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "#d80027",
+          d: "M224 0v224H0v64h224v224h64V288h224v-64H288V0zm-96 96v32H96v32h32v32h32v-32h32v-32h-32V96zm224 0v32h-32v32h32v32h32v-32h32v-32h-32V96zM128 320v32H96v32h32v32h32v-32h32v-32h-32v-32zm224 0v32h-32v32h32v32h32v-32h32v-32h-32v-32z"
+        }
+      )
+    ] })
+  ] });
+};
+const GermanyIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsDe0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsDe0)", children: [
+      /* @__PURE__ */ jsx("path", { fill: "#ffda44", d: "m0 345l256.7-25.5L512 345v167H0z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#d80027", d: "m0 167l255-23l257 23v178H0z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#333", d: "M0 0h512v167H0z" })
+    ] })
+  ] });
+};
+const GlobeIcon = (props) => {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 496", width: "1em", height: "1em", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64m324.7-96c-28.6-67.9-86.5-120.4-158-141.6c24.4 33.8 41.2 84.7 50 141.6zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6M487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64M120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64m39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6M19.3 352c28.6 67.9 86.5 120.4 158 141.6c-24.4-33.8-41.2-84.7-50-141.6z"
+    }
+  ) });
+};
+const ItalyIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsIt0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsIt0)", children: [
+      /* @__PURE__ */ jsx("path", { fill: "#eee", d: "M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#6da544", d: "M0 0h167v512H0z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#d80027", d: "M345 0h167v512H345z" })
+    ] })
+  ] });
+};
+const RussiaIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ...props, children: [
+    /* @__PURE__ */ jsx("mask", { id: "circleFlagsRu0", children: /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "256", fill: "#fff" }) }),
+    /* @__PURE__ */ jsxs("g", { mask: "url(#circleFlagsRu0)", children: [
+      /* @__PURE__ */ jsx("path", { fill: "#0052b4", d: "M512 170v172l-256 32L0 342V170l256-32z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#eee", d: "M512 0v170H0V0Z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#d80027", d: "M512 342v170H0V342Z" })
+    ] })
+  ] });
+};
+function getMappedIcon(code) {
+  let icon = GlobeIcon;
+  switch (code) {
+    case "pt-BR":
+      icon = BrazilIcon;
+      break;
+    case "bg":
+    case "bg-BG":
+      icon = BulgariaIcon;
+      break;
+    case "da":
+    case "da-DK":
+    case "en-DK":
+      icon = DenmarkIcon;
+      break;
+    case "fi":
+    case "fi-FI":
+    case "sv-FI":
+    case "en-FI":
+      icon = FinlandIcon;
+      break;
+    case "fr":
+    case "fr-FR":
+      icon = FranceIcon;
+      break;
+    case "ka":
+    case "ka-GE":
+      icon = GeorgiaIcon;
+      break;
+    case "de":
+    case "de-DE":
+    case "en-DE":
+      icon = GermanyIcon;
+      break;
+    case "it":
+    case "it-IT":
+      icon = ItalyIcon;
+      break;
+    case "ru":
+    case "ru-RU":
+      icon = RussiaIcon;
+      break;
+    case "en":
+    default:
+      icon = GlobeIcon;
+      break;
+  }
+  return icon;
+}
+const LocaleSwitcher = ({ currentLocale, locales }) => {
+  const localeCode = currentLocale.code;
+  const localeIcon = getMappedIcon(localeCode);
+  const localeLabel = localeCode.split("-")[0].toUpperCase();
+  const localeMenuItems = useMemo(
+    () => locales.map((locale) => ({ ...locale, code: locale.code.toLowerCase(), icon: getMappedIcon(locale.code) })),
+    [locales]
+  );
+  return /* @__PURE__ */ jsxs(Menu, { placement: "bottom-end", children: [
+    /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        as: Button,
+        rightIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+        w: { base: 20, md: 24 },
+        px: { base: 1, md: 3 },
+        size: { base: "sm", md: "lg" },
+        children: /* @__PURE__ */ jsxs(HStack, { children: [
+          /* @__PURE__ */ jsx(Icon, { as: localeIcon }),
+          /* @__PURE__ */ jsx("span", { children: localeLabel })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(MenuList, { minW: "fit-content", children: localeMenuItems.map(({ code, name, icon }) => /* @__PURE__ */ jsx(MenuItem, { as: Link, to: `/${code}`, icon: /* @__PURE__ */ jsx(Icon, { as: icon, w: 4, h: 4 }), children: name }, code)) })
+  ] });
+};
+const NavLink = forwardRef(({ slug, label }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ref,
+      as: Link,
+      to: slug,
+      p: 2,
+      fontWeight: "semibold",
+      _hover: { textDecoration: "none", color: "brand.400" },
+      children: label
+    }
+  );
+});
+NavLink.displayName = "NavLink";
+const NavList$1 = ({ slug, label, children }) => {
+  const background = useColorModeValue("white", "gray.800");
+  const backgroundHover = useColorModeValue("brand.50", "gray.900");
+  return /* @__PURE__ */ jsxs(Popover, { trigger: "hover", placement: "bottom-start", children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(
+      Text,
+      {
+        p: 2,
+        fontWeight: "semibold",
+        cursor: "pointer",
+        tabIndex: 0,
+        _hover: { textDecoration: "none", color: "brand.400" },
+        children: label
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        p: 2,
+        border: 0,
+        minW: "sm",
+        maxH: 300,
+        overflowY: "auto",
+        rounded: "xl",
+        boxShadow: "xl",
+        bg: background,
+        children: /* @__PURE__ */ jsx(List, { spacing: 2, p: 0, children: children == null ? void 0 : children.map((child, index) => {
+          return /* @__PURE__ */ jsx(ListItem, { rounded: "md", _hover: { bg: backgroundHover }, children: /* @__PURE__ */ jsxs(Flex, { as: Link, to: buildPath(child.slug, slug), p: 2, role: "group", textDecoration: "none", children: [
+            /* @__PURE__ */ jsx(Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.label }),
+            /* @__PURE__ */ jsx(
+              Flex,
+              {
+                flex: 1,
+                justify: "flex-end",
+                align: "center",
+                opacity: 0,
+                transition: "all .3s ease",
+                transform: "translateX(-10px)",
+                _groupHover: { opacity: 1, transform: "translateX(0)" },
+                children: /* @__PURE__ */ jsx(Icon, { as: ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
+              }
+            )
+          ] }) }, index);
+        }) })
+      }
+    )
+  ] });
+};
+const DesktopNavigation = ({ menu }) => {
+  return /* @__PURE__ */ jsx(Flex, { as: "ul", role: "list", gap: 2, p: 0, display: { base: "none", md: "flex" }, children: menu.map((item, index) => {
+    var _a;
+    return /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(NavList$1, { ...item }) : /* @__PURE__ */ jsx(NavLink, { ...item }) }, index);
+  }) });
+};
+const CHEVRON_DOWN_ICON_SIZE = "1.5rem";
+const NavList = ({ slug, label, children, isExpanded, onExpand }) => {
+  return /* @__PURE__ */ jsxs(Stack, { flex: 1, children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        as: "button",
+        p: 2,
+        pr: "3px",
+        align: "center",
+        justifyContent: "space-between",
+        _hover: { textDecoration: "none", color: "brand.400" },
+        onClick: onExpand,
+        children: [
+          /* @__PURE__ */ jsx(Text, { isTruncated: true, fontWeight: 600, children: label }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              w: CHEVRON_DOWN_ICON_SIZE,
+              h: CHEVRON_DOWN_ICON_SIZE,
+              transform: isExpanded ? "rotate(180deg)" : "",
+              transition: "all .25s ease-in-out"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: isExpanded, transition: { enter: { ease: "easeIn" }, exit: { duration: 0.2 } }, children: /* @__PURE__ */ jsx(
+      List,
+      {
+        ml: 2,
+        pl: 0,
+        maxH: 300,
+        overflowY: "auto",
+        borderLeft: 1,
+        borderStyle: "solid",
+        borderColor: useColorModeValue("gray.200", "gray.700"),
+        children: children == null ? void 0 : children.map((child, index) => /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: /* @__PURE__ */ jsx(Text, { as: Link, to: buildPath(child.slug, slug), p: 2, fontSize: "sm", textDecoration: "none", children: child.label }) }, index))
+      }
+    ) })
+  ] });
+};
+const CLOSE_ICON_SIZE = "0.75rem";
+const HAMBURGER_ICON_SIZE = "1rem";
+const MobileNavigation = ({ menu }) => {
+  const [expanded, setExpanded] = useState(null);
+  const { isOpen, onToggle } = useDisclosure();
+  const background = useColorModeValue("gray.50", "gray.900");
+  function handleExpand(index) {
+    return () => {
+      setExpanded((prev) => prev === index ? null : index);
+    };
+  }
+  function handleClick() {
+    setExpanded(null);
+    onToggle();
+  }
+  return /* @__PURE__ */ jsxs(Box, { display: { base: "block", md: "none" }, children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        icon: isOpen ? /* @__PURE__ */ jsx(CloseIcon, { w: CLOSE_ICON_SIZE, h: CLOSE_ICON_SIZE }) : /* @__PURE__ */ jsx(HamburgerIcon, { w: HAMBURGER_ICON_SIZE, h: HAMBURGER_ICON_SIZE }),
+        size: "sm",
+        variant: "ghost",
+        "aria-label": `${isOpen ? "Close" : "Open"} navigation menu`,
+        "aria-expanded": isOpen,
+        onClick: handleClick
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsx(Box, { position: "absolute", top: 16, left: 0, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsx(
+      List,
+      {
+        spacing: 2,
+        p: 2,
+        boxShadow: "md",
+        borderWidth: "1px",
+        borderColor: useColorModeValue("gray.200", "gray.700"),
+        borderRadius: "md",
+        bg: background,
+        children: menu.map((item, index) => {
+          var _a;
+          return /* @__PURE__ */ jsx(Flex, { as: "li", role: "listitem", children: ((_a = item.children) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsx(NavList, { ...item, isExpanded: index === expanded, onExpand: handleExpand(index) }) : /* @__PURE__ */ jsx(NavLink, { ...item }) }, index);
+        })
+      }
+    ) }) })
+  ] });
+};
+const Navigation = ({ menu }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DesktopNavigation, { menu }),
+    /* @__PURE__ */ jsx(MobileNavigation, { menu })
+  ] });
+};
+const Header = () => {
+  var _a;
+  const { navigation, localization, config } = useSiteContext();
+  const { currentLocale } = usePageContext();
+  const locales = localization.locales;
+  const menu = navigation.header[currentLocale.code] ?? [];
+  const toolbar = (_a = config == null ? void 0 : config.header) == null ? void 0 : _a.toolbar;
+  const isMultiLanguage = locales.length > 1;
+  const hasNavigation = !!menu.length;
+  const hasToolbar = !!toolbar || isMultiLanguage;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "header",
+      position: "sticky",
+      top: 0,
+      bg: useColorModeValue("white", "gray.900"),
+      color: useColorModeValue("gray.700", "gray.200"),
+      boxShadow: "sm",
+      zIndex: 100,
+      children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Flex, { as: "nav", gap: 2, py: 2, children: [
+        /* @__PURE__ */ jsx(Brand, { brand: /* @__PURE__ */ jsx(Logo, {}) }),
+        (hasNavigation || hasToolbar) && /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            as: "section",
+            flex: 1,
+            flexDir: { base: "row-reverse", md: "row" },
+            justifyContent: "end",
+            align: "center",
+            gap: 2,
+            children: [
+              hasNavigation && /* @__PURE__ */ jsx(Flex, { flex: { base: 0, md: 1 }, children: /* @__PURE__ */ jsx(Navigation, { menu }) }),
+              hasToolbar && /* @__PURE__ */ jsxs(Flex, { gap: 2, flex: { base: 1, md: 0 }, justifyContent: "flex-end", children: [
+                !!toolbar && toolbar,
+                isMultiLanguage && /* @__PURE__ */ jsx(LocaleSwitcher, { currentLocale, locales })
+              ] })
+            ]
+          }
+        )
+      ] }) })
+    }
+  );
+};
+const Hero = ({ title, subtitle, content, link, image }) => {
+  return /* @__PURE__ */ jsx(Box, { as: "section", bg: "gray.900", children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Flex, { direction: { base: "column", md: "row" }, children: [
+    /* @__PURE__ */ jsx(Flex, { align: "center", justify: { base: "center", md: "flex-start" }, flex: 1, py: 8, pe: 8, children: /* @__PURE__ */ jsxs(Stack, { spacing: 6, w: "full", maxW: "lg", children: [
+      /* @__PURE__ */ jsxs(Heading, { as: "h1", fontSize: { base: "3xl", md: "4xl", lg: "5xl" }, children: [
+        /* @__PURE__ */ jsxs(Text, { as: "span", display: "block", children: [
+          title,
+          " —"
+        ] }),
+        /* @__PURE__ */ jsx(Text, { as: "span", display: "block", color: "brand.400", children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { fontSize: { base: "md", lg: "lg" }, color: "gray.500", children: content }),
+      !!link && /* @__PURE__ */ jsx(Flex, { direction: { base: "column", md: "row" }, children: /* @__PURE__ */ jsx(LinkButton, { ...link, size: "md", textDecoration: "none" }) })
+    ] }) }),
+    image && /* @__PURE__ */ jsx(Flex, { display: { base: "none", md: "flex" }, flex: 1, children: image })
+  ] }) }) });
+};
+const Main = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      as: "main",
+      direction: "column",
+      flexGrow: 1,
+      bg: useColorModeValue("white", "gray.800"),
+      color: useColorModeValue("gray.700", "gray.200"),
+      children
+    }
+  );
+};
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+    window.addEventListener("scroll", toggleVisibility);
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility);
+    };
+  }, []);
+  function handleClick() {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      position: "fixed",
+      bottom: { base: 4, md: 8, lg: 16 },
+      right: { base: 4, md: 8, lg: 16 },
+      zIndex: "1000",
+      opacity: isVisible ? 1 : 0,
+      transform: isVisible ? "translateY(0)" : "translateY(0.5rem)",
+      transition: "opacity 0.4s ease, transform 0.4s ease",
+      pointerEvents: isVisible ? "auto" : "none",
+      children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          "aria-label": "Scroll to top",
+          icon: /* @__PURE__ */ jsx(ChevronUpIcon, { w: 6, h: 6 }),
+          size: "lg",
+          shadow: "lg",
+          colorScheme: "brand",
+          isRound: true,
+          onClick: handleClick
+        }
+      )
+    }
+  );
+};
+const Layout = ({ children }) => {
+  const content = typeof children === "function" ? children({ Hero, Content }) : /* @__PURE__ */ jsx(Content, { children });
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 0, position: "relative", w: "100%", minH: "100dvh", children: [
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsx(Main, { children: content }),
+    /* @__PURE__ */ jsx(Footer, {}),
+    /* @__PURE__ */ jsx(ScrollToTop, {})
+  ] });
+};
+export {
+  Layout as default
+};

package/dist/providers/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-BcFDxh8P.js");
-const index$1 = require("../index-DZBLiQFh.js");
+const index = require("../index-TxqSZvgf.js");
+const index$1 = require("../index-QPgJfbrC.js");
 exports.MdxProvider = index.MdxProvider;
 exports.PageProvider = index$1.PageProvider;
 exports.SiteProvider = index$1.SiteProvider;

package/dist/providers/index.mjs

@@ -1,5 +1,5 @@
-import { M } from "../index-C_FekfFC.mjs";
-import { P, S, u, a } from "../index-8_-KtKsW.mjs";
+import { M } from "../index-FfZIjQy3.mjs";
+import { P, S, u, a } from "../index-ksqN4RPm.mjs";
 export {
   M as MdxProvider,
   P as PageProvider,

package/dist/providers/mdx-provider/types.d.ts

@@ -1,3 +1,5 @@
-import { DetailedHTMLProps, HTMLAttributes, ReactElement } from 'react';
+import { AnchorHTMLAttributes, DetailedHTMLProps, HTMLAttributes, ImgHTMLAttributes, ReactElement } from 'react';
 export type Props<E extends HTMLElement, A extends HTMLAttributes<E> = HTMLAttributes<E>> = DetailedHTMLProps<A, E>;
 export type ComponentCallback<T extends HTMLElement> = (props: Props<T>) => ReactElement;
+export type LinkProps = Props<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement>>;
+export type ImageProps = Props<HTMLImageElement, ImgHTMLAttributes<HTMLImageElement>>;

package/dist/providers/mdx-provider/utils.d.ts

@@ -1,3 +1,2 @@
-import { ComponentCallback, Props } from './types';
-export declare function omitProps<T extends HTMLElement>(props: Props<T>, omittedKeys: string[]): Props<T>;
+import { ComponentCallback } from './types';
 export declare function preprocessProps<T extends HTMLElement>(callback: ComponentCallback<T>): ComponentCallback<T>;

package/dist/types/components/article-card/index.d.ts

@@ -0,0 +1,9 @@
+import { IArticleMeta } from '../../content';
+import { ImageType } from '../image';
+import { ILink } from '../link';
+export interface IArticlePreviewCard {
+    title: string;
+    url: ILink['href'];
+    image?: ImageType;
+    meta?: IArticleMeta;
+}

package/dist/types/components/button/index.d.ts

@@ -1,6 +1,6 @@
 import { ButtonProps } from '@chakra-ui/react';
 import { BaseSize, IAnimation } from '../common';
 export type BaseButtonProps = Pick<ButtonProps, 'width' | 'textTransform' | 'textDecoration' | 'onClick'> & {
-    size?: 'xs' | BaseSize | 'auto';
+    size?: 'xs' | BaseSize | 'auto' | ButtonProps['size'];
     animation?: IAnimation;
 };