@redneckz/wildless-cms-uni-blocks 0.8.10 → 0.8.12

package/mobile/src/hooks/useLink.ts

@@ -1,7 +1,6 @@
 import type { LinkProps } from '../model/LinkProps';
-import { projectSettings } from '../ProjectSettings';
-import { gotoBlock } from '../services/BlockRouter/BlockRouter';
-import { isHash, isLocalURL, joinPath } from '../utils/url';
+import { adjustHref } from '../utils/adjustHref';
+import { isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
@@ -18,35 +17,23 @@ export function useLink(isRemote?: boolean) {
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
-    href: adjustHref(props.href),
+    href: isRemote ? props.href : adjustHref(router)(props.href),
     'aria-label': props.text,
     onClick: handlerDecorator(handleHref(props), props),
   });
 
-  function adjustHref(href: string | undefined) {
-    const isRelativeToBase = !isRemote && href?.startsWith('/');
-
-    return projectSettings.BASE_PATH && href && isRelativeToBase
-      ? joinPath(projectSettings.BASE_PATH, href)
-      : href;
-  }
-
   function handleHref({ href, target, onClick }: Partial<LinkProps & Clickable>) {
     return (ev?: PreventableEvent) => {
       onClick && onClick(ev);
 
-      if (isRemote || !isLocalURL(href, target)) {
+      if (!href || isRemote || !isLocalURL(href, target)) {
         // Default routing
         return;
       }
 
       // Client routing
       ev?.preventDefault();
-      if (isHash(href)) {
-        gotoBlock(router, href);
-      } else if (href) {
-        router.push(href);
-      }
+      router.push(href);
     };
   }
 }

package/mobile/src/services/BlockRouter/BlockRouter.ts

@@ -1,14 +1,11 @@
-import type { Router } from '../../hooks/useRouter';
 import type { BlockDef } from '../../model/ContentPageDef';
 
 const normalizeAnchor = (anchor?: string) => anchor?.replace('#', '') || '';
 
-export function gotoBlock(router: Router, anchor?: string) {
-  router.replace(`#${normalizeAnchor(anchor)}`);
-}
+export function trackBlock(block?: BlockDef) {
+  const hash = `#${normalizeAnchor(block?.anchor)}`;
 
-export function trackBlock(router: Router, block?: BlockDef) {
-  router.replace(`#${normalizeAnchor(block?.anchor)}`, undefined, {
-    scroll: false,
-  });
+  if (globalThis.location?.hash !== hash) {
+    globalThis.history?.replaceState(globalThis.history?.state, '', hash);
+  }
 }

package/mobile/src/services/BlockRouter/useBlockRouterProvider.ts

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-import { useRouter } from '../../hooks/useRouter';
 import type { BlockDef } from '../../model/ContentPageDef';
 import { debounce } from '../../utils/debounce';
 import { trackBlock } from './BlockRouter';
@@ -9,8 +8,6 @@ import { findActiveBlock } from './findActiveBlock';
 const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
 
 export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
-  const router = useRouter();
-
   const intersectionsMapRef = useRef<Map<BlockDef, IntersectionObserverEntry>>(new Map());
 
   useEffect(
@@ -25,12 +22,9 @@ export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
 
   useEffect(() => {
     const handleScroll = debounce(() => {
-      if (isScrolledEnough()) {
-        const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
-        trackBlock(router, activeBlock);
-      } else {
-        trackBlock(router);
-      }
+      trackBlock(
+        isScrolledEnough() ? findActiveBlock([...(intersectionsMapRef.current || [])]) : undefined,
+      );
     }, 100);
 
     scrollTarget.addEventListener('scroll', handleScroll);
@@ -39,5 +33,5 @@ export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
       handleScroll.dispose();
       scrollTarget.removeEventListener('scroll', handleScroll);
     };
-  }, [router, scrollTarget]);
+  }, [scrollTarget]);
 }

package/mobile/src/setup-fixture.ts

@@ -3,13 +3,14 @@ import { useEffect, useState } from 'react';
 import { handlerDecorator } from './hooks/handlerDecorator';
 import { useRouter } from './hooks/useRouter';
 import { projectSettings } from './ProjectSettings';
+import { joinPath } from './utils/url';
 import wlc from './wlc.json';
 
 projectSettings.setup(wlc);
 
 useRouter.setup(() => {
   const [href, setHref] = useState<string>(
-    `${globalThis.location.origin}${projectSettings.BASE_PATH}cards-credit`,
+    joinPath(globalThis.location.origin, projectSettings.BASE_PATH, 'cards-credit'),
   );
 
   useEffect(() => {
@@ -26,9 +27,9 @@ useRouter.setup(() => {
 
   return {
     href,
-    pathname: projectSettings.BASE_PATH
-      ? new URL(href).pathname.substring(projectSettings.BASE_PATH.length - 1)
-      : '',
+    pathname: new URL(href).pathname.substring(
+      projectSettings.BASE_PATH ? projectSettings.BASE_PATH.length - 1 : 0,
+    ),
     query: {},
     push: (url: string) => {
       globalThis.history.pushState(null, '', url);

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -30,9 +30,10 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () =>
         defaultEventBus.subscribe('tab', (event) => {
           if (event.type === 'group') {
-            const hasSettings = block?.labels?.length || block?.anchor;
             setVisible(
-              event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true,
+              !block?.labels?.length ||
+                !event.label ||
+                Boolean(block?.labels?.includes(event.label)),
             );
           } else {
             setVisible(true);

package/mobile/src/ui-kit/Icon/Icon.tsx

@@ -1,7 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useRouter } from '../../hooks/useRouter';
 import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
+import { adjustHref } from '../../utils/adjustHref';
 import { style } from '../../utils/style';
+import { joinPath } from '../../utils/url';
 import type { IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
@@ -22,7 +25,8 @@ export const Icon = JSX<IconProps>(
     asSVG,
     ...imgProps
   }) => {
-    const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+    const router = useRouter();
+    const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
 
     if (asSVG && iconVersion !== 'normal') {
       return (

package/mobile/src/ui-kit/Img/ImgAsPicture.tsx

@@ -1,20 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Router, useRouter } from '../../hooks/useRouter';
 import type { ImgSource, Picture } from '../../model/Picture';
+import { adjustHref } from '../../utils/adjustHref';
+import { isURL, joinPath } from '../../utils/url';
 import type { ImageProps } from './ImgProps';
 
-const sourcesComparator = (a: Picture, b: Picture) => {
-  if (a.media && b.media) {
-    return a.media - b.media;
-  }
-
-  return 0;
-};
+const sourcesComparator = (a: Picture, b: Picture) =>
+  a?.media && b?.media ? a.media - b.media : 0;
 
 export const ImgAsPicture = JSX<ImageProps>(
   ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
-    if (!image || (!image?.sources && !image?.src)) {
-      return null;
-    }
+    const router = useRouter();
 
     const pictureStyles = isMobile ? 'flex' : 'flex-none';
 
@@ -22,22 +18,25 @@ export const ImgAsPicture = JSX<ImageProps>(
       <picture className={`${pictureStyles} ${className}`}>
         {image?.sources?.length
           ? image.sources
+              .filter((_) => _?.src)
               .sort(sourcesComparator)
               .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
-                  srcSet={addPathPrefixToSrcSet(src, pathPrefix)}
+                  srcSet={adjustSrcset(router, pathPrefix)(src)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
                   {...image.size}
                 />
               ))
           : null}
-        {renderImg(
-          { ...image, src: addPathPrefixToSrc(image.src, pathPrefix) },
-          imageClassName,
-          isMobile,
-        )}
+        {image?.src
+          ? renderImg(
+              { ...image, src: adjustSrcset(router, pathPrefix)(image.src) },
+              imageClassName,
+              isMobile,
+            )
+          : null}
       </picture>
     );
   },
@@ -65,18 +64,14 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
   );
 };
 
-const normalizePathPrefix = (pathPrefix = '') =>
-  pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
-
-const addPathPrefixToSrc = (src?: string, pathPrefix?: string) =>
-  !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
-
-const addPathPrefixToSrcSet = (srcset?: string, pathPrefix?: string) =>
+const adjustSrcset = (router: Router, pathPrefix?: string) => (srcset: string | undefined) =>
   srcset
-    ?.split(',')
-    .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
+    ?.split(/\s*,\s*/)
+    .map((src) => src.trim())
+    .filter(Boolean)
+    .map((src) => (isURL(src) ? src : joinPath(pathPrefix, src)))
+    .map(adjustHref(router))
     .join(', ');
 
-export function formatToMimeType(format: ImgSource['format']): string | undefined {
-  return format ? `image/${String(format)}` : undefined;
-}
+const formatToMimeType = (format: ImgSource['format']) =>
+  format ? `image/${String(format)}` : undefined;

package/mobile/src/utils/adjustHref.ts

@@ -0,0 +1,17 @@
+import { projectSettings } from '../ProjectSettings';
+import { dirname } from './dirname';
+import { isURL, joinPath } from './url';
+
+export const adjustHref = (router: { pathname: string }) => (href: string | undefined) => {
+  if (!href || isURL(href) || (projectSettings.CDN && href.startsWith(projectSettings.CDN))) {
+    return href;
+  }
+
+  const isRelativeToBase = href.startsWith('/');
+
+  return joinPath(
+    projectSettings.BASE_PATH,
+    isRelativeToBase ? '/' : dirname(router.pathname),
+    href,
+  );
+};

package/mobile/src/utils/dirname.ts

@@ -0,0 +1 @@
+export const dirname = (path: string | undefined) => path?.split('/').slice(0, -1).join('/');

package/mobile/src/utils/url.ts

@@ -1,7 +1,6 @@
 import type { Target } from '../model/LinkProps';
 
-export const isURL = (href?: string): href is `${string}//${string}` =>
-  Boolean(href?.includes('//'));
+export const isURL = (href?: string): href is `${string}:${string}` => Boolean(href?.includes(':'));
 
 export const isLocalURL = (href: string | undefined, target?: Target) =>
   Boolean(href && !isURL(href) && (!target || target === '_self'));
@@ -11,5 +10,5 @@ export const isHash = (href?: string): href is `#${string}` => Boolean(href?.sta
 export const withoutQuery = (href?: string): string =>
   (href || '').replace(/\?.*/, '').replace(/\/$/, '');
 
-export const joinPath = (...path: string[]): string =>
+export const joinPath = (...path: (string | undefined)[]): string =>
   path.filter(Boolean).join('/').replace(/\/+/g, '/');

package/mobile/src/wlc.json

@@ -2,6 +2,5 @@
   "PROD_BRANCH": "master",
   "FORCED_DRAFT_FLOW": false,
   "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
-  "BASE_PATH": "/natural/",
   "SITEMAP": "sayt-rshb"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/ProjectSettings.ts

@@ -43,12 +43,10 @@ export const projectSettings = new (class implements ProjectSettings {
     return this._.FOOTER;
   }
   get CDN() {
-    return this._.CDN;
+    return appendSlash(this._.CDN);
   }
   get BASE_PATH() {
-    return this._.BASE_PATH && !this._.BASE_PATH.endsWith('/')
-      ? `${this._.BASE_PATH}/`
-      : this._.BASE_PATH;
+    return appendSlash(this._.BASE_PATH);
   }
   get YANDEX_MAP_API_KEY() {
     return this._.YANDEX_MAP_API_KEY;
@@ -57,3 +55,5 @@ export const projectSettings = new (class implements ProjectSettings {
     return this._.YANDEX_METRIKA_ID;
   }
 })();
+
+const appendSlash = (url: string | undefined) => (url && !url.endsWith('/') ? `${url}/` : url);

package/src/hooks/useLink.ts

@@ -1,7 +1,6 @@
 import type { LinkProps } from '../model/LinkProps';
-import { projectSettings } from '../ProjectSettings';
-import { gotoBlock } from '../services/BlockRouter/BlockRouter';
-import { isHash, isLocalURL, joinPath } from '../utils/url';
+import { adjustHref } from '../utils/adjustHref';
+import { isLocalURL } from '../utils/url';
 import { handlerDecorator } from './handlerDecorator';
 import { useRouter } from './useRouter';
 
@@ -18,35 +17,23 @@ export function useLink(isRemote?: boolean) {
 
   return <L extends Partial<LinkProps & Clickable>>(props: L): L & Clickable => ({
     ...props,
-    href: adjustHref(props.href),
+    href: isRemote ? props.href : adjustHref(router)(props.href),
     'aria-label': props.text,
     onClick: handlerDecorator(handleHref(props), props),
   });
 
-  function adjustHref(href: string | undefined) {
-    const isRelativeToBase = !isRemote && href?.startsWith('/');
-
-    return projectSettings.BASE_PATH && href && isRelativeToBase
-      ? joinPath(projectSettings.BASE_PATH, href)
-      : href;
-  }
-
   function handleHref({ href, target, onClick }: Partial<LinkProps & Clickable>) {
     return (ev?: PreventableEvent) => {
       onClick && onClick(ev);
 
-      if (isRemote || !isLocalURL(href, target)) {
+      if (!href || isRemote || !isLocalURL(href, target)) {
         // Default routing
         return;
       }
 
       // Client routing
       ev?.preventDefault();
-      if (isHash(href)) {
-        gotoBlock(router, href);
-      } else if (href) {
-        router.push(href);
-      }
+      router.push(href);
     };
   }
 }

package/src/services/BlockRouter/BlockRouter.ts

@@ -1,14 +1,11 @@
-import type { Router } from '../../hooks/useRouter';
 import type { BlockDef } from '../../model/ContentPageDef';
 
 const normalizeAnchor = (anchor?: string) => anchor?.replace('#', '') || '';
 
-export function gotoBlock(router: Router, anchor?: string) {
-  router.replace(`#${normalizeAnchor(anchor)}`);
-}
+export function trackBlock(block?: BlockDef) {
+  const hash = `#${normalizeAnchor(block?.anchor)}`;
 
-export function trackBlock(router: Router, block?: BlockDef) {
-  router.replace(`#${normalizeAnchor(block?.anchor)}`, undefined, {
-    scroll: false,
-  });
+  if (globalThis.location?.hash !== hash) {
+    globalThis.history?.replaceState(globalThis.history?.state, '', hash);
+  }
 }

package/src/services/BlockRouter/useBlockRouterProvider.ts

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
-import { useRouter } from '../../hooks/useRouter';
 import type { BlockDef } from '../../model/ContentPageDef';
 import { debounce } from '../../utils/debounce';
 import { trackBlock } from './BlockRouter';
@@ -9,8 +8,6 @@ import { findActiveBlock } from './findActiveBlock';
 const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
 
 export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
-  const router = useRouter();
-
   const intersectionsMapRef = useRef<Map<BlockDef, IntersectionObserverEntry>>(new Map());
 
   useEffect(
@@ -25,12 +22,9 @@ export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
 
   useEffect(() => {
     const handleScroll = debounce(() => {
-      if (isScrolledEnough()) {
-        const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
-        trackBlock(router, activeBlock);
-      } else {
-        trackBlock(router);
-      }
+      trackBlock(
+        isScrolledEnough() ? findActiveBlock([...(intersectionsMapRef.current || [])]) : undefined,
+      );
     }, 100);
 
     scrollTarget.addEventListener('scroll', handleScroll);
@@ -39,5 +33,5 @@ export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
       handleScroll.dispose();
       scrollTarget.removeEventListener('scroll', handleScroll);
     };
-  }, [router, scrollTarget]);
+  }, [scrollTarget]);
 }

package/src/setup-fixture.ts

@@ -3,13 +3,14 @@ import { useEffect, useState } from 'react';
 import { handlerDecorator } from './hooks/handlerDecorator';
 import { useRouter } from './hooks/useRouter';
 import { projectSettings } from './ProjectSettings';
+import { joinPath } from './utils/url';
 import wlc from './wlc.json';
 
 projectSettings.setup(wlc);
 
 useRouter.setup(() => {
   const [href, setHref] = useState<string>(
-    `${globalThis.location.origin}${projectSettings.BASE_PATH}cards-credit`,
+    joinPath(globalThis.location.origin, projectSettings.BASE_PATH, 'cards-credit'),
   );
 
   useEffect(() => {
@@ -26,9 +27,9 @@ useRouter.setup(() => {
 
   return {
     href,
-    pathname: projectSettings.BASE_PATH
-      ? new URL(href).pathname.substring(projectSettings.BASE_PATH.length - 1)
-      : '',
+    pathname: new URL(href).pathname.substring(
+      projectSettings.BASE_PATH ? projectSettings.BASE_PATH.length - 1 : 0,
+    ),
     query: {},
     push: (url: string) => {
       globalThis.history.pushState(null, '', url);

package/src/ui-kit/BlockWrapper.tsx

@@ -30,9 +30,10 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
       () =>
         defaultEventBus.subscribe('tab', (event) => {
           if (event.type === 'group') {
-            const hasSettings = block?.labels?.length || block?.anchor;
             setVisible(
-              event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true,
+              !block?.labels?.length ||
+                !event.label ||
+                Boolean(block?.labels?.includes(event.label)),
             );
           } else {
             setVisible(true);

package/src/ui-kit/Icon/Icon.tsx

@@ -1,7 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useRouter } from '../../hooks/useRouter';
 import type { IconVersion } from '../../model/IconVersion';
 import { projectSettings } from '../../ProjectSettings';
+import { adjustHref } from '../../utils/adjustHref';
 import { style } from '../../utils/style';
+import { joinPath } from '../../utils/url';
 import type { IconProps } from './IconProps';
 
 const svgUseStyleMap: Record<IconVersion, string> = {
@@ -22,7 +25,8 @@ export const Icon = JSX<IconProps>(
     asSVG,
     ...imgProps
   }) => {
-    const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+    const router = useRouter();
+    const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
 
     if (asSVG && iconVersion !== 'normal') {
       return (

package/src/ui-kit/Img/ImgAsPicture.tsx

@@ -1,20 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Router, useRouter } from '../../hooks/useRouter';
 import type { ImgSource, Picture } from '../../model/Picture';
+import { adjustHref } from '../../utils/adjustHref';
+import { isURL, joinPath } from '../../utils/url';
 import type { ImageProps } from './ImgProps';
 
-const sourcesComparator = (a: Picture, b: Picture) => {
-  if (a.media && b.media) {
-    return a.media - b.media;
-  }
-
-  return 0;
-};
+const sourcesComparator = (a: Picture, b: Picture) =>
+  a?.media && b?.media ? a.media - b.media : 0;
 
 export const ImgAsPicture = JSX<ImageProps>(
   ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
-    if (!image || (!image?.sources && !image?.src)) {
-      return null;
-    }
+    const router = useRouter();
 
     const pictureStyles = isMobile ? 'flex' : 'flex-none';
 
@@ -22,22 +18,25 @@ export const ImgAsPicture = JSX<ImageProps>(
       <picture className={`${pictureStyles} ${className}`}>
         {image?.sources?.length
           ? image.sources
+              .filter((_) => _?.src)
               .sort(sourcesComparator)
               .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
-                  srcSet={addPathPrefixToSrcSet(src, pathPrefix)}
+                  srcSet={adjustSrcset(router, pathPrefix)(src)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
                   {...image.size}
                 />
               ))
           : null}
-        {renderImg(
-          { ...image, src: addPathPrefixToSrc(image.src, pathPrefix) },
-          imageClassName,
-          isMobile,
-        )}
+        {image?.src
+          ? renderImg(
+              { ...image, src: adjustSrcset(router, pathPrefix)(image.src) },
+              imageClassName,
+              isMobile,
+            )
+          : null}
       </picture>
     );
   },
@@ -65,18 +64,14 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
   );
 };
 
-const normalizePathPrefix = (pathPrefix = '') =>
-  pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
-
-const addPathPrefixToSrc = (src?: string, pathPrefix?: string) =>
-  !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
-
-const addPathPrefixToSrcSet = (srcset?: string, pathPrefix?: string) =>
+const adjustSrcset = (router: Router, pathPrefix?: string) => (srcset: string | undefined) =>
   srcset
-    ?.split(',')
-    .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
+    ?.split(/\s*,\s*/)
+    .map((src) => src.trim())
+    .filter(Boolean)
+    .map((src) => (isURL(src) ? src : joinPath(pathPrefix, src)))
+    .map(adjustHref(router))
     .join(', ');
 
-export function formatToMimeType(format: ImgSource['format']): string | undefined {
-  return format ? `image/${String(format)}` : undefined;
-}
+const formatToMimeType = (format: ImgSource['format']) =>
+  format ? `image/${String(format)}` : undefined;

package/src/utils/adjustHref.ts

@@ -0,0 +1,17 @@
+import { projectSettings } from '../ProjectSettings';
+import { dirname } from './dirname';
+import { isURL, joinPath } from './url';
+
+export const adjustHref = (router: { pathname: string }) => (href: string | undefined) => {
+  if (!href || isURL(href) || (projectSettings.CDN && href.startsWith(projectSettings.CDN))) {
+    return href;
+  }
+
+  const isRelativeToBase = href.startsWith('/');
+
+  return joinPath(
+    projectSettings.BASE_PATH,
+    isRelativeToBase ? '/' : dirname(router.pathname),
+    href,
+  );
+};

package/src/utils/dirname.ts

@@ -0,0 +1 @@
+export const dirname = (path: string | undefined) => path?.split('/').slice(0, -1).join('/');

package/src/utils/url.ts

@@ -1,7 +1,6 @@
 import type { Target } from '../model/LinkProps';
 
-export const isURL = (href?: string): href is `${string}//${string}` =>
-  Boolean(href?.includes('//'));
+export const isURL = (href?: string): href is `${string}:${string}` => Boolean(href?.includes(':'));
 
 export const isLocalURL = (href: string | undefined, target?: Target) =>
   Boolean(href && !isURL(href) && (!target || target === '_self'));
@@ -11,5 +10,5 @@ export const isHash = (href?: string): href is `#${string}` => Boolean(href?.sta
 export const withoutQuery = (href?: string): string =>
   (href || '').replace(/\?.*/, '').replace(/\/$/, '');
 
-export const joinPath = (...path: string[]): string =>
+export const joinPath = (...path: (string | undefined)[]): string =>
   path.filter(Boolean).join('/').replace(/\/+/g, '/');

package/src/wlc.json

@@ -2,6 +2,5 @@
   "PROD_BRANCH": "master",
   "FORCED_DRAFT_FLOW": false,
   "YANDEX_MAP_API_KEY": "f4b40c1e-1891-45f2-b307-90c481af210b",
-  "BASE_PATH": "/natural/",
   "SITEMAP": "sayt-rshb"
 }