@yatoday/astro-ui 0.6.0 → 0.6.10

package/components/CallToAction/CallToAction.astro

@@ -8,7 +8,7 @@ const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
-  actions = await Astro.slots.render('actions'),
+  callToAction = await Astro.slots.render('actions'),
 
   id,
   isDark = false,
@@ -29,17 +29,32 @@ const {
         subtitle: 'text-xl',
       }}
     />
+
     {
-      actions && (
+      callToAction && (
         <div class="m-auto flex flex-nowrap flex-col md:flex-row md:justify-start gap-4 mt-6">
-          {Array.isArray(actions) ? (
-            actions.map((action) => (
-              <div class="flex w-auto">
-                <Button {...(action || {})} class="w-full sm:mb-0" />
-              </div>
+          {Array.isArray(callToAction) ? (
+            callToAction.map((action) => (
+              <Fragment>
+                {typeof action === 'string' ? (
+                  <Fragment set:html={action} />
+                ) : (
+                  <div class="flex w-auto">
+                    <Button {...(action || {})} class="w-full sm:mb-0" />
+                  </div>
+                )}
+              </Fragment>
             ))
           ) : (
-            <Fragment set:html={actions} />
+            <Fragment>
+              {typeof callToAction === 'string' ? (
+                <Fragment set:html={callToAction} />
+              ) : (
+                <div class="flex w-auto">
+                  <Button {...(callToAction as Object)} class="w-full sm:mb-0" />
+                </div>
+              )}
+            </Fragment>
           )}
         </div>
       )

package/components/CallToAction/types.ts

@@ -5,6 +5,5 @@ export type CallToActionProps = {
   title?: string;
   subtitle?: string;
   tagline?: string;
-  callToAction?: ToAction;
-  actions?: string | ToAction[];
+  callToAction?: string | ToAction | Array<string | ToAction>;
 } & WidgetWrapperProps;

package/components/Card1/Card1.astro

@@ -5,15 +5,16 @@ import Image from '../Image/Image.astro';
 import Button from '../Button/Button.astro';
 import { Icon } from 'astro-icon/components';
 import { twMerge } from 'tailwind-merge';
+import { cn } from '../../utils';
 
 const {
   title = await Astro.slots.render('title'),
   description,
   icon,
-  image,
+  image = await Astro.slots.render('image'),
   data = [],
   links = [],
-  callToAction,
+  callToAction = await Astro.slots.render('actions'),
   classes = {},
   as = 'article',
   asHeader = 'h3',
@@ -49,37 +50,19 @@ const img = {
     {
       image && (
         <div class={twMerge('w-full overflow-hidden -mt-6 h-60 bg-gray-400 dark:bg-zinc-700', imageClass)}>
-          {callToAction && callToAction.href ? (
-            <a href={callToAction.href} class="group">
-              <Image
-                src={img.src}
-                class={twMerge('w-full h-full  hover:scale-105 transition duration-300')}
-                widths={[400, 900]}
-                width={400}
-                height={400}
-                sizes="(max-width: 900px) 400px, 900px"
-                alt={img.alt}
-                aspectRatio={img.aspectRatio}
-                layout="cover"
-                loading="lazy"
-                decoding="async"
-              />
-            </a>
-          ) : (
-            <Image
-              src={img.src || String(image)}
-              class={twMerge('w-full h-full')}
-              widths={[400, 900]}
-              width={400}
-              height={400}
-              sizes="(max-width: 900px) 400px, 900px"
-              alt={img.alt || title}
-              aspectRatio={img.aspectRatio}
-              layout="cover"
-              loading="lazy"
-              decoding="async"
-            />
-          )}
+          <Image
+            src={img.src || String(image)}
+            class={twMerge('w-full h-full')}
+            widths={[400, 900]}
+            width={400}
+            height={400}
+            sizes="(max-width: 900px) 400px, 900px"
+            alt={img.alt || title}
+            aspectRatio={img.aspectRatio}
+            layout="cover"
+            loading="lazy"
+            decoding="async"
+          />
         </div>
       )
     }
@@ -137,10 +120,24 @@ const img = {
       <div class={twMerge('w-full px-6')}>
         <slot name="footer" />
 
-        {callToAction && (
-          <div class={twMerge('', actionClass)}>
-            <Button {...callToAction} />
+        {Array.isArray(callToAction) ? (
+          <div class={cn('flex gap-2', actionClass)}>
+            {callToAction.map((action) => (
+              <Fragment>
+                {typeof action === 'string' ? <Fragment set:html={action} /> : <Button {...(action || {})} />}
+              </Fragment>
+            ))}
           </div>
+        ) : (
+          <Fragment>
+            {typeof callToAction === 'string' ? (
+              <Fragment set:html={callToAction} />
+            ) : (
+              <div class={cn('', actionClass)}>
+                <Button {...(callToAction as Object)} />
+              </div>
+            )}
+          </Fragment>
         )}
       </div>
     )

package/components/Card1/types.ts

@@ -7,7 +7,7 @@ export type Card1Props = {
   title?: string;
   description?: string;
   icon?: string;
-  callToAction?: ToAction;
+  callToAction?: string | ToAction | Array<string | ToAction>;
   data?: NameValue[];
   links?: Link[];
   badge?: string;

package/components/Card2/Card2.astro

@@ -4,13 +4,15 @@ import Card0 from '../Card0/Card0.astro';
 import Image from '../Image/Image.astro';
 import { Icon } from 'astro-icon/components';
 import { twMerge } from 'tailwind-merge';
+import { cn } from '../../utils';
 
 const {
   title = await Astro.slots.render('title'),
   description,
   icon,
-  image,
-  url = '/',
+  image = await Astro.slots.render('image'),
+  url = '',
+  callToAction,
   classes = {},
   as = 'article',
   asHeader = 'h3',
@@ -39,7 +41,7 @@ const img = {
   as={as}
   badge={badge}
   classes={{
-    container: containerClass,
+    container: cn('group', containerClass),
     badge: badgeClass,
   }}
 >
@@ -50,7 +52,7 @@ const img = {
         <div class={twMerge('w-full overflow-hidden -mt-6 h-40 bg-gray-400 dark:bg-zinc-700', imageClass)}>
           <Image
             src={img.src || String(image)}
-            class={twMerge('w-full md:h-full group-hover:scale-105 transition duration-300', imageClass)}
+            class={cn('w-full md:h-full', imageClass, (url || callToAction?.href) && 'group-hover:scale-105 transition duration-300')}
             widths={[400, 900]}
             width={400}
             height={400}
@@ -65,16 +67,16 @@ const img = {
       )
     }
 
-    <!-- Icon -->
     {
       icon && (
         <div class="h-12 px-6">
           <Icon
             name={icon}
-            class={twMerge(
+            class={cn(
               'w-12 h-12 text-primary group-hover:scale-105 transition duration-300',
               image ? 'mt-6' : '',
-              iconClass
+              iconClass,
+              url || (callToAction?.href && 'group-hover:scale-105 transition duration-300')
             )}
           />
         </div>
@@ -87,8 +89,8 @@ const img = {
     <div>
       <WrapperHeaderTag class={twMerge('text-xl font-bold', titleClass)}>
         {
-          url ? (
-            <a href={url} class="after:content-[''] after:inset-0 after:absolute">
+          url || callToAction?.href ? (
+            <a href={url || callToAction?.href || '/'} class="after:content-[''] after:inset-0 after:absolute">
               {title}
             </a>
           ) : (

package/components/Card2/types.ts

@@ -1,5 +1,6 @@
 import type { HTMLTag } from 'astro/types';
 import type { Card0Props } from '../Card0/types';
+import type { ToAction } from '~/types';
 
 export type Card2Props = {
   title?: string;
@@ -8,4 +9,5 @@ export type Card2Props = {
   asHeader?: HTMLTag;
   badge?: string;
   url?: string;
+  callToAction?: ToAction;
 } & Card0Props;

package/components/Card3/Card3.astro

@@ -4,12 +4,13 @@ import Card0 from '../Card0/Card0.astro';
 import Image from '../Image/Image.astro';
 import Button from '../Button/Button.astro';
 import { twMerge } from 'tailwind-merge';
+import { cn } from '../../utils';
 
 const {
   title = await Astro.slots.render('title'),
   description,
-  callToAction,
-  image,
+  callToAction = await Astro.slots.render('actions'),
+  image = await Astro.slots.render('image'),
   classes = {},
   as = 'article',
   asHeader = 'h3',
@@ -23,14 +24,17 @@ const {
   title: titleClass = '',
   description: descriptionClass = 'text-muted-foreground',
   image: imageClass = '',
+  action: actionClass = '',
   badge: badgeClass = 'top-2 left-2',
 } = classes;
 
-const img = {
-  src: typeof image === 'string' ? image : image?.src,
-  alt: typeof image === 'string' ? title : image?.alt,
-  aspectRatio: typeof image === 'string' ? '4:3' : image?.aspectRatio || '4:3',
-};
+const urlForImage = Array.isArray(callToAction)
+  ? typeof callToAction[0] === 'string'
+    ? callToAction[0]
+    : (callToAction[0] as { href?: string })?.href
+  : typeof callToAction === 'string'
+    ? callToAction
+    : (callToAction as { href?: string })?.href;
 ---
 
 <Card0
@@ -47,36 +51,42 @@ const img = {
         <div
           class={twMerge('w-full aspect-square overflow-hidden rounded-lg bg-gray-400 dark:bg-zinc-700', imageClass)}
         >
-          {callToAction && callToAction.href ? (
-            <a href={callToAction.href} class="group">
-              <Image
-                src={img.src}
-                class={twMerge('w-full h-full  hover:scale-105 transition duration-300')}
-                widths={[400, 900]}
-                width={400}
-                height={400}
-                sizes="(max-width: 900px) 400px, 900px"
-                alt={img.alt}
-                aspectRatio={img.aspectRatio}
-                layout="cover"
-                loading="lazy"
-                decoding="async"
-              />
+          {urlForImage ? (
+            <a href={urlForImage} class="group">
+              {typeof image === 'string' ? (
+                <Fragment set:html={image} />
+              ) : (
+                <Image
+                  class={twMerge('w-full h-full  hover:scale-105 transition duration-300')}
+                  widths={[400, 900]}
+                  width={400}
+                  height={400}
+                  sizes="(max-width: 900px) 400px, 900px"
+                  layout="cover"
+                  loading="lazy"
+                  decoding="async"
+                  {...image}
+                />
+              )}
             </a>
           ) : (
-            <Image
-              src={img.src || String(image)}
-              class={twMerge('w-full h-full')}
-              widths={[400, 900]}
-              width={400}
-              height={400}
-              sizes="(max-width: 900px) 400px, 900px"
-              alt={img.alt || title}
-              aspectRatio={img.aspectRatio}
-              layout="cover"
-              loading="lazy"
-              decoding="async"
-            />
+            <Fragment>
+              {typeof image === 'string' ? (
+                <Fragment set:html={image} />
+              ) : (
+                <Image
+                  class={twMerge('w-full h-full')}
+                  widths={[400, 900]}
+                  width={400}
+                  height={400}
+                  sizes="(max-width: 900px) 400px, 900px"
+                  layout="cover"
+                  loading="lazy"
+                  decoding="async"
+                  {...image}
+                />
+              )}
+            </Fragment>
           )}
         </div>
       )
@@ -85,16 +95,42 @@ const img = {
 
   <div class="flex items-start gap-2">
     <div>
-      <WrapperHeaderTag class={twMerge('text-lg md:text-xl font-bold', titleClass)}>
+      <WrapperHeaderTag class={cn('text-lg md:text-xl font-bold', titleClass)}>
         {title}
       </WrapperHeaderTag>
 
-      <div class={twMerge('mt-2 text-sm md:text-base leading-5 md:leading-6', descriptionClass)}>
+      <div class={cn('mt-2 text-sm md:text-base leading-5 md:leading-6', descriptionClass)}>
         <slot />
         {description}
       </div>
     </div>
 
-    {callToAction && <Button {...callToAction} />}
+    {
+      callToAction && (
+        <div>
+          <slot name="footer" />
+
+          {Array.isArray(callToAction) ? (
+            <div class={cn('flex gap-2', actionClass)}>
+              {callToAction.map((action) => (
+                <Fragment>
+                  {typeof action === 'string' ? <Fragment set:html={action} /> : <Button {...(action || {})} />}
+                </Fragment>
+              ))}
+            </div>
+          ) : (
+            <Fragment>
+              {typeof callToAction === 'string' ? (
+                <Fragment set:html={callToAction} />
+              ) : (
+                <div class={cn('', actionClass)}>
+                  <Button {...(callToAction as Object)} />
+                </div>
+              )}
+            </Fragment>
+          )}
+        </div>
+      )
+    }
   </div>
 </Card0>

package/components/Card3/types.ts

@@ -7,5 +7,5 @@ export type Card3Props = {
   description?: string;
   asHeader?: HTMLTag;
   badge?: string;
-  callToAction?: ToAction;
+  callToAction?: string | ToAction | Array<string | ToAction>;
 } & Card0Props;

package/components/Card4/Card4.astro

@@ -9,7 +9,7 @@ import { cn } from '../../utils';
 const {
   title = await Astro.slots.render('title'),
   description = await Astro.slots.render('description'),
-  callToAction,
+  callToAction = await Astro.slots.render('actions'),
   as = 'article',
   asHeader = 'h3',
   icon,
@@ -23,6 +23,7 @@ const {
   title: titleClass = '',
   description: descriptionClass = '',
   icon: iconClass = '',
+  action: actionClass = '',
 } = classes;
 ---
 
@@ -48,10 +49,31 @@ const {
         )
       }
     </div>
+
     {
       callToAction && (
-        <div class={cn('w-full', classes?.action)}>
-          <Button {...callToAction} />
+        <div>
+          <slot name="footer" />
+
+          {Array.isArray(callToAction) ? (
+            <div class={cn('flex gap-2', actionClass)}>
+              {callToAction.map((action) => (
+                <Fragment>
+                  {typeof action === 'string' ? <Fragment set:html={action} /> : <Button {...(action || {})} />}
+                </Fragment>
+              ))}
+            </div>
+          ) : (
+            <Fragment>
+              {typeof callToAction === 'string' ? (
+                <Fragment set:html={callToAction} />
+              ) : (
+                <div class={cn('', actionClass)}>
+                  <Button {...(callToAction as Object)} />
+                </div>
+              )}
+            </Fragment>
+          )}
         </div>
       )
     }

package/components/Card4/types.ts

@@ -7,5 +7,5 @@ export type Card4Props = {
   title?: string;
   description?: string;
   icon?: string;
-  callToAction?: ToAction;
+  callToAction?: string | ToAction | Array<string | ToAction>;
 } & Card0Props;

package/components/Card5/Card5.astro

@@ -10,11 +10,11 @@ import { cn } from '../../utils';
 const {
   title = await Astro.slots.render('title'),
   description = await Astro.slots.render('description'),
-  callToAction,
+  callToAction = await Astro.slots.render('actions'),
   as = 'article',
   asHeader = 'h3',
   icon,
-  image,
+  image = await Astro.slots.render('image'),
   author,
   authorDescription,
 

package/components/HeroSection/HeroSection.astro

@@ -21,10 +21,12 @@ const img = {
 };
 
 const {
-  container: containerClass = 'h-96',
+  container: containerClass = 'bg-zinc-700 text-zinc-200 h-96',
   image: imageClass = '',
+  content: contentClass = '',
   title: titleClass = '',
   description: descriptionClass = '',
+  action: actionClass = 'w-full',
 } = classes;
 
 const WrapperHeaderTag = asHeader;
@@ -32,13 +34,13 @@ const WrapperHeaderTag = asHeader;
 
 <div
   class={twMerge(
-    'swiper-slide overflow-hidden bg-zinc-700 text-zinc-200 dark:bg-card dark:text-card-foreground',
+    'swiper-slide overflow-hidden dark:bg-card dark:text-card-foreground',
     containerClass
   )}
 >
   <div class="slide flex flex-col-reverse justify-between md:flex-row h-full">
     <div class="w-full flex items-center justify-center">
-      <div class="p-6 md:px-12 lg:px-20 xl:px-24 w-full h-full md:h-auto">
+      <div class={twMerge("p-6 md:px-12 lg:px-20 xl:px-24 w-full h-full md:h-auto", contentClass)}>
         <slot />
         {
           title && description && (
@@ -46,7 +48,7 @@ const WrapperHeaderTag = asHeader;
               <div class="mb-6">
                 <WrapperHeaderTag
                   class={twMerge(
-                    'text-white text-base md:text-lg xl:text-2xl font-medium md:font-semibold mb-2',
+                    'text-base md:text-lg xl:text-2xl font-medium md:font-semibold mb-2',
                     titleClass
                   )}
                 >
@@ -56,7 +58,7 @@ const WrapperHeaderTag = asHeader;
               </div>
               {callToAction && (
                 <Button
-                  class={twMerge('transition hover:translate-y-0.5 w-full', callToAction?.class)}
+                  class={twMerge('transition hover:translate-y-0.5 w-full', actionClass)}
                   {...callToAction}
                 />
               )}

package/components/WidgetCardSlider/WidgetCardSlider.astro

@@ -33,7 +33,7 @@ const Component = via;
   id={id}
   isDark={isDark}
   bg={bg}
-  containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : 'px-0 md:px-6 py-6 md:py-8 lg:py-8'} ${classes?.container}`}
+  containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container}`}
 >
   <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
 

package/components/WidgetFeatures0/WidgetFeatures0.astro

@@ -2,12 +2,15 @@
 import type { WidgetFeatures0Props as Props } from './types';
 import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
 import Headline from '../Headline/Headline.astro';
+import Button from '../Button/Button.astro';
+import Image from '../Image/Image.astro';
 
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),
   tagline = await Astro.slots.render('tagline'),
   isAfterContent = false,
+  callToAction = await Astro.slots.render('actions'),
 
   id,
   isDark = false,
@@ -24,4 +27,34 @@ const {
 >
   <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
   <slot />
+
+  {
+    callToAction && (
+      <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 mt-6">
+        {Array.isArray(callToAction) ? (
+          callToAction.map((action) => (
+            <Fragment>
+              {typeof action === 'string' ? (
+                <Fragment set:html={action} />
+              ) : (
+                <div class="flex w-full sm:w-auto">
+                  <Button {...(action || {})} class="w-full sm:mb-0" />
+                </div>
+              )}
+            </Fragment>
+          ))
+        ) : (
+          <Fragment>
+            {typeof callToAction === 'string' ? (
+              <Fragment set:html={callToAction} />
+            ) : (
+              <div class="flex w-full sm:w-auto">
+                <Button {...(callToAction || {})} class="w-full sm:mb-0" />
+              </div>
+            )}
+          </Fragment>
+        )}
+      </div>
+    )
+  }
 </WidgetWrapper>

package/components/WidgetFeatures0/types.ts

@@ -1,8 +1,10 @@
 import type { HeadlineProps } from '../Headline/types';
 import type { WidgetWrapperProps } from '../WidgetWrapper/types.ts';
+import type { ToAction } from '~/types';
 
 export type WidgetFeatures0Props = {
   isBeforeContent?: boolean;
   isAfterContent?: boolean;
+  callToAction?: string | ToAction | Array<string | ToAction>;
 } & WidgetWrapperProps &
   Omit<HeadlineProps, 'classes'>;

package/components/WidgetFeaturesCard/WidgetFeaturesCard.astro

@@ -5,7 +5,6 @@ import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
 import Headline from '../Headline/Headline.astro';
 import ItemGrid0 from '../ItemGrid0/ItemGrid0.astro';
 import Image from '../Image/Image.astro';
-import { twMerge } from 'tailwind-merge';
 import { cn } from '../../utils';
 
 const {

package/components/WidgetFeaturesCard/types.ts

@@ -6,5 +6,4 @@ export type WidgetFeaturesCardProps = {
   items?: any[];
   columns?: number;
   image?: Image | string;
-  isAfterContent?: boolean;
 } & WidgetFeatures0Props;

package/components/WidgetHeroSlider/WidgetHeroSlider.astro

@@ -114,7 +114,7 @@ const {
   id={id}
   isDark={isDark}
   bg={bg}
-  containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : 'px-0 md:px-6 py-6 md:py-8 lg:py-8'} ${classes?.container}`}
+  containerClass={`${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container}`}
 >
   <div class="relative md:rounded-xl overflow-hidden group">
     <swiper-container

package/components/WidgetStepsTimeline/WidgetStepsTimeline.astro

@@ -3,6 +3,7 @@ import type { WidgetStepsTimelineProps as Props } from './types';
 import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
 import Headline from '../Headline/Headline.astro';
 import Timeline from '../Timeline/Timeline.astro';
+import Image from '../Image/Image.astro';
 
 const {
   title = await Astro.slots.render('title'),

package/components/WidgetSwiperPhotoSlider/WidgetSwiperPhotoSlider.astro

@@ -4,8 +4,8 @@ import Headline from '../Headline/Headline.astro';
 import WidgetWrapper from '../WidgetWrapper/WidgetWrapper.astro';
 import SwiperSlider from '../SwiperSlider/SwiperSlider.astro';
 import { Image as AstroImage, getImage } from 'astro:assets';
-import {fetchLocalImages} from "../../utils/images";
-import Image from "../Image/Image.astro";
+import { fetchLocalImages } from '../../utils/images';
+import Image from '../Image/Image.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -26,15 +26,13 @@ const images = await fetchLocalImages();
 const imagePaths = Object.keys(images).filter((imagePath) => {
   return imagePath.startsWith(`/src/assets/images/${imagesFolder}/`);
 });
-
-
 ---
 
 <WidgetWrapper
   id={id}
   isDark={isDark}
   bg={bg}
-  containerClass={`gallery ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : 'px-0 md:px-6 py-6 md:py-8 lg:py-8'} ${classes?.container}`}
+  containerClass={`gallery ${isAfterContent ? 'pt-0 md:pt-0 lg:pt-0' : ''} ${classes?.container}`}
 >
   <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
 
@@ -64,7 +62,7 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
                   width={400}
                   height={400}
                   sizes="(max-width: 900px) 400px, 900px"
-                  class="w-full md:h-full group-hover:scale-105 transition duration-300"
+                  class="aspect-square w-full md:h-full group-hover:scale-105 transition duration-300"
                 />
               </a>
             </swiper-slide>
@@ -76,13 +74,13 @@ const imagePaths = Object.keys(images).filter((imagePath) => {
 </WidgetWrapper>
 
 <script>
-  import PhotoSwipeLightbox from "photoswipe/lightbox";
-  import "photoswipe/style.css";
+  import PhotoSwipeLightbox from 'photoswipe/lightbox';
+  import 'photoswipe/style.css';
 
   const lightbox = new PhotoSwipeLightbox({
-    gallery: ".gallery",
-    children: "a",
-    pswpModule: () => import("photoswipe"),
+    gallery: '.gallery',
+    children: 'a',
+    pswpModule: () => import('photoswipe'),
   });
 
   lightbox.init();

package/index.js

@@ -4,4 +4,5 @@ export * from './utils/id.ts'
 export * from './utils/images-optimization.ts'
 export * from './utils/images.ts'
 export * from './utils/index.ts'
+export * from './utils/slugify.ts'
 export * from './utils/utils.ts'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yatoday/astro-ui",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.10",
   "scripts": {
     "prepare": "husky",
     "pre-commit": "lint-staged",
@@ -23,7 +23,6 @@
     "create-component": "node scripts/createComponent.js"
   },
   "dependencies": {
-    "limax": "4.1.0",
     "lodash.merge": "^4.6.2",
     "photoswipe": "^5.4.4",
     "swiper": "^11.2.5",

package/styles/styles.css

@@ -2264,11 +2264,6 @@
       padding-block: calc(var(--spacing) * 6);
     }
   }
-  .lg\:py-8 {
-    @media (width >= 64rem) {
-      padding-block: calc(var(--spacing) * 8);
-    }
-  }
   .lg\:py-20 {
     @media (width >= 64rem) {
       padding-block: calc(var(--spacing) * 20);

package/utils/URLUtils.ts

@@ -1,4 +1,4 @@
-import slug from 'limax';
+import slugify from '../utils/slugify';
 import { trim } from './utils';
 
 /**
@@ -39,7 +39,7 @@ export const createPath = (...params: string[]): string => {
 export const cleanSlug = (text: string = ''): string =>
   trimSlash(text)
     .split('/')
-    .map((a: string) => slug(a))
+    .map((a: string) => slugify(a))
     .join('/');
 
 /**

package/utils/slugify.ts

@@ -0,0 +1,82 @@
+interface Options {
+  replacement?: string;
+  remove?: RegExp;
+  lower?: boolean;
+  strict?: boolean;
+  trim?: boolean;
+  locale?: string;
+}
+
+interface LocaleMap {
+  [key: string]: string;
+}
+
+interface CharMap {
+  [key: string]: string;
+}
+
+const charMap: CharMap = JSON.parse(
+  '{"$":"dollar","%":"percent","&":"and","<":"less",">":"greater","|":"or","¢":"cent","£":"pound","¤":"currency","¥":"yen","©":"(c)","ª":"a","®":"(r)","º":"o","À":"A","Á":"A","Â":"A","Ã":"A","Ä":"A","Å":"A","Æ":"AE","Ç":"C","È":"E","É":"E","Ê":"E","Ë":"E","Ì":"I","Í":"I","Î":"I","Ï":"I","Ð":"D","Ñ":"N","Ò":"O","Ó":"O","Ô":"O","Õ":"O","Ö":"O","Ø":"O","Ù":"U","Ú":"U","Û":"U","Ü":"U","Ý":"Y","Þ":"TH","ß":"ss","à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","æ":"ae","ç":"c","è":"e","é":"e","ê":"e","ë":"e","ì":"i","í":"i","î":"i","ï":"i","ð":"d","ñ":"n","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","ù":"u","ú":"u","û":"u","ü":"u","ý":"y","þ":"th","ÿ":"y","Ā":"A","ā":"a","Ă":"A","ă":"a","Ą":"A","ą":"a","Ć":"C","ć":"c","Č":"C","č":"c","Ď":"D","ď":"d","Đ":"DJ","đ":"dj","Ē":"E","ē":"e","Ė":"E","ė":"e","Ę":"e","ę":"e","Ě":"E","ě":"e","Ğ":"G","ğ":"g","Ģ":"G","ģ":"g","Ĩ":"I","ĩ":"i","Ī":"i","ī":"i","Į":"I","į":"i","İ":"I","ı":"i","Ķ":"k","ķ":"k","Ļ":"L","ļ":"l","Ľ":"L","ľ":"l","Ł":"L","ł":"l","Ń":"N","ń":"n","Ņ":"N","ņ":"n","Ň":"N","ň":"n","Ō":"O","ō":"o","Ő":"O","ő":"o","Œ":"OE","œ":"oe","Ŕ":"R","ŕ":"r","Ř":"R","ř":"r","Ś":"S","ś":"s","Ş":"S","ş":"s","Š":"S","š":"s","Ţ":"T","ţ":"t","Ť":"T","ť":"t","Ũ":"U","ũ":"u","Ū":"u","ū":"u","Ů":"U","ů":"u","Ű":"U","ű":"u","Ų":"U","ų":"u","Ŵ":"W","ŵ":"w","Ŷ":"Y","ŷ":"y","Ÿ":"Y","Ź":"Z","ź":"z","Ż":"Z","ż":"z","Ž":"Z","ž":"z","Ə":"E","ƒ":"f","Ơ":"O","ơ":"o","Ư":"U","ư":"u","Lj":"LJ","lj":"lj","Nj":"NJ","nj":"nj","Ș":"S","ș":"s","Ț":"T","ț":"t","ə":"e","˚":"o","Ά":"A","Έ":"E","Ή":"H","Ί":"I","Ό":"O","Ύ":"Y","Ώ":"W","ΐ":"i","Α":"A","Β":"B","Γ":"G","Δ":"D","Ε":"E","Ζ":"Z","Η":"H","Θ":"8","Ι":"I","Κ":"K","Λ":"L","Μ":"M","Ν":"N","Ξ":"3","Ο":"O","Π":"P","Ρ":"R","Σ":"S","Τ":"T","Υ":"Y","Φ":"F","Χ":"X","Ψ":"PS","Ω":"W","Ϊ":"I","Ϋ":"Y","ά":"a","έ":"e","ή":"h","ί":"i","ΰ":"y","α":"a","β":"b","γ":"g","δ":"d","ε":"e","ζ":"z","η":"h","θ":"8","ι":"i","κ":"k","λ":"l","μ":"m","ν":"n","ξ":"3","ο":"o","π":"p","ρ":"r","ς":"s","σ":"s","τ":"t","υ":"y","φ":"f","χ":"x","ψ":"ps","ω":"w","ϊ":"i","ϋ":"y","ό":"o","ύ":"y","ώ":"w","Ё":"Yo","Ђ":"DJ","Є":"Ye","І":"I","Ї":"Yi","Ј":"J","Љ":"LJ","Њ":"NJ","Ћ":"C","Џ":"DZ","А":"A","Б":"B","В":"V","Г":"G","Д":"D","Е":"E","Ж":"Zh","З":"Z","И":"I","Й":"J","К":"K","Л":"L","М":"M","Н":"N","О":"O","П":"P","Р":"R","С":"S","Т":"T","У":"U","Ф":"F","Х":"H","Ц":"C","Ч":"Ch","Ш":"Sh","Щ":"Sh","Ъ":"U","Ы":"Y","Ь":"","Э":"E","Ю":"Yu","Я":"Ya","а":"a","б":"b","в":"v","г":"g","д":"d","е":"e","ж":"zh","з":"z","и":"i","й":"j","к":"k","л":"l","м":"m","н":"n","о":"o","п":"p","р":"r","с":"s","т":"t","у":"u","ф":"f","х":"h","ц":"c","ч":"ch","ш":"sh","щ":"sh","ъ":"u","ы":"y","ь":"","э":"e","ю":"yu","я":"ya","ё":"yo","ђ":"dj","є":"ye","і":"i","ї":"yi","ј":"j","љ":"lj","њ":"nj","ћ":"c","ѝ":"u","џ":"dz","Ґ":"G","ґ":"g","Ғ":"GH","ғ":"gh","Қ":"KH","қ":"kh","Ң":"NG","ң":"ng","Ү":"UE","ү":"ue","Ұ":"U","ұ":"u","Һ":"H","һ":"h","Ә":"AE","ә":"ae","Ө":"OE","ө":"oe","Ա":"A","Բ":"B","Գ":"G","Դ":"D","Ե":"E","Զ":"Z","Է":"E\'","Ը":"Y\'","Թ":"T\'","Ժ":"JH","Ի":"I","Լ":"L","Խ":"X","Ծ":"C\'","Կ":"K","Հ":"H","Ձ":"D\'","Ղ":"GH","Ճ":"TW","Մ":"M","Յ":"Y","Ն":"N","Շ":"SH","Չ":"CH","Պ":"P","Ջ":"J","Ռ":"R\'","Ս":"S","Վ":"V","Տ":"T","Ր":"R","Ց":"C","Փ":"P\'","Ք":"Q\'","Օ":"O\'\'","Ֆ":"F","և":"EV","ء":"a","آ":"aa","أ":"a","ؤ":"u","إ":"i","ئ":"e","ا":"a","ب":"b","ة":"h","ت":"t","ث":"th","ج":"j","ح":"h","خ":"kh","د":"d","ذ":"th","ر":"r","ز":"z","س":"s","ش":"sh","ص":"s","ض":"dh","ط":"t","ظ":"z","ع":"a","غ":"gh","ف":"f","ق":"q","ك":"k","ل":"l","م":"m","ن":"n","ه":"h","و":"w","ى":"a","ي":"y","ً":"an","ٌ":"on","ٍ":"en","َ":"a","ُ":"u","ِ":"e","ْ":"","٠":"0","١":"1","٢":"2","٣":"3","٤":"4","٥":"5","٦":"6","٧":"7","٨":"8","٩":"9","پ":"p","چ":"ch","ژ":"zh","ک":"k","گ":"g","ی":"y","۰":"0","۱":"1","۲":"2","۳":"3","۴":"4","۵":"5","۶":"6","۷":"7","۸":"8","۹":"9","฿":"baht","ა":"a","ბ":"b","გ":"g","დ":"d","ე":"e","ვ":"v","ზ":"z","თ":"t","ი":"i","კ":"k","ლ":"l","მ":"m","ნ":"n","ო":"o","პ":"p","ჟ":"zh","რ":"r","ს":"s","ტ":"t","უ":"u","ფ":"f","ქ":"k","ღ":"gh","ყ":"q","შ":"sh","ჩ":"ch","ც":"ts","ძ":"dz","წ":"ts","ჭ":"ch","ხ":"kh","ჯ":"j","ჰ":"h","Ṣ":"S","ṣ":"s","Ẁ":"W","ẁ":"w","Ẃ":"W","ẃ":"w","Ẅ":"W","ẅ":"w","ẞ":"SS","Ạ":"A","ạ":"a","Ả":"A","ả":"a","Ấ":"A","ấ":"a","Ầ":"A","ầ":"a","Ẩ":"A","ẩ":"a","Ẫ":"A","ẫ":"a","Ậ":"A","ậ":"a","Ắ":"A","ắ":"a","Ằ":"A","ằ":"a","Ẳ":"A","ẳ":"a","Ẵ":"A","ẵ":"a","Ặ":"A","ặ":"a","Ẹ":"E","ẹ":"e","Ẻ":"E","ẻ":"e","Ẽ":"E","ẽ":"e","Ế":"E","ế":"e","Ề":"E","ề":"e","Ể":"E","ể":"e","Ễ":"E","ễ":"e","Ệ":"E","ệ":"e","Ỉ":"I","ỉ":"i","Ị":"I","ị":"i","Ọ":"O","ọ":"o","Ỏ":"O","ỏ":"o","Ố":"O","ố":"o","Ồ":"O","ồ":"o","Ổ":"O","ổ":"o","Ỗ":"O","ỗ":"o","Ộ":"O","ộ":"o","Ớ":"O","ớ":"o","Ờ":"O","ờ":"o","Ở":"O","ở":"o","Ỡ":"O","ỡ":"o","Ợ":"O","ợ":"o","Ụ":"U","ụ":"u","Ủ":"U","ủ":"u","Ứ":"U","ứ":"u","Ừ":"U","ừ":"u","Ử":"U","ử":"u","Ữ":"U","ữ":"u","Ự":"U","ự":"u","Ỳ":"Y","ỳ":"y","Ỵ":"Y","ỵ":"y","Ỷ":"Y","ỷ":"y","Ỹ":"Y","ỹ":"y","–":"-","‘":"\'","’":"\'","“":"\\\"","”":"\\\"","„":"\\\"","†":"+","•":"*","…":"...","₠":"ecu","₢":"cruzeiro","₣":"french franc","₤":"lira","₥":"mill","₦":"naira","₧":"peseta","₨":"rupee","₩":"won","₪":"new shequel","₫":"dong","€":"euro","₭":"kip","₮":"tugrik","₯":"drachma","₰":"penny","₱":"peso","₲":"guarani","₳":"austral","₴":"hryvnia","₵":"cedi","₸":"kazakhstani tenge","₹":"indian rupee","₺":"turkish lira","₽":"russian ruble","₿":"bitcoin","℠":"sm","™":"tm","∂":"d","∆":"delta","∑":"sum","∞":"infinity","♥":"love","元":"yuan","円":"yen","﷼":"rial","ﻵ":"laa","ﻷ":"laa","ﻹ":"lai","ﻻ":"la"}'
+);
+
+const locales: Record<string, LocaleMap> = JSON.parse(
+  '{"bg":{"Й":"Y","Ц":"Ts","Щ":"Sht","Ъ":"A","Ь":"Y","й":"y","ц":"ts","щ":"sht","ъ":"a","ь":"y"},"de":{"Ä":"AE","ä":"ae","Ö":"OE","ö":"oe","Ü":"UE","ü":"ue","ß":"ss","%":"prozent","&":"und","|":"oder","∑":"summe","∞":"unendlich","♥":"liebe"},"es":{"%":"por ciento","&":"y","<":"menor que",">":"mayor que","|":"o","¢":"centavos","£":"libras","¤":"moneda","₣":"francos","∑":"suma","∞":"infinito","♥":"amor"},"fr":{"%":"pourcent","&":"et","<":"plus petit",">":"plus grand","|":"ou","¢":"centime","£":"livre","¤":"devise","₣":"franc","∑":"somme","∞":"infini","♥":"amour"},"pt":{"%":"porcento","&":"e","<":"menor",">":"maior","|":"ou","¢":"centavo","∑":"soma","£":"libra","∞":"infinito","♥":"amor"},"uk":{"И":"Y","и":"y","Й":"Y","й":"y","Ц":"Ts","ц":"ts","Х":"Kh","х":"kh","Щ":"Shch","щ":"shch","Г":"H","г":"h"},"vi":{"Đ":"D","đ":"d"},"da":{"Ø":"OE","ø":"oe","Å":"AA","å":"aa","%":"procent","&":"og","|":"eller","$":"dollar","<":"mindre end",">":"større end"},"nb":{"&":"og","Å":"AA","Æ":"AE","Ø":"OE","å":"aa","æ":"ae","ø":"oe"},"it":{"&":"e"},"nl":{"&":"en"},"sv":{"&":"och","Å":"AA","Ä":"AE","Ö":"OE","å":"aa","ä":"ae","ö":"oe"}}'
+);
+
+function replace(string: string, options?: string | Options): string {
+  if (typeof string !== 'string') {
+    throw new Error('slugify: string argument expected');
+  }
+
+  const resolvedOptions: Options =
+    typeof options === 'string' ? { replacement: options } : options || {};
+
+  const locale: LocaleMap = locales[resolvedOptions.locale || ''] || {};
+  const replacement: string = resolvedOptions.replacement === undefined ? '-' : resolvedOptions.replacement;
+  const trim: boolean = resolvedOptions.trim === undefined ? true : resolvedOptions.trim;
+
+  // Define a regular expression to remove single and double quotes
+  const quotesAndSpecialCharsToRemove = /['"]+/g;
+
+  let slug = string
+    .normalize()
+    .replace(quotesAndSpecialCharsToRemove, '') // Remove quotes
+    .split('')
+    .reduce((result, ch) => {
+      let appendChar: string | undefined = locale[ch];
+      if (appendChar === undefined) appendChar = charMap[ch];
+      if (appendChar === undefined) appendChar = ch;
+      if (appendChar === replacement) appendChar = ' ';
+      return result + appendChar;
+    }, '')
+    .replace(resolvedOptions.remove || /[^\w\s$*_+~.()'"!\-:@]+/g, '');
+
+  if (resolvedOptions.strict) {
+    slug = slug.replace(/[^A-Za-z0-9\s]/g, '');
+  }
+
+  if (trim) {
+    slug = slug.trim();
+  }
+
+  slug = slug.replace(/\s+/g, replacement);
+
+  if (resolvedOptions.lower) {
+    slug = slug.toLowerCase();
+  }
+
+  return slug;
+}
+
+replace.extend = (customMap: CharMap): void => {
+  Object.assign(charMap, customMap);
+};
+
+// Export as a module
+export default replace;
+
+// For CommonJS compatibility (as in the original code)
+if (typeof exports === 'object') {
+  module.exports = replace;
+  module.exports.default = replace;
+}