@prokodo/ui 0.0.52 → 0.0.53

package/dist/components/post-teaser/PostTeaser.js

@@ -1,172 +1,12 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useCallback } from "react";
-import { create } from "../../helpers/bem.js";
-import { calculateWordCount } from "../../helpers/calculation.js";
-import { isString } from "../../helpers/validations.js";
-import styles from "./PostTeaser.module.scss.js";
-import { Chip } from "../chip/Chip.js";
-import { Card } from "../card/Card.js";
-import { Icon } from "../icon/Icon.js";
-import { Image } from "../image/Image.js";
-import { Headline } from "../headline/Headline.js";
-import { RichText } from "../rich-text/RichText.js";
-const bem = create(styles, "PostTeaser");
-const PostTeaser = memo(
-  ({
-    className,
-    image,
-    readCount,
-    title,
-    date,
-    metaDate,
-    hideCategory,
-    category,
-    content,
-    onClick,
-    redirect,
-    ...props
-  }) => {
-    var _a;
-    const wordCount = calculateWordCount(content);
-    const [isHovered, setIsHovered] = useState(false);
-    const handleMouseEnter = useCallback(() => {
-      setIsHovered(true);
-    }, []);
-    const handleMouseLeave = useCallback(() => {
-      setIsHovered(false);
-    }, []);
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        itemScope: true,
-        className: bem(void 0, void 0, className),
-        itemType: "http://schema.org/BlogPosting",
-        children: [
-          /* @__PURE__ */ jsxs(
-            Card,
-            {
-              variant: "white",
-              ...props,
-              className: bem("card__container"),
-              contentClassName: bem("card"),
-              highlight: isHovered,
-              redirect,
-              onClick,
-              onMouseEnter: handleMouseEnter,
-              onMouseLeave: handleMouseLeave,
-              children: [
-                /* @__PURE__ */ jsxs("header", { children: [
-                  isString(image == null ? void 0 : image.src) && /* @__PURE__ */ jsxs("div", { className: bem("image__wrapper"), children: [
-                    /* @__PURE__ */ jsxs("div", { className: bem("meta"), children: [
-                      isString(category) && hideCategory === false && /* @__PURE__ */ jsx(
-                        Chip,
-                        {
-                          "aria-label": `Category ${category}`,
-                          className: bem("meta__category"),
-                          color: "primary",
-                          label: category
-                        }
-                      ),
-                      readCount !== void 0 && /* @__PURE__ */ jsx(
-                        Chip,
-                        {
-                          "aria-label": `Read ${readCount} times`,
-                          color: "white",
-                          icon: /* @__PURE__ */ jsx(Icon, { name: "EyeIcon", size: "sm" }),
-                          label: /* @__PURE__ */ jsxs(
-                            "p",
-                            {
-                              itemScope: true,
-                              itemProp: "interactionStatistic",
-                              itemType: "https://schema.org/InteractionCounter",
-                              children: [
-                                /* @__PURE__ */ jsx(
-                                  "meta",
-                                  {
-                                    content: "https://schema.org/ReadAction",
-                                    itemProp: "interactionType"
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx("span", { itemProp: "userInteractionCount", children: readCount })
-                              ]
-                            }
-                          )
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      Image,
-                      {
-                        ...image,
-                        captionClassName: bem("image__caption"),
-                        className: bem("image"),
-                        containerClassName: bem("image")
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    Headline,
-                    {
-                      highlight: true,
-                      size: "md",
-                      type: "h3",
-                      ...title,
-                      className: bem("headline", title == null ? void 0 : title.className),
-                      variant: (title == null ? void 0 : title.variant) ?? "secondary",
-                      children: title == null ? void 0 : title.content
-                    }
-                  )
-                ] }),
-                isString(content) && /* @__PURE__ */ jsx("div", { className: bem("card__content"), itemProp: "articleBody", children: /* @__PURE__ */ jsx(RichText, { className: bem("content"), children: content }) }),
-                /* @__PURE__ */ jsxs("div", { className: bem("card__footer"), children: [
-                  isString(date) && /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      "aria-label": `Published at ${date}`,
-                      className: bem("date"),
-                      itemProp: "datePublished",
-                      children: /* @__PURE__ */ jsx("time", { dateTime: metaDate, itemProp: "datePublished", children: date })
-                    }
-                  ),
-                  (redirect == null ? void 0 : redirect.label) !== void 0 && isString(redirect == null ? void 0 : redirect.label) && /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      className: bem("link", {
-                        "is-hovered": isHovered
-                      }),
-                      children: [
-                        /* @__PURE__ */ jsx(
-                          Icon,
-                          {
-                            name: "ArrowRight01Icon",
-                            size: "xs",
-                            ...redirect == null ? void 0 : redirect.icon,
-                            color: "primary",
-                            className: bem(
-                              "link__icon",
-                              {
-                                "is-hovered": isHovered
-                              },
-                              (_a = redirect == null ? void 0 : redirect.icon) == null ? void 0 : _a.className
-                            )
-                          }
-                        ),
-                        redirect.label
-                      ]
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          wordCount > 0 && /* @__PURE__ */ jsx("meta", { content: String(wordCount), itemProp: "wordCount" }),
-          isString(category) && /* @__PURE__ */ jsx("meta", { content: category, itemProp: "articleSection" })
-        ]
-      }
-    );
-  }
-);
-PostTeaser.displayName = "PostTeaser";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import PostTeaserServer from "./PostTeaser.server.js";
+const PostTeaser = createIsland({
+  name: "PostTeaser",
+  Server: PostTeaserServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./PostTeaser.lazy.js"), "loadLazy")
+});
 export {
   PostTeaser
 };

package/dist/components/post-teaser/PostTeaser.lazy.js

@@ -0,0 +1,13 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import PostTeaserClient from "./PostTeaser.client.js";
+import PostTeaserServer from "./PostTeaser.server.js";
+const PostTeaser_lazy = createLazyWrapper({
+  name: "PostTeaser",
+  Client: PostTeaserClient,
+  Server: PostTeaserServer,
+  hydrateOnVisible: true
+});
+export {
+  PostTeaser_lazy as default
+};

package/dist/components/post-teaser/PostTeaser.module.scss.js

@@ -5,8 +5,11 @@ const styles = {
   "prokodo-PostTeaser__card__footer": "prokodo-PostTeaser__card__footer",
   "prokodo-PostTeaser__meta": "prokodo-PostTeaser__meta",
   "prokodo-PostTeaser__meta__category": "prokodo-PostTeaser__meta__category",
+  "prokodo-PostTeaser__meta__readcount": "prokodo-PostTeaser__meta__readcount",
+  "prokodo-PostTeaser__meta__readcount__wrapper": "prokodo-PostTeaser__meta__readcount__wrapper",
   "prokodo-PostTeaser__image": "prokodo-PostTeaser__image",
   "prokodo-PostTeaser__image__wrapper": "prokodo-PostTeaser__image__wrapper",
+  "prokodo-PostTeaser__image__container": "prokodo-PostTeaser__image__container",
   "prokodo-PostTeaser__image__caption": "prokodo-PostTeaser__image__caption",
   "prokodo-PostTeaser__date": "prokodo-PostTeaser__date",
   "prokodo-PostTeaser__animation": "prokodo-PostTeaser__animation",

package/dist/components/post-teaser/PostTeaser.server.js

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx } from "react/jsx-runtime";
+import { calculateWordCount } from "../../helpers/calculation.js";
+import { PostTeaserView } from "./PostTeaser.view.js";
+function PostTeaserServer(p) {
+  const { content, readingWpm = 200 } = p;
+  const wordCount = calculateWordCount(content);
+  const readMinutes = wordCount > 0 ? Math.max(1, Math.ceil(wordCount / readingWpm)) : 0;
+  return /* @__PURE__ */ jsx(
+    PostTeaserView,
+    {
+      ...p,
+      isHovered: false,
+      readMinutes,
+      wordCount
+    }
+  );
+}
+__name(PostTeaserServer, "PostTeaserServer");
+export {
+  PostTeaserServer as default
+};

package/dist/components/post-teaser/PostTeaser.view.js

@@ -0,0 +1,252 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { create } from "../../helpers/bem.js";
+import { localizeDate } from "../../helpers/date.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./PostTeaser.module.scss.js";
+import { Chip } from "../chip/Chip.js";
+import { Card } from "../card/Card.js";
+import { Icon } from "../icon/Icon.js";
+import { Image } from "../image/Image.js";
+import { Headline } from "../headline/Headline.js";
+import { RichText } from "../rich-text/RichText.js";
+const bem = create(styles, "PostTeaser");
+function PostTeaserView(props) {
+  var _a, _b;
+  const {
+    locale,
+    className,
+    classes,
+    componentsProps,
+    image,
+    readCount,
+    title,
+    date,
+    hideCategory,
+    category,
+    content,
+    onClick,
+    redirect,
+    structuredData = true,
+    // private
+    isHovered,
+    wordCount,
+    readMinutes,
+    // passthrough hover
+    onMouseEnter,
+    onMouseLeave,
+    ...cardRest
+  } = props;
+  const cardMerged = {
+    ...componentsProps == null ? void 0 : componentsProps.card,
+    ...cardRest,
+    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (cardRest == null ? void 0 : cardRest.variant) ?? "white"
+  };
+  const baseImg = image;
+  const imageMerged = baseImg ? {
+    ...baseImg,
+    // classes
+    captionClassName: bem("image__caption"),
+    className: bem("image", void 0, classes == null ? void 0 : classes.image),
+    containerClassName: bem(
+      "image__container",
+      void 0,
+      classes == null ? void 0 : classes.imageContainer
+    ),
+    // perf defaults
+    decoding: baseImg.decoding ?? "async",
+    loading: baseImg.loading ?? "lazy",
+    sizes: baseImg.sizes ?? "(max-width: 960px) 100vw, 33vw",
+    // IMPORTANT: do not explicitly set imageComponent if it's falsy
+    ...isValidElement(baseImg.imageComponent) ? { imageComponent: baseImg.imageComponent } : {}
+  } : void 0;
+  let formattedDate;
+  if (isString(date)) {
+    formattedDate = localizeDate(locale ?? "en-GB", date);
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      itemScope: true,
+      itemType: "https://schema.org/BlogPosting",
+      className: bem(
+        void 0,
+        void 0,
+        [className, classes == null ? void 0 : classes.root].filter(Boolean).join(" ")
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Card,
+          {
+            ...cardMerged,
+            className: bem("card__container"),
+            contentClassName: bem("card"),
+            highlight: Boolean(isHovered),
+            redirect,
+            onClick,
+            onMouseEnter,
+            onMouseLeave,
+            children: [
+              /* @__PURE__ */ jsxs("header", { className: classes == null ? void 0 : classes.header, children: [
+                isString(image == null ? void 0 : image.src) && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: bem(
+                      "image__wrapper",
+                      void 0,
+                      classes == null ? void 0 : classes.imageWrapper
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: bem("meta", void 0, classes == null ? void 0 : classes.meta), children: [
+                        isString(category) && hideCategory === false && /* @__PURE__ */ jsx(
+                          Chip,
+                          {
+                            "aria-label": `Category ${category}`,
+                            color: "primary",
+                            label: category,
+                            className: bem(
+                              "meta__category",
+                              void 0,
+                              classes == null ? void 0 : classes.metaCategory
+                            ),
+                            ...componentsProps == null ? void 0 : componentsProps.categoryChip
+                          }
+                        ),
+                        typeof readCount === "number" && /* @__PURE__ */ jsx(
+                          Chip,
+                          {
+                            "aria-label": `Read ${readCount} times`,
+                            className: bem("meta__readcount__wrapper"),
+                            color: "white",
+                            icon: /* @__PURE__ */ jsx(Icon, { name: "EyeIcon", size: "sm" }),
+                            label: /* @__PURE__ */ jsxs(
+                              "p",
+                              {
+                                itemScope: true,
+                                className: bem("meta__readcount"),
+                                itemProp: "interactionStatistic",
+                                itemType: "https://schema.org/InteractionCounter",
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    "meta",
+                                    {
+                                      content: "https://schema.org/ReadAction",
+                                      itemProp: "interactionType"
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx("span", { itemProp: "userInteractionCount", children: readCount })
+                                ]
+                              }
+                            ),
+                            ...componentsProps == null ? void 0 : componentsProps.readCountChip
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(Image, { ...imageMerged })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Headline,
+                  {
+                    highlight: true,
+                    size: "sm",
+                    type: "h3",
+                    ...{ ...title, ...(componentsProps == null ? void 0 : componentsProps.headline) ?? {} },
+                    className: bem(
+                      "headline",
+                      void 0,
+                      [title == null ? void 0 : title.className, classes == null ? void 0 : classes.headline].filter(Boolean).join(" ")
+                    ),
+                    variant: (title == null ? void 0 : title.variant) ?? ((_b = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _b.variant) ?? "secondary",
+                    children: title == null ? void 0 : title.content
+                  }
+                )
+              ] }),
+              isString(content) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: bem("card__content", void 0, classes == null ? void 0 : classes.cardContent),
+                  itemProp: "articleBody",
+                  children: /* @__PURE__ */ jsx(RichText, { className: bem("content", void 0, classes == null ? void 0 : classes.content), children: content })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: bem("card__footer", void 0, classes == null ? void 0 : classes.cardFooter), children: [
+                isString(formattedDate == null ? void 0 : formattedDate.locale) && /* @__PURE__ */ jsxs(
+                  "p",
+                  {
+                    "aria-label": `Published at ${date}`,
+                    className: bem("date", void 0, classes == null ? void 0 : classes.date),
+                    itemProp: "datePublished",
+                    children: [
+                      /* @__PURE__ */ jsx("time", { dateTime: formattedDate == null ? void 0 : formattedDate.meta, itemProp: "datePublished", children: formattedDate == null ? void 0 : formattedDate.locale }),
+                      readMinutes > 0 ? ` · ${readMinutes} min read` : null
+                    ]
+                  }
+                ),
+                isString(redirect == null ? void 0 : redirect.label) && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: bem(
+                      "link",
+                      { "is-hovered": Boolean(isHovered) },
+                      classes == null ? void 0 : classes.link
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          color: "primary",
+                          name: "ArrowRight01Icon",
+                          size: "xs",
+                          className: bem(
+                            "link__icon",
+                            { "is-hovered": Boolean(isHovered) },
+                            classes == null ? void 0 : classes.linkIcon
+                          ),
+                          ...componentsProps == null ? void 0 : componentsProps.linkIcon,
+                          ...redirect == null ? void 0 : redirect.icon
+                        }
+                      ),
+                      redirect == null ? void 0 : redirect.label
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        wordCount > 0 && /* @__PURE__ */ jsx("meta", { content: String(wordCount), itemProp: "wordCount" }),
+        isString(category) && /* @__PURE__ */ jsx("meta", { content: category, itemProp: "articleSection" }),
+        structuredData && /* @__PURE__ */ jsx(
+          "script",
+          {
+            type: "application/ld+json",
+            dangerouslySetInnerHTML: {
+              __html: JSON.stringify({
+                "@context": "https://schema.org",
+                "@type": "BlogPosting",
+                headline: title == null ? void 0 : title.content,
+                datePublished: isString(formattedDate == null ? void 0 : formattedDate.meta) ? formattedDate == null ? void 0 : formattedDate.meta : void 0,
+                articleSection: category,
+                wordCount,
+                interactionStatistic: typeof readCount === "number" ? {
+                  "@type": "InteractionCounter",
+                  interactionType: { "@type": "ReadAction" },
+                  userInteractionCount: readCount
+                } : void 0,
+                image: isString(image == null ? void 0 : image.src) ? [image.src] : void 0
+              })
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+__name(PostTeaserView, "PostTeaserView");
+export {
+  PostTeaserView
+};

package/dist/components/post-widget/PostWidget.client.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { PostWidgetView } from "./PostWidget.view.js";
+const PostWidgetClient = memo((props) => /* @__PURE__ */ jsx(PostWidgetView, { ...props }));
+PostWidgetClient.displayName = "PostWidgetClient";
+export {
+  PostWidgetClient as default
+};

package/dist/components/post-widget/PostWidget.js

@@ -1,159 +1,14 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { create } from "../../helpers/bem.js";
-import { isString } from "../../helpers/validations.js";
-import styles from "./PostWidget.module.scss.js";
-import { Card } from "../card/Card.js";
-import { Headline } from "../headline/Headline.js";
-import { Link } from "../link/Link.js";
-import { Image } from "../image/Image.js";
-const bem = create(styles, "PostWidget");
-const PostWidget = memo(
-  ({
-    fullWidth,
-    className,
-    title,
-    listClassName,
-    contentClassName,
-    items = [],
-    ...props
-  }) => /* @__PURE__ */ jsx(
-    "section",
-    {
-      itemScope: true,
-      className: bem(void 0, void 0, className),
-      itemType: "https://schema.org/ItemList",
-      children: /* @__PURE__ */ jsxs(
-        Card,
-        {
-          animated: true,
-          enableShadow: true,
-          ...props,
-          className: bem("card__container"),
-          contentClassName: bem("card", void 0, contentClassName),
-          children: [
-            title && /* @__PURE__ */ jsx(
-              Headline,
-              {
-                highlight: true,
-                size: "md",
-                type: "h2",
-                ...title,
-                className: bem("title", title == null ? void 0 : title.className),
-                itemProp: "headline",
-                variant: "secondary",
-                children: title == null ? void 0 : title.content
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "ul",
-              {
-                className: bem(
-                  "list",
-                  {
-                    "has-fullWidth": Boolean(fullWidth)
-                  },
-                  listClassName
-                ),
-                children: items.map((item, i) => {
-                  var _a, _b, _c, _d;
-                  return /* @__PURE__ */ jsx(
-                    "li",
-                    {
-                      itemScope: true,
-                      itemProp: "itemListElement",
-                      itemType: "https://schema.org/ListItem",
-                      className: bem("list__item", {
-                        "has-fullWidth": Boolean(fullWidth)
-                      }),
-                      children: /* @__PURE__ */ jsxs(
-                        "article",
-                        {
-                          itemScope: true,
-                          className: bem("list__item__content"),
-                          itemType: "https://schema.org/BlogPosting",
-                          children: [
-                            (item == null ? void 0 : item.image) && /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx(
-                              Link,
-                              {
-                                ...item == null ? void 0 : item.redirect,
-                                "aria-label": `Read more about ${item.title.content}`,
-                                className: bem(
-                                  "image__link",
-                                  void 0,
-                                  (_a = item == null ? void 0 : item.redirect) == null ? void 0 : _a.className
-                                ),
-                                children: /* @__PURE__ */ jsx(
-                                  Image,
-                                  {
-                                    ...item == null ? void 0 : item.image,
-                                    itemProp: "image",
-                                    className: bem(
-                                      "image",
-                                      void 0,
-                                      (_b = item == null ? void 0 : item.image) == null ? void 0 : _b.className
-                                    )
-                                  }
-                                )
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsxs("div", { className: bem("content"), children: [
-                              /* @__PURE__ */ jsx(
-                                Link,
-                                {
-                                  ...item == null ? void 0 : item.redirect,
-                                  "aria-label": `Read more about ${item.title.content}`,
-                                  children: /* @__PURE__ */ jsx(
-                                    Headline,
-                                    {
-                                      size: "sm",
-                                      type: "h3",
-                                      ...item.title,
-                                      className: bem("headline", (_c = item.title) == null ? void 0 : _c.className),
-                                      itemProp: "headline",
-                                      variant: "inherit",
-                                      children: (_d = item.title) == null ? void 0 : _d.content
-                                    }
-                                  )
-                                }
-                              ),
-                              isString(item == null ? void 0 : item.date) && (item == null ? void 0 : item.date) !== "LL" && /* @__PURE__ */ jsx(
-                                "p",
-                                {
-                                  "aria-label": `Published at ${item.date}`,
-                                  className: bem("date"),
-                                  itemProp: "datePublished",
-                                  children: /* @__PURE__ */ jsx(
-                                    "time",
-                                    {
-                                      "aria-label": `Published at ${item.date}`,
-                                      className: bem("date"),
-                                      itemProp: "datePublished",
-                                      ...item == null ? void 0 : item.dateProps,
-                                      children: item.date
-                                    }
-                                  )
-                                }
-                              )
-                            ] }),
-                            /* @__PURE__ */ jsx("meta", { content: (i + 1).toString(), itemProp: "position" }),
-                            isString(item == null ? void 0 : item.category) && /* @__PURE__ */ jsx("meta", { content: item.category, itemProp: "articleSection" })
-                          ]
-                        }
-                      )
-                    },
-                    `post-widget-item-${item.title}`
-                  );
-                })
-              }
-            )
-          ]
-        }
-      )
-    }
-  )
-);
-PostWidget.displayName = "PostWidget";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import PostWidgetServer from "./PostWidget.server.js";
+const PostWidget = createIsland({
+  name: "PostWidget",
+  Server: PostWidgetServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./PostWidget.lazy.js"), "loadLazy"),
+  // Only hydrate if the top-level Card gets interactive handlers
+  isInteractive: /* @__PURE__ */ __name((p) => typeof p.onClick === "function", "isInteractive")
+});
 export {
   PostWidget
 };