@anywayseo/tools 5.2.0 → 5.4.0

package/dist/{index-CtmxlomQ.mjs → index-BM-_Lr_j.mjs}

@@ -1,7 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Box, Collapse, Text, Button, Flex, Stack, Image, Center as Center$1, SimpleGrid, Link as Link$1, Card, CardHeader, Heading, CardBody, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, LinkBox, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, Menu, MenuButton, HStack, Icon, MenuList, MenuItem, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Flex, Box, Collapse, Text, Button, Stack, Center as Center$1, SimpleGrid, Link as Link$1, Card, CardHeader, Heading, CardBody, Popover, PopoverTrigger, Portal, PopoverContent, PopoverBody, CardFooter, useToast, useColorModeValue, VStack, FormControl, FormLabel, InputGroup, InputLeftElement, Input, Textarea, Accordion, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, LinkBox, LinkOverlay, IconButton, AbsoluteCenter, Spinner, useDisclosure, Divider, Circle, Container as Container$1, Menu, MenuButton, HStack, Icon, MenuList, MenuItem, List as List$1, ListItem, ListIcon, TableContainer, Table as Table$1, Thead, Tr, Th, Tbody, Td, TableCaption, Tabs as Tabs$1, TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
-import { a as useSiteContext, L as Link, u as usePageContext } from "./index-DA6TBpuE.mjs";
+import "react-medium-image-zoom";
+import { L as Link, I as Image, a as useSiteContext, u as usePageContext } from "./index-Bwlxdh5F.mjs";
 import { useRef, useState, useLayoutEffect, Fragment as Fragment$1, useMemo, forwardRef, useEffect } from "react";
 import { A as Animation } from "./index-BJRvnR8Q.mjs";
 import { a as GameCharacteristic } from "./index-Bts2DBYS.mjs";
@@ -12,6 +13,89 @@ import { i as isRelativePath, b as buildPath } from "./index-BmaWfWLV.mjs";
 import { u as usePrimaryColors } from "./index-tj12BA6U.mjs";
 import { t } from "i18next";
 import Markdown from "react-markdown";
+const FacebookIcon = (props) => {
+  return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", "aria-label": "Facebook", ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "22", height: "22", rx: "5", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M13.5 8h2V6h-2c-2.2 0-3.5 1.3-3.5 3.5V11H8v2h2v5h2v-5h2l.5-2h-2v-1.3c0-.5.2-.7 1-.7Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+};
+const InstagramIcon = (props) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      "aria-label": "Instagram",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "22", height: "22", rx: "5", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", fill: "none", stroke: "currentColor", "stroke-width": "2" }),
+        /* @__PURE__ */ jsx("circle", { cx: "17", cy: "7", r: "1.25", fill: "currentColor" })
+      ]
+    }
+  );
+};
+const PinterestIcon = (props) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      "aria-label": "Pinterest",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M12 0C5.373 0 0 5.373 0 12c0 4.99 3.657 9.128 8.438 10.122-.117-.858-.222-2.178.047-3.116.242-.83 1.557-5.288 1.557-5.288s-.396-.792-.396-1.963c0-1.84 1.067-3.215 2.395-3.215 1.13 0 1.675.848 1.675 1.866 0 1.138-.724 2.842-1.097 4.421-.312 1.319.663 2.395 1.965 2.395 2.358 0 3.947-3.032 3.947-6.617 0-2.727-1.84-4.769-5.178-4.769-3.774 0-6.134 2.822-6.134 5.97 0 1.086.322 1.852.827 2.443.232.274.264.384.18.698-.06.23-.197.786-.256 1.007-.084.322-.34.437-.628.318-1.75-.714-2.564-2.63-2.564-4.785 0-3.555 2.998-7.817 8.946-7.817 4.782 0 7.923 3.454 7.923 7.168 0 4.924-2.74 8.6-6.781 8.6-1.356 0-2.63-.73-3.066-1.565l-.833 3.173c-.301 1.147-1.118 2.582-1.667 3.455C9.708 23.812 10.828 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"
+        }
+      )
+    }
+  );
+};
+const XcomIcon = (props) => {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", "aria-label": "X", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M18.244 2H21l-6.57 7.498L22 22h-5.657l-4.403-5.808L6.06 22H3.302l7.02-8.006L2 2h5.822l3.983 5.293L18.244 2zM16.97 20h1.9L8.153 4h-1.9L16.97 20z"
+    }
+  ) });
+};
+const YoutubeIcon = (props) => {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", "aria-label": "YouTube", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M23.498 6.186a2.974 2.974 0 0 0-2.095-2.107C19.505 3.5 12 3.5 12 3.5s-7.505 0-9.403.579A2.974 2.974 0 0 0 .502 6.186C0 8.09 0 12 0 12s0 3.91.502 5.814a2.974 2.974 0 0 0 2.095 2.107C4.495 20.5 12 20.5 12 20.5s7.505 0 9.403-.579a2.974 2.974 0 0 0 2.095-2.107C24 15.91 24 12 24 12s0-3.91-.502-5.814zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"
+    }
+  ) });
+};
+const SocialNetworkMap = {
+  facebook: FacebookIcon,
+  instagram: InstagramIcon,
+  pinterest: PinterestIcon,
+  x: XcomIcon,
+  youtube: YoutubeIcon
+};
+const SocialNetwork = ({ kind, url }) => {
+  const Icon2 = SocialNetworkMap[kind];
+  return /* @__PURE__ */ jsx(Link, { to: url, children: /* @__PURE__ */ jsx(Icon2, {}) });
+};
+const SocialNetworks = ({ socialNetworks, ...flexProps }) => {
+  const uniqueSocialNetworks = [...new Map(socialNetworks.map((item) => [item.kind, item])).values()];
+  return /* @__PURE__ */ jsx(Flex, { gap: 2, ...flexProps, children: uniqueSocialNetworks.map((socialNetwork) => /* @__PURE__ */ jsx(SocialNetwork, { ...socialNetwork }, socialNetwork.kind)) });
+};
 const ONE_LINE_HEIGHT = 24;
 const Bio = ({ content, maxLines = 1 }) => {
   const ref = useRef(null);
@@ -37,25 +121,24 @@ const Bio = ({ content, maxLines = 1 }) => {
   ] });
 };
 const Author = ({ author, variant }) => {
-  const { name, role, bio, avatar } = author;
-  const imageComponent = typeof avatar === "string" ? /* @__PURE__ */ jsx(Image, { src: avatar, alt: name, rounded: "full" }) : avatar;
+  const { name, role, bio, avatar, socialNetworks } = author;
   if (variant === "short") {
-    return /* @__PURE__ */ jsxs(Flex, { as: "article", align: "center", gap: 4, children: [
-      !!imageComponent && /* @__PURE__ */ jsx(Box, { w: 12, h: 12, children: imageComponent }),
+    return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+      /* @__PURE__ */ jsx(Box, { w: 12, h: 12, children: /* @__PURE__ */ jsx(Image, { src: avatar, alt: name, rounded: "full" }) }),
       /* @__PURE__ */ jsxs(Box, { fontWeight: "semibold", children: [
         /* @__PURE__ */ jsx(Text, { children: name }),
         /* @__PURE__ */ jsx(Text, { color: "gray.500", children: role })
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !!imageComponent && /* @__PURE__ */ jsx(Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: imageComponent }),
-    /* @__PURE__ */ jsx(Flex, { w: "100%", children: /* @__PURE__ */ jsxs(Stack, { children: [
+  return /* @__PURE__ */ jsxs(Flex, { direction: { base: "column", sm: "row" }, align: { base: "center", sm: "flex-start" }, gap: 4, children: [
+    /* @__PURE__ */ jsx(Flex, { flex: 1, maxW: { base: 48, sm: 32 }, children: /* @__PURE__ */ jsx(Image, { src: avatar, alt: name, rounded: "full" }) }),
+    /* @__PURE__ */ jsx(Flex, { flex: 1, children: /* @__PURE__ */ jsxs(Stack, { children: [
       /* @__PURE__ */ jsxs(Text, { fontSize: "lg", fontWeight: 600, children: [
-        name,
-        ", ",
-        /* @__PURE__ */ jsx(Text, { as: "span", color: "gray.500", children: role })
+        `${name}, `,
+        /* @__PURE__ */ jsx(Text, { as: "span", display: "inline-block", color: "gray.500", children: role })
       ] }),
+      (socialNetworks == null ? void 0 : socialNetworks.length) && /* @__PURE__ */ jsx(SocialNetworks, { socialNetworks }),
       /* @__PURE__ */ jsx(Bio, { content: bio })
     ] }) })
   ] });
@@ -115,16 +198,7 @@ const AuthorCard = ({ author, ...boxProps }) => {
   const { t: t2 } = useTranslation("author");
   return /* @__PURE__ */ jsxs(Card, { as: "article", variant: "filled", ...boxProps, children: [
     /* @__PURE__ */ jsx(CardHeader, { pb: 0, children: /* @__PURE__ */ jsx(Heading, { size: "md", children: t2("title") }) }),
-    /* @__PURE__ */ jsx(
-      CardBody,
-      {
-        display: "flex",
-        flexDirection: { base: "column", sm: "row" },
-        alignItems: { base: "center", sm: "flex-start" },
-        gap: 4,
-        children: /* @__PURE__ */ jsx(Author, { author, variant: "full" })
-      }
-    )
+    /* @__PURE__ */ jsx(CardBody, { children: /* @__PURE__ */ jsx(Author, { author, variant: "full" }) })
   ] });
 };
 const BonusCardContent = ({ content, buttonColor }) => {
@@ -337,7 +411,7 @@ const GameCard = ({ name, description, image, href, height = "auto" }) => {
       height,
       _hover: { transform: "scale(1.05)" },
       children: [
-        typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsx(Box, { w: "100%", aspectRatio: "16/9", children: image }),
+        /* @__PURE__ */ jsx(Image, { src: image, alt: name, mode: "thumbnail" }),
         /* @__PURE__ */ jsxs(Box, { as: "section", rounded: "md", p: 4, children: [
           /* @__PURE__ */ jsx(Text, { as: "span", children: href ? /* @__PURE__ */ jsx(LinkOverlay, { href, children: name }) : name }),
           !!description && /* @__PURE__ */ jsx(Text, { fontSize: "sm", color: "gray.600", children: description })
@@ -429,9 +503,8 @@ const GameDemoContent = ({
 };
 const GameDemoPreview = ({ image, alt, href, imageFit = "contain", onPlayDemo }) => {
   const { t: t2 } = useTranslation("gameDemo");
-  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt, objectFit: imageFit, w: "100%", h: "100%" }) : image;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    imageComponent,
+    /* @__PURE__ */ jsx(Image, { src: image, alt, objectFit: imageFit, w: "100%", h: "100%" }),
     /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 4, children: [
       /* @__PURE__ */ jsx(
         LinkButton,
@@ -599,7 +672,7 @@ const HowTo = ({ steps, ...boxProps }) => {
     /* @__PURE__ */ jsx(Circle, { size: 12, bgColor, color: invertedColor, fontSize: "lg", fontWeight: "bold", children: String(index + 1) }),
     /* @__PURE__ */ jsxs(Stack, { flex: 1, children: [
       /* @__PURE__ */ jsx(Text, { fontSize: "lg", fontWeight: "bold", children: title }),
-      typeof thumbnail === "string" ? /* @__PURE__ */ jsx(Image, { src: thumbnail, alt: title, aspectRatio: "16/9", objectFit: "cover" }) : thumbnail,
+      /* @__PURE__ */ jsx(Image, { src: thumbnail, alt: title, mode: "thumbnail", hasZoom: true }),
       /* @__PURE__ */ jsx(Text, { children: description })
     ] })
   ] }, index)) });
@@ -613,7 +686,7 @@ const Content = ({ children }) => {
 const Logo = () => {
   const { metadata } = useSiteContext();
   const { logo } = metadata;
-  return /* @__PURE__ */ jsx(Box, { display: "flex", h: { base: 10, md: 14 }, overflow: "hidden", children: typeof logo === "string" ? /* @__PURE__ */ jsx(Image, { src: logo, alt: "Logo", objectFit: "contain" }) : logo });
+  return /* @__PURE__ */ jsx(Box, { display: "flex", h: { base: 10, md: 14 }, overflow: "hidden", children: /* @__PURE__ */ jsx(Image, { src: logo, alt: "Logo", objectFit: "contain" }) });
 };
 const Brand$1 = ({ brand }) => {
   return /* @__PURE__ */ jsxs(Box, { position: "relative", my: 2, py: 8, children: [
@@ -668,13 +741,13 @@ const Navigation$1 = ({ menu }) => {
   );
 };
 const Footer = () => {
-  var _a, _b;
-  const { navigation, config } = useSiteContext();
+  const { metadata, navigation, config } = useSiteContext();
   const { currentLocale } = usePageContext();
   const menu = navigation.footer[currentLocale.code] ?? [];
-  const extra = (_a = config == null ? void 0 : config.footer) == null ? void 0 : _a.extra;
-  const showDisclaimer = ((_b = config == null ? void 0 : config.footer) == null ? void 0 : _b.showDisclaimer) ?? true;
+  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,
@@ -688,6 +761,7 @@ const Footer = () => {
         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, {})
       ] })
     }
@@ -1080,7 +1154,7 @@ const Layout = ({ children }) => {
   ] });
 };
 const List = ({ items, bullet = "—", render, ...boxProps }) => {
-  return /* @__PURE__ */ jsx(List$1, { pl: 0, ml: 2, mb: 4, ...boxProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", gap: 1, children: [
+  return /* @__PURE__ */ jsx(List$1, { pl: 0, ml: 2, ...boxProps, children: items.map((item, index) => /* @__PURE__ */ jsxs(ListItem, { display: "flex", gap: 1, children: [
     /* @__PURE__ */ jsx(Box, { children: bullet }),
     render ? render(item) : item
   ] }, index)) });
@@ -1248,7 +1322,7 @@ const Tip = ({ tip, author = null, ...boxProps }) => {
 const ExternalImage = ({ image, component: ImageComponent, alt = "", ...imageProps }) => {
   var _a, _b;
   const imageData = (_b = (_a = image == null ? void 0 : image.localFile) == null ? void 0 : _a.childImageSharp) == null ? void 0 : _b.gatsbyImageData;
-  return imageData ? /* @__PURE__ */ jsx(ImageComponent, { image: imageData, alt, ...imageProps }) : /* @__PURE__ */ jsx(Fragment, {});
+  return imageData ? /* @__PURE__ */ jsx(ImageComponent, { image: imageData, alt, ...imageProps }) : null;
 };
 const RichText = ({ content }) => {
   const components = useMDXComponents();
@@ -1302,15 +1376,14 @@ const StrapiComponent = ({ type, props, imageComponent }) => {
         }
       );
     case "STRAPI__COMPONENT_CONTENT_LIST":
-      return /* @__PURE__ */ jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content) });
+      return /* @__PURE__ */ jsx(List, { bullet: props.bullet, items: extractItemsFromJson(props.content), mb: 4 });
     case "STRAPI__COMPONENT_CONTENT_MEDIA":
       return /* @__PURE__ */ jsx(
-        ExternalImage,
+        Image,
         {
-          component: imageComponent,
-          image: props.file,
-          alt: props.alternativeText,
-          style: { display: "inline-block", marginBottom: 16 }
+          src: /* @__PURE__ */ jsx(ExternalImage, { component: imageComponent, image: props.file, alt: props.alternativeText }),
+          mb: 4,
+          hasZoom: true
         }
       );
     case "STRAPI__COMPONENT_CONTENT_PROS_CONS":
@@ -1405,5 +1478,7 @@ export {
   Author as k,
   Center as l,
   Grid as m,
-  LinkButton as n
+  LinkButton as n,
+  SocialNetwork as o,
+  SocialNetworks as p
 };

package/dist/{index-BFhrFJqB.js → index-BbxOP7UY.js}

@@ -2,12 +2,12 @@
 const jsxRuntime = require("react/jsx-runtime");
 const react$1 = require("@chakra-ui/react");
 const react = require("@mdx-js/react");
+const index = require("./index-BltrZp3R.js");
 require("react");
 require("react-i18next");
-const index$1 = require("./index-Cn8RI_2O.js");
 require("./index-C6MG_f24.js");
 require("./index-CJVr79Z2.js");
-const index = require("./index-At00w6EN.js");
+const index$1 = require("./index-At00w6EN.js");
 function omitProps(props, omittedKeys) {
   const result = { ...props };
   omittedKeys.forEach((key) => {
@@ -25,7 +25,7 @@ function renderLink({
   href,
   ...props
 }) {
-  return index.isRelativePath(href) ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Link, { as: index$1.Link, to: href, color: "brand.400", ...props }) : /* @__PURE__ */ jsxRuntime.jsx(
+  return index$1.isRelativePath(href) ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Link, { as: index.Link, to: href, color: "brand.400", ...props }) : /* @__PURE__ */ jsxRuntime.jsx(
     react$1.Link,
     {
       href,
@@ -37,6 +37,9 @@ function renderLink({
     }
   );
 }
+function renderImage(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Image, { ...props, mt: 4, mb: 4, hasZoom: true });
+}
 const components = {
   h1: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h1", size: "xl", mb: 4, ...props })),
   h2: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h2", size: "lg", mt: 6, mb: 4, ...props })),
@@ -44,7 +47,8 @@ const components = {
   ol: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.OrderedList, { mb: 4, ...props })),
   ul: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.UnorderedList, { mb: 4, ...props })),
   p: preprocessProps((props) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { mb: 4, ...props })),
-  a: preprocessProps((props) => renderLink(props))
+  a: preprocessProps((props) => renderLink(props)),
+  img: preprocessProps((props) => renderImage(props))
 };
 const MdxProvider = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(react.MDXProvider, { components, children });

package/dist/{index-Cn8RI_2O.js → index-BltrZp3R.js}

@@ -1,35 +1,57 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
+const react = require("@chakra-ui/react");
+const Zoom = require("react-medium-image-zoom");
+const react$1 = require("react");
 const gatsby = require("gatsby");
-require("@chakra-ui/react");
 require("@mdx-js/react");
 require("react-i18next");
 require("./index-C6MG_f24.js");
 require("./index-CJVr79Z2.js");
 const index = require("./index-WFgDSB1A.js");
 const index$1 = require("./index-At00w6EN.js");
-const SiteContext = react.createContext(null);
+const Image = ({ src, mode = "default", hasZoom, ...plainImageProps }) => {
+  if (!src) {
+    return null;
+  }
+  let image;
+  if (typeof src === "string") {
+    image = /* @__PURE__ */ jsxRuntime.jsx(
+      react.Image,
+      {
+        src,
+        ...mode === "thumbnail" && { aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" },
+        ...plainImageProps
+      }
+    );
+  } else if (src.props.image) {
+    image = mode === "thumbnail" ? /* @__PURE__ */ jsxRuntime.jsx(react.Box, { aspectRatio: "16/9", children: src }) : src;
+  } else {
+    return null;
+  }
+  return hasZoom ? /* @__PURE__ */ jsxRuntime.jsx(Zoom, { wrapElement: "span", zoomMargin: 40, children: image }) : image;
+};
+const SiteContext = react$1.createContext(null);
 const SiteProvider = ({ children, ...context }) => {
-  const value = react.useMemo(() => context, []);
+  const value = react$1.useMemo(() => context, []);
   return /* @__PURE__ */ jsxRuntime.jsx(SiteContext.Provider, { value, children });
 };
 function useSiteContext() {
-  const context = react.useContext(SiteContext);
+  const context = react$1.useContext(SiteContext);
   if (!context) {
     throw new Error("useSiteContext must be used within SiteProvider");
   }
   return context;
 }
-const PageContext = react.createContext(null);
+const PageContext = react$1.createContext(null);
 const PageProvider = ({ children, location }) => {
   const { localization } = useSiteContext();
   const { currentLocale } = index.useLocalization({ location, ...localization });
-  const value = react.useMemo(() => ({ currentLocale }), [currentLocale]);
+  const value = react$1.useMemo(() => ({ currentLocale }), [currentLocale]);
   return /* @__PURE__ */ jsxRuntime.jsx(PageContext.Provider, { value, children });
 };
 function usePageContext() {
-  const context = react.useContext(PageContext);
+  const context = react$1.useContext(PageContext);
   if (!context) {
     throw new Error("usePageContext must be used within PageProvider");
   }
@@ -49,13 +71,14 @@ function getLocalizedPath(path, currentLocaleCode, defaultLocaleCode) {
   }
   return `${localePrefix}${normalizePath(path)}`;
 }
-const Link = react.forwardRef(({ to, ...props }, ref) => {
+const Link = react$1.forwardRef(({ to, ...props }, ref) => {
   const { localization } = useSiteContext();
   const { currentLocale } = usePageContext();
   const defaultLocale = localization.defaultLocale;
   const path = getLocalizedPath(to, currentLocale.code, defaultLocale.code);
   return /* @__PURE__ */ jsxRuntime.jsx(gatsby.Link, { ref, to: path, ...props });
 });
+exports.Image = Image;
 exports.Link = Link;
 exports.PageProvider = PageProvider;
 exports.SiteProvider = SiteProvider;

package/dist/{index-DA6TBpuE.mjs → index-Bwlxdh5F.mjs}

@@ -1,13 +1,35 @@
 import { jsx } from "react/jsx-runtime";
+import { Image as Image$1, Box } from "@chakra-ui/react";
+import Zoom from "react-medium-image-zoom";
 import { createContext, useContext, useMemo, forwardRef } from "react";
 import { Link as Link$1 } from "gatsby";
-import "@chakra-ui/react";
 import "@mdx-js/react";
 import "react-i18next";
 import "./index-BJRvnR8Q.mjs";
 import "./index-Bts2DBYS.mjs";
 import { u as useLocalization } from "./index-BzbpMLDD.mjs";
 import { i as isRelativePath } from "./index-BmaWfWLV.mjs";
+const Image = ({ src, mode = "default", hasZoom, ...plainImageProps }) => {
+  if (!src) {
+    return null;
+  }
+  let image;
+  if (typeof src === "string") {
+    image = /* @__PURE__ */ jsx(
+      Image$1,
+      {
+        src,
+        ...mode === "thumbnail" && { aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" },
+        ...plainImageProps
+      }
+    );
+  } else if (src.props.image) {
+    image = mode === "thumbnail" ? /* @__PURE__ */ jsx(Box, { aspectRatio: "16/9", children: src }) : src;
+  } else {
+    return null;
+  }
+  return hasZoom ? /* @__PURE__ */ jsx(Zoom, { wrapElement: "span", zoomMargin: 40, children: image }) : image;
+};
 const SiteContext = createContext(null);
 const SiteProvider = ({ children, ...context }) => {
   const value = useMemo(() => context, []);
@@ -56,6 +78,7 @@ const Link = forwardRef(({ to, ...props }, ref) => {
   return /* @__PURE__ */ jsx(Link$1, { ref, to: path, ...props });
 });
 export {
+  Image as I,
   Link as L,
   PageProvider as P,
   SiteProvider as S,

package/dist/{index-BJQgELmZ.mjs → index-C4sJXfkN.mjs}

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { Text, UnorderedList, OrderedList, Heading, Link } from "@chakra-ui/react";
 import { MDXProvider } from "@mdx-js/react";
+import { I as Image, L as Link$1 } from "./index-Bwlxdh5F.mjs";
 import "react";
 import "react-i18next";
-import { L as Link$1 } from "./index-DA6TBpuE.mjs";
 import "./index-BJRvnR8Q.mjs";
 import "./index-Bts2DBYS.mjs";
 import { i as isRelativePath } from "./index-BmaWfWLV.mjs";
@@ -36,6 +36,9 @@ function renderLink({
     }
   );
 }
+function renderImage(props) {
+  return /* @__PURE__ */ jsx(Image, { ...props, mt: 4, mb: 4, hasZoom: true });
+}
 const components = {
   h1: preprocessProps((props) => /* @__PURE__ */ jsx(Heading, { as: "h1", size: "xl", mb: 4, ...props })),
   h2: preprocessProps((props) => /* @__PURE__ */ jsx(Heading, { as: "h2", size: "lg", mt: 6, mb: 4, ...props })),
@@ -43,7 +46,8 @@ const components = {
   ol: preprocessProps((props) => /* @__PURE__ */ jsx(OrderedList, { mb: 4, ...props })),
   ul: preprocessProps((props) => /* @__PURE__ */ jsx(UnorderedList, { mb: 4, ...props })),
   p: preprocessProps((props) => /* @__PURE__ */ jsx(Text, { mb: 4, ...props })),
-  a: preprocessProps((props) => renderLink(props))
+  a: preprocessProps((props) => renderLink(props)),
+  img: preprocessProps((props) => renderImage(props))
 };
 const MdxProvider = ({ children }) => {
   return /* @__PURE__ */ jsx(MDXProvider, { components, children });

package/dist/index.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-bNvgXBvA.js");
-const index$1 = require("./index-Cn8RI_2O.js");
+const index = require("./index-4Zb1neOM.js");
+const index$1 = require("./index-BltrZp3R.js");
 const index$2 = require("./index-WFgDSB1A.js");
 const index$3 = require("./index-CAfBnNV6.js");
 const i18n = require("./i18n/index.cjs");
-const index$4 = require("./index-BFhrFJqB.js");
+const index$4 = require("./index-BbxOP7UY.js");
 const index$5 = require("./index-CJVr79Z2.js");
 const index$6 = require("./index-C6MG_f24.js");
 const index$7 = require("./index-CYr1ct1t.js");
@@ -33,10 +33,13 @@ exports.List = index.List;
 exports.NotFound = index.NotFound;
 exports.ProsCons = index.ProsCons;
 exports.Seo = index.Seo;
+exports.SocialNetwork = index.SocialNetwork;
+exports.SocialNetworks = index.SocialNetworks;
 exports.StrapiContentRenderer = index.StrapiContentRenderer;
 exports.Table = index.Table;
 exports.Tabs = index.Tabs;
 exports.Tip = index.Tip;
+exports.Image = index$1.Image;
 exports.Link = index$1.Link;
 exports.PageProvider = index$1.PageProvider;
 exports.SiteProvider = index$1.SiteProvider;

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import { k, A, B, a, l, C, F, b, c, G, d, e, f, m, H, L, n, g, N, P, S, h, T, i, j } from "./index-CtmxlomQ.mjs";
-import { L as L2, P as P2, S as S2, u, a as a2 } from "./index-DA6TBpuE.mjs";
+import { k, A, B, a, l, C, F, b, c, G, d, e, f, m, H, L, n, g, N, P, S, o, p, h, T, i, j } from "./index-BM-_Lr_j.mjs";
+import { I, L as L2, P as P2, S as S2, u, a as a2 } from "./index-Bwlxdh5F.mjs";
 import { u as u2 } from "./index-BzbpMLDD.mjs";
 import { u as u3 } from "./index-tj12BA6U.mjs";
 import { DEFAULT_LANGUAGE, resources } from "./i18n/index.mjs";
-import { M } from "./index-BJQgELmZ.mjs";
+import { M } from "./index-C4sJXfkN.mjs";
 import { a as a3, G as G2 } from "./index-Bts2DBYS.mjs";
 import { A as A2 } from "./index-BJRvnR8Q.mjs";
 import { b as b2, c as c2, g as g2, a as a4 } from "./index-cQqALZIW.mjs";
@@ -31,6 +31,7 @@ export {
   G2 as GameVolatility,
   m as Grid,
   H as HowTo,
+  I as Image,
   L3 as LIGHT_THEME_COLOR,
   L as Layout,
   L2 as Link,
@@ -42,6 +43,8 @@ export {
   P as ProsCons,
   S as Seo,
   S2 as SiteProvider,
+  o as SocialNetwork,
+  p as SocialNetworks,
   h as StrapiContentRenderer,
   T as Table,
   i as Tabs,

package/dist/providers/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-BFhrFJqB.js");
-const index$1 = require("../index-Cn8RI_2O.js");
+const index = require("../index-BbxOP7UY.js");
+const index$1 = require("../index-BltrZp3R.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-BJQgELmZ.mjs";
-import { P, S, u, a } from "../index-DA6TBpuE.mjs";
+import { M } from "../index-C4sJXfkN.mjs";
+import { P, S, u, a } from "../index-Bwlxdh5F.mjs";
 export {
   M as MdxProvider,
   P as PageProvider,

package/dist/types/components/how-to/index.d.ts

@@ -1,6 +1,6 @@
-import { Image } from '../image';
+import { ImageType } from '../image';
 export interface IHowToStep {
     title: string;
     description?: string;
-    thumbnail?: Image;
+    thumbnail?: ImageType;
 }

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

@@ -1,6 +1,8 @@
 import { ReactElement } from 'react';
 import { ImageProps } from '@chakra-ui/react';
 export type ImageUrl = string;
-export type ImageComponent = ReactElement;
-export type Image = ImageUrl | ImageComponent;
+export type ImageComponent = ReactElement<{
+    image: unknown;
+}>;
+export type ImageType = ImageUrl | ImageComponent;
 export type ImageFit = ImageProps['objectFit'];

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

@@ -13,5 +13,6 @@ export * from './link';
 export * from './locale-switcher';
 export * from './navigation';
 export * from './pros-cons';
+export * from './social-network';
 export * from './strapi-component';
 export * from './tabs';

package/dist/types/components/social-network/index.d.ts

@@ -0,0 +1,6 @@
+type SocialNetwork = 'facebook' | 'x' | 'pinterest' | 'youtube' | 'instagram';
+export interface ISocialNetwork {
+    kind: SocialNetwork;
+    url: string;
+}
+export {};

package/dist/types/content/author/index.d.ts

@@ -1,18 +1,13 @@
-import { Image } from '../../components';
-type SocialNetwork = 'fb' | 'tw';
+import { ImageType, ISocialNetwork } from '../../components';
 type Phone = string;
-interface ISocialNetwork {
-    type: SocialNetwork;
-    link: string;
-}
 export interface IAuthor {
     name: string;
     role: string;
     bio: string;
-    avatar: Image;
+    avatar: ImageType;
+    socialNetworks?: ISocialNetwork[];
     /** Planned */
     address?: string;
     phone?: Phone;
-    socialNetworks?: ISocialNetwork[];
 }
 export {};

package/dist/types/site/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Image, INavigation } from '../components';
+import { ImageType, INavigation, ISocialNetwork } from '../components';
 import { ISeo } from '../content';
 import { Currency, ILocale } from '../i18n';
 interface ISiteHeaderConfig {
@@ -30,8 +30,9 @@ export interface ISiteMetadata {
     name: string;
     lang: ILocale['code'];
     seo: ISeo;
-    logo: Image;
+    logo: ImageType;
+    socialNetworks?: ISocialNetwork[];
     /** Planned */
-    favicon?: Image;
+    favicon?: ImageType;
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anywayseo/tools",
   "description": "Shared UI Components and Modules",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "keywords": [
     "react",
     "ui",
@@ -102,6 +102,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.0",
-    "react-markdown": "^10.1.0"
+    "react-markdown": "^10.1.0",
+    "react-medium-image-zoom": "^5.3.0"
   }
 }