@c-rex/templates 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/templates",
-  "version": "0.1.2",
+  "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,12 +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",
     "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,56 +1,21 @@
 import React from "react";
-import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
-import { AppSidebar } from "@c-rex/components/sidebar";
-import { Breadcrumb } from "@c-rex/components/breadcrumb";
-import { loadArticleData } from "@c-rex/utils";
+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 { documentURL, availableVersions: availableVersionsAux, title } = await loadArticleData(params.id)
-
-    const availableVersions = availableVersionsAux.map((item) => {
-        return {
-            link: `/documents/${item.shortId}`,
-            ...item,
-        }
-    })
+    const { htmlContent, title, lang } = await getPrimaryInfo(params.id, DOCUMENTS_TYPE_AND_LINK);
 
     return (
-        <SidebarProvider>
-            <title>{title}</title>
-            <AppSidebar
-                data={[]}
-                availableVersions={availableVersions}
-                className="top-20"
-                side="right"
-                variant="floating"
-                collapsible="icon"
+        <PageWrapper title={title}>
+            <ArticleWrapper
+                title={title}
+                htmlContent={htmlContent}
+                lang={lang}
+                id={params.id}
+                type={DOCUMENTS_TYPE_AND_LINK}
             />
-            <SidebarInset>
-                <div className="container flex flex-col">
-                    <header className="flex h-16 shrink-0 items-center justify-between">
-                        <div className="flex shrink-0 items-center">
-                            <Breadcrumb items={[
-                                {
-                                    link: "/",
-                                    label: title,
-                                    id: "title",
-                                    active: false,
-                                    children: [],
-                                }
-                            ]} />
-                        </div>
-                    </header>
-
-                    <div style={{ width: '100%', height: '90.6vh' }}>
-                        <iframe
-                            width="100%"
-                            height="100%"
-                            style={{ border: 'none' }}
-                            src={documentURL}
-                        />
-                    </div>
-                </div>
-            </SidebarInset>
-        </SidebarProvider>
+        </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

@@ -0,0 +1,169 @@
+"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 { Breadcrumb } from "@c-rex/components/breadcrumb";
+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[]
+}
+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 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,
+        breadcrumbItems,
+        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 (
+        <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,87 +1,56 @@
 import React from "react";
-import { ConfigInterface, informationUnits } from "@c-rex/interfaces";
-import { InformationUnitsService, LanguageService } from "@c-rex/services";
-import { getConfigs, getCookie } from "@c-rex/utils/next-cookies";
+import { informationUnitsResponse } from "@c-rex/interfaces";
+import { InformationUnitsService } from "@c-rex/services";
 import { HomePage } from "./page";
-import { SDK_CONFIG_KEY } from "@c-rex/constants";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
 
-interface SearchParams {
-    search?: string;
-    page?: string;
-    language?: string;
-}
 interface HomeProps {
-    searchParams: SearchParams;
+    searchParams: {
+        search?: string;
+        page?: string;
+        language?: string;
+    };
 }
 
-const loadData = async ({
-    search,
-    page,
-    language,
-}: SearchParams): Promise<any> => {
-    if (search === undefined || search === "") {
-        return {
-            data: { items: [] },
-            filters: {
-                searchValue: "",
-                page: 0,
-                selectedLanguage: [],
-                availableLanguages: [],
-            },
-        };
-    }
-
-    const pageAux = Number(page);
-    const configs = await getConfigs();
-    const searchValue = search as string;
-    const languageService = new LanguageService(configs.languageSwitcher.endpoint);
-    const availableLanguagesAndCountries = await languageService.getLanguagesAndCountries();
-
-    let data = { items: [] } as unknown as informationUnits;
+export const HomeLayout = async ({ searchParams }: HomeProps) => {
+    const { search, page, language } = searchParams;
+
+    let data = {
+        items: [],
+        pageInfo: {
+            pageCount: 0,
+            pageNumber: 0
+        }
+    } as unknown as informationUnitsResponse;
     let selectedLanguages: string[] = [];
 
-    if (language != undefined) {
-        const aux = language as string;
-        selectedLanguages = aux.split(",");
-    }
-
-    if (searchValue) {
-        const service = new InformationUnitsService();
-
-        data = await service.getList({
-            queries: searchValue.split(" ").join(","),
-            page: pageAux,
-            fields: ["renditions", "class", "languages", "labels"],
-            languages: selectedLanguages
-        });
-    }
-
-    return {
-        data: data,
-        filters: {
-            searchValue: searchValue,
-            page: pageAux,
-            selectedLanguages: selectedLanguages,
-            availableLanguages: availableLanguagesAndCountries,
-        },
-    };
-};
-
-export const HomeLayout = async ({ searchParams }: HomeProps) => {
-    const { data, filters: { selectedLanguages, availableLanguages } } = await loadData(searchParams);
-    const jsonConfigs = await getCookie(SDK_CONFIG_KEY);
-    if (!jsonConfigs) {
-        return null;
+    if (search !== undefined) {
+        const pageAux = Number(page);
+        const searchValue = search;
+
+        if (language != undefined) {
+            const aux = language;
+            selectedLanguages = aux.split(",");
+        }
+
+        if (searchValue) {
+            const service = new InformationUnitsService();
+
+            data = await service.getList({
+                queries: searchValue.split(" ").join(","),
+                page: pageAux,
+                fields: ["renditions", "class", "languages", "labels"],
+                languages: selectedLanguages
+            });
+        }
     }
 
-    const configs: ConfigInterface = JSON.parse(jsonConfigs);
-
     return (
-        <HomePage
-            data={data}
-            configs={configs}
-            selectedLanguages={selectedLanguages}
-            availableLanguages={availableLanguages}
-        />
+        <PageWrapper title="">
+            <HomePage
+                data={data}
+                selectedLanguages={selectedLanguages}
+            />
+        </PageWrapper>
     );
 };

package/src/home/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { FC } from "react";
-import { ConfigInterface, informationUnits } 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,22 +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 { getCookie } from "@c-rex/utils/next-cookies";
+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: informationUnits;
+    data: informationUnitsResponse;
     selectedLanguages: string[];
-    availableLanguages: any;
-    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: {
@@ -44,18 +39,21 @@ export const HomePage: FC<HomePageProps> = ({
     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) => {
-        getCookie(CONTENT_LANG_KEY).then((language) => {
-            setParams({
-                search: value,
-                operator: "OR",
-                page: 1,
-                language: language,
+        //show loading
+        getCookie(CONTENT_LANG_KEY)
+            .then((cookie) => cookie.value)
+            .then((cookie) => {
+                setParams({
+                    search: value,
+                    operator: "OR",
+                    page: 1,
+                    language: cookie,
+                });
             });
-        });
     };
 
     return (
@@ -71,7 +69,6 @@ export const HomePage: FC<HomePageProps> = ({
                 <div className="col-span-12 sm:col-span-3 md:col-span-2">
                     <div className="flex justify-end">
                         <DialogFilter
-
                             startSelectedLanguages={selectedLanguages}
                             availableLanguages={availableLanguages}
                             trigger={(
@@ -82,7 +79,11 @@ export const HomePage: FC<HomePageProps> = ({
                 </div>
             </div>
 
-            <ResultList items={data.items} configs={configs} />
+            <ResultList
+                configs={configs}
+                items={data.items}
+                pagination={data.pageInfo}
+            />
         </div>
     );
 };

package/src/layout.tsx

@@ -1,7 +1,9 @@
 import React from "react";
-import { NavBar } from "@c-rex/components/navbar";
 import { NextIntlClientProvider } from 'next-intl';
 import { getLocale } from "next-intl/server";
+import { Toaster } from "@c-rex/ui/sonner"
+import { AppConfigProvider } from "@c-rex/contexts/config-provider";
+import { NuqsAdapter } from 'nuqs/adapters/next/app'
 
 interface DefaultRootLayoutProps {
     children: React.ReactNode;
@@ -11,18 +13,20 @@ export const DefaultRootLayout = async ({ children }: DefaultRootLayoutProps) =>
     const locale = await getLocale();
 
     return (
-        <html lang={locale} suppressHydrationWarning>
-            <head />
-            <body className="min-h-screen bg-background font-sans antialiased">
-                <div className="items-center flex flex-col">
-                    <NextIntlClientProvider>
-
-                        <NavBar />
-
-                        {children}
-                    </NextIntlClientProvider>
-                </div>
-            </body>
-        </html>
+        <NuqsAdapter>
+            <html lang={locale} suppressHydrationWarning>
+                <head />
+                <body className="min-h-screen bg-background font-sans antialiased">
+                    <div className="items-center flex flex-col">
+                        <NextIntlClientProvider>
+                            <AppConfigProvider>
+                                <Toaster />
+                                {children}
+                            </AppConfigProvider>
+                        </NextIntlClientProvider>
+                    </div>
+                </body>
+            </html>
+        </NuqsAdapter>
     );
 }

package/src/articles/info/page.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import { SidebarInset, SidebarProvider } from "@c-rex/ui/sidebar";
-import { AppSidebar } from "@c-rex/components/sidebar";
-import { Breadcrumb } from "@c-rex/components/breadcrumb";
-import { loadArticleData } from "@c-rex/utils";
-
-export const InfoPageTemplate = async ({ params }: { params: { id: string } }) => {
-    const {
-        availableVersions: availableVersionsAux,
-        title,
-        treeOfContent,
-        breadcrumbItems,
-        htmlContent
-    } = await loadArticleData(params.id)
-
-    const availableVersions = availableVersionsAux.map((item) => {
-        return {
-            link: `/topics/${item.shortId}`,
-            ...item,
-        }
-    })
-
-    return (
-        <SidebarProvider>
-            <title>{title}</title>
-
-            <AppSidebar
-                data={treeOfContent}
-                availableVersions={availableVersions}
-                className="top-20"
-                side="right"
-                variant="floating"
-                collapsible="icon"
-            />
-            <SidebarInset>
-                <div className="container flex flex-col">
-                    <header className="flex h-16 shrink-0 items-center justify-between">
-                        <div className="flex shrink-0 items-center">
-                            <Breadcrumb items={breadcrumbItems} />
-                        </div>
-                    </header>
-
-                    <div
-                        dangerouslySetInnerHTML={{ __html: htmlContent }}
-                    />
-                </div>
-            </SidebarInset>
-        </SidebarProvider>
-    );
-};