@c-rex/templates 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "type": "module",
   "files": [
     "src"
@@ -10,29 +10,37 @@
     "access": "public"
   },
   "exports": {
-    "./home/layout": {
-      "types": "./src/home/layout.tsx",
-      "import": "./src/home/layout.tsx"
+    "./doc/home/layout": {
+      "types": "./src/doc/home/layout.tsx",
+      "import": "./src/doc/home/layout.tsx"
     },
-    "./home/page": {
-      "types": "./src/home/page.tsx",
-      "import": "./src/home/page.tsx"
+    "./doc/home/page": {
+      "types": "./src/doc/home/page.tsx",
+      "import": "./src/doc/home/page.tsx"
     },
-    "./articles/topics/page": {
-      "types": "./src/articles/topics/page.tsx",
-      "import": "./src/articles/topics/page.tsx"
+    "./doc/articles/topics": {
+      "types": "./src/doc/articles/topics.tsx",
+      "import": "./src/doc/articles/topics.tsx"
     },
-    "./articles/blog/page": {
-      "types": "./src/articles/blog/page.tsx",
-      "import": "./src/articles/blog/page.tsx"
-    },
-    "./articles/documents/page": {
-      "types": "./src/articles/documents/page.tsx",
-      "import": "./src/articles/documents/page.tsx"
+    "./doc/articles/documents": {
+      "types": "./src/doc/articles/documents.tsx",
+      "import": "./src/doc/articles/documents.tsx"
     },
     "./layout": {
       "types": "./src/layout.tsx",
       "import": "./src/layout.tsx"
+    },
+    "./blog/article": {
+      "types": "./src/blog/article/page.tsx",
+      "import": "./src/blog/article/page.tsx"
+    },
+    "./blog/home/page": {
+      "types": "./src/blog/home/page.tsx",
+      "import": "./src/blog/home/page.tsx"
+    },
+    "./blog/home/layout": {
+      "types": "./src/blog/home/layout.tsx",
+      "import": "./src/blog/home/layout.tsx"
     }
   },
   "scripts": {

package/src/{articles/blog → blog/article}/page.tsx

@@ -1,4 +1,4 @@
-import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "../utils";
+import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "./utils";
 import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { Metadata } from "next";
@@ -30,23 +30,23 @@ export const generateMetadata = async (
 }
 
 export const BlogPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { htmlContent, lang, availableVersions } = await getInfoWithCache(params.id, BLOG_TYPE_AND_LINK, infoCache);
+    const { htmlContent, articleLang, availableVersions } = await getInfoWithCache(params.id, BLOG_TYPE_AND_LINK, infoCache);
     const { articleHtml } = extractHtmlContent(htmlContent)
 
     return (
-        <PageWrapper title="" showInput={false}>
+        <PageWrapper title="" pageType="BLOG">
             <SidebarProvider>
 
                 <CheckArticleLangToast availableVersions={availableVersions} />
 
                 <AppSidebar
-                    lang={lang}
+                    lang={articleLang}
                     data={[]}
                     availableVersions={availableVersions}
                 />
                 <SidebarInset>
                     <div className="container flex flex-col">
-                        <RenderArticle htmlContent={articleHtml} contentLang={lang} />
+                        <RenderArticle htmlContent={articleHtml} contentLang={articleLang} />
                     </div>
                 </SidebarInset>
             </SidebarProvider>

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

@@ -13,8 +13,9 @@ import { BLOG_TYPE_AND_LINK } from "@c-rex/constants";
 export const getPrimaryInfo = async (id: string, type: string): Promise<{
     htmlContent: string,
     title: string,
-    lang: string,
+    articleLang: string,
     packageId: string,
+    documentLang: string,
     availableVersions: SidebarAvailableVersionsInterface[]
 }> => {
     const renditionService = new RenditionsService();
@@ -22,12 +23,13 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
     const informationUnitsItem = await informationService.getItem({ id });
 
     let title = informationUnitsItem.labels[0]?.value
-    const lang = informationUnitsItem.languages[0];
     const versionOf = informationUnitsItem.versionOf.shortId
+    let documentLang = ""
+    const articleLang = informationUnitsItem.languages[0];
 
     const promiseList: any = [
         informationService.getList({
-            restrict: [`versionOf.shortId=${versionOf}`], // TODO: replace from filter to restrict
+            restrict: [`versionOf.shortId=${versionOf}`],
             fields: ["renditions", "class", "languages", "labels"],
         }),
     ]
@@ -36,6 +38,7 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
 
     if (rootNode != null) {
         title = rootNode.informationUnits[0]?.labels[0]?.value;
+        documentLang = rootNode.informationUnits[0]?.labels[0]?.language as string;
     }
 
     if ([TOPICS_TYPE_AND_LINK, BLOG_TYPE_AND_LINK].includes(type)) {
@@ -68,7 +71,7 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
             link: `/${type}/${item.shortId}`,
             lang: item.language,
             country: item.language.split("-")[1],
-            active: item.language === lang,
+            active: item.language === articleLang,
         }
     }).sort((a: SidebarAvailableVersionsInterface, b: SidebarAvailableVersionsInterface) => {
         if (a.lang < b.lang) return -1;
@@ -80,8 +83,9 @@ export const getPrimaryInfo = async (id: string, type: string): Promise<{
         htmlContent,
         packageId: informationUnitsItem.packages[0]?.shortId as string,
         title: title as string,
-        lang: lang as string,
-        availableVersions
+        articleLang: articleLang as string,
+        documentLang: documentLang as string,
+        availableVersions,
     }
 }
 

package/src/{home → blog/home}/layout.tsx

@@ -12,12 +12,13 @@ interface HomeProps {
         wildcard: string;
         operator: string;
         like: string;
-        package?: string;
+        packages?: string;
+        filter?: string;
     };
 }
 
 export const HomeLayout = async ({ searchParams }: HomeProps) => {
-    const { search, page, language, wildcard, operator, like, package: packageParam } = searchParams;
+    const { search, page, language, wildcard, operator, like, packages, filter } = searchParams;
 
     let data = {
         items: [],
@@ -29,9 +30,11 @@ export const HomeLayout = async ({ searchParams }: HomeProps) => {
 
     if (search !== undefined) {
 
-        const filters: string[] = []
-        if (packageParam && packageParam.length > 0) {
-            filters.push(`packages.shortId=${packageParam}`)
+        const filters: string[] = filter?.split(",") || []
+        const restrict: string[] = []
+
+        if (packages && packages.length > 0) {
+            restrict.push(`packages.shortId=${packages}`)
         }
         const service = new InformationUnitsService();
 
@@ -41,6 +44,7 @@ export const HomeLayout = async ({ searchParams }: HomeProps) => {
             fields: ["renditions", "class", "languages", "labels"],
             languages: language.split(","),
             wildcard: wildcard as WildCardType,
+            restrict: restrict,
             operator: operator,
             like: Boolean(like === "true"),
             filters: filters
@@ -48,7 +52,7 @@ export const HomeLayout = async ({ searchParams }: HomeProps) => {
     }
 
     return (
-        <PageWrapper title="" showInput={false}>
+        <PageWrapper title="" pageType="HOME">
             <HomePage data={data} />
         </PageWrapper>
     );

package/src/blog/home/page.tsx

@@ -0,0 +1,323 @@
+"use client";
+
+import React, { FC, useEffect, useState } from "react";
+import { 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 {
+    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 { AutoComplete } from "@c-rex/components/autocomplete";
+import { OPERATOR_OPTIONS, WILD_CARD_OPTIONS } from "@c-rex/constants";
+import { Loading } from "@c-rex/components/loading";
+
+interface HomePageProps {
+    data: informationUnitsResponse;
+}
+
+type filterModel = {
+    key: string
+    name?: string
+    value: string
+    default?: string | boolean | null
+    removable: boolean
+}
+
+export const HomePage: FC<HomePageProps> = ({ data }) => {
+    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 [params, setParams] = useQueryStates({
+        language: parseAsString,
+        page: parseAsInteger,
+        wildcard: parseAsString,
+        operator: parseAsString,
+        packages: parseAsString,
+        filter: parseAsString,
+        like: parseAsBoolean,
+        search: {
+            defaultValue: "",
+            parse(value) {
+                return value
+            },
+        },
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+
+    useEffect(() => {
+        if (params.search.length > 0) {
+            setDisabled(false)
+            generateFiltersObj()
+        } else {
+            setDisabled(true)
+            setFilters(null)
+        }
+    }, [params])
+
+    useEffect(() => {
+        const newTags = { ...data.tags }
+
+        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] = []
+                }
+
+                newTags[name].forEach((el) => {
+                    if (el.shortId == shortId) {
+                        el.active = true
+                    } else {
+                        el.active = false
+                    }
+                })
+            })
+        }
+
+        if (params.packages !== null && newTags["packages"]) {
+            newTags["packages"].forEach((el) => {
+                if (el.shortId == params.packages) {
+                    el.active = true
+                } else {
+                    el.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)
+    }
+
+    const updateFilterParam = (key: string, item: any) => {
+        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 })
+        }
+    };
+
+    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>
+                </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>
+                </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>
+                                        <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>
+                                        </SidebarMenu>
+                                    </SidebarGroupContent>
+                                </SidebarGroup>
+                            ))}
+                        </SidebarContent>
+                    </div>
+                )}
+
+                <div className="flex-1">
+                    <ResultList
+                        configs={configs}
+                        items={data.items}
+                        pagination={data.pageInfo}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/doc/articles/documents.tsx

@@ -0,0 +1,38 @@
+import { 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";
+
+const infoCache = new Map<string, Awaited<ReturnType<typeof getPrimaryInfo>>>();
+
+export const DocumentsPageTemplate = async ({ params }: { params: { id: string } }) => {
+    /*
+    const {
+        htmlContent,
+        title,
+        articleLang,
+        availableVersions,
+        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">
+            <ArticleWrapper
+                packageId={packageId}
+                title={title}
+                availableVersions={availableVersions}
+                htmlContent={htmlContent}
+                articleLang={articleLang}
+                documentLang={documentLang}
+                id={params.id}
+                type={DOCUMENTS_TYPE_AND_LINK}
+            />
+        </PageWrapper>
+    );
+};

package/src/{articles/topics/page.tsx → doc/articles/topics.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
-import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "../utils";
+import { extractHtmlContent, getInfoWithCache, getPrimaryInfo } from "./utils";
 import { TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
-import { ArticleWrapper } from "../wrapper";
+import { ArticleWrapper } from "./wrapper";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { Metadata } from "next";
 
@@ -30,18 +30,20 @@ export const TopicsPageTemplate = async ({ params }: { params: { id: string } })
     const {
         htmlContent,
         title,
-        lang,
         availableVersions,
-        packageId
+        packageId,
+        articleLang,
+        documentLang
     } = await getInfoWithCache(params.id, TOPICS_TYPE_AND_LINK, infoCache);
 
     const { articleHtml } = extractHtmlContent(htmlContent)
 
     return (
-        <PageWrapper title={title} showInput>
+        <PageWrapper title={title} pageType="DOC">
             <ArticleWrapper
                 title={title}
-                lang={lang}
+                documentLang={documentLang}
+                articleLang={articleLang}
                 packageId={packageId}
                 availableVersions={availableVersions}
                 htmlContent={articleHtml}

package/src/doc/articles/utils.ts

@@ -0,0 +1,142 @@
+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 * 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<{
+    htmlContent: string,
+    title: string,
+    articleLang: string,
+    packageId: string,
+    documentLang: string,
+    availableVersions: SidebarAvailableVersionsInterface[]
+}> => {
+    const renditionService = new RenditionsService();
+    const informationService = new InformationUnitsService();
+    const informationUnitsItem = await informationService.getItem({ id });
+
+    let title = informationUnitsItem.labels[0]?.value
+    const versionOf = informationUnitsItem.versionOf.shortId
+    let documentLang = ""
+    const articleLang = informationUnitsItem.languages[0];
+
+    const promiseList: any = [
+        informationService.getList({
+            restrict: [`versionOf.shortId=${versionOf}`],
+            fields: ["renditions", "class", "languages", "labels"],
+        }),
+    ]
+
+    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;
+    }
+
+    if ([TOPICS_TYPE_AND_LINK, BLOG_TYPE_AND_LINK].includes(type)) {
+        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 infoId = response.informationUnits[0]?.shortId;
+
+        const childInformationUnit = await informationService.getItem({ id: infoId as string });
+
+        promiseList.push(
+            renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions })
+        )
+    }
+
+    const [versions, 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,
+        packageId: informationUnitsItem.packages[0]?.shortId as string,
+        title: title as string,
+        articleLang: articleLang as string,
+        documentLang: documentLang as string,
+        availableVersions,
+    }
+}
+
+export const getRootNode = async (directoryNodes: DirectoryNodes[]): Promise<DirectoryNodes | null> => {
+    const service = new DirectoryNodesService();
+
+    if (directoryNodes.length == 0 || directoryNodes[0] == undefined) {
+        return null;
+    }
+
+    let id = directoryNodes[0].shortId;
+    let response = await service.getItem(id);
+
+    while (response.parents != undefined) {
+
+        const hasInfo = (response.informationUnits != undefined) && (response.informationUnits[0] != undefined);
+        const hasLabel = (response.labels != undefined) && (response.labels[0] != undefined);
+        const hasParent = (response.parents != undefined) && (response.parents[0] != undefined);
+
+        if (!hasInfo || !hasLabel || !hasParent) {
+            return null;
+        }
+
+        id = response.parents[0]?.shortId as string;
+        response = await service.getItem(id);
+    }
+
+    return response;
+};
+
+export const getInfoWithCache = async (id: string, type: string, infoCache: any): Promise<Awaited<ReturnType<typeof getPrimaryInfo>>> => {
+    if (!infoCache.has(id)) {
+        const info = await getPrimaryInfo(id, type);
+        infoCache.set(id, info);
+    }
+    return infoCache.get(id)!;
+}
+
+export const extractHtmlContent = (htmlString: string) => {
+    const $ = cheerio.load(htmlString)
+
+    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,
+        articleHtml,
+    }
+}

package/src/{articles → doc/articles}/wrapper.tsx

@@ -19,7 +19,8 @@ type Props = {
     title: string,
     id: string,
     type: string,
-    lang: string,
+    documentLang: string,
+    articleLang: string,
     availableVersions: SidebarAvailableVersionsInterface[],
     packageId: string,
 }
@@ -70,12 +71,10 @@ const loadArticleData = async (id: string, type: string, title: string) => {
     }
 };
 
-export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVersions, packageId }: Props) => {
-    const { setPackageID } = useAppConfig()
+export const ArticleWrapper = ({ htmlContent, title, id, type, documentLang, articleLang, availableVersions, packageId }: Props) => {
+    console.log(availableVersions)
+    const { setPackageID, setArticleLang } = useAppConfig()
     const [loading, setLoading] = useState<boolean>(true)
-
-
-    //set available versions on confgi context so will be possible to get the link when change contant language
     const [breadcrumbItems, setBreadcrumbItems] = useState<TreeOfContent[]>([])
     const [treeOfContent, setTreeOfContent] = useState<TreeOfContent[]>([])
     const [documents, setDocuments] = useState<{
@@ -94,6 +93,7 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
 
     useEffect(() => {
         setPackageID(packageId)
+        setArticleLang(articleLang)
 
         const fetchData = async () => {
             const {
@@ -118,7 +118,7 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
             <CheckArticleLangToast availableVersions={availableVersions} />
 
             <AppSidebar
-                lang={lang}
+                lang={documentLang}
                 data={treeOfContent}
                 availableVersions={availableVersions}
                 loading={loading}
@@ -126,7 +126,7 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
             <SidebarInset>
                 <div className="container flex flex-col">
                     <header className="flex h-16 shrink-0 items-center justify-between">
-                        <Breadcrumb items={breadcrumbItems} loading={loading} lang={lang} />
+                        <Breadcrumb items={breadcrumbItems} loading={loading} lang={documentLang} />
 
                         <div className="flex">
                             {documents.filesToDownload.length > 0 && (
@@ -144,7 +144,7 @@ export const ArticleWrapper = ({ htmlContent, title, id, type, lang, availableVe
                         </div>
                     </header>
 
-                    <RenderArticle htmlContent={htmlContent} contentLang={lang} />
+                    <RenderArticle htmlContent={htmlContent} contentLang={articleLang} />
                 </div>
             </SidebarInset>
         </SidebarProvider>

package/src/doc/home/layout.tsx

@@ -0,0 +1,59 @@
+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";
+
+interface HomeProps {
+    searchParams: {
+        search?: string;
+        page: string;
+        language: string;
+        wildcard: string;
+        operator: string;
+        like: string;
+        packages?: string;
+        filter?: string;
+    };
+}
+
+export const HomeLayout = async ({ searchParams }: HomeProps) => {
+    const { search, page, language, wildcard, operator, like, packages, 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();
+
+        data = await service.getList({
+            queries: search,
+            page: Number(page),
+            fields: ["renditions", "class", "languages", "labels"],
+            languages: language.split(","),
+            wildcard: wildcard as WildCardType,
+            restrict: restrict,
+            operator: operator,
+            like: Boolean(like === "true"),
+            filters: filters
+        });
+    }
+
+    return (
+        <PageWrapper title="" pageType="HOME">
+            <HomePage data={data} />
+        </PageWrapper>
+    );
+};

package/src/doc/home/page.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import React, { FC, useEffect, useState } from "react";
+import { 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 {
+    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 { AutoComplete } from "@c-rex/components/autocomplete";
+import { OPERATOR_OPTIONS, WILD_CARD_OPTIONS } from "@c-rex/constants";
+import { Loading } from "@c-rex/components/loading";
+
+interface HomePageProps {
+    data: informationUnitsResponse;
+}
+
+type filterModel = {
+    key: string
+    name?: string
+    value: string
+    default?: string | boolean | null
+    removable: boolean
+}
+
+export const HomePage: FC<HomePageProps> = ({ data }) => {
+    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 [params, setParams] = useQueryStates({
+        language: parseAsString,
+        page: parseAsInteger,
+        wildcard: parseAsString,
+        operator: parseAsString,
+        packages: parseAsString,
+        filter: parseAsString,
+        like: parseAsBoolean,
+        search: {
+            defaultValue: "",
+            parse(value) {
+                return value
+            },
+        },
+    }, {
+        history: 'push',
+        shallow: false,
+    });
+
+    useEffect(() => {
+        if (params.search.length > 0) {
+            setDisabled(false)
+            generateFiltersObj()
+        } else {
+            setDisabled(true)
+            setFilters(null)
+        }
+    }, [params])
+
+    useEffect(() => {
+        const newTags = { ...data.tags }
+
+        if (params.filter !== null) {
+            const splittedParam = params.filter.split(",")
+
+            splittedParam.forEach((item) => {
+                const aux = item.split(".shortId=")
+                const name = aux[0] as string
+                const shortId = aux[1] as string
+
+                if (!Object.keys(newTags).includes(name)) {
+                    newTags[name] = []
+                }
+
+                newTags[name].forEach((el: any) => {
+                    if (el.shortId == shortId) {
+                        el.active = true
+                    } else {
+                        el.active = false
+                    }
+                })
+            })
+        }
+
+        if (params.packages !== null && newTags["packages"]) {
+            newTags["packages"].forEach((el: any) => {
+                if (el.shortId == params.packages) {
+                    el.active = true
+                } else {
+                    el.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] as string
+                const shortId = aux[1] as string
+
+                const defaultValue = [...splittedParam]
+                defaultValue.splice(index, 1)
+
+                if (!Object.keys(tags).includes(name) || !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))
+            .forEach(item => {
+                if (params[item as keyof typeof params] === null || params[item as keyof typeof params] === undefined) return;
+                const value = params[item as keyof typeof params] as string
+                filters.push({ key: item, value: value, removable: true, default: null })
+            })
+
+        setFilters(filters)
+    }
+
+    const updateFilterParam = (key: string, item: any) => {
+        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 })
+        }
+    };
+
+    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>
+                </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>
+                </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>
+                                        <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>
+                            ))}
+                        </SidebarContent>
+                    </div>
+                )}
+
+                <div className="flex-1">
+                    <ResultList
+                        configs={configs}
+                        items={data.items}
+                        pagination={data.pageInfo}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/articles/documents/page.tsx

@@ -1,22 +0,0 @@
-import { getPrimaryInfo } from "../utils";
-import { ArticleWrapper } from "../wrapper";
-import { PageWrapper } from "@c-rex/components/page-wrapper";
-import { DOCUMENTS_TYPE_AND_LINK } from "@c-rex/constants";
-
-export const DocumentsPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const { htmlContent, title, lang, availableVersions, packageId } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
-
-    return (
-        <PageWrapper title={title} showInput>
-            <ArticleWrapper
-                packageId={packageId}
-                title={title}
-                availableVersions={availableVersions}
-                htmlContent={htmlContent}
-                lang={lang}
-                id={params.id}
-                type={DOCUMENTS_TYPE_AND_LINK}
-            />
-        </PageWrapper>
-    );
-};

package/src/home/page.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import React, { FC, useEffect, useState } from "react";
-import { informationUnitsResponse } from "@c-rex/interfaces";
-import { call, getFromCookieString } from "@c-rex/utils";
-import { Button } from "@c-rex/ui/button";
-import { ResultList } from "@c-rex/components/result-list";
-import { useTranslations } from 'next-intl'
-import { parseAsBoolean, parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
-import { DialogFilter } from "@c-rex/components/dialog-filter";
-import { CONTENT_LANG_KEY, WILD_CARD_OPTIONS } from "@c-rex/constants";
-import { useAppConfig } from "@c-rex/contexts/config-provider";
-import { AutoComplete } from "@c-rex/components/autocomplete";
-
-interface HomePageProps {
-    data: informationUnitsResponse;
-}
-
-export const HomePage: FC<HomePageProps> = ({ data }) => {
-    const t = useTranslations();
-    const { configs } = useAppConfig()
-    const [disabled, setDisabled] = useState<boolean>(false)
-    const [params, setParams] = useQueryStates({
-        search: {
-            defaultValue: "",
-            parse(value) {
-                return value
-            },
-        },
-    }, {
-        history: 'push',
-        shallow: false,
-    });
-
-    useEffect(() => {
-        if (params.search.length > 0) {
-            setDisabled(false)
-        } else {
-            setDisabled(true)
-        }
-    }, [params])
-
-    return (
-        <div className="container">
-            <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
-                            trigger={(
-                                <Button variant="default" disabled={disabled}>{t("filter.filters")}</Button>
-                            )}
-                        />
-                    </div>
-                </div>
-            </div>
-
-            <ResultList
-                configs={configs}
-                items={data.items}
-                pagination={data.pageInfo}
-            />
-        </div>
-    );
-};