@c-rex/templates 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "type": "module",
   "files": [
     "src"

package/src/blog/article/page.tsx

@@ -1,11 +1,19 @@
-import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "./utils";
-import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
+import { JSX } from "react";
+import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "../utils";
+import { BLOG_TYPE_AND_LINK, CONTENT_LANG_KEY } from "@c-rex/constants";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { Metadata } from "next";
 import { RenderArticle } from "@c-rex/components/render-article";
-import { AppSidebar } from "@c-rex/components/sidebar";
-import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
+import { InfoCard } from "@c-rex/components/info-card";
 import { CheckArticleLangToast } from "@c-rex/components/check-article-lang";
+import { SidebarMenu, SidebarMenuSubButton, SidebarMenuSubItem } from "@c-rex/ui/sidebar";
+import * as Flags from 'country-flag-icons/react/3x2';
+import { getTranslations } from 'next-intl/server';
+import { getConfigs } from "@c-rex/utils/next-cookies";
+import { TopicsService } from "@c-rex/services";
+import { cookies } from "next/headers";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+
 
 const infoCache = new Map<string, Awaited<ReturnType<typeof getPrimaryInfo>>>();
 
@@ -30,26 +38,85 @@ export const generateMetadata = async (
 }
 
 export const BlogPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { htmlContent, articleLang, availableVersions } = await getInfoWithCache(params.id, BLOG_TYPE_AND_LINK, infoCache);
+    const config = getConfigs();
+    const service = new TopicsService();
+    const defaultLang = config.languageSwitcher.default;
+    const contentLang = cookies().get(CONTENT_LANG_KEY)?.value || defaultLang
+
+    const [articleList, articleInfo, t] = await Promise.all([
+        service.getList({
+            languages: [contentLang] as never[],
+            pageSize: 4,
+        }),
+        getInfoWithCache(params.id, BLOG_TYPE_AND_LINK, infoCache),
+        getTranslations()
+    ]);
+
+    const { htmlContent, articleLang, availableVersions } = articleInfo
     const { articleHtml } = extractHtmlContent(htmlContent)
 
+    articleList.items = articleList.items.filter(item => item.shortId !== params.id)
+
     return (
         <PageWrapper title="" pageType="BLOG">
-            <SidebarProvider>
-
-                <CheckArticleLangToast availableVersions={availableVersions} />
-
-                <AppSidebar
-                    lang={articleLang}
-                    data={[]}
-                    availableVersions={availableVersions}
-                />
-                <SidebarInset>
-                    <div className="container flex flex-col">
-                        <RenderArticle htmlContent={articleHtml} contentLang={articleLang} />
+            <CheckArticleLangToast availableVersions={availableVersions} />
+
+            <div className="container pt-4 flex flex-row gap-4">
+                <div className="flex-1">
+                    <RenderArticle htmlContent={articleHtml} contentLang={articleLang} />
+                </div>
+
+                <div className="w-60 relative">
+                    <div className="sticky top-24">
+                        <Card className="mb-4">
+
+                            <CardHeader>
+                                <CardTitle className="text-lg">
+                                    {t("availableIn")}:
+                                </CardTitle>
+                            </CardHeader>
+                            <CardContent className="space-y-3">
+                                <SidebarMenu>
+                                    {availableVersions.map((item) => {
+                                        return (
+                                            <SidebarMenuSubItem key={item.shortId}>
+                                                <SidebarMenuSubButton
+                                                    className="cursor-pointer"
+                                                    isActive={item.active}
+                                                    key={item.shortId}
+                                                    href={item.link} title={item.lang}
+                                                >
+                                                    {getFlagIcon(item.country)} {item.lang}
+                                                </SidebarMenuSubButton>
+                                            </SidebarMenuSubItem>
+                                        )
+                                    })}
+                                </SidebarMenu>
+                            </CardContent>
+                        </Card>
+
+                        <InfoCard
+                            title={t("recentPosts")}
+                            items={articleList.items.map(item => ({
+                                label: item.title,
+                                value: item.created,
+                                link: item.link
+                            }))}
+                        />
+
                     </div>
-                </SidebarInset>
-            </SidebarProvider>
+                </div>
+
+            </div>
         </PageWrapper>
     );
+};
+
+
+const getFlagIcon = (countryCode: string): JSX.Element | null => {
+    type CountryCode = keyof typeof Flags;
+    const FlagComponent = Flags[countryCode as CountryCode];
+    if (!FlagComponent) return null;
+
+    return <FlagComponent />;
 };

package/src/blog/home/layout.tsx

@@ -1,59 +1,72 @@
-import { informationUnitsResponse } from "@c-rex/interfaces";
-import { InformationUnitsService } from "@c-rex/services";
+import { DocumentTypesService, TopicsService } from "@c-rex/services";
 import { HomePage } from "./page";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { WildCardType } from "@c-rex/types";
+import { cookies } from "next/headers";
+import { getConfigs } from "@c-rex/utils/next-cookies";
+import { CONTENT_LANG_KEY } from "@c-rex/constants";
+import { getTeaserInfo } from "../utils";
+import { SearchProvider } from "@c-rex/contexts/search";
 
-interface HomeProps {
-    searchParams: {
+interface BlogHomeProps {
+    searchParams?: {
         search?: string;
-        page: string;
-        language: string;
-        wildcard: string;
-        operator: string;
-        like: string;
-        packages?: string;
+        page?: string;
+        wildcard?: string;
+        operator?: string;
+        like?: string;
         filter?: string;
     };
 }
 
-export const HomeLayout = async ({ searchParams }: HomeProps) => {
-    const { search, page, language, wildcard, operator, like, packages, filter } = searchParams;
+export const BlogHomeLayout = async ({ searchParams = {} }: BlogHomeProps) => {
+    const {
+        search = "",
+        page = "1",
+        wildcard = "",
+        operator = "",
+        filter = ""
+    } = searchParams;
 
-    let data = {
-        items: [],
-        pageInfo: {
-            pageCount: 0,
-            pageNumber: 0
-        }
-    } as unknown as informationUnitsResponse;
-
-    if (search !== undefined) {
-
-        const filters: string[] = filter?.split(",") || []
-        const restrict: string[] = []
-
-        if (packages && packages.length > 0) {
-            restrict.push(`packages.shortId=${packages}`)
-        }
-        const service = new InformationUnitsService();
+    const config = getConfigs();
+    const service = new TopicsService();
+    const defaultLang = config.languageSwitcher.default;
+    const contentLang = cookies().get(CONTENT_LANG_KEY)?.value || defaultLang
+    const documentService = new DocumentTypesService();
+    const filters: string[] = filter.split(",") || []
 
-        data = await service.getList({
+    const [data, tags] = await Promise.all([
+        service.getList({
             queries: search,
-            page: Number(page),
-            fields: ["renditions", "class", "languages", "labels"],
-            languages: language.split(","),
+            page: Number(page || 1),
+            fields: ["renditions", "class", "languages", "labels", "created", "applicableForTypes"],
+            languages: [contentLang] as never[],
             wildcard: wildcard as WildCardType,
-            restrict: restrict,
             operator: operator,
-            like: Boolean(like === "true"),
-            filters: filters
-        });
-    }
+            pageSize: 11,
+            filters,
+        }),
+        documentService.getLabels()
+    ]);
+
+
+    data.items = await Promise.all(data.items.map(async (item) => {
+        const response = await fetch(item.renditionUrl, { method: "GET" });
+        const text = await response.text();
+        const { imageSrc, desc } = getTeaserInfo(text);
+
+        return {
+            ...item,
+            image: imageSrc,
+            description: desc
+        }
+    }))
 
     return (
-        <PageWrapper title="" pageType="HOME">
-            <HomePage data={data} />
-        </PageWrapper>
+        <SearchProvider>
+            <PageWrapper title="" pageType="HOME">
+                <HomePage data={data} tagsParam={tags} />
+            </PageWrapper>
+        </SearchProvider>
     );
 };

package/src/blog/home/page.tsx

@@ -1,58 +1,42 @@
 "use client";
 
-import React, { FC, useEffect, useState } from "react";
-import { Trash2, X } from "lucide-react"
+import React, { FC, Fragment, useEffect, useState } from "react";
 import { useTranslations } from 'next-intl'
-import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
-import { informationUnitsResponse } from "@c-rex/interfaces";
-import { Button } from "@c-rex/ui/button";
-import { Badge } from "@c-rex/ui/badge";
+import { parseAsString, useQueryStates } from 'nuqs'
+import { Card } from "@c-rex/ui/card";
 import {
     SidebarContent,
     SidebarGroup,
-    SidebarGroupContent,
-    SidebarGroupLabel,
     SidebarHeader,
     SidebarMenu,
-    SidebarMenuSub,
     SidebarMenuSubButton,
     SidebarMenuSubItem
 } from "@c-rex/ui/sidebar";
-import { ResultList } from "@c-rex/components/result-list";
-import { DialogFilter } from "@c-rex/components/dialog-filter";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { Pagination } from "@c-rex/components/pagination";
 import { AutoComplete } from "@c-rex/components/autocomplete";
-import { OPERATOR_OPTIONS, WILD_CARD_OPTIONS } from "@c-rex/constants";
-import { Loading } from "@c-rex/components/loading";
+import { Empty } from "@c-rex/components/empty";
+import BlogView from "@c-rex/components/result-view/blog";
+import { useSearchContext } from "@c-rex/contexts/search";
+import { DefaultResponse, TopicsResponseItem } from "@c-rex/interfaces";
 
 interface HomePageProps {
-    data: informationUnitsResponse;
+    data: DefaultResponse<TopicsResponseItem, null>;
+    tagsParam: tagsType[];
 }
 
-type filterModel = {
-    key: string
-    name?: string
-    value: string
-    default?: string | boolean | null
-    removable: boolean
+type tagsType = {
+    shortId: string;
+    label: string;
+    active?: boolean
 }
 
-export const HomePage: FC<HomePageProps> = ({ data }) => {
+export const HomePage: FC<HomePageProps> = ({ data: dataAux, tagsParam }) => {
     const t = useTranslations();
-    const { configs } = useAppConfig()
-
-    const [tags, setTags] = useState<{ [key: string]: any[] }>(data.tags || {});
-    const [filters, setFilters] = useState<filterModel[] | null>(null)
-    const [disabled, setDisabled] = useState<boolean>(false)
-    const [loading, setLoading] = useState<boolean>(true)
+    const { setLoading } = useSearchContext();
+    const [tags, setTags] = useState<tagsType[]>(tagsParam);
+    const [data, setData] = useState<DefaultResponse<TopicsResponseItem, null>>(dataAux);
     const [params, setParams] = useQueryStates({
-        language: parseAsString,
-        page: parseAsInteger,
-        wildcard: parseAsString,
-        operator: parseAsString,
-        packages: parseAsString,
         filter: parseAsString,
-        like: parseAsBoolean,
         search: {
             defaultValue: "",
             parse(value) {
@@ -65,258 +49,113 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
     });
 
     useEffect(() => {
-        if (params.search.length > 0) {
-            setDisabled(false)
-            generateFiltersObj()
-        } else {
-            setDisabled(true)
-            setFilters(null)
-        }
-    }, [params])
+        setLoading(false);
+        setData(dataAux);
 
-    useEffect(() => {
-        const newTags = { ...data.tags }
+    }, [dataAux]);
 
-        if (params.filter !== null) {
-            const splittedParam = params.filter.split(",")
 
-            splittedParam.forEach((item) => {
-                const aux = item.split(".shortId=")
-                const name = aux[0]
-                const shortId = aux[1]
-
-                if (!newTags[name]) {
-                    newTags[name] = []
-                }
+    useEffect(() => {
+        const newTags = [
+            {
+                label: t("filter.all"),
+                shortId: "all",
+                active: true
+            },
+            ...tagsParam.sort((a, b) => {
+                if (a.shortId < b.shortId) return -1;
+                if (a.shortId > b.shortId) return 1;
+                return 0;
+            })];
 
-                newTags[name].forEach((el) => {
-                    if (el.shortId == shortId) {
-                        el.active = true
-                    } else {
-                        el.active = false
-                    }
-                })
-            })
-        }
+        if (params.filter !== null) {
+            const shortId = params.filter.split("=")[1]
 
-        if (params.packages !== null && newTags["packages"]) {
-            newTags["packages"].forEach((el) => {
-                if (el.shortId == params.packages) {
-                    el.active = true
+            newTags.forEach((item) => {
+                if (item.shortId == shortId) {
+                    item.active = true
                 } else {
-                    el.active = false
+                    item.active = false
                 }
             })
         }
 
         setTags(newTags)
         setLoading(false)
-    }, [data])
-
-    const generateFiltersObj = () => {
-        const filters: filterModel[] = [{
-            key: "operator",
-            name: t("filter.operator"),
-            value: `${params?.operator !== OPERATOR_OPTIONS.OR}`,
-            default: OPERATOR_OPTIONS.OR,
-            removable: params?.operator !== OPERATOR_OPTIONS.OR
-        }, {
-            key: "like",
-            name: t("filter.like"),
-            value: `${params.like}`,
-            default: false,
-            removable: params?.like as boolean
-        }, {
-            key: "wildcard",
-            value: params.wildcard as string,
-            default: WILD_CARD_OPTIONS.NONE,
-            removable: params?.wildcard !== WILD_CARD_OPTIONS.NONE
-        }]
-
-        const languages = params.language?.split(",")
-        languages?.forEach((item) => {
-            const aux = languages?.filter(langItem => langItem !== item)
-            filters.push({ key: "language", value: item, removable: languages.length > 1, default: aux.join(",") })
-        })
-
-        if (params.filter !== null) {
-            const splittedParam = params.filter.split(",")
-
-            splittedParam.forEach((item, index) => {
-                const aux = item.split(".shortId=")
-                const name = aux[0]
-                const shortId = aux[1]
-
-                const defaultValue = [...splittedParam]
-                defaultValue.splice(index, 1)
-
-                if (!tags[name]) return;
-
-                const tag = tags[name].find(el => el.shortId === shortId)
-                if (!tag) return;
-
-                const value = defaultValue.length == 0 ? null : defaultValue.join(",")
-
-                filters.push({ key: "filter", name: t(`filter.tags.${name}`), value: tag.label, removable: true, default: value })
-            })
-        }
-
-        if (params.packages !== null && tags["packages"]) {
-            const packageTag = tags["packages"]?.find(el => el.shortId === params.packages)
-            filters.push({
-                key: "packages",
-                name: t("filter.tags.packages"),
-                value: packageTag.label,
-                removable: true,
-                default: null
-            })
-        }
-
-        Object.keys(params)
-            .filter(item => !["page", "search", "language", "operator", "like", "wildcard", "filter", "packages"].includes(item))
-            .filter(item => params[item] != null)
-            .forEach(item => {
-                filters.push({ key: item, value: params[item], removable: true, default: null })
-            })
-
-        setFilters(filters)
-    }
+    }, [tagsParam])
 
-    const updateFilterParam = (key: string, item: any) => {
+    const updateFilterParam = (item: tagsType) => {
         setLoading(true)
-        if (key === "packages") {
-            setParams({ packages: item.shortId })
-            return;
-        } else {
-            const value = `${key}.shortId=${item.shortId}`
-            let aux = value
-
-            if (params.filter != null) {
-                const splittedParam = params.filter.split(",")
-                const finalValue = [...splittedParam]
-
-                const hasParams = params.filter.includes(key)
-
-                if (hasParams) {
-                    let mainIndex = -1
-
-                    splittedParam.forEach((el, index) => {
-                        if (el.includes(key)) {
-                            mainIndex = index
-                        }
-                    })
-                    finalValue[mainIndex] = value
-                } else {
-                    finalValue.push(value)
-                }
 
-                aux = finalValue.join(",")
-            }
-
-            setParams({ filter: aux })
+        if (item.shortId === "all") {
+            setParams({ filter: null })
+            return;
         }
+
+        const value = `applicableForTypes.shortId=${item.shortId}`
+        setParams({ filter: value })
     };
 
     return (
-        <div className="container">
-            {loading && <Loading opacity={true} />}
-
-            <div className="grid grid-cols-12 gap-4 py-6">
-                <div className="col-span-12 sm:col-span-10 md:col-span-10">
-                    <AutoComplete
-                        embedded={false}
-                        initialValue={params.search}
-                        searchByPackage={false}
-                    />
-                </div>
-                <div className="col-span-12 sm:col-span-2 md:col-span-2">
-                    <div className="flex justify-end">
-                        <DialogFilter
-                            setLoading={setLoading}
-                            trigger={(
-                                <Button variant="default" disabled={disabled}>{t("filter.filters")}</Button>
-                            )}
+        <div className="container pt-6">
+            <div className="flex flex-row gap-6 pb-6">
+                <div className="flex-1">
+                    <div className="pb-6">
+                        <AutoComplete
+                            embedded={false}
+                            initialValue={params.search}
+                            searchByPackage={false}
                         />
                     </div>
-                </div>
-            </div>
 
-            {filters != null && filters.length > 0 && (
-                <div className="pb-4 flex justify-between">
-                    <div>
-
-                        {filters?.map((item) => (
-                            <Badge key={`${item.key}-${item?.value}`} variant="outline" className="mr-2 mb-2 h-6">
-                                {item?.name ? item.name : item.key}: {item.value}
-                                {item.removable && (
-                                    <Button size="xs" variant="ghost" onClick={() => {
-                                        setLoading(true)
-                                        setParams({ [item.key]: item?.default })
-                                    }}>
-                                        <X className="h-2" />
-                                    </Button>
-                                )}
-                            </Badge>
-                        ))}
-
-                    </div>
-                    <Button
-                        size="sm"
-                        variant="outline"
-                        disabled={params.filter === null}
-                        onClick={() => {
-                            setLoading(true)
-                            setParams({ filter: null, packages: null })
-                        }}
-                    >
-                        {t("filter.clearFilters")}
-                        <Trash2 className="h-2" />
-                    </Button>
+                    {data?.items?.length == 0 ? (
+                        <Empty />
+                    ) : (
+                        <Fragment>
+                            <BlogView items={data.items} />
+
+                            <Pagination
+                                totalPages={data.pageInfo.pageCount}
+                                currentPage={data.pageInfo.pageNumber}
+                            />
+                        </Fragment>
+                    )}
                 </div>
-            )}
 
-            <div className="flex flex-row gap-6 pb-6">
-                {data.items.length > 0 && (
-                    <div className="w-80 bg-sidebar rounded-md border pb-4">
-                        <SidebarHeader className="text-center font-bold">
-                            Search Filters
-                        </SidebarHeader>
-                        <SidebarContent>
-                            {Object.entries(tags).map(([key, value]: any) => (
-                                <SidebarGroup key={key} className="py-0">
-                                    <SidebarGroupLabel>
-                                        {t(`filter.tags.${key}`)}
-                                    </SidebarGroupLabel>
-                                    <SidebarGroupContent>
+                {tags.length > 0 && (
+                    <div className="relative w-80">
+                        <div className="sticky top-24">
+
+                            <Card>
+                                <SidebarHeader className="text-center font-bold">
+                                    {t("filter.categories")}
+                                </SidebarHeader>
+                                <SidebarContent>
+                                    <SidebarGroup className="py-0">
                                         <SidebarMenu>
-                                            <SidebarMenuSub>
-                                                {value.map(item => (
-                                                    <SidebarMenuSubItem key={item.shortId}>
-                                                        <SidebarMenuSubButton
-                                                            className="cursor-pointer"
-                                                            isActive={item.active}
-                                                            onClick={() => updateFilterParam(key, item)}
-                                                        >
-                                                            {item.label} ({item.hits}/{item.total})
-                                                        </SidebarMenuSubButton>
-                                                    </SidebarMenuSubItem>
-                                                ))}
-                                            </SidebarMenuSub>
+
+                                            {tags.map((tagItem) => (
+
+                                                <SidebarMenuSubItem key={tagItem.shortId}>
+                                                    <SidebarMenuSubButton
+                                                        className="cursor-pointer"
+                                                        isActive={tagItem.active}
+                                                        onClick={() => {
+                                                            updateFilterParam(tagItem)
+                                                            setLoading(true)
+                                                        }}
+                                                    >
+                                                        {tagItem.label}
+                                                    </SidebarMenuSubButton>
+                                                </SidebarMenuSubItem>
+                                            ))}
                                         </SidebarMenu>
-                                    </SidebarGroupContent>
-                                </SidebarGroup>
-                            ))}
-                        </SidebarContent>
+                                    </SidebarGroup>
+                                </SidebarContent>
+                            </Card>
+                        </div>
                     </div>
                 )}
-
-                <div className="flex-1">
-                    <ResultList
-                        configs={configs}
-                        items={data.items}
-                        pagination={data.pageInfo}
-                    />
-                </div>
             </div>
         </div>
     );

package/src/blog/{article/utils.ts → utils.ts}

@@ -139,4 +139,18 @@ export const extractHtmlContent = (htmlString: string) => {
         metaTags,
         articleHtml,
     }
+}
+
+export const getTeaserInfo = (htmlString: string): {
+    imageSrc: string | null,
+    desc: string | null,
+    shortDesc: string | null
+} => {
+    const $ = cheerio.load(htmlString)
+
+    return {
+        imageSrc: $('.teaserfig img').attr('src') || null,
+        desc: $('.teaser-p').text() || null,
+        shortDesc: $('.shortdesc').text() || null,
+    }
 }

package/src/doc/articles/documents.tsx

@@ -1,12 +1,31 @@
-import { getInfoWithCache, getPrimaryInfo } from "./utils";
+import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "./utils";
 import { ArticleWrapper } from "./wrapper";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { DOCUMENTS_TYPE_AND_LINK } from "@c-rex/constants";
+import { Metadata } from "next";
 
 const infoCache = new Map<string, Awaited<ReturnType<typeof getPrimaryInfo>>>();
 
+export const generateMetadata = async (
+    { params }: { params: { id: string } }
+): Promise<Metadata> => {
+    const { htmlContent, title } = await getInfoWithCache(params.id, DOCUMENTS_TYPE_AND_LINK, infoCache);
+    const { metaTags } = extractHtmlContent(htmlContent)
+
+    const other: Record<string, string[]> = {}
+
+    for (const { name, content } of metaTags) {
+        if (Object.keys(other).includes(name)) {
+            other[name]?.push(content)
+        } else {
+            other[name] = [content]
+        }
+    }
+
+    return { ...other, title }
+}
+
 export const DocumentsPageTemplate = async ({ params }: { params: { id: string } }) => {
-    /*
     const {
         htmlContent,
         title,
@@ -15,11 +34,6 @@ export const DocumentsPageTemplate = async ({ params }: { params: { id: string }
         documentLang,
         packageId
     } = await getInfoWithCache(params.id, DOCUMENTS_TYPE_AND_LINK, infoCache);
-    */
-
-
-
-    const { htmlContent, title, availableVersions, packageId, articleLang, documentLang } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
 
     return (
         <PageWrapper title={title} pageType="DOC">

package/src/doc/articles/utils.ts

@@ -1,83 +1,92 @@
 import { DirectoryNodesService, InformationUnitsService, RenditionsService } from "@c-rex/services";
 import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
-import { DirectoryNodes, informationUnitsResponseItem, SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
+import { DirectoryNodes, informationUnitsItems, informationUnitsResponseItem, SidebarAvailableVersionsInterface } from "@c-rex/interfaces";
 import * as cheerio from 'cheerio'
 import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
 
-/*
- * Get primary info for a given information unit
- * @param id: string
- * @param type: string
- * @returns { htmlContent: string, title: string }
-*/
-export const getPrimaryInfo = async (id: string, type: string): Promise<{
+
+type ReturnType = {
     htmlContent: string,
     title: string,
     articleLang: string,
     packageId: string,
     documentLang: string,
     availableVersions: SidebarAvailableVersionsInterface[]
-}> => {
+}
+
+/*
+ * Get primary info for a given information unit
+ * @param id: string
+ * @param type: string
+ * @returns { htmlContent: string, title: string }
+*/
+export const getPrimaryInfo = async (id: string, type: string): Promise<ReturnType> => {
     const renditionService = new RenditionsService();
     const informationService = new InformationUnitsService();
+    const directoryNodeService = new DirectoryNodesService();
     const informationUnitsItem = await informationService.getItem({ id });
 
     let title = informationUnitsItem.labels[0]?.value
-    const versionOf = informationUnitsItem.versionOf.shortId
+
+    // const document: informationUnitsItems = null
     let documentLang = ""
+    const promiseList: any = []
     const articleLang = informationUnitsItem.languages[0];
 
-    const promiseList: any = [
+    const [versions, rootNode] = await Promise.all([
         informationService.getList({
-            restrict: [`versionOf.shortId=${versionOf}`],
+            restrict: [`versionOf.shortId=${informationUnitsItem.versionOf.shortId}`],
             fields: ["renditions", "class", "languages", "labels"],
         }),
-    ]
+        getRootNode(informationUnitsItem.directoryNodes)
+    ])
+    const availableVersions = versions.items.map((item: informationUnitsResponseItem) => {
+        return {
+            shortId: item.shortId,
+            link: `/${type}/${item.shortId}`,
+            lang: item.language,
+            country: item.language.split("-")[1],
+            active: item.language === articleLang,
+        }
+    }).sort((a: SidebarAvailableVersionsInterface, b: SidebarAvailableVersionsInterface) => {
+        if (a.lang < b.lang) return -1;
+        if (a.lang > b.lang) return 1;
+        return 0;
+    }) as SidebarAvailableVersionsInterface[];
+
 
-    const rootNode = await getRootNode(informationUnitsItem.directoryNodes)
 
     if (rootNode != null) {
         title = rootNode.informationUnits[0]?.labels[0]?.value;
         documentLang = rootNode.informationUnits[0]?.labels[0]?.language as string;
+
+
+        const infoId = rootNode.informationUnits[0]?.shortId as string;
+
+        document = await informationService.getItem({ id: infoId });
+
     }
 
     if ([TOPICS_TYPE_AND_LINK, BLOG_TYPE_AND_LINK].includes(type)) {
-        promiseList.push(
-            renditionService.getHTMLRendition({ renditions: informationUnitsItem.renditions })
-        )
+        promiseList.push(renditionService.getHTMLRendition({ renditions: informationUnitsItem.renditions }))
 
     } else if (rootNode != null && type == DOCUMENTS_TYPE_AND_LINK) {
 
-        const service = new DirectoryNodesService();
 
         const directoryId = rootNode.childNodes[0]?.shortId as string;
 
-        const response = await service.getItem(directoryId);
+        const response = await directoryNodeService.getItem(directoryId);
 
         const infoId = response.informationUnits[0]?.shortId;
 
         const childInformationUnit = await informationService.getItem({ id: infoId as string });
 
-        promiseList.push(
-            renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions })
-        )
+        promiseList.push(renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions }))
     }
 
-    const [versions, htmlContent] = await Promise.all(promiseList)
+    const [htmlContent] = await Promise.all(promiseList)
+
 
-    const availableVersions = versions.items.map((item: informationUnitsResponseItem) => {
-        return {
-            shortId: item.shortId,
-            link: `/${type}/${item.shortId}`,
-            lang: item.language,
-            country: item.language.split("-")[1],
-            active: item.language === articleLang,
-        }
-    }).sort((a: SidebarAvailableVersionsInterface, b: SidebarAvailableVersionsInterface) => {
-        if (a.lang < b.lang) return -1;
-        if (a.lang > b.lang) return 1;
-        return 0;
-    }) as SidebarAvailableVersionsInterface[];
 
     return {
         htmlContent,

package/src/doc/articles/wrapper.tsx

@@ -9,10 +9,12 @@ import { RenderArticle } from "@c-rex/components/render-article";
 import { CloudDownload, Eye } from "lucide-react";
 import { informationUnitsItems, SidebarAvailableVersionsInterface, TreeOfContent } from "@c-rex/interfaces";
 import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
-import { call, generateBreadcrumbItems, generateTreeOfContent, getFileRenditions } from "@c-rex/utils";
+import { call, formatDateToLocale, generateBreadcrumbItems, generateTreeOfContent, getFileRenditions } from "@c-rex/utils";
 import { DropdownMenu } from "@c-rex/components/dropdown-menu";
 import { FileRenditionType } from "@c-rex/types";
 import { useAppConfig } from "@c-rex/contexts/config-provider";
+import { InfoCard } from "@c-rex/components/info-card";
+import { useTranslations } from "next-intl";
 
 type Props = {
     htmlContent: string,
@@ -24,13 +26,43 @@ type Props = {
     availableVersions: SidebarAvailableVersionsInterface[],
     packageId: string,
 }
+type DocumentsType = {
+    filesToDownload: {
+        format: string;
+        link: string;
+    }[],
+    filesToOpen: {
+        format: string,
+        link: string,
+    }[]
+}
 
 const loadArticleData = async (id: string, type: string, title: string) => {
     const informationUnitsItem = await call<informationUnitsItems>('InformationUnitsService.getItem', { id: id });
     const { rootNode, result: treeOfContent } = await generateTreeOfContent(informationUnitsItem.directoryNodes);
-
     const articleLanguage = informationUnitsItem.languages[0]
 
+    const info: { label: string, value: string }[] = []
+
+    if (informationUnitsItem.created) {
+        info.push({
+            label: "createdAt",
+            value: formatDateToLocale(informationUnitsItem.created, articleLanguage)
+        })
+    }
+
+    if (informationUnitsItem.revision) {
+        info.push({
+            label: "revision",
+            value: informationUnitsItem.revision
+        })
+    }
+
+
+    // add title or label. title priority
+    //add language (use flag icon)
+
+
     let documents: {
         filesToDownload: FileRenditionType[];
         filesToOpen: FileRenditionType[];
@@ -67,26 +99,29 @@ const loadArticleData = async (id: string, type: string, title: string) => {
         treeOfContent,
         breadcrumbItems,
         documents,
-        articleLanguage
+        articleLanguage,
+        info
     }
 };
 
-export const ArticleWrapper = ({ htmlContent, title, id, type, documentLang, articleLang, availableVersions, packageId }: Props) => {
-    console.log(availableVersions)
+export const ArticleWrapper = ({
+    htmlContent,
+    title,
+    id,
+    type,
+    documentLang,
+    articleLang,
+    availableVersions,
+    packageId
+}: Props) => {
+    const t = useTranslations();
+
     const { setPackageID, setArticleLang } = useAppConfig()
     const [loading, setLoading] = useState<boolean>(true)
     const [breadcrumbItems, setBreadcrumbItems] = useState<TreeOfContent[]>([])
     const [treeOfContent, setTreeOfContent] = useState<TreeOfContent[]>([])
-    const [documents, setDocuments] = useState<{
-        filesToDownload: {
-            format: string;
-            link: string;
-        }[],
-        filesToOpen: {
-            format: string,
-            link: string,
-        }[]
-    }>({
+    const [articleInfo, setArticleInfo] = useState<any>([])
+    const [documents, setDocuments] = useState<DocumentsType>({
         filesToDownload: [],
         filesToOpen: [],
     })
@@ -100,11 +135,13 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, documentLang, art
                 treeOfContent,
                 documents,
                 breadcrumbItems,
+                info
             } = await loadArticleData(id, type, title)
 
             setTreeOfContent(treeOfContent)
             setDocuments(documents)
             setBreadcrumbItems(breadcrumbItems)
+            setArticleInfo(info)
             setLoading(false)
         }
 
@@ -113,8 +150,6 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, documentLang, art
 
     return (
         <SidebarProvider>
-            <title>{title}</title>
-
             <CheckArticleLangToast availableVersions={availableVersions} />
 
             <AppSidebar
@@ -124,27 +159,39 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, documentLang, art
                 loading={loading}
             />
             <SidebarInset>
-                <div className="container flex flex-col">
-                    <header className="flex h-16 shrink-0 items-center justify-between">
-                        <Breadcrumb items={breadcrumbItems} loading={loading} lang={documentLang} />
-
-                        <div className="flex">
-                            {documents.filesToDownload.length > 0 && (
-                                <DropdownMenu
-                                    items={documents.filesToDownload}
-                                    icon={<CloudDownload />}
-                                />
-                            )}
-                            {documents.filesToOpen.length > 0 && (
-                                <DropdownMenu
-                                    items={documents.filesToOpen}
-                                    icon={<Eye />}
+                <div className="flex flex-row gap-4 p-4">
+                    <div className="flex flex-1 flex-col">
+                        <header className="flex h-12 shrink-0 items-center justify-between">
+                            <Breadcrumb items={breadcrumbItems} loading={loading} lang={documentLang} />
+
+                            <div className="flex">
+                                {documents.filesToDownload.length > 0 && (
+                                    <DropdownMenu
+                                        items={documents.filesToDownload}
+                                        icon={<CloudDownload />}
+                                    />
+                                )}
+                                {documents.filesToOpen.length > 0 && (
+                                    <DropdownMenu
+                                        items={documents.filesToOpen}
+                                        icon={<Eye />}
+                                    />
+                                )}
+                            </div>
+                        </header>
+                        <RenderArticle htmlContent={htmlContent} contentLang={articleLang} />
+                    </div>
+
+                    <div className="w-60 relative">
+                        <div className="sticky top-28 gap-4 flex flex-col">
+                            {!loading && (
+                                <InfoCard
+                                    title={t("about")}
+                                    items={articleInfo}
                                 />
                             )}
                         </div>
-                    </header>
-
-                    <RenderArticle htmlContent={htmlContent} contentLang={articleLang} />
+                    </div>
                 </div>
             </SidebarInset>
         </SidebarProvider>

package/src/doc/home/layout.tsx

@@ -1,8 +1,9 @@
-import { informationUnitsResponse } from "@c-rex/interfaces";
-import { InformationUnitsService } from "@c-rex/services";
 import { HomePage } from "./page";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { WildCardType } from "@c-rex/types";
+import { InformationUnitsService } from "@c-rex/services";
+import { informationUnitsResponse } from "@c-rex/interfaces";
+import { SearchProvider } from "@c-rex/contexts/search";
 
 interface HomeProps {
     searchParams: {
@@ -52,8 +53,10 @@ export const HomeLayout = async ({ searchParams }: HomeProps) => {
     }
 
     return (
-        <PageWrapper title="" pageType="HOME">
-            <HomePage data={data} />
-        </PageWrapper>
+        <SearchProvider>
+            <PageWrapper title="" pageType="HOME">
+                <HomePage data={data} />
+            </PageWrapper>
+        </SearchProvider>
     );
 };

package/src/doc/home/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import React, { FC, useEffect, useState } from "react";
-import { Trash2, X } from "lucide-react"
+import { ChevronDown, Trash2, X } from "lucide-react"
 import { useTranslations } from 'next-intl'
 import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
 import { informationUnitsResponse } from "@c-rex/interfaces";
 import { Button } from "@c-rex/ui/button";
 import { Badge } from "@c-rex/ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@c-rex/ui/collapsible";
 import {
     SidebarContent,
     SidebarGroup,
@@ -20,10 +21,9 @@ import {
 } from "@c-rex/ui/sidebar";
 import { ResultList } from "@c-rex/components/result-list";
 import { DialogFilter } from "@c-rex/components/dialog-filter";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { AutoComplete } from "@c-rex/components/autocomplete";
-import { OPERATOR_OPTIONS, WILD_CARD_OPTIONS } from "@c-rex/constants";
-import { Loading } from "@c-rex/components/loading";
+import { OPERATOR_OPTIONS } from "@c-rex/constants";
+import { useSearchContext } from "@c-rex/contexts/search";
 
 interface HomePageProps {
     data: informationUnitsResponse;
@@ -39,12 +39,11 @@ type filterModel = {
 
 export const HomePage: FC<HomePageProps> = ({ data }) => {
     const t = useTranslations();
-    const { configs } = useAppConfig()
+    const { setLoading } = useSearchContext();
 
     const [tags, setTags] = useState<{ [key: string]: any[] }>(data.tags || {});
     const [filters, setFilters] = useState<filterModel[] | null>(null)
     const [disabled, setDisabled] = useState<boolean>(false)
-    const [loading, setLoading] = useState<boolean>(true)
     const [params, setParams] = useQueryStates({
         language: parseAsString,
         page: parseAsInteger,
@@ -118,19 +117,16 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
             key: "operator",
             name: t("filter.operator"),
             value: `${params?.operator !== OPERATOR_OPTIONS.OR}`,
-            default: OPERATOR_OPTIONS.OR,
-            removable: params?.operator !== OPERATOR_OPTIONS.OR
+            removable: false
         }, {
             key: "like",
             name: t("filter.like"),
             value: `${params.like}`,
-            default: false,
-            removable: params?.like as boolean
+            removable: false
         }, {
             key: "wildcard",
             value: params.wildcard as string,
-            default: WILD_CARD_OPTIONS.NONE,
-            removable: params?.wildcard !== WILD_CARD_OPTIONS.NONE
+            removable: false,
         }]
 
         const languages = params.language?.split(",")
@@ -161,8 +157,15 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
             })
         }
 
-        if (params.packages !== null && tags["packages"]) {
-            const packageTag = tags["packages"]?.find(el => el.shortId === params.packages)
+        if (params.packages !== null) {
+            let packageTag = {
+                label: params.packages,
+            }
+
+            if (tags["packages"]) {
+                packageTag = tags["packages"]?.find(el => el.shortId === params.packages)
+            }
+
             filters.push({
                 key: "packages",
                 name: t("filter.tags.packages"),
@@ -220,8 +223,6 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
 
     return (
         <div className="container">
-            {loading && <Loading opacity={true} />}
-
             <div className="grid grid-cols-12 gap-4 py-6">
                 <div className="col-span-12 sm:col-span-10 md:col-span-10">
                     <AutoComplete
@@ -233,7 +234,6 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
                 <div className="col-span-12 sm:col-span-2 md:col-span-2">
                     <div className="flex justify-end">
                         <DialogFilter
-                            setLoading={setLoading}
                             trigger={(
                                 <Button variant="default" disabled={disabled}>{t("filter.filters")}</Button>
                             )}
@@ -279,33 +279,47 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
             <div className="flex flex-row gap-6 pb-6">
                 {data.items.length > 0 && (
                     <div className="w-80 bg-sidebar rounded-md border pb-4">
-                        <SidebarHeader className="text-center font-bold">
-                            Search Filters
+                        <SidebarHeader className="!flex-row justify-center items-end font-bold">
+                            {t("filter.filters")}
+                            <span className="text-xs text-muted-foreground leading-5">
+                                {data.pageInfo.totalItemCount} {t("results.results")}
+                            </span>
                         </SidebarHeader>
-                        <SidebarContent>
+                        <SidebarContent className="!gap-0">
+
                             {Object.entries(tags).map(([key, value]: any) => (
-                                <SidebarGroup key={key} className="py-0">
-                                    <SidebarGroupLabel>
-                                        {t(`filter.tags.${key}`)}
-                                    </SidebarGroupLabel>
-                                    <SidebarGroupContent>
-                                        <SidebarMenu>
-                                            <SidebarMenuSub>
-                                                {value.map((item: any) => (
-                                                    <SidebarMenuSubItem key={item.shortId}>
-                                                        <SidebarMenuSubButton
-                                                            className="cursor-pointer"
-                                                            isActive={item.active}
-                                                            onClick={() => updateFilterParam(key, item)}
-                                                        >
-                                                            {item.label} ({item.hits}/{item.total})
-                                                        </SidebarMenuSubButton>
-                                                    </SidebarMenuSubItem>
-                                                ))}
-                                            </SidebarMenuSub>
-                                        </SidebarMenu>
-                                    </SidebarGroupContent>
-                                </SidebarGroup>
+
+                                <Collapsible defaultOpen key={key} className="py-0 group/collapsible">
+                                    <SidebarGroup>
+
+                                        <SidebarGroupLabel asChild className="hover:bg-sidebar-accent text-sidebar-accent-foreground text-sm font-bold">
+                                            <CollapsibleTrigger className="!h-9">
+                                                {t(`filter.tags.${key}`)}
+                                                <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+                                            </CollapsibleTrigger>
+                                        </SidebarGroupLabel>
+
+                                        <CollapsibleContent>
+                                            <SidebarGroupContent>
+                                                <SidebarMenu>
+                                                    <SidebarMenuSub>
+                                                        {value.map((item: any) => (
+                                                            <SidebarMenuSubItem key={item.shortId}>
+                                                                <SidebarMenuSubButton
+                                                                    className="cursor-pointer"
+                                                                    isActive={item.active}
+                                                                    onClick={() => updateFilterParam(key, item)}
+                                                                >
+                                                                    {item.label} ({item.hits}/{item.total})
+                                                                </SidebarMenuSubButton>
+                                                            </SidebarMenuSubItem>
+                                                        ))}
+                                                    </SidebarMenuSub>
+                                                </SidebarMenu>
+                                            </SidebarGroupContent>
+                                        </CollapsibleContent>
+                                    </SidebarGroup>
+                                </Collapsible>
                             ))}
                         </SidebarContent>
                     </div>
@@ -313,7 +327,6 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
 
                 <div className="flex-1">
                     <ResultList
-                        configs={configs}
                         items={data.items}
                         pagination={data.pageInfo}
                     />