@btst/stack 1.0.1 → 1.1.1

package/dist/plugins/blog/client/components/shared/page-header.mjs

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PageHeader({
+  title,
+  description,
+  childrenTop,
+  childrenBottom
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex max-w-2xl flex-col items-center lg:gap-4 gap-2 text-center wrap-anywhere",
+      "data-testid": "page-header",
+      children: [
+        childrenTop,
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            className: "font-medium font-sans lg:text-6xl text-4xl tracking-tight",
+            "data-testid": "page-title",
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-muted-foreground wrap-anywhere",
+            "data-testid": "page-description",
+            children: description
+          }
+        ),
+        childrenBottom
+      ]
+    }
+  );
+}
+
+export { PageHeader };

package/dist/plugins/blog/client/components/shared/page-layout.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const utils = require('../../../utils.cjs');
+
+function PageLayout({
+  children,
+  className,
+  "data-testid": dataTestId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: utils.cn(
+        "container mx-auto flex min-h-dvh flex-col items-center gap-12 px-4 py-18 lg:px-16",
+        className
+      ),
+      "data-testid": dataTestId,
+      children
+    }
+  );
+}
+
+exports.PageLayout = PageLayout;

package/dist/plugins/blog/client/components/shared/page-layout.mjs

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../../utils.mjs';
+
+function PageLayout({
+  children,
+  className,
+  "data-testid": dataTestId
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "container mx-auto flex min-h-dvh flex-col items-center gap-12 px-4 py-18 lg:px-16",
+        className
+      ),
+      "data-testid": dataTestId,
+      children
+    }
+  );
+}
+
+export { PageLayout };

package/dist/plugins/blog/client/components/shared/page-wrapper.cjs

@@ -0,0 +1,23 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const betterBlogAttribution = require('./better-blog-attribution.cjs');
+const pageLayout = require('./page-layout.cjs');
+
+function PageWrapper({
+  children,
+  className,
+  testId
+}) {
+  const { showAttribution } = context.usePluginOverrides("blog", {
+    showAttribution: true
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(pageLayout.PageLayout, { className, "data-testid": testId, children }),
+    showAttribution && /* @__PURE__ */ jsxRuntime.jsx(betterBlogAttribution.BetterBlogAttribution, {})
+  ] });
+}
+
+exports.PageWrapper = PageWrapper;

package/dist/plugins/blog/client/components/shared/page-wrapper.mjs

@@ -0,0 +1,21 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { usePluginOverrides } from '@btst/stack/context';
+import { BetterBlogAttribution } from './better-blog-attribution.mjs';
+import { PageLayout } from './page-layout.mjs';
+
+function PageWrapper({
+  children,
+  className,
+  testId
+}) {
+  const { showAttribution } = usePluginOverrides("blog", {
+    showAttribution: true
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PageLayout, { className, "data-testid": testId, children }),
+    showAttribution && /* @__PURE__ */ jsx(BetterBlogAttribution, {})
+  ] });
+}
+
+export { PageWrapper };

package/dist/plugins/blog/client/components/shared/post-card.cjs

@@ -0,0 +1,279 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const badge = require('@workspace/ui/components/badge');
+const card = require('@workspace/ui/components/card');
+const context = require('@btst/stack/context');
+const dateFns = require('date-fns');
+const lucideReact = require('lucide-react');
+const index = require('../../localization/index.cjs');
+const defaults = require('./defaults.cjs');
+
+const GRADIENT_PALETTES = [
+  {
+    from: "from-purple-500",
+    via: "via-pink-500",
+    to: "to-orange-500",
+    overlay: "from-blue-600/50"
+  },
+  {
+    from: "from-blue-500",
+    via: "via-cyan-500",
+    to: "to-teal-500",
+    overlay: "from-indigo-600/50"
+  },
+  {
+    from: "from-pink-500",
+    via: "via-rose-500",
+    to: "to-orange-500",
+    overlay: "from-purple-600/50"
+  },
+  {
+    from: "from-green-500",
+    via: "via-emerald-500",
+    to: "to-teal-500",
+    overlay: "from-cyan-600/50"
+  },
+  {
+    from: "from-indigo-500",
+    via: "via-purple-500",
+    to: "to-pink-500",
+    overlay: "from-violet-600/50"
+  },
+  {
+    from: "from-orange-500",
+    via: "via-amber-500",
+    to: "to-yellow-500",
+    overlay: "from-orange-600/50"
+  },
+  {
+    from: "from-cyan-500",
+    via: "via-blue-500",
+    to: "to-indigo-500",
+    overlay: "from-purple-600/50"
+  },
+  {
+    from: "from-violet-500",
+    via: "via-purple-500",
+    to: "to-fuchsia-500",
+    overlay: "from-pink-600/50"
+  },
+  {
+    from: "from-emerald-500",
+    via: "via-green-500",
+    to: "to-lime-500",
+    overlay: "from-teal-600/50"
+  },
+  {
+    from: "from-rose-500",
+    via: "via-pink-500",
+    to: "to-fuchsia-500",
+    overlay: "from-purple-600/50"
+  },
+  {
+    from: "from-sky-500",
+    via: "via-blue-500",
+    to: "to-indigo-600",
+    overlay: "from-purple-700/40"
+  },
+  {
+    from: "from-fuchsia-600",
+    via: "via-purple-600",
+    to: "to-indigo-600",
+    overlay: "from-pink-700/40"
+  },
+  {
+    from: "from-teal-500",
+    via: "via-emerald-500",
+    to: "to-green-600",
+    overlay: "from-cyan-700/40"
+  },
+  {
+    from: "from-amber-500",
+    via: "via-orange-500",
+    to: "to-pink-500",
+    overlay: "from-yellow-600/40"
+  },
+  {
+    from: "from-indigo-600",
+    via: "via-blue-600",
+    to: "to-purple-600",
+    overlay: "from-violet-700/40"
+  },
+  {
+    from: "from-pink-600",
+    via: "via-rose-600",
+    to: "to-orange-600",
+    overlay: "from-fuchsia-700/40"
+  },
+  {
+    from: "from-cyan-600",
+    via: "via-teal-600",
+    to: "to-emerald-600",
+    overlay: "from-blue-700/40"
+  },
+  {
+    from: "from-purple-600",
+    via: "via-fuchsia-600",
+    to: "to-pink-600",
+    overlay: "from-violet-700/40"
+  },
+  {
+    from: "from-blue-600",
+    via: "via-indigo-600",
+    to: "to-purple-600",
+    overlay: "from-cyan-700/40"
+  },
+  {
+    from: "from-green-600",
+    via: "via-emerald-600",
+    to: "to-teal-600",
+    overlay: "from-lime-700/40"
+  },
+  {
+    from: "from-rose-600",
+    via: "via-pink-600",
+    to: "to-fuchsia-600",
+    overlay: "from-pink-700/40"
+  },
+  {
+    from: "from-orange-600",
+    via: "via-pink-600",
+    to: "to-rose-600",
+    overlay: "from-amber-700/40"
+  },
+  {
+    from: "from-violet-600",
+    via: "via-purple-600",
+    to: "to-fuchsia-600",
+    overlay: "from-indigo-700/40"
+  },
+  {
+    from: "from-teal-600",
+    via: "via-cyan-600",
+    to: "to-blue-600",
+    overlay: "from-emerald-700/40"
+  },
+  {
+    from: "from-emerald-600",
+    via: "via-teal-600",
+    to: "to-cyan-600",
+    overlay: "from-green-700/40"
+  },
+  {
+    from: "from-indigo-700",
+    via: "via-purple-700",
+    to: "to-pink-700",
+    overlay: "from-violet-800/30"
+  },
+  {
+    from: "from-blue-700",
+    via: "via-cyan-700",
+    to: "to-teal-700",
+    overlay: "from-indigo-800/30"
+  },
+  {
+    from: "from-purple-700",
+    via: "via-fuchsia-700",
+    to: "to-pink-700",
+    overlay: "from-violet-800/30"
+  },
+  {
+    from: "from-pink-700",
+    via: "via-rose-700",
+    to: "to-orange-700",
+    overlay: "from-fuchsia-800/30"
+  },
+  {
+    from: "from-cyan-700",
+    via: "via-blue-700",
+    to: "to-indigo-700",
+    overlay: "from-teal-800/30"
+  }
+];
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+function getGradientFromTitle(title) {
+  const hash = hashString(title);
+  const palette = GRADIENT_PALETTES[hash % GRADIENT_PALETTES.length];
+  return palette;
+}
+function PostCard({ post }) {
+  const { Link, Image } = context.usePluginOverrides("blog", {
+    Link: defaults.DefaultLink,
+    Image: defaults.DefaultImage
+  });
+  const { localization } = context.usePluginOverrides("blog", {
+    localization: index.BLOG_LOCALIZATION
+  });
+  const basePath = context.useBasePath();
+  const blogPath = `${basePath}/blog/${post.slug}`;
+  const postDate = dateFns.formatDate(
+    post.publishedAt || post.createdAt,
+    "MMMM d, yyyy"
+  );
+  const gradient = post.image ? null : getGradientFromTitle(post.title);
+  return /* @__PURE__ */ jsxRuntime.jsxs(card.Card, { className: "group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Link,
+      {
+        href: blogPath,
+        className: "relative block h-48 w-full overflow-hidden rounded-t-xl bg-muted",
+        "aria-label": post.title,
+        children: post.image ? /* @__PURE__ */ jsxRuntime.jsx(
+          Image,
+          {
+            src: post.image,
+            alt: post.title,
+            className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105",
+            width: 500,
+            height: 300
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-full overflow-hidden transition-transform duration-200 group-hover:scale-105", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `absolute inset-0 bg-linear-to-br ${gradient.from} ${gradient.via} ${gradient.to}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `absolute inset-0 bg-linear-to-tr ${gradient.overlay} via-transparent to-transparent`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex h-full w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-center text-xl font-bold leading-tight text-white drop-shadow-lg line-clamp-3", children: post.title }) })
+        ] })
+      }
+    ),
+    !post.published && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization.BLOG_CARD_DRAFT_BADGE }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Link,
+      {
+        href: blogPath,
+        "aria-label": `${post.title}`,
+        className: "block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 grow",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(card.CardHeader, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(card.CardTitle, { className: "line-clamp-3 text-lg leading-tight transition-colors group-hover:underline", children: post.title }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CalendarIcon, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: postDate, children: postDate })
+            ] }),
+            post.tags && post.tags.length > 0 && post.tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "secondary", className: "text-xs", children: tag.name }, tag.id))
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+
+exports.PostCard = PostCard;

package/dist/plugins/blog/client/components/shared/post-card.mjs

@@ -0,0 +1,277 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Badge } from '@workspace/ui/components/badge';
+import { Card, CardHeader, CardTitle, CardContent } from '@workspace/ui/components/card';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { formatDate } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+import { DefaultImage, DefaultLink } from './defaults.mjs';
+
+const GRADIENT_PALETTES = [
+  {
+    from: "from-purple-500",
+    via: "via-pink-500",
+    to: "to-orange-500",
+    overlay: "from-blue-600/50"
+  },
+  {
+    from: "from-blue-500",
+    via: "via-cyan-500",
+    to: "to-teal-500",
+    overlay: "from-indigo-600/50"
+  },
+  {
+    from: "from-pink-500",
+    via: "via-rose-500",
+    to: "to-orange-500",
+    overlay: "from-purple-600/50"
+  },
+  {
+    from: "from-green-500",
+    via: "via-emerald-500",
+    to: "to-teal-500",
+    overlay: "from-cyan-600/50"
+  },
+  {
+    from: "from-indigo-500",
+    via: "via-purple-500",
+    to: "to-pink-500",
+    overlay: "from-violet-600/50"
+  },
+  {
+    from: "from-orange-500",
+    via: "via-amber-500",
+    to: "to-yellow-500",
+    overlay: "from-orange-600/50"
+  },
+  {
+    from: "from-cyan-500",
+    via: "via-blue-500",
+    to: "to-indigo-500",
+    overlay: "from-purple-600/50"
+  },
+  {
+    from: "from-violet-500",
+    via: "via-purple-500",
+    to: "to-fuchsia-500",
+    overlay: "from-pink-600/50"
+  },
+  {
+    from: "from-emerald-500",
+    via: "via-green-500",
+    to: "to-lime-500",
+    overlay: "from-teal-600/50"
+  },
+  {
+    from: "from-rose-500",
+    via: "via-pink-500",
+    to: "to-fuchsia-500",
+    overlay: "from-purple-600/50"
+  },
+  {
+    from: "from-sky-500",
+    via: "via-blue-500",
+    to: "to-indigo-600",
+    overlay: "from-purple-700/40"
+  },
+  {
+    from: "from-fuchsia-600",
+    via: "via-purple-600",
+    to: "to-indigo-600",
+    overlay: "from-pink-700/40"
+  },
+  {
+    from: "from-teal-500",
+    via: "via-emerald-500",
+    to: "to-green-600",
+    overlay: "from-cyan-700/40"
+  },
+  {
+    from: "from-amber-500",
+    via: "via-orange-500",
+    to: "to-pink-500",
+    overlay: "from-yellow-600/40"
+  },
+  {
+    from: "from-indigo-600",
+    via: "via-blue-600",
+    to: "to-purple-600",
+    overlay: "from-violet-700/40"
+  },
+  {
+    from: "from-pink-600",
+    via: "via-rose-600",
+    to: "to-orange-600",
+    overlay: "from-fuchsia-700/40"
+  },
+  {
+    from: "from-cyan-600",
+    via: "via-teal-600",
+    to: "to-emerald-600",
+    overlay: "from-blue-700/40"
+  },
+  {
+    from: "from-purple-600",
+    via: "via-fuchsia-600",
+    to: "to-pink-600",
+    overlay: "from-violet-700/40"
+  },
+  {
+    from: "from-blue-600",
+    via: "via-indigo-600",
+    to: "to-purple-600",
+    overlay: "from-cyan-700/40"
+  },
+  {
+    from: "from-green-600",
+    via: "via-emerald-600",
+    to: "to-teal-600",
+    overlay: "from-lime-700/40"
+  },
+  {
+    from: "from-rose-600",
+    via: "via-pink-600",
+    to: "to-fuchsia-600",
+    overlay: "from-pink-700/40"
+  },
+  {
+    from: "from-orange-600",
+    via: "via-pink-600",
+    to: "to-rose-600",
+    overlay: "from-amber-700/40"
+  },
+  {
+    from: "from-violet-600",
+    via: "via-purple-600",
+    to: "to-fuchsia-600",
+    overlay: "from-indigo-700/40"
+  },
+  {
+    from: "from-teal-600",
+    via: "via-cyan-600",
+    to: "to-blue-600",
+    overlay: "from-emerald-700/40"
+  },
+  {
+    from: "from-emerald-600",
+    via: "via-teal-600",
+    to: "to-cyan-600",
+    overlay: "from-green-700/40"
+  },
+  {
+    from: "from-indigo-700",
+    via: "via-purple-700",
+    to: "to-pink-700",
+    overlay: "from-violet-800/30"
+  },
+  {
+    from: "from-blue-700",
+    via: "via-cyan-700",
+    to: "to-teal-700",
+    overlay: "from-indigo-800/30"
+  },
+  {
+    from: "from-purple-700",
+    via: "via-fuchsia-700",
+    to: "to-pink-700",
+    overlay: "from-violet-800/30"
+  },
+  {
+    from: "from-pink-700",
+    via: "via-rose-700",
+    to: "to-orange-700",
+    overlay: "from-fuchsia-800/30"
+  },
+  {
+    from: "from-cyan-700",
+    via: "via-blue-700",
+    to: "to-indigo-700",
+    overlay: "from-teal-800/30"
+  }
+];
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash);
+}
+function getGradientFromTitle(title) {
+  const hash = hashString(title);
+  const palette = GRADIENT_PALETTES[hash % GRADIENT_PALETTES.length];
+  return palette;
+}
+function PostCard({ post }) {
+  const { Link, Image } = usePluginOverrides("blog", {
+    Link: DefaultLink,
+    Image: DefaultImage
+  });
+  const { localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  const basePath = useBasePath();
+  const blogPath = `${basePath}/blog/${post.slug}`;
+  const postDate = formatDate(
+    post.publishedAt || post.createdAt,
+    "MMMM d, yyyy"
+  );
+  const gradient = post.image ? null : getGradientFromTitle(post.title);
+  return /* @__PURE__ */ jsxs(Card, { className: "group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg", children: [
+    /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: blogPath,
+        className: "relative block h-48 w-full overflow-hidden rounded-t-xl bg-muted",
+        "aria-label": post.title,
+        children: post.image ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: post.image,
+            alt: post.title,
+            className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105",
+            width: 500,
+            height: 300
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full overflow-hidden transition-transform duration-200 group-hover:scale-105", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute inset-0 bg-linear-to-br ${gradient.from} ${gradient.via} ${gradient.to}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `absolute inset-0 bg-linear-to-tr ${gradient.overlay} via-transparent to-transparent`
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-full w-full items-center justify-center p-6", children: /* @__PURE__ */ jsx("h3", { className: "text-center text-xl font-bold leading-tight text-white drop-shadow-lg line-clamp-3", children: post.title }) })
+        ] })
+      }
+    ),
+    !post.published && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization.BLOG_CARD_DRAFT_BADGE }),
+    /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href: blogPath,
+        "aria-label": `${post.title}`,
+        className: "block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 grow",
+        children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "flex-1", children: /* @__PURE__ */ jsx(CardTitle, { className: "line-clamp-3 text-lg leading-tight transition-colors group-hover:underline", children: post.title }) }),
+          /* @__PURE__ */ jsx(CardContent, { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs", children: [
+              /* @__PURE__ */ jsx(CalendarIcon, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("time", { dateTime: postDate, children: postDate })
+            ] }),
+            post.tags && post.tags.length > 0 && post.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag.name }, tag.id))
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+
+export { PostCard };