@c-rex/components 0.1.38 → 0.1.39

package/src/article/article-action-bar.tsx

@@ -1,111 +1,111 @@
-"use client";
-import { FC, useEffect, useRef, useState } from "react";
-import { useHighlightStore } from "../stores/highlight-store";
-import { Button } from "@c-rex/ui/button";
-import { ArrowBigLeft, ArrowBigRight, FileSearchIcon, PanelRight, Search, X } from "lucide-react";
-import { useQueryState } from "nuqs";
-import { useHighlight } from "@c-rex/contexts/highlight-provider";
-import { useMultiSidebar } from "@c-rex/ui/sidebar";
-import { cn } from "@c-rex/utils";
-import { useTranslations } from "next-intl";
-
-export const ArticleActionBar: FC = () => {
-    const t = useTranslations();
-    const inputRef = useRef<HTMLInputElement>(null);
-    const { next, prev } = useHighlight();
-    const [open, setOpen] = useState(false);
-    const enableHighlight = useHighlightStore((state) => state.enable);
-    const toggleHighlight = useHighlightStore((state) => state.toggleHighlight);
-    const { rightSidebar } = useMultiSidebar()
-    const [query, setQuery] = useQueryState("q");
-
-    useEffect(() => {
-        if (open && inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, [open]);
-
-    return (
-        <>
-            <div className="w-auto justify-between bg-primary text-primary-foreground rounded-full shadow-lg flex sticky bottom-4 p-2 float-right gap-2 transition-all duration-300">
-                {enableHighlight && (
-
-                    <>
-                        <div className="flex items-center">
-                            <input
-                                type="text"
-                                value={query as string || ""}
-                                ref={inputRef}
-                                onKeyDown={(e) => {
-                                    if (e.key === "Enter") {
-                                        next();
-                                    }
-                                    if (e.key === "Escape") {
-                                        setOpen(false);
-                                    }
-                                }}
-                                onChange={(e) => setQuery(e.target.value || null)}
-                                placeholder={t("search")}
-                                className={cn(
-                                    "border border-gray-300 left-12 transition-all duration-300 rounded-full h-9 bg-secondary text-secondary-foreground focus:outline-none focus:ring-2 focus:ring-blue-500",
-                                    open ? "flex flex-1  opacity-100 px-2 mr-2" : "w-0 opacity-0 px-0"
-                                )}
-                            />
-
-                            <Button variant="ghost" size="icon" rounded="full" onClick={() => setOpen(!open)}>
-                                {open ? <X className="w-5 h-5" /> : <Search className="w-5 h-5" />}
-                            </Button>
-
-                        </div>
-
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            rounded="full"
-                            onClick={prev}
-                            className={cn(open && "hidden sm:inline-flex")}
-                        >
-                            <ArrowBigLeft />
-                        </Button>
-
-                        <Button
-                            variant="ghost"
-                            size="icon"
-                            rounded="full"
-                            onClick={next}
-                            className={cn(open && "hidden sm:inline-flex")}
-                        >
-                            <ArrowBigRight />
-                        </Button>
-                    </>
-                )}
-
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    rounded="full"
-                    onClick={() => toggleHighlight(!enableHighlight)}
-                    className={cn("group", open && "hidden sm:inline-flex")}
-                >
-                    {enableHighlight ?
-                        <FileSearchIcon /> :
-                        <div className="relative inline-block">
-                            <FileSearchIcon />
-                            <span className="absolute inset-0 w-[2px] bg-primary-foreground rotate-45 translate-x-2 group-hover:bg-accent-foreground" />
-                        </div>
-                    }
-                </Button>
-
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    rounded="full"
-                    onClick={rightSidebar.toggleSidebar}
-                    className={cn(open && "hidden sm:inline-flex")}
-                >
-                    <PanelRight />
-                </Button>
-            </div>
-        </>
-    )
+"use client";
+import { FC, useEffect, useRef, useState } from "react";
+import { useHighlightStore } from "../stores/highlight-store";
+import { Button } from "@c-rex/ui/button";
+import { ArrowBigLeft, ArrowBigRight, FileSearchIcon, PanelRight, Search, X } from "lucide-react";
+import { useQueryState } from "nuqs";
+import { useHighlight } from "@c-rex/contexts/highlight-provider";
+import { useMultiSidebar } from "@c-rex/ui/sidebar";
+import { cn } from "@c-rex/utils";
+import { useTranslations } from "next-intl";
+
+export const ArticleActionBar: FC = () => {
+    const t = useTranslations();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const { next, prev } = useHighlight();
+    const [open, setOpen] = useState(false);
+    const enableHighlight = useHighlightStore((state) => state.enable);
+    const toggleHighlight = useHighlightStore((state) => state.toggleHighlight);
+    const { rightSidebar } = useMultiSidebar()
+    const [query, setQuery] = useQueryState("q");
+
+    useEffect(() => {
+        if (open && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [open]);
+
+    return (
+        <>
+            <div className="w-auto justify-between bg-primary text-primary-foreground rounded-full shadow-lg flex bottom-4 p-2 float-right gap-2 transition-all duration-300 absolute right-4">
+                {enableHighlight && (
+
+                    <>
+                        <div className="flex items-center">
+                            <input
+                                type="text"
+                                value={query as string || ""}
+                                ref={inputRef}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter") {
+                                        next();
+                                    }
+                                    if (e.key === "Escape") {
+                                        setOpen(false);
+                                    }
+                                }}
+                                onChange={(e) => setQuery(e.target.value || null)}
+                                placeholder={t("search")}
+                                className={cn(
+                                    "border border-gray-300 left-12 transition-all duration-300 rounded-full h-9 bg-secondary text-secondary-foreground focus:outline-none focus:ring-2 focus:ring-blue-500",
+                                    open ? "flex flex-1  opacity-100 px-2 mr-2" : "w-0 opacity-0 px-0"
+                                )}
+                            />
+
+                            <Button variant="ghost" size="icon" rounded="full" onClick={() => setOpen(!open)}>
+                                {open ? <X className="w-5 h-5" /> : <Search className="w-5 h-5" />}
+                            </Button>
+
+                        </div>
+
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            rounded="full"
+                            onClick={prev}
+                            className={cn(open && "hidden sm:inline-flex")}
+                        >
+                            <ArrowBigLeft />
+                        </Button>
+
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            rounded="full"
+                            onClick={next}
+                            className={cn(open && "hidden sm:inline-flex")}
+                        >
+                            <ArrowBigRight />
+                        </Button>
+                    </>
+                )}
+
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    rounded="full"
+                    onClick={() => toggleHighlight(!enableHighlight)}
+                    className={cn("group", open && "hidden sm:inline-flex")}
+                >
+                    {enableHighlight ?
+                        <FileSearchIcon /> :
+                        <div className="relative inline-block">
+                            <FileSearchIcon />
+                            <span className="absolute inset-0 w-[2px] bg-primary-foreground rotate-45 translate-x-2 group-hover:bg-accent-foreground" />
+                        </div>
+                    }
+                </Button>
+
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    rounded="full"
+                    onClick={rightSidebar.toggleSidebar}
+                    className={cn(open && "hidden sm:inline-flex")}
+                >
+                    <PanelRight />
+                </Button>
+            </div>
+        </>
+    )
 }

package/src/article/article-content.tsx

@@ -1,46 +1,18 @@
-import { FC } from "react";
-import { RenditionModel } from "@c-rex/interfaces";
-import { RenderArticle } from "../render-article";
-import { ArticleActionBar } from "./article-action-bar";
-import * as cheerio from "cheerio"
-import { HtmlRendition } from "../renditions/html";
-
-interface Props {
-    renditions: RenditionModel[] | null | undefined;
-}
-
-export const ArticleContent: FC<Props> = async ({ renditions }) => {
-
-    const articleRender = (html: string) => {
-
-        const $ = cheerio.load(html)
-
-        const metaTags = $("meta").map((_, el) => {
-            const name = $(el).attr("name")
-            const content = $(el).attr("content")
-            return name && content ? { name, content } : null
-        }).get().filter(Boolean)
-
-        const articleHtml = $("main").html() || ""
-
-        return (
-            <>
-                {metaTags.map((tag) => (
-                    <meta key={`${tag.name}-${tag.content}`} name={tag.name} content={tag.content} />
-                ))}
-                <div className="pr-4 relative">
-                    <RenderArticle htmlContent={articleHtml} contentLang="" />
-                </div>
-                <ArticleActionBar />
-            </>
-        )
-    }
-
-    return (
-        <HtmlRendition
-            renditions={renditions}
-            render={articleRender}
-            shortId=""
-        />
-    )
-}
+import { FC } from "react";
+import { RenderArticle } from "../render-article";
+import { ArticleActionBar } from "./article-action-bar";
+
+interface Props {
+    articleHtml: string;
+}
+
+export const ArticleContent: FC<Props> = async ({ articleHtml }) => {
+    return (
+        <>
+            <div className="pr-4 relative">
+                <RenderArticle htmlContent={articleHtml} contentLang="" />
+            </div>
+            <ArticleActionBar />
+        </>
+    )
+}