@c-rex/templates 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "src"
@@ -18,9 +18,13 @@
       "types": "./src/home/page.tsx",
       "import": "./src/home/page.tsx"
     },
-    "./articles/info/page": {
-      "types": "./src/articles/info/page.tsx",
-      "import": "./src/articles/info/page.tsx"
+    "./articles/topics/page": {
+      "types": "./src/articles/topics/page.tsx",
+      "import": "./src/articles/topics/page.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",
@@ -52,13 +56,14 @@
     "@c-rex/services": "*",
     "@c-rex/ui": "*",
     "@c-rex/utils": "*",
+    "cheerio": "^1.1.0",
     "i18next": "^25.1.3",
     "next": "^14",
     "next-intl": "^4.1.0",
     "nuqs": "^2.4.3",
     "react": "^18",
-    "sonner": "^2.0.5",
     "react-dom": "^18",
-    "react-i18next": "^15.5.1"
+    "react-i18next": "^15.5.1",
+    "sonner": "^2.0.5"
   }
 }

package/src/articles/blog/page.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { getPrimaryInfo } from "../utils";
+import { TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
+import { Breadcrumb } from "@c-rex/components/breadcrumb";
+import * as cheerio from 'cheerio'
+import { Metadata } from "next";
+import { RenderArticle } from "@c-rex/components/render-article";
+
+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 = $('body').html() || ''
+
+    return {
+        metaTags,
+        articleHtml,
+    }
+}
+
+export const generateMetadata = async (
+    { params }: { params: { id: string } }
+): Promise<Metadata> => {
+    const { htmlContent, title } = await getPrimaryInfo(params.id, TOPICS_TYPE_AND_LINK);
+    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 BlogPageTemplate = async ({ params }: { params: { id: string } }) => {
+    const { htmlContent, title, lang } = await getPrimaryInfo(params.id, TOPICS_TYPE_AND_LINK);
+    const { articleHtml } = extractHtmlContent(htmlContent)
+
+    const breadcrumbItems = [{
+        link: "/",
+        label: title,
+        id: "home",
+        active: false,
+        children: [],
+    }]
+
+    return (
+        <PageWrapper title="">
+            <div className="container flex flex-col">
+                <header className="flex h-16 shrink-0 items-center justify-between">
+                    <Breadcrumb items={breadcrumbItems} lang={lang} />
+                </header>
+
+                <RenderArticle htmlContent={articleHtml} contentLang={lang} />
+            </div>
+        </PageWrapper>
+    );
+};

package/src/articles/documents/page.tsx

@@ -1,8 +1,21 @@
 import React from "react";
+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 } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
 
-export const DocumentsPageTemplate = ({ params }: { params: { id: string } }) => {
     return (
-        <ArticleWrapper id={params.id} type="documents" />
+        <PageWrapper title={title}>
+            <ArticleWrapper
+                title={title}
+                htmlContent={htmlContent}
+                lang={lang}
+                id={params.id}
+                type={DOCUMENTS_TYPE_AND_LINK}
+            />
+        </PageWrapper>
     );
 };

package/src/articles/topics/page.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { getPrimaryInfo } from "../utils";
+import { TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { ArticleWrapper } from "../wrapper";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
+
+export const TopicsPageTemplate = async ({ params }: { params: { id: string } }) => {
+    const { htmlContent, title, lang } = await getPrimaryInfo(params.id, TOPICS_TYPE_AND_LINK);
+
+    return (
+        <PageWrapper title={title}>
+            <ArticleWrapper
+                title={title}
+                lang={lang}
+                htmlContent={htmlContent}
+                id={params.id}
+                type={TOPICS_TYPE_AND_LINK}
+            />
+        </PageWrapper>
+    );
+};

package/src/articles/utils.ts

@@ -0,0 +1,75 @@
+"use server"
+
+import { DirectoryNodesService, InformationUnitsService, RenditionsService } from "@c-rex/services";
+import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { DirectoryNodes } from "@c-rex/interfaces";
+
+/*
+ * 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,
+    lang: string
+}> => {
+    const renditionService = new RenditionsService();
+    const informationService = new InformationUnitsService();
+    const informationUnitsItem = await informationService.getItem({ id });
+
+    let title = informationUnitsItem.labels[0]?.value
+    const lang = informationUnitsItem.languages[0];
+    const rootNode = await getRootNode(informationUnitsItem.directoryNodes);
+    let htmlContent = ""
+
+    if (rootNode != null) {
+        title = rootNode.informationUnits[0]?.labels[0]?.value;
+    }
+
+    if (type == TOPICS_TYPE_AND_LINK) {
+        htmlContent = await renditionService.getHTMLRendition({ renditions: informationUnitsItem.renditions });
+    } else if (rootNode != null && type == DOCUMENTS_TYPE_AND_LINK) {
+        const directoryId = rootNode.childNodes[0]?.shortId as string;
+        const service = new DirectoryNodesService();
+        const response = await service.getItem(directoryId);
+        const infoId = response.informationUnits[0]?.shortId;
+
+        const childInformationUnit = await informationService.getItem({ id: infoId as string });
+        htmlContent = await renditionService.getHTMLRendition({ renditions: childInformationUnit.renditions });
+    }
+
+    return {
+        htmlContent,
+        title: title as string,
+        lang: lang as string,
+    }
+}
+
+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;
+};

package/src/articles/wrapper.tsx

@@ -1,73 +1,169 @@
-import React from "react";
+"use client"
+
+import React, { useEffect, useState } from "react";
 import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
 import { AppSidebar } from "@c-rex/components/sidebar";
 import { CheckArticleLangToast } from "@c-rex/components/check-article-lang";
-import { loadArticleData } from "@c-rex/utils";
-import { getCookieFromBack } from "@c-rex/utils/next-cookies";
-import { CONTENT_LANG_KEY } from "@c-rex/constants";
-import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { Breadcrumb } from "@c-rex/components/breadcrumb";
-import { DropdownMenu } from "../../../components/src/result-view/dropdown-menu";
+import { RenderArticle } from "@c-rex/components/render-article";
 import { CloudDownload, Eye } from "lucide-react";
+import { informationUnitsItems, informationUnitsResponse, SidebarAvailableVersionsInterface, TreeOfContent } from "@c-rex/interfaces";
+import { DOCUMENTS_TYPE_AND_LINK, TOPICS_TYPE_AND_LINK } from "@c-rex/constants";
+import { call, generateBreadcrumbItems, generateTreeOfContent } from "@c-rex/utils";
+import { DropdownMenu } from "@c-rex/components/dropdown-menu";
+import { FileRenditionType } from "@c-rex/types";
 
 type Props = {
+    htmlContent: string,
+    title: string,
     id: string,
     type: string,
+    lang: string,
+}
+type filesRenditions = {
+    filesToDownload: FileRenditionType[],
+    filesToOpen: FileRenditionType[]
 }
-export const ArticleWrapper = async ({ id, type }: Props) => {
+const loadArticleData = async (id: string, type: string, title: string) => {
+    const informationUnitsItem = await call<informationUnitsItems>('InformationUnitsService.getItem', { id: id });
 
-    const contentLanguage = getCookieFromBack(CONTENT_LANG_KEY);
-    const {
-        availableVersions,
-        title,
+    const { rootNode, result: treeOfContent } = await generateTreeOfContent(informationUnitsItem.directoryNodes);
+
+    const articleLanguage = informationUnitsItem.languages[0]
+    const versionOf = informationUnitsItem.versionOf.shortId
+
+    const versions = await call<informationUnitsResponse>("InformationUnitsService.getList", {
+        filters: [`versionOf.shortId=${versionOf}`],
+        fields: ["renditions", "class", "languages", "labels"],
+    })
+    const availableVersions = versions.items.map((item) => {
+        return {
+            shortId: item.shortId,
+            link: `/${type}/${item.shortId}`,
+            lang: item.language,
+            country: item.language.split("-")[1],
+            active: item.language === articleLanguage,
+        }
+    }).sort((a, b) => {
+        if (a.lang < b.lang) return -1;
+        if (a.lang > b.lang) return 1;
+        return 0;
+    }) as SidebarAvailableVersionsInterface[];
+
+    let documents = await call<filesRenditions>("RenditionsService.getFileRenditions", { renditions: informationUnitsItem.renditions });
+    let rootNodeInfoID = "";
+    let breadcrumbItems: TreeOfContent[] = [];
+
+    if (rootNode != null) {
+        rootNodeInfoID = rootNode.informationUnits[0]?.shortId as string;
+
+        const childInformationUnit = await call<informationUnitsItems>('InformationUnitsService.getItem', { id: rootNodeInfoID });
+        documents = await call<filesRenditions>("RenditionsService.getFileRenditions", { renditions: childInformationUnit.renditions });
+    }
+
+    if (type == TOPICS_TYPE_AND_LINK) {
+        breadcrumbItems = generateBreadcrumbItems(treeOfContent);
+    } else if (rootNode != null && type == DOCUMENTS_TYPE_AND_LINK) {
+        if ((treeOfContent !== null && treeOfContent !== undefined) && (treeOfContent[0] !== undefined)) {
+            treeOfContent[0].active = true;
+        }
+
+        breadcrumbItems = [{
+            link: "/",
+            label: title,
+            id: "title",
+            active: false,
+            children: [],
+        }]
+    }
+
+    return {
         treeOfContent,
-        documents,
         breadcrumbItems,
-        htmlContent
-    } = await loadArticleData(id, type)
+        availableVersions,
+        documents,
+        articleLanguage
+    }
+};
+
+export const ArticleWrapper = ({ htmlContent, title, id, type, lang }: Props) => {
+    const [loading, setLoading] = useState<boolean>(true)
+    const [availableVersions, setAvailableVersions] = useState<SidebarAvailableVersionsInterface[]>([])
+
+
+    //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<{
+        filesToDownload: {
+            format: string;
+            link: string;
+        }[],
+        filesToOpen: {
+            format: string,
+            link: string,
+        }[]
+    }>({
+        filesToDownload: [],
+        filesToOpen: [],
+    })
+
+    useEffect(() => {
+        const fetchData = async () => {
+
+            const {
+                availableVersions,
+                treeOfContent,
+                documents,
+                breadcrumbItems,
+            } = await loadArticleData(id, type, title)
+
+            setAvailableVersions(availableVersions)
+            setTreeOfContent(treeOfContent)
+            setDocuments(documents)
+            setBreadcrumbItems(breadcrumbItems)
+            setLoading(false)
+        }
+
+        fetchData();
+    }, [])
 
     return (
-        <PageWrapper title={title}>
-            <SidebarProvider>
-                <title>{title}</title>
-
-                <CheckArticleLangToast
-                    availableVersions={availableVersions}
-                    contentLanguage={contentLanguage}
-                />
-
-                <AppSidebar
-                    data={treeOfContent}
-                    availableVersions={availableVersions}
-                />
-                <SidebarInset>
-                    <div className="container flex flex-col">
-                        <header className="flex h-16 shrink-0 items-center justify-between">
-                            <Breadcrumb items={breadcrumbItems} />
-                            <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>
-
-                        <div
-                            className="pb-4"
-                            dangerouslySetInnerHTML={{ __html: htmlContent }}
-                        />
-                    </div>
-                </SidebarInset>
-            </SidebarProvider>
-        </PageWrapper>
+        <SidebarProvider>
+            <title>{title}</title>
+
+            <CheckArticleLangToast availableVersions={availableVersions} />
+
+            <AppSidebar
+                lang={lang}
+                data={treeOfContent}
+                availableVersions={availableVersions}
+                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={lang} />
+
+                        <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={lang} />
+                </div>
+            </SidebarInset>
+        </SidebarProvider>
     );
 };

package/src/home/layout.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { informationUnitsResponse } from "@c-rex/interfaces";
-import { InformationUnitsService, LanguageService } from "@c-rex/services";
-import { getConfigs } from "@c-rex/utils/next-cookies";
+import { InformationUnitsService } from "@c-rex/services";
 import { HomePage } from "./page";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 
@@ -16,10 +15,6 @@ interface HomeProps {
 export const HomeLayout = async ({ searchParams }: HomeProps) => {
     const { search, page, language } = searchParams;
 
-    const configs = await getConfigs();
-    const languageService = new LanguageService(configs.languageSwitcher.endpoint);
-    const availableLanguagesAndCountries = await languageService.getLanguagesAndCountries();
-
     let data = {
         items: [],
         pageInfo: {
@@ -54,9 +49,7 @@ export const HomeLayout = async ({ searchParams }: HomeProps) => {
         <PageWrapper title="">
             <HomePage
                 data={data}
-                configs={configs}
                 selectedLanguages={selectedLanguages}
-                availableLanguages={availableLanguagesAndCountries}
             />
         </PageWrapper>
     );

package/src/home/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { FC } from "react";
-import { ConfigInterface, informationUnitsResponse, LanguageAndCountries } from "@c-rex/interfaces";
+import { informationUnitsResponse } from "@c-rex/interfaces";
 import { call } from "@c-rex/utils";
 import { Button } from "@c-rex/ui/button";
 import { AutoComplete } from "@c-rex/components/autocomplete";
@@ -9,17 +9,17 @@ import { ResultList } from "@c-rex/components/result-list";
 import { useTranslations } from 'next-intl'
 import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
 import { DialogFilter } from "@c-rex/components/dialog-filter";
-import { getCookieInFront } from "@c-rex/utils";
+import { getCookie } from "@c-rex/utils";
 import { CONTENT_LANG_KEY } from "@c-rex/constants";
+import { useAppConfig } from "@c-rex/contexts/config-provider";
 
 interface HomePageProps {
     data: informationUnitsResponse;
     selectedLanguages: string[];
-    availableLanguages: LanguageAndCountries[];
-    configs: ConfigInterface
 }
 
-export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages, availableLanguages, configs }) => {
+export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages }) => {
+    const { configs, availableLanguagesAndCountries: availableLanguages, contentLang } = useAppConfig()
     const t = useTranslations();
     const [params, setParams] = useQueryStates({
         search: {
@@ -39,12 +39,12 @@ export const HomePage: FC<HomePageProps> = ({ data, selectedLanguages, available
     const { search } = params;
 
     const onSearch = (value: string): Promise<string[]> => {
-        return call('InformationUnitsService.getSuggestions', { query: value });
+        return call("InformationUnitsService.getSuggestions", { query: value, language: contentLang });
     }
 
     const onSelect = (value: string) => {
         //show loading
-        getCookieInFront(CONTENT_LANG_KEY)
+        getCookie(CONTENT_LANG_KEY)
             .then((cookie) => cookie.value)
             .then((cookie) => {
                 setParams({

package/src/layout.tsx

@@ -2,9 +2,7 @@ import React from "react";
 import { NextIntlClientProvider } from 'next-intl';
 import { getLocale } from "next-intl/server";
 import { Toaster } from "@c-rex/ui/sonner"
-import { LanguageService } from "@c-rex/services";
-import { getConfigs } from "@c-rex/utils/next-cookies";
-import { SetCookies } from "@c-rex/components/cookies";
+import { AppConfigProvider } from "@c-rex/contexts/config-provider";
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 
 interface DefaultRootLayoutProps {
@@ -13,9 +11,6 @@ interface DefaultRootLayoutProps {
 
 export const DefaultRootLayout = async ({ children }: DefaultRootLayoutProps) => {
     const locale = await getLocale();
-    const configs = await getConfigs();
-    const languageService = new LanguageService(configs.languageSwitcher.endpoint);
-    const availableLanguages = await languageService.getLanguagesAndCountries();
 
     return (
         <NuqsAdapter>
@@ -24,9 +19,10 @@ export const DefaultRootLayout = async ({ children }: DefaultRootLayoutProps) =>
                 <body className="min-h-screen bg-background font-sans antialiased">
                     <div className="items-center flex flex-col">
                         <NextIntlClientProvider>
-                            <Toaster />
-                            <SetCookies configs={configs} availableLanguages={availableLanguages} />
-                            {children}
+                            <AppConfigProvider>
+                                <Toaster />
+                                {children}
+                            </AppConfigProvider>
                         </NextIntlClientProvider>
                     </div>
                 </body>

package/src/articles/info/page.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import { ArticleWrapper } from "../wrapper";
-
-export const InfoPageTemplate = ({ params }: { params: { id: string } }) => {
-
-    return (
-        <ArticleWrapper id={params.id} type="topics" />
-    );
-};