@k34a/blog 0.0.3 → 0.0.5

package/dist/components/articles/banner-image.d.ts

@@ -0,0 +1,9 @@
+import { ComponentsConfig } from '../types';
+interface Props {
+    id: string;
+    src: string;
+    title: string;
+    config: ComponentsConfig;
+}
+export declare const BannerImage: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/articles/banner-image.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { Box as r, Image as a } from "@mantine/core";
+import { getImageForArticle as o } from "../utils.js";
+const s = (e) => {
+  const i = o(
+    e.config.supabaseHost,
+    e.id,
+    e.src
+  );
+  return /* @__PURE__ */ t(r, { pos: "relative", h: { base: 260, lg: "100%" }, children: /* @__PURE__ */ t(
+    a,
+    {
+      src: i,
+      alt: e.title,
+      width: 1e3,
+      height: 1e3,
+      style: {
+        maxWidth: "100%",
+        height: "auto"
+      }
+    }
+  ) });
+};
+export {
+  s as BannerImage
+};

package/dist/components/articles/description.d.ts

@@ -0,0 +1,8 @@
+import { ComponentsConfig } from '../types';
+interface Props {
+    config: ComponentsConfig;
+    articleId: string;
+    html: string;
+}
+export default function ArticleDescription(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/articles/description.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { Typography as i } from "@mantine/core";
+import { applyImageFullPaths as l, getImageForArticle as n } from "../utils.js";
+function s(t) {
+  const r = l(
+    t.html,
+    (o) => n(
+      t.config.supabaseHost,
+      t.articleId,
+      `content/${o}`
+    )
+  );
+  return /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: r } }) });
+}
+export {
+  s as default
+};

package/dist/components/articles/index.d.ts

@@ -0,0 +1,11 @@
+import { ComponentsConfig } from '../types';
+type Props = {
+    config: ComponentsConfig;
+    title: string;
+    banner_image?: string;
+    id: string;
+    description: string;
+    tags: string[];
+};
+export default function Article(props: Props): Promise<import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/articles/index.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Box as r, Stack as c, Title as a, Flex as l, Anchor as m, Badge as o } from "@mantine/core";
+import { IconHash as g } from "@tabler/icons-react";
+import { BannerImage as d } from "./banner-image.js";
+import f from "./description.js";
+async function b(i) {
+  return /* @__PURE__ */ e(r, { maw: 800, mx: "auto", px: "sm", py: "lg", children: /* @__PURE__ */ t(c, { gap: "md", children: [
+    /* @__PURE__ */ e(a, { order: 1, children: i.title }),
+    i.banner_image && /* @__PURE__ */ e(
+      d,
+      {
+        id: i.id,
+        src: i.banner_image,
+        title: i.title,
+        config: i.config
+      }
+    ),
+    /* @__PURE__ */ e(
+      f,
+      {
+        articleId: i.id,
+        html: i.description,
+        config: i.config
+      }
+    ),
+    /* @__PURE__ */ e(l, { wrap: "wrap", gap: "md", align: "center", mb: "lg", children: i.tags.map((n) => /* @__PURE__ */ e(
+      m,
+      {
+        href: `/${i.config.listingPage}?tags=${n}`,
+        children: /* @__PURE__ */ e(
+          o,
+          {
+            size: "md",
+            color: "sky.5",
+            variant: "outline",
+            leftSection: /* @__PURE__ */ e(g, { size: 14 }),
+            style: { cursor: "pointer" },
+            children: n
+          }
+        )
+      },
+      n
+    )) })
+  ] }) });
+}
+export {
+  b as default
+};

package/dist/components/filter-search-sort.d.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+import { articleQuerySchema } from '../services/search-params';
+type FilterProps = z.infer<typeof articleQuerySchema>;
+export interface Props extends FilterProps {
+    availableTags: string[];
+    navigate: (query: string) => void;
+}
+export default function FilterSearchSortArticles(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filter-search-sort.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import { Group as A, TextInput as z, Popover as h, Indicator as T, ActionIcon as F, Stack as k, MultiSelect as I, Button as R } from "@mantine/core";
+import { IconSearch as B, IconFilter as j, IconSelector as x, IconCheck as L } from "@tabler/icons-react";
+import { useRef as y, useEffect as C, useMemo as O, useState as b, useCallback as _ } from "react";
+import "../services/search-params.js";
+function Z(r) {
+  const s = y(r);
+  return C(() => {
+    s.current = r;
+  }), O(() => ((...o) => s.current?.(...o)), []);
+}
+function D(r, s) {
+  const { delay: o, flushOnUnmount: i, leading: f } = { delay: s, flushOnUnmount: !1, leading: !1 }, n = Z(r), c = y(0), u = O(() => {
+    const l = Object.assign(
+      (...d) => {
+        window.clearTimeout(c.current);
+        const g = l._isFirstCall;
+        l._isFirstCall = !1;
+        function a() {
+          window.clearTimeout(c.current), c.current = 0, l._isFirstCall = !0;
+        }
+        if (f && g) {
+          n(...d);
+          const m = () => {
+            a();
+          }, e = () => {
+            c.current !== 0 && (a(), n(...d));
+          }, v = () => {
+            a();
+          };
+          l.flush = e, l.cancel = v, c.current = window.setTimeout(m, o);
+          return;
+        }
+        if (f && !g) {
+          const m = () => {
+            c.current !== 0 && (a(), n(...d));
+          }, e = () => {
+            a();
+          };
+          l.flush = m, l.cancel = e;
+          const v = () => {
+            a();
+          };
+          c.current = window.setTimeout(v, o);
+          return;
+        }
+        const p = () => {
+          c.current !== 0 && (a(), n(...d));
+        }, S = () => {
+          a();
+        };
+        l.flush = p, l.cancel = S, c.current = window.setTimeout(p, o);
+      },
+      {
+        flush: () => {
+        },
+        cancel: () => {
+        },
+        _isFirstCall: !0
+      }
+    );
+    return l;
+  }, [n, o, f]);
+  return C(
+    () => () => {
+      i ? u.flush() : u.cancel();
+    },
+    [u, i]
+  ), u;
+}
+const P = [
+  { value: "latest", label: "Latest" },
+  { value: "oldest", label: "Oldest" },
+  { value: "A-Z", label: "Title A-Z" },
+  { value: "Z-A", label: "Title Z-A" }
+];
+function N(r) {
+  const [s, o] = b(r.search ?? ""), [i, f] = b(
+    r.sortBy ?? "latest"
+  ), [n, c] = b(
+    r.tags ?? []
+  ), [u, l] = b(!1), [d, g] = b(!1), a = D(() => {
+    const e = p();
+    r.navigate(e);
+  }, 300), p = _(() => {
+    const e = new URLSearchParams();
+    return s && e.set("search", s), n.length > 0 && e.set("tags", n.join(",")), i && e.set("sortBy", i), e.set("page", "0"), e.toString();
+  }, [s, n, i]);
+  C(() => {
+    a();
+  }, [n, s, i]);
+  const S = n.length > 0, m = i !== "latest";
+  return /* @__PURE__ */ t("form", { style: { paddingBottom: "20px" }, children: /* @__PURE__ */ w(A, { justify: "space-between", wrap: "nowrap", children: [
+    /* @__PURE__ */ t(
+      z,
+      {
+        placeholder: "Search articles...",
+        value: s,
+        onChange: (e) => o(e.currentTarget.value),
+        leftSection: /* @__PURE__ */ t(B, { size: 16 }),
+        rightSectionWidth: 40,
+        w: "100%",
+        size: "lg"
+      }
+    ),
+    /* @__PURE__ */ w(
+      h,
+      {
+        opened: u,
+        onChange: l,
+        position: "bottom-end",
+        width: 300,
+        trapFocus: !0,
+        children: [
+          /* @__PURE__ */ t(h.Target, { children: /* @__PURE__ */ t(
+            T,
+            {
+              color: "blue",
+              size: 8,
+              offset: 4,
+              disabled: !S,
+              inline: !0,
+              children: /* @__PURE__ */ t(
+                F,
+                {
+                  variant: "light",
+                  onClick: () => l((e) => !e),
+                  size: "lg",
+                  children: /* @__PURE__ */ t(j, { size: 18 })
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ t(h.Dropdown, { children: /* @__PURE__ */ t(k, { gap: "sm", children: /* @__PURE__ */ t(
+            I,
+            {
+              label: "Tags",
+              data: r.availableTags.map((e) => ({
+                value: e,
+                label: e
+              })),
+              value: n,
+              onChange: c,
+              searchable: !0,
+              placeholder: "Select tags"
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ w(
+      h,
+      {
+        opened: d,
+        onChange: g,
+        position: "bottom-end",
+        width: 200,
+        trapFocus: !0,
+        children: [
+          /* @__PURE__ */ t(h.Target, { children: /* @__PURE__ */ t(
+            T,
+            {
+              color: "blue",
+              size: 8,
+              offset: 4,
+              disabled: !m,
+              inline: !0,
+              children: /* @__PURE__ */ t(
+                F,
+                {
+                  size: "lg",
+                  variant: "light",
+                  onClick: () => g((e) => !e),
+                  children: /* @__PURE__ */ t(x, { size: 18 })
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ t(h.Dropdown, { children: /* @__PURE__ */ t(k, { children: P.map((e) => /* @__PURE__ */ t(
+            R,
+            {
+              onClick: () => f(
+                e.value
+              ),
+              size: "sm",
+              variant: "subtle",
+              leftSection: i === e.value ? /* @__PURE__ */ t(L, {}) : void 0,
+              children: e.label
+            },
+            e.value
+          )) }) })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  N as default
+};

package/dist/components/types.d.ts

@@ -0,0 +1,4 @@
+export interface ComponentsConfig {
+    supabaseHost: string;
+    listingPage: string;
+}

package/dist/components/types.js

@@ -0,0 +1 @@
+"use client";

package/dist/components/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function applyImageFullPaths(html: string, getImageFullPath: (src: string) => string): string;
+export declare function getImageForArticle(hostname: string, id: string, imageName: string): string;