@prokodo/ui 0.0.52 → 0.0.53

package/dist/components/post-item/PostItem.js

@@ -1,141 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useEffect } from "react";
-import { create } from "../../helpers/bem.js";
-import { calculateWordCount } from "../../helpers/calculation.js";
-import { isString } from "../../helpers/validations.js";
-import styles from "./PostItem.module.scss.js";
-import { PostItemAuthor } from "./PostItemAuthor.js";
-import { Button } from "../button/Button.js";
-import { Grid } from "../grid/Grid.js";
-import { GridRow } from "../grid/GridRow.js";
-import { Animated } from "../animated/Animated.js";
-import { Headline } from "../headline/Headline.js";
-import { RichText } from "../rich-text/RichText.js";
-import { Card } from "../card/Card.js";
-import { Skeleton } from "../skeleton/Skeleton.js";
-const bem = create(styles, "PostItem");
-const PostItem = memo(
-  ({
-    className,
-    readCount = 0,
-    title,
-    content,
-    category,
-    author,
-    date,
-    metaDate,
-    image,
-    button,
-    imageComponent: ImageComponent
-  }) => {
-    const wordCount = calculateWordCount(content);
-    const [imageLoaded, setImageLoaded] = useState(!ImageComponent);
-    useEffect(() => {
-      if (!ImageComponent) setImageLoaded(true);
-    }, [ImageComponent]);
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        itemScope: true,
-        className: bem(void 0, void 0, className),
-        itemType: "http://schema.org/BlogPosting",
-        children: [
-          /* @__PURE__ */ jsxs(Grid, { className: bem("grid"), children: [
-            /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: image ? 8 : 12, xs: 12, children: /* @__PURE__ */ jsxs(Animated, { className: bem("animation"), children: [
-              /* @__PURE__ */ jsxs("header", { children: [
-                /* @__PURE__ */ jsx(
-                  Headline,
-                  {
-                    className: bem("headline", void 0, title == null ? void 0 : title.className),
-                    size: "lg",
-                    type: "h2",
-                    ...title,
-                    children: title.content
-                  }
-                ),
-                /* @__PURE__ */ jsxs("div", { className: bem("info"), children: [
-                  author && /* @__PURE__ */ jsx(PostItemAuthor, { avatar: author.avatar, name: author.name }),
-                  isString(date) && /* @__PURE__ */ jsxs(
-                    "p",
-                    {
-                      "aria-label": `Published at ${date}`,
-                      className: bem("date"),
-                      itemProp: "datePublished",
-                      children: [
-                        "📅  ",
-                        /* @__PURE__ */ jsx("time", { dateTime: metaDate, itemProp: "datePublished", children: date })
-                      ]
-                    }
-                  ),
-                  readCount > 0 && /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      itemScope: true,
-                      className: bem("read__count"),
-                      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 })
-                      ]
-                    }
-                  )
-                ] })
-              ] }),
-              isString(content) && /* @__PURE__ */ jsx("div", { itemProp: "articleBody", children: /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }) }),
-              button && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "outlined",
-                  ...button,
-                  className: bem("button", void 0, button == null ? void 0 : button.className),
-                  contentClassName: bem(
-                    "button__content",
-                    void 0,
-                    button == null ? void 0 : button.contentClassName
-                  )
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx(GridRow, { md: 4, xs: 12, children: /* @__PURE__ */ jsxs(
-              Card,
-              {
-                enableShadow: true,
-                background: image == null ? void 0 : image.src,
-                className: bem("image__wrapper"),
-                contentClassName: bem("image__content__wrapper"),
-                redirect: button == null ? void 0 : button.redirect,
-                children: [
-                  !imageLoaded && /* @__PURE__ */ jsx(Skeleton, { height: "275px" }),
-                  ImageComponent !== void 0 && isString(image == null ? void 0 : image.src) && /* @__PURE__ */ jsx(
-                    ImageComponent,
-                    {
-                      ...image,
-                      className: bem("image"),
-                      sizes: "(max-width: 960px) 100vw, 25vw",
-                      onLoad: /* @__PURE__ */ __name(() => setImageLoaded(true), "onLoad")
-                    }
-                  )
-                ]
-              }
-            ) })
-          ] }),
-          wordCount > 0 && /* @__PURE__ */ jsx("meta", { content: String(wordCount), itemProp: "wordCount" }),
-          isString(category) && /* @__PURE__ */ jsx("meta", { content: category, itemProp: "articleSection" })
-        ]
-      }
-    );
-  }
-);
-PostItem.displayName = "PostItem";
+import { createIsland } from "../../helpers/createIsland.js";
+import PostItemServer from "./PostItem.server.js";
+const PostItem = createIsland({
+  name: "PostItem",
+  Server: PostItemServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./PostItem.lazy.js"), "loadLazy")
+});
 export {
   PostItem
 };

package/dist/components/post-item/PostItem.lazy.js

@@ -0,0 +1,14 @@
+"use client";
+import { createLazyWrapper } from "../../helpers/createLazyWrapper.js";
+import PostItemClient from "./PostItem.client.js";
+import PostItemServer from "./PostItem.server.js";
+const PostItem_lazy = createLazyWrapper({
+  name: "PostItem",
+  Client: PostItemClient,
+  Server: PostItemServer,
+  // Hydrate when visible if interactive (e.g., button.onClick, redirect, etc.)
+  hydrateOnVisible: true
+});
+export {
+  PostItem_lazy as default
+};

package/dist/components/post-item/PostItem.module.scss.js

@@ -1,5 +1,7 @@
 const styles = {
   "prokodo-PostItem__grid": "prokodo-PostItem__grid",
+  "prokodo-PostItem__media": "prokodo-PostItem__media",
+  "prokodo-PostItem__main": "prokodo-PostItem__main",
   "prokodo-PostItem__animation": "prokodo-PostItem__animation",
   "prokodo-PostItem__headline": "prokodo-PostItem__headline",
   "prokodo-PostItem__info": "prokodo-PostItem__info",
@@ -8,8 +10,8 @@ const styles = {
   "prokodo-PostItem__content": "prokodo-PostItem__content",
   "prokodo-PostItem__content__paragraph": "prokodo-PostItem__content__paragraph",
   "prokodo-PostItem__image": "prokodo-PostItem__image",
-  "prokodo-PostItem__image__wrapper": "prokodo-PostItem__image__wrapper",
   "prokodo-PostItem__image__content__wrapper": "prokodo-PostItem__image__content__wrapper",
+  "prokodo-PostItem__image__wrapper": "prokodo-PostItem__image__wrapper",
   "prokodo-PostItem__button": "prokodo-PostItem__button",
   "prokodo-PostItem__button__content": "prokodo-PostItem__button__content"
 };

package/dist/components/post-item/PostItem.server.js

@@ -0,0 +1,15 @@
+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 { PostItemView } from "./PostItem.view.js";
+function PostItemServer(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(PostItemView, { ...p, readMinutes, wordCount });
+}
+__name(PostItemServer, "PostItemServer");
+export {
+  PostItemServer as default
+};

package/dist/components/post-item/PostItem.view.js

@@ -0,0 +1,238 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { create } from "../../helpers/bem.js";
+import { localizeDate } from "../../helpers/date.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./PostItem.module.scss.js";
+import { PostItemAuthor } from "./PostItemAuthor.js";
+import { Button } from "../button/Button.js";
+import { Animated } from "../animated/Animated.js";
+import { Headline } from "../headline/Headline.js";
+import { RichText } from "../rich-text/RichText.js";
+import { Card } from "../card/Card.js";
+const bem = create(styles, "PostItem");
+function PostItemView(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const {
+    locale,
+    className,
+    classes,
+    componentsProps,
+    readCount = 0,
+    title,
+    content,
+    category,
+    author,
+    date,
+    image,
+    button,
+    // private from client/server wrappers
+    wordCount,
+    readMinutes,
+    // public opts
+    structuredData = true,
+    animate = true,
+    ...rest
+  } = props;
+  const cardMerged = {
+    ...componentsProps == null ? void 0 : componentsProps.card,
+    ...rest,
+    // keep variant narrow; if none is provided, let Card default handle it
+    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (rest == null ? void 0 : rest.variant) ?? void 0
+  };
+  const ArticleWrapper = animate ? Animated : ({
+    children,
+    className: className2
+  }) => /* @__PURE__ */ jsx("div", { className: className2, children });
+  let formattedDate;
+  if (isString(date)) {
+    formattedDate = localizeDate(locale ?? "en-GB", date);
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      itemScope: true,
+      className: bem(
+        void 0,
+        void 0,
+        [className, classes == null ? void 0 : classes.root].filter(Boolean).join(" ")
+      ),
+      itemType: "https://schema.org/BlogPosting\n",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: bem("grid", void 0, classes == null ? void 0 : classes.grid), children: [
+          /* @__PURE__ */ jsx("div", { className: bem("main", void 0, classes == null ? void 0 : classes.main), children: /* @__PURE__ */ jsxs(
+            ArticleWrapper,
+            {
+              className: bem("animation", void 0, classes == null ? void 0 : classes.animation),
+              children: [
+                /* @__PURE__ */ jsxs("header", { children: [
+                  /* @__PURE__ */ jsx(
+                    Headline,
+                    {
+                      ...{ ...title, ...(componentsProps == null ? void 0 : componentsProps.headline) ?? {} },
+                      size: (title == null ? void 0 : title.size) ?? ((_b = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _b.size) ?? "md",
+                      type: (title == null ? void 0 : title.type) ?? ((_c = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _c.type) ?? "h2",
+                      className: bem(
+                        "headline",
+                        void 0,
+                        [
+                          title == null ? void 0 : title.className,
+                          (_d = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _d.className,
+                          classes == null ? void 0 : classes.headline
+                        ].filter(Boolean).join(" ")
+                      ),
+                      children: title.content
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: bem("info", void 0, classes == null ? void 0 : classes.info), children: [
+                    author && /* @__PURE__ */ jsx(
+                      PostItemAuthor,
+                      {
+                        ...author,
+                        ...(componentsProps == null ? void 0 : componentsProps.author) ?? {},
+                        avatar: author.avatar,
+                        name: author.name
+                      }
+                    ),
+                    isString(formattedDate == null ? void 0 : formattedDate.locale) && /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        "aria-label": `Published on ${formattedDate == null ? void 0 : formattedDate.locale}`,
+                        className: bem("date", void 0, classes == null ? void 0 : classes.date),
+                        children: /* @__PURE__ */ jsx(
+                          "time",
+                          {
+                            dateTime: formattedDate == null ? void 0 : formattedDate.meta,
+                            itemProp: "datePublished",
+                            children: formattedDate == null ? void 0 : formattedDate.locale
+                          }
+                        )
+                      }
+                    ),
+                    readMinutes > 0 && /* @__PURE__ */ jsxs(
+                      "p",
+                      {
+                        "aria-label": `${readMinutes} min read`,
+                        className: bem(
+                          "reading__time",
+                          void 0,
+                          classes == null ? void 0 : classes.readingTime
+                        ),
+                        children: [
+                          "· ",
+                          readMinutes,
+                          " min read"
+                        ]
+                      }
+                    ),
+                    readCount > 0 && /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        itemScope: true,
+                        "aria-label": `${readCount} reads`,
+                        itemProp: "interactionStatistic",
+                        itemType: "https://schema.org/InteractionCounter",
+                        className: bem(
+                          "read__count",
+                          void 0,
+                          classes == null ? void 0 : classes.readCount
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "meta",
+                            {
+                              content: "https://schema.org/ReadAction",
+                              itemProp: "interactionType"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("span", { itemProp: "userInteractionCount", children: readCount })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                isString(content) && /* @__PURE__ */ jsx("div", { itemProp: "articleBody", children: /* @__PURE__ */ jsx(
+                  RichText,
+                  {
+                    className: bem(
+                      "content__paragraph",
+                      void 0,
+                      classes == null ? void 0 : classes.contentParagraph
+                    ),
+                    children: content
+                  }
+                ) }),
+                button && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    ...{ ...button, ...(componentsProps == null ? void 0 : componentsProps.button) ?? {} },
+                    className: bem(
+                      "button",
+                      void 0,
+                      [
+                        button == null ? void 0 : button.className,
+                        (_e = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _e.className,
+                        classes == null ? void 0 : classes.button
+                      ].filter(Boolean).join(" ")
+                    ),
+                    contentClassName: bem(
+                      "button__content",
+                      void 0,
+                      [button == null ? void 0 : button.contentClassName, classes == null ? void 0 : classes.buttonContent].filter(Boolean).join(" ")
+                    ),
+                    variant: (button == null ? void 0 : button.variant) ?? ((_f = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _f.variant) ?? "outlined"
+                  }
+                )
+              ]
+            }
+          ) }),
+          isString(image) && /* @__PURE__ */ jsx("aside", { className: bem("media", void 0, classes == null ? void 0 : classes.media), children: /* @__PURE__ */ jsx(
+            Card,
+            {
+              ...cardMerged,
+              background: image,
+              enableShadow: cardMerged.enableShadow ?? true,
+              redirect: button == null ? void 0 : button.redirect,
+              className: bem(
+                "image__wrapper",
+                void 0,
+                classes == null ? void 0 : classes.imageWrapper
+              ),
+              contentClassName: bem(
+                "image__content__wrapper",
+                void 0,
+                classes == null ? void 0 : classes.imageContentWrapper
+              ),
+              children: /* @__PURE__ */ jsx(Fragment, {})
+            }
+          ) })
+        ] }),
+        wordCount > 0 && /* @__PURE__ */ jsx("meta", { content: String(wordCount), itemProp: "wordCount" }),
+        isString(category) && /* @__PURE__ */ jsx("meta", { content: category, itemProp: "articleSection" }),
+        Boolean(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,
+                author: isString(author == null ? void 0 : author.name) ? { "@type": "Person", name: author == null ? void 0 : author.name } : void 0,
+                image: isString(image) ? [image] : void 0
+              })
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+__name(PostItemView, "PostItemView");
+export {
+  PostItemView
+};

package/dist/components/post-item/PostItemAuthor.js

@@ -8,28 +8,34 @@ const bem = create(styles, "PostItemAuthor");
 const PostItemAuthor = memo(
   ({ className, avatar, avatarProps, name, nameProps }) => {
     const authorName = name;
-    return /* @__PURE__ */ jsxs("div", { className: bem(void 0, void 0, className), children: [
-      /* @__PURE__ */ jsx(
-        Avatar,
-        {
-          image: (avatar == null ? void 0 : avatar.src) !== void 0 && isString(avatar == null ? void 0 : avatar.src) ? {
-            src: avatar == null ? void 0 : avatar.src,
-            alt: (avatar == null ? void 0 : avatar.alt) ?? ""
-          } : void 0,
-          ...avatarProps
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "p",
-        {
-          "aria-label": `Author ${authorName}`,
-          itemProp: "author",
-          ...nameProps,
-          className: bem("name", void 0, nameProps == null ? void 0 : nameProps.className),
-          children: authorName
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        itemScope: true,
+        className: bem(void 0, void 0, className),
+        itemProp: "author",
+        itemType: "https://schema.org/Person",
+        children: [
+          /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              image: (avatar == null ? void 0 : avatar.src) !== void 0 && isString(avatar == null ? void 0 : avatar.src) ? { src: avatar == null ? void 0 : avatar.src, alt: (avatar == null ? void 0 : avatar.alt) ?? authorName ?? "" } : void 0,
+              ...avatarProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "aria-label": `Author ${authorName}`,
+              ...nameProps,
+              className: bem("name", void 0, nameProps == null ? void 0 : nameProps.className),
+              itemProp: "name",
+              children: authorName
+            }
+          )
+        ]
+      }
+    );
   }
 );
 PostItemAuthor.displayName = "PostItemAuthor";

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo, useState, useCallback } from "react";
+import { calculateWordCount } from "../../helpers/calculation.js";
+import { PostTeaserView } from "./PostTeaser.view.js";
+const PostTeaserClient = memo((props) => {
+  const { content, readingWpm = 200 } = props;
+  const wordCount = useMemo(() => calculateWordCount(content), [content]);
+  const readMinutes = useMemo(
+    () => wordCount > 0 ? Math.max(1, Math.ceil(wordCount / readingWpm)) : 0,
+    [wordCount, readingWpm]
+  );
+  const [isHovered, setIsHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+  return /* @__PURE__ */ jsx(
+    PostTeaserView,
+    {
+      ...props,
+      isHovered,
+      readMinutes,
+      wordCount,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }
+  );
+});
+PostTeaserClient.displayName = "PostTeaserClient";
+export {
+  PostTeaserClient as default
+};