@salla.sa/twilight-theme-engine 1.0.0-beta.4

package/dist/BlogCategoryPage-AIAJ5JBR.js

@@ -0,0 +1,101 @@
+import { BlogListLayout, BlogArticleCard } from './chunk-4EQEYRZ7.js';
+import { blog } from './chunk-DFMO5KBU.js';
+import './chunk-GLM3RPCP.js';
+import './chunk-QTDGM2SO.js';
+import './chunk-5Q6PFLDN.js';
+import { useLocation } from './chunk-GO34DE35.js';
+import './chunk-VVZNW5CB.js';
+import './chunk-LBUMC5PB.js';
+import './chunk-MTONGOJD.js';
+import './chunk-2FU6CVSB.js';
+import './chunk-I5Z4NJBB.js';
+import './chunk-TCSNNCRH.js';
+import './chunk-2TB2LTL2.js';
+import './chunk-QYL5OHAV.js';
+import './chunk-KIPZQN3Y.js';
+import './chunk-Z653O7MX.js';
+import './chunk-ZCH7W7DZ.js';
+import './chunk-SSRNIBVV.js';
+import './chunk-GN34LCTG.js';
+import './chunk-CW625T2E.js';
+import './chunk-BVSJPBJ6.js';
+import './chunk-GBWCXUPD.js';
+import './chunk-UIX3W2PN.js';
+import { useTranslation } from './chunk-VVRYP6IL.js';
+import './chunk-T72DAX7R.js';
+import './chunk-YMVLYYLU.js';
+import './chunk-RYBA3JDM.js';
+import { HookSlot } from './chunk-25SSLQAJ.js';
+import './chunk-J37AYLWL.js';
+import { LazyBreadcrumb, LazyNoContent } from './chunk-2KF5JJU6.js';
+import './chunk-TZ4YD5CU.js';
+import './chunk-XUI3TRXF.js';
+import './chunk-6BZ5TKEV.js';
+import './chunk-UE3BUFZI.js';
+import './chunk-3DCZJDDK.js';
+import './chunk-3UHSMGPY.js';
+import './chunk-MXQCE3KA.js';
+import './chunk-BWFBVXT3.js';
+import './chunk-DGUM43GV.js';
+import { useRef, useCallback } from 'react';
+import { ItemsList } from '@salla.sa/twilight-components-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function BlogCategoryPage({
+  page,
+  blogCategory,
+  categories = [],
+  articles = [],
+  cursor
+}) {
+  const { t } = useTranslation();
+  const { pathname, searchStr } = useLocation();
+  const nextCursorRef = useRef(cursor?.next ?? null);
+  const loader = useCallback(async () => {
+    const nextUrl = nextCursorRef.current;
+    const cursorMatch = nextUrl?.match(/[?&]cursor=([^&]+)/);
+    const cursorValue = cursorMatch ? decodeURIComponent(cursorMatch[1]) : nextUrl ?? void 0;
+    const result = await blog.articles.list({ category: blogCategory.id, cursor: cursorValue });
+    nextCursorRef.current = result.cursor?.next ?? null;
+    return {
+      items: result.data,
+      next: result.cursor?.next ?? null
+    };
+  }, [blogCategory.id]);
+  if (articles.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "container mb-8 sm:mb-24", children: [
+      /* @__PURE__ */ jsx(LazyBreadcrumb, { page }),
+      /* @__PURE__ */ jsxs(BlogListLayout, { categories, children: [
+        /* @__PURE__ */ jsx(HookSlot, { name: "blog:category.start" }),
+        /* @__PURE__ */ jsx(LazyNoContent, { icon: "sicon-inbox", message: t("pages.blog_articles.no_articles") }),
+        /* @__PURE__ */ jsx(HookSlot, { name: "blog:category.end" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "container mb-8 sm:mb-24", children: [
+    /* @__PURE__ */ jsx(LazyBreadcrumb, { page }),
+    /* @__PURE__ */ jsxs(BlogListLayout, { categories, children: [
+      /* @__PURE__ */ jsx(HookSlot, { name: "blog:category.start" }),
+      /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx("h1", { className: "font-bold text-xl", children: blogCategory.name }) }),
+      /* @__PURE__ */ jsx(
+        ItemsList,
+        {
+          items: articles,
+          loader: cursor?.next ? loader : void 0,
+          mode: cursor?.next ? "infinite" : "static",
+          pageUrl: pathname + searchStr,
+          className: "s-blog-list",
+          itemsClassName: "grid md:grid-cols-2 gap-2.5 md:gap-8",
+          empty: /* @__PURE__ */ jsx(LazyNoContent, { icon: "sicon-inbox", message: t("pages.blog_articles.no_articles") }),
+          t: (key, fallback) => t(key, fallback || key),
+          children: (items) => items.map((article) => /* @__PURE__ */ jsx(BlogArticleCard, { article, showAuthor: true }, article.id))
+        }
+      ),
+      /* @__PURE__ */ jsx(HookSlot, { name: "blog:category.end" })
+    ] })
+  ] });
+}
+
+export { BlogCategoryPage };
+//# sourceMappingURL=BlogCategoryPage-AIAJ5JBR.js.map
+//# sourceMappingURL=BlogCategoryPage-AIAJ5JBR.js.map

package/dist/BlogCategoryPage-AIAJ5JBR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/routes/blog/BlogCategoryPage.tsx"],"names":[],"mappings":"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","file":"BlogCategoryPage-AIAJ5JBR.js","sourcesContent":["import { useRef, useCallback } from 'react';\nimport { ItemsList } from '@salla.sa/twilight-components-react';\nimport { HookSlot } from '../../hooks';\nimport { useTranslation } from '../../providers/i18n';\nimport { useLocation } from '../../providers/NavigationProvider';\nimport { Breadcrumb, NoContent } from '../../components/common';\nimport { blog } from '../../api/blog';\nimport { BlogArticleCard, BlogListLayout } from './components';\nimport type { BlogCategoryLoaderData, ArticleSummary } from './types';\n\nexport function BlogCategoryPage({\n  page,\n  blogCategory,\n  categories = [],\n  articles = [],\n  cursor,\n}: BlogCategoryLoaderData) {\n  const { t } = useTranslation();\n  const { pathname, searchStr } = useLocation();\n  const nextCursorRef = useRef<string | null>(cursor?.next ?? null);\n\n  const loader = useCallback(async () => {\n    const nextUrl = nextCursorRef.current;\n    const cursorMatch = nextUrl?.match(/[?&]cursor=([^&]+)/);\n    const cursorValue = cursorMatch ? decodeURIComponent(cursorMatch[1]) : (nextUrl ?? undefined);\n\n    const result = await blog.articles.list({ category: blogCategory.id, cursor: cursorValue });\n    nextCursorRef.current = result.cursor?.next ?? null;\n\n    return {\n      items: result.data,\n      next: result.cursor?.next ?? null,\n    };\n  }, [blogCategory.id]);\n\n  if (articles.length === 0) {\n    return (\n      <div className=\"container mb-8 sm:mb-24\">\n        <Breadcrumb page={page} />\n        <BlogListLayout categories={categories}>\n          <HookSlot name=\"blog:category.start\" />\n          <NoContent icon=\"sicon-inbox\" message={t('pages.blog_articles.no_articles')} />\n          <HookSlot name=\"blog:category.end\" />\n        </BlogListLayout>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"container mb-8 sm:mb-24\">\n      <Breadcrumb page={page} />\n\n      <BlogListLayout categories={categories}>\n        <HookSlot name=\"blog:category.start\" />\n\n        <div className=\"mb-6\">\n          <h1 className=\"font-bold text-xl\">{blogCategory.name}</h1>\n        </div>\n\n        <ItemsList<ArticleSummary>\n          items={articles}\n          loader={cursor?.next ? loader : undefined}\n          mode={cursor?.next ? 'infinite' : 'static'}\n          pageUrl={pathname + searchStr}\n          className=\"s-blog-list\"\n          itemsClassName=\"grid md:grid-cols-2 gap-2.5 md:gap-8\"\n          empty={<NoContent icon=\"sicon-inbox\" message={t('pages.blog_articles.no_articles')} />}\n          t={(key, fallback) => t(key, fallback || key)}\n        >\n          {(items) =>\n            items.map((article) => (\n              <BlogArticleCard key={article.id} article={article} showAuthor />\n            ))\n          }\n        </ItemsList>\n\n        <HookSlot name=\"blog:category.end\" />\n      </BlogListLayout>\n    </div>\n  );\n}\n"]}

package/dist/BlogPage-4BYF2EQW.js

@@ -0,0 +1,190 @@
+import { useDate } from './chunk-GLM3RPCP.js';
+import './chunk-QTDGM2SO.js';
+import './chunk-5Q6PFLDN.js';
+import './chunk-GO34DE35.js';
+import './chunk-VVZNW5CB.js';
+import './chunk-LBUMC5PB.js';
+import './chunk-MTONGOJD.js';
+import './chunk-2FU6CVSB.js';
+import './chunk-I5Z4NJBB.js';
+import './chunk-TCSNNCRH.js';
+import './chunk-2TB2LTL2.js';
+import './chunk-QYL5OHAV.js';
+import './chunk-KIPZQN3Y.js';
+import './chunk-Z653O7MX.js';
+import './chunk-ZCH7W7DZ.js';
+import './chunk-SSRNIBVV.js';
+import './chunk-GN34LCTG.js';
+import './chunk-CW625T2E.js';
+import './chunk-BVSJPBJ6.js';
+import './chunk-GBWCXUPD.js';
+import './chunk-UIX3W2PN.js';
+import { useTranslation } from './chunk-VVRYP6IL.js';
+import './chunk-T72DAX7R.js';
+import './chunk-YMVLYYLU.js';
+import './chunk-RYBA3JDM.js';
+import { HookSlot } from './chunk-25SSLQAJ.js';
+import './chunk-J37AYLWL.js';
+import { LazyBreadcrumb, Image, LazyNoContent } from './chunk-2KF5JJU6.js';
+import { Link } from './chunk-TZ4YD5CU.js';
+import './chunk-XUI3TRXF.js';
+import './chunk-6BZ5TKEV.js';
+import './chunk-UE3BUFZI.js';
+import './chunk-3DCZJDDK.js';
+import './chunk-3UHSMGPY.js';
+import './chunk-MXQCE3KA.js';
+import './chunk-BWFBVXT3.js';
+import './chunk-DGUM43GV.js';
+import { SallaSlider } from '@salla.sa/twilight-components-react/slider';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function BlogPage({ page, categories = [], articles = [], slides = [] }) {
+  const { t } = useTranslation();
+  const { format: formatDate } = useDate();
+  return /* @__PURE__ */ jsxs("div", { className: "container mb-8 sm:mb-24", children: [
+    /* @__PURE__ */ jsx("div", { className: "center-between", children: /* @__PURE__ */ jsx(LazyBreadcrumb, { page }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-8 gap-8", children: [
+      /* @__PURE__ */ jsxs("nav", { "aria-label": "Sidebar", className: "hidden lg:block lg:sticky shrink-0 top-24 col-span-2", children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-bold mb-3", children: t("pages.blog_categories.categories") }),
+        /* @__PURE__ */ jsx("ul", { children: categories.map((category) => /* @__PURE__ */ jsx("li", { className: category.is_current ? "text-primary" : "", children: /* @__PURE__ */ jsx(Link, { className: "py-3 block text-sm hover:text-primary", to: category.url, children: category.name }) }, category.id)) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "main-content lg:col-span-6", children: [
+        /* @__PURE__ */ jsx(HookSlot, { name: "blog:start" }),
+        slides.length > 0 && /* @__PURE__ */ jsx(
+          SallaSlider,
+          {
+            id: "blog-home-slider",
+            type: "blog",
+            autoPlay: true,
+            autoHeight: true,
+            showControls: false,
+            pagination: true,
+            className: "blog-slider block rounded overflow-hidden mb-2.5 lg:mb-8",
+            sliderConfig: { watchOverflow: true },
+            children: /* @__PURE__ */ jsx("div", { slot: "items", children: slides.map((article, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "swiper-slide has-overlay blog-slider__slide h-[300px] md:h-[400px] relative bg-border-color flex justify-center",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      className: "object-cover h-full w-full",
+                      src: article.image,
+                      alt: article.name,
+                      aspectRatio: "3/1",
+                      priority: index === 0
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "absolute z-10 bottom-0 rtl:right-0 ltr:left-0 p-4 pb-10 rtl:lg:pr-10 ltr:lg:pl-10 lg:pb-20", children: /* @__PURE__ */ jsx("div", { className: "blog-slider__content relative", children: /* @__PURE__ */ jsxs("div", { className: "z-20 w-full md:w-5/6 lg:w-6/12 text-white", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "block-slide-anime", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "mb-2.5 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                          /* @__PURE__ */ jsx("i", { className: "sicon-calendar-date rtl:ml-1 ltr:mr-1" }),
+                          /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: formatDate(article.created_at) })
+                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          Link,
+                          {
+                            to: article.author?.url || "#",
+                            className: "flex items-center hover:underline",
+                            children: [
+                              /* @__PURE__ */ jsx("i", { className: "sicon-user rtl:ml-1 ltr:mr-1" }),
+                              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: article.author?.name })
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx("h3", { className: "text-sm font-bold leading-normal mb-4", children: /* @__PURE__ */ jsx(Link, { to: article.url, children: article.name }) })
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "line-clamp-2 block-slide-anime description", children: article.description })
+                  ] }) }) })
+                ]
+              },
+              article.id
+            )) })
+          }
+        ),
+        !slides.length && /* @__PURE__ */ jsx("div", { className: "sr-only lg:not-sr-only", children: /* @__PURE__ */ jsx("h1", { className: "blog-category__title font-bold text-lg mb-8", children: t("blocks.footer.blog") }) }),
+        slides.length > 0 && /* @__PURE__ */ jsx("h1", { className: "sr-only", children: t("blocks.footer.blog") }),
+        articles.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(HookSlot, { name: "blog:items.start" }),
+          /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 gap-2.5 md:gap-8", children: articles.map((article) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "list-block post-entry relative h-full transition-shadow duration-500 bg-white hover:shadow-default rounded-lg justify-around overflow-hidden flex flex-col",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    to: article.url,
+                    className: "post-entry__image relative overflow-hidden hover:opacity-90 w-full h-56 bg-border-color flex items-center justify-center",
+                    children: /* @__PURE__ */ jsx(
+                      Image,
+                      {
+                        className: "h-full w-full object-cover",
+                        src: article.image,
+                        alt: article.name,
+                        aspectRatio: "16/9"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 px-5 pt-5 pb-7", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "mb-2.5 text-gray-500 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                      /* @__PURE__ */ jsx("i", { className: "sicon-calendar-date rtl:ml-1 ltr:mr-1" }),
+                      /* @__PURE__ */ jsx("span", { children: formatDate(article.created_at) })
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      Link,
+                      {
+                        to: article.author?.url || "#",
+                        className: "flex items-center hover:text-dark",
+                        children: [
+                          /* @__PURE__ */ jsx("i", { className: "sicon-user rtl:ml-1 ltr:mr-1" }),
+                          /* @__PURE__ */ jsx("span", { children: article.author?.name })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("h3", { className: "post-entry__title text-sm font-bold text-gray-800 leading-6 mb-2.5", children: /* @__PURE__ */ jsx(Link, { to: article.url, children: article.name }) }),
+                  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 leading-6 mb-2.5", children: article.description }),
+                  ((article.stats?.likes ?? 0) > 0 || (article.stats?.comments ?? 0) > 0) && /* @__PURE__ */ jsxs("div", { className: "post-entry__icons flex items-center gap-2.5 text-gray-500 text-sm", children: [
+                    (article.stats?.likes ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx("i", { className: "sicon-thumbs-up" }),
+                      article.stats?.likes
+                    ] }),
+                    (article.stats?.comments ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                      /* @__PURE__ */ jsx("i", { className: "sicon-chat" }),
+                      article.stats?.comments
+                    ] })
+                  ] })
+                ] }),
+                article.tags && article.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-4 flex flex-wrap items-center border-t border-gray-200", children: article.tags.map((tag) => /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    to: tag.url,
+                    className: "py-2 px-4 rounded-large inline-flex items-center text-gray-500 hover:text-dark justify-center text-sm",
+                    children: [
+                      /* @__PURE__ */ jsx("i", { className: "font-medium sicon-tag rtl:ml-1.5 ltr:mr-1.5" }),
+                      /* @__PURE__ */ jsx("span", { className: "fix-align whitespace-nowrap", children: tag.name })
+                    ]
+                  },
+                  tag.id
+                )) })
+              ]
+            },
+            article.id
+          )) }),
+          /* @__PURE__ */ jsx(HookSlot, { name: "blog:items.end" })
+        ] }) : !slides.length && /* @__PURE__ */ jsx(LazyNoContent, { icon: "sicon-inbox", message: t("pages.blog_articles.no_articles") }),
+        /* @__PURE__ */ jsx(HookSlot, { name: "blog:end" })
+      ] })
+    ] })
+  ] });
+}
+
+export { BlogPage };
+//# sourceMappingURL=BlogPage-4BYF2EQW.js.map
+//# sourceMappingURL=BlogPage-4BYF2EQW.js.map

package/dist/BlogPage-4BYF2EQW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/routes/blog/BlogPage.tsx"],"names":[],"mappings":"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","file":"BlogPage-4BYF2EQW.js","sourcesContent":["import { SallaSlider } from '@salla.sa/twilight-components-react/slider';\nimport { HookSlot, useDate } from '../../hooks';\nimport { useTranslation } from '../../providers/i18n';\nimport type { BlogPageProps } from './types';\nimport { Breadcrumb, NoContent, Link, Image } from '../../components/common';\n\nexport function BlogPage({ page, categories = [], articles = [], slides = [] }: BlogPageProps) {\n  const { t } = useTranslation();\n  const { format: formatDate } = useDate();\n\n  return (\n    <div className=\"container mb-8 sm:mb-24\">\n      <div className=\"center-between\">\n        <Breadcrumb page={page} />\n      </div>\n\n      <div className=\"grid grid-cols-1 lg:grid-cols-8 gap-8\">\n        <nav aria-label=\"Sidebar\" className=\"hidden lg:block lg:sticky shrink-0 top-24 col-span-2\">\n          <h2 className=\"font-bold mb-3\">{t('pages.blog_categories.categories')}</h2>\n          <ul>\n            {categories.map((category) => (\n              <li key={category.id} className={category.is_current ? 'text-primary' : ''}>\n                <Link className=\"py-3 block text-sm hover:text-primary\" to={category.url}>\n                  {category.name}\n                </Link>\n              </li>\n            ))}\n          </ul>\n        </nav>\n\n        <div className=\"main-content lg:col-span-6\">\n          <HookSlot name=\"blog:start\" />\n\n          {slides.length > 0 && (\n            <SallaSlider\n              id=\"blog-home-slider\"\n              type=\"blog\"\n              autoPlay\n              autoHeight\n              showControls={false}\n              pagination\n              className=\"blog-slider block rounded overflow-hidden mb-2.5 lg:mb-8\"\n              sliderConfig={{ watchOverflow: true }}\n            >\n              <div slot=\"items\">\n                {slides.map((article, index) => (\n                  <div\n                    key={article.id}\n                    className=\"swiper-slide has-overlay blog-slider__slide h-[300px] md:h-[400px] relative bg-border-color flex justify-center\"\n                  >\n                    <Image\n                      className=\"object-cover h-full w-full\"\n                      src={article.image}\n                      alt={article.name}\n                      aspectRatio=\"3/1\"\n                      priority={index === 0}\n                    />\n                    <div className=\"absolute z-10 bottom-0 rtl:right-0 ltr:left-0 p-4 pb-10 rtl:lg:pr-10 ltr:lg:pl-10 lg:pb-20\">\n                      <div className=\"blog-slider__content relative\">\n                        <div className=\"z-20 w-full md:w-5/6 lg:w-6/12 text-white\">\n                          <div className=\"block-slide-anime\">\n                            <div className=\"mb-2.5 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5\">\n                              <div className=\"flex items-center\">\n                                <i className=\"sicon-calendar-date rtl:ml-1 ltr:mr-1\"></i>\n                                <span className=\"whitespace-nowrap\">\n                                  {formatDate(article.created_at)}\n                                </span>\n                              </div>\n                              <Link\n                                to={article.author?.url || '#'}\n                                className=\"flex items-center hover:underline\"\n                              >\n                                <i className=\"sicon-user rtl:ml-1 ltr:mr-1\"></i>\n                                <span className=\"whitespace-nowrap\">{article.author?.name}</span>\n                              </Link>\n                            </div>\n                            <h3 className=\"text-sm font-bold leading-normal mb-4\">\n                              <Link to={article.url}>{article.name}</Link>\n                            </h3>\n                          </div>\n                          <p className=\"line-clamp-2 block-slide-anime description\">\n                            {article.description}\n                          </p>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </SallaSlider>\n          )}\n\n          {!slides.length && (\n            <div className=\"sr-only lg:not-sr-only\">\n              <h1 className=\"blog-category__title font-bold text-lg mb-8\">\n                {t('blocks.footer.blog')}\n              </h1>\n            </div>\n          )}\n\n          {slides.length > 0 && <h1 className=\"sr-only\">{t('blocks.footer.blog')}</h1>}\n\n          {articles.length > 0 ? (\n            <>\n              <HookSlot name=\"blog:items.start\" />\n              <div className=\"grid md:grid-cols-2 gap-2.5 md:gap-8\">\n                {articles.map((article) => (\n                  <div\n                    key={article.id}\n                    className=\"list-block post-entry relative h-full transition-shadow duration-500 bg-white hover:shadow-default rounded-lg justify-around overflow-hidden flex flex-col\"\n                  >\n                    <Link\n                      to={article.url}\n                      className=\"post-entry__image relative overflow-hidden hover:opacity-90 w-full h-56 bg-border-color flex items-center justify-center\"\n                    >\n                      <Image\n                        className=\"h-full w-full object-cover\"\n                        src={article.image}\n                        alt={article.name}\n                        aspectRatio=\"16/9\"\n                      />\n                    </Link>\n\n                    <div className=\"flex-1 px-5 pt-5 pb-7\">\n                      <div className=\"mb-2.5 text-gray-500 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5\">\n                        <div className=\"flex items-center\">\n                          <i className=\"sicon-calendar-date rtl:ml-1 ltr:mr-1\"></i>\n                          <span>{formatDate(article.created_at)}</span>\n                        </div>\n                        <Link\n                          to={article.author?.url || '#'}\n                          className=\"flex items-center hover:text-dark\"\n                        >\n                          <i className=\"sicon-user rtl:ml-1 ltr:mr-1\"></i>\n                          <span>{article.author?.name}</span>\n                        </Link>\n                      </div>\n\n                      <h3 className=\"post-entry__title text-sm font-bold text-gray-800 leading-6 mb-2.5\">\n                        <Link to={article.url}>{article.name}</Link>\n                      </h3>\n                      <p className=\"text-sm text-gray-500 leading-6 mb-2.5\">\n                        {article.description}\n                      </p>\n\n                      {((article.stats?.likes ?? 0) > 0 || (article.stats?.comments ?? 0) > 0) && (\n                        <div className=\"post-entry__icons flex items-center gap-2.5 text-gray-500 text-sm\">\n                          {(article.stats?.likes ?? 0) > 0 && (\n                            <div className=\"flex items-center gap-1\">\n                              <i className=\"sicon-thumbs-up\"></i>\n                              {article.stats?.likes}\n                            </div>\n                          )}\n                          {(article.stats?.comments ?? 0) > 0 && (\n                            <div className=\"flex items-center gap-1\">\n                              <i className=\"sicon-chat\"></i>\n                              {article.stats?.comments}\n                            </div>\n                          )}\n                        </div>\n                      )}\n                    </div>\n\n                    {article.tags && article.tags.length > 0 && (\n                      <div className=\"p-4 flex flex-wrap items-center border-t border-gray-200\">\n                        {article.tags.map((tag) => (\n                          <Link\n                            key={tag.id}\n                            to={tag.url}\n                            className=\"py-2 px-4 rounded-large inline-flex items-center text-gray-500 hover:text-dark justify-center text-sm\"\n                          >\n                            <i className=\"font-medium sicon-tag rtl:ml-1.5 ltr:mr-1.5\"></i>\n                            <span className=\"fix-align whitespace-nowrap\">{tag.name}</span>\n                          </Link>\n                        ))}\n                      </div>\n                    )}\n                  </div>\n                ))}\n              </div>\n              <HookSlot name=\"blog:items.end\" />\n            </>\n          ) : (\n            !slides.length && (\n              <NoContent icon=\"sicon-inbox\" message={t('pages.blog_articles.no_articles')} />\n            )\n          )}\n\n          <HookSlot name=\"blog:end\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/BlogSinglePage-AMNAUMWW.js

@@ -0,0 +1,187 @@
+import { useDate } from './chunk-GLM3RPCP.js';
+import './chunk-QTDGM2SO.js';
+import './chunk-5Q6PFLDN.js';
+import './chunk-GO34DE35.js';
+import './chunk-VVZNW5CB.js';
+import './chunk-LBUMC5PB.js';
+import './chunk-MTONGOJD.js';
+import './chunk-2FU6CVSB.js';
+import './chunk-I5Z4NJBB.js';
+import './chunk-TCSNNCRH.js';
+import './chunk-2TB2LTL2.js';
+import './chunk-QYL5OHAV.js';
+import './chunk-KIPZQN3Y.js';
+import { useAsset } from './chunk-Z653O7MX.js';
+import './chunk-ZCH7W7DZ.js';
+import './chunk-SSRNIBVV.js';
+import './chunk-GN34LCTG.js';
+import './chunk-CW625T2E.js';
+import './chunk-BVSJPBJ6.js';
+import './chunk-GBWCXUPD.js';
+import { useBlogLike } from './chunk-UIX3W2PN.js';
+import { useTranslation } from './chunk-VVRYP6IL.js';
+import './chunk-T72DAX7R.js';
+import { useComments } from './chunk-YMVLYYLU.js';
+import './chunk-RYBA3JDM.js';
+import { HookSlot } from './chunk-25SSLQAJ.js';
+import './chunk-J37AYLWL.js';
+import { LazyBreadcrumb, Image } from './chunk-2KF5JJU6.js';
+import { Link } from './chunk-TZ4YD5CU.js';
+import './chunk-XUI3TRXF.js';
+import './chunk-6BZ5TKEV.js';
+import './chunk-UE3BUFZI.js';
+import './chunk-3DCZJDDK.js';
+import './chunk-3UHSMGPY.js';
+import './chunk-MXQCE3KA.js';
+import { useTwilight } from './chunk-BWFBVXT3.js';
+import './chunk-DGUM43GV.js';
+import { SallaComments } from '@salla.sa/twilight-components-react/comments';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function BlogSinglePage({ page, article, related = [] }) {
+  const { t } = useTranslation();
+  const { store } = useTwilight();
+  const { cdn } = useAsset();
+  const { format: formatDate } = useDate();
+  const { active, count, toggle, loading } = useBlogLike(
+    Number(article.id) || 0,
+    article.stats?.likes ?? 0
+  );
+  const { commentsKey } = useComments();
+  return /* @__PURE__ */ jsxs("div", { className: "container mb-8 sm:mb-24", children: [
+    /* @__PURE__ */ jsx(LazyBreadcrumb, { page }),
+    /* @__PURE__ */ jsxs("div", { className: "md:flex items-start", children: [
+      /* @__PURE__ */ jsxs("div", { className: "main-content blog-category md:w-96 flex-1 bg-white lg:p-8 rounded-md mb-10 md:mb-0", children: [
+        /* @__PURE__ */ jsx(HookSlot, { name: "blog:single.start" }),
+        /* @__PURE__ */ jsx("h1", { className: "font-bold text-3xl mb-5 leading-10", children: article.name }),
+        /* @__PURE__ */ jsxs("div", { className: "mb-10 text-gray-500 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx("i", { className: "sicon-calendar-date rtl:ml-1 ltr:mr-1" }),
+            /* @__PURE__ */ jsx("span", { children: formatDate(article.created_at) })
+          ] }),
+          /* @__PURE__ */ jsxs(Link, { to: article.author?.url || "#", className: "flex items-center hover:text-dark", children: [
+            /* @__PURE__ */ jsx("i", { className: "sicon-user rtl:ml-1 ltr:mr-1" }),
+            /* @__PURE__ */ jsx("span", { children: article.author?.name })
+          ] })
+        ] }),
+        article.image && /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: article.image,
+            alt: article.name,
+            className: "h-80 mb-10 w-full rounded-md",
+            aspectRatio: "16/9",
+            priority: true,
+            noWrapper: true
+          }
+        ),
+        store.settings?.blog?.allow_likes_and_comments && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-gray-500 text-base mb-2", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              id: "blog-like",
+              "data-blog-id": article.id,
+              className: `flex items-center gap-1 transition-colors ${active ? "text-primary font-semibold liked" : ""}`,
+              onClick: toggle,
+              disabled: loading,
+              children: [
+                loading ? /* @__PURE__ */ jsx("span", { className: "loader loader--small" }) : /* @__PURE__ */ jsx("i", { className: `sicon-thumbs-up ${active ? "text-primary" : ""}` }),
+                /* @__PURE__ */ jsx("span", { children: count })
+              ]
+            }
+          ),
+          (article.stats?.comments ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx("i", { className: "sicon-chat text-primary" }),
+            article.stats?.comments
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "article",
+          {
+            className: "leading-7 text-sm mb-10",
+            dangerouslySetInnerHTML: { __html: article.description?.replace(/ /g, " ") || "" }
+          }
+        ),
+        article.tags && article.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-4 flex flex-wrap items-center border-t border-gray-200", children: article.tags.map((tag) => /* @__PURE__ */ jsxs(
+          Link,
+          {
+            to: tag.url,
+            className: "py-2 px-4 rounded-large inline-flex items-center text-gray-500 hover:text-dark justify-center text-sm",
+            children: [
+              /* @__PURE__ */ jsx("i", { className: "font-medium sicon-tag rtl:ml-1.5 ltr:mr-1.5" }),
+              /* @__PURE__ */ jsx("span", { className: "fix-align whitespace-nowrap", children: tag.name })
+            ]
+          },
+          tag.id
+        )) }),
+        store.settings?.blog?.allow_likes_and_comments && /* @__PURE__ */ jsx(
+          SallaComments,
+          {
+            itemId: Number(article.id) || 0,
+            type: "blog"
+          },
+          commentsKey
+        ),
+        /* @__PURE__ */ jsx(HookSlot, { name: "blog:single.end" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "aside",
+        {
+          "aria-label": "Sidebar",
+          className: "sticky shrink-0 top-24 md:w-96 rtl:lg:mr-8 ltr:lg:ml-8 pb-11",
+          children: related.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("h2", { className: "font-bold mb-3", children: t("pages.blog_articles.related") }),
+            /* @__PURE__ */ jsx(HookSlot, { name: "blog:single.related.start" }),
+            related.map((relatedArticle) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "mt-5 flex items-center bg-white p-5 rounded-md",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+                    Link,
+                    {
+                      to: relatedArticle.url,
+                      className: "bg-border-color h-24 w-24 rounded-md overflow-hidden flex items-center justify-center",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "sr-only", children: relatedArticle.name }),
+                        relatedArticle.image ? /* @__PURE__ */ jsx(
+                          Image,
+                          {
+                            className: "h-full w-full object-cover",
+                            src: relatedArticle.image,
+                            alt: relatedArticle.name,
+                            aspectRatio: "1/1"
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          Image,
+                          {
+                            className: "sm:h-full w-10 object-contain opacity-60",
+                            src: cdn("/images/placeholder.png"),
+                            alt: "post image"
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "rtl:mr-3 ltr:ml-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm text-gray-500 mb-2", children: [
+                      /* @__PURE__ */ jsx("i", { className: "sicon-calendar-date rtl:ml-1 ltr:mr-1 rtl:pl-px ltr:pr-px" }),
+                      /* @__PURE__ */ jsx("time", { children: formatDate(relatedArticle.created_at) })
+                    ] }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-sm font-bold text-gray-800 leading-6", children: /* @__PURE__ */ jsx(Link, { to: relatedArticle.url, className: "hover:underline", children: relatedArticle.name }) })
+                  ] })
+                ]
+              },
+              relatedArticle.id
+            )),
+            /* @__PURE__ */ jsx(HookSlot, { name: "blog:single.related.end" })
+          ] })
+        }
+      )
+    ] })
+  ] }, article.id);
+}
+
+export { BlogSinglePage };
+//# sourceMappingURL=BlogSinglePage-AMNAUMWW.js.map
+//# sourceMappingURL=BlogSinglePage-AMNAUMWW.js.map

package/dist/BlogSinglePage-AMNAUMWW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/routes/blog/BlogSinglePage.tsx"],"names":[],"mappings":"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","file":"BlogSinglePage-AMNAUMWW.js","sourcesContent":["import { SallaComments } from '@salla.sa/twilight-components-react/comments';\nimport { HookSlot, useAsset, useDate } from '../../hooks';\nimport { useBlogLike } from '../../hooks/useBlogLike';\nimport { useComments } from '../../hooks/useComments';\nimport { useTranslation } from '../../providers/i18n';\nimport type { BlogSinglePageProps } from './types';\nimport { Breadcrumb, Image, Link } from '../../components/common';\nimport { useTwilight } from '../../providers/twilight-context';\n\nexport function BlogSinglePage({ page, article, related = [] }: BlogSinglePageProps) {\n  const { t } = useTranslation();\n  const { store } = useTwilight();\n  const { cdn } = useAsset();\n  const { format: formatDate } = useDate();\n  const { active, count, toggle, loading } = useBlogLike(\n    Number(article.id) || 0,\n    article.stats?.likes ?? 0\n  );\n  const { commentsKey } = useComments();\n\n  return (\n    <div key={article.id} className=\"container mb-8 sm:mb-24\">\n      <Breadcrumb page={page} />\n\n      <div className=\"md:flex items-start\">\n        <div className=\"main-content blog-category md:w-96 flex-1 bg-white lg:p-8 rounded-md mb-10 md:mb-0\">\n          <HookSlot name=\"blog:single.start\" />\n\n          <h1 className=\"font-bold text-3xl mb-5 leading-10\">{article.name}</h1>\n\n          <div className=\"mb-10 text-gray-500 rounded-md inline-flex text-sm rtl:space-x-reverse space-x-5\">\n            <div className=\"flex items-center\">\n              <i className=\"sicon-calendar-date rtl:ml-1 ltr:mr-1\"></i>\n              <span>{formatDate(article.created_at)}</span>\n            </div>\n            <Link to={article.author?.url || '#'} className=\"flex items-center hover:text-dark\">\n              <i className=\"sicon-user rtl:ml-1 ltr:mr-1\"></i>\n              <span>{article.author?.name}</span>\n            </Link>\n          </div>\n\n          {article.image && (\n            <Image\n              src={article.image}\n              alt={article.name}\n              className=\"h-80 mb-10 w-full rounded-md\"\n              aspectRatio=\"16/9\"\n              priority\n              noWrapper\n            />\n          )}\n\n          {store.settings?.blog?.allow_likes_and_comments && (\n            <div className=\"flex items-center gap-2.5 text-gray-500 text-base mb-2\">\n              <button\n                id=\"blog-like\"\n                data-blog-id={article.id}\n                className={`flex items-center gap-1 transition-colors ${active ? 'text-primary font-semibold liked' : ''}`}\n                onClick={toggle}\n                disabled={loading}\n              >\n                {loading ? (\n                  <span className=\"loader loader--small\"></span>\n                ) : (\n                  <i className={`sicon-thumbs-up ${active ? 'text-primary' : ''}`}></i>\n                )}\n                <span>{count}</span>\n              </button>\n              {(article.stats?.comments ?? 0) > 0 && (\n                <div className=\"flex items-center gap-1\">\n                  <i className=\"sicon-chat text-primary\"></i>\n                  {article.stats?.comments}\n                </div>\n              )}\n            </div>\n          )}\n\n          <article\n            className=\"leading-7 text-sm mb-10\"\n            dangerouslySetInnerHTML={{ __html: article.description?.replace(/&nbsp;/g, ' ') || '' }}\n          />\n\n          {article.tags && article.tags.length > 0 && (\n            <div className=\"p-4 flex flex-wrap items-center border-t border-gray-200\">\n              {article.tags.map((tag) => (\n                <Link\n                  key={tag.id}\n                  to={tag.url}\n                  className=\"py-2 px-4 rounded-large inline-flex items-center text-gray-500 hover:text-dark justify-center text-sm\"\n                >\n                  <i className=\"font-medium sicon-tag rtl:ml-1.5 ltr:mr-1.5\"></i>\n                  <span className=\"fix-align whitespace-nowrap\">{tag.name}</span>\n                </Link>\n              ))}\n            </div>\n          )}\n\n          {store.settings?.blog?.allow_likes_and_comments && (\n            <SallaComments\n              key={commentsKey}\n              itemId={Number(article.id) || 0}\n              type={'blog' as any}\n            />\n          )}\n\n          <HookSlot name=\"blog:single.end\" />\n        </div>\n\n        <aside\n          aria-label=\"Sidebar\"\n          className=\"sticky shrink-0 top-24 md:w-96 rtl:lg:mr-8 ltr:lg:ml-8 pb-11\"\n        >\n          {related.length > 0 && (\n            <>\n              <h2 className=\"font-bold mb-3\">{t('pages.blog_articles.related')}</h2>\n\n              <HookSlot name=\"blog:single.related.start\" />\n\n              {related.map((relatedArticle) => (\n                <div\n                  key={relatedArticle.id}\n                  className=\"mt-5 flex items-center bg-white p-5 rounded-md\"\n                >\n                  <div className=\"shrink-0\">\n                    <Link\n                      to={relatedArticle.url}\n                      className=\"bg-border-color h-24 w-24 rounded-md overflow-hidden flex items-center justify-center\"\n                    >\n                      <span className=\"sr-only\">{relatedArticle.name}</span>\n                      {relatedArticle.image ? (\n                        <Image\n                          className=\"h-full w-full object-cover\"\n                          src={relatedArticle.image}\n                          alt={relatedArticle.name}\n                          aspectRatio=\"1/1\"\n                        />\n                      ) : (\n                        <Image\n                          className=\"sm:h-full w-10 object-contain opacity-60\"\n                          src={cdn('/images/placeholder.png')}\n                          alt=\"post image\"\n                        />\n                      )}\n                    </Link>\n                  </div>\n                  <div className=\"rtl:mr-3 ltr:ml-3\">\n                    <div className=\"flex items-center text-sm text-gray-500 mb-2\">\n                      <i className=\"sicon-calendar-date rtl:ml-1 ltr:mr-1 rtl:pl-px ltr:pr-px\"></i>\n                      <time>{formatDate(relatedArticle.created_at)}</time>\n                    </div>\n                    <h3 className=\"text-sm font-bold text-gray-800 leading-6\">\n                      <Link to={relatedArticle.url} className=\"hover:underline\">\n                        {relatedArticle.name}\n                      </Link>\n                    </h3>\n                  </div>\n                </div>\n              ))}\n\n              <HookSlot name=\"blog:single.related.end\" />\n            </>\n          )}\n        </aside>\n      </div>\n    </div>\n  );\n}\n"]}