@c-rex/templates 0.1.20 → 0.1.22

package/package.json

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

package/src/articles/documents/layout.tsx

@@ -4,6 +4,7 @@ import { Metadata } from "next";
 import { DocumentsPage } from "./page";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { DocumentArticleCollector } from "../../collectors/DocumentArticleCollector";
+import { CrexSDK } from "@c-rex/core/sdk";
 
 type Props = {
     params: { id: string }
@@ -17,9 +18,15 @@ const getCachedDocumentData = cache(async (id: string) => {
 
 
 export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
-
     const { metaTags, rootNode } = await getCachedDocumentData(params.id);
-    const title = rootNode?.informationUnits[0]?.labels[0]?.value;
+    const sdk = new CrexSDK()
+    const config = sdk.getServerConfig()
+
+    const pageTitle = rootNode?.informationUnits[0]?.labels[0]?.value as string;
+    const title = config.titles.sub
+        .replace("{{projectName}}", config.projectName)
+        .replace("{{pageTitle}}", pageTitle);
+
 
     const other: Record<string, string[]> = {}
 

package/src/articles/topics/layout.tsx

@@ -3,6 +3,7 @@ import { TopicArticleCollector } from "../../collectors/TopicArticleCollector";
 import { Metadata } from "next";
 import { PageWrapper } from "@c-rex/components/page-wrapper";
 import { TopicsPage } from "./page";
+import { CrexSDK } from "@c-rex/core/sdk";
 
 type Props = {
     params: { id: string }
@@ -15,9 +16,13 @@ const getCachedTopicData = cache(async (id: string) => {
 });
 
 export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
-
     const { metaTags, rootNode } = await getCachedTopicData(params.id);
-    const title = rootNode?.informationUnits[0]?.labels[0]?.value;
+    const sdk = new CrexSDK()
+    const config = sdk.getServerConfig()
+    const pageTitle = rootNode?.informationUnits[0]?.labels[0]?.value as string;
+    const title = config.titles.sub
+        .replace("{{projectName}}", config.projectName)
+        .replace("{{pageTitle}}", pageTitle);
 
     const other: Record<string, string[]> = {}
 

package/src/articles/wrapper.tsx

@@ -68,12 +68,6 @@ export const ArticleWrapper = ({
     const toggleHighlight = useHighlightStore((state) => state.toggleHighlight);
     const { rightSidebar } = useMultiSidebar()
     const [query, setQuery] = useQueryState("q");
-    const favoritesDocuments = useFavoritesStore((state) => state.documents);
-    let favoritesList: Favorite[] = []
-
-    if (Object.keys(favoritesDocuments).some(docId => docId === documentId)) {
-        favoritesList = favoritesDocuments[documentId]?.topics || []
-    }
 
     useEffect(() => {
         if (open && inputRef.current) {
@@ -111,6 +105,7 @@ export const ArticleWrapper = ({
                 <div className="pr-4 relative">
                     <RenderArticle htmlContent={htmlContent} contentLang={articleLang} />
 
+                    {/*
                     <div className="absolute top-0 right-0 flex flex-col gap-2 items-end">
                         {favoritesList.map((item) => (
                             <div
@@ -127,17 +122,21 @@ export const ArticleWrapper = ({
                                         `border-r-${item.color}`,
                                     )} />
                                 )}
-                                <span className="flex items-center justify-end h-8 opacity-0 group-hover:opacity-100 text-primary-foreground transition-all duration-300 text-right px-2">
+                                <a
+                                    href={`../topics/${item.id}`}
+                                    className="flex items-center justify-end h-8 opacity-0 group-hover:opacity-100 text-primary-foreground transition-all duration-300 text-right px-2"
+                                >
                                     <span
                                         className="text-right text-ellipsis overflow-hidden whitespace-nowrap"
                                         title={item.label}
                                     >
                                         {item.label}
                                     </span>
-                                </span>
+                                </a>
                             </div>
                         ))}
                     </div>
+                    */}
                 </div>
 
                 <div className="w-full sm:w-auto justify-between bg-primary text-primary-foreground rounded-full shadow-lg flex sticky bottom-4 p-2 float-right gap-2 transition-all duration-300">

package/src/home/components/filter-sidebar.tsx

@@ -28,7 +28,7 @@ interface FilterSidebarProps {
 export const FilterSidebar: FC<FilterSidebarProps> = ({ tags, totalItemCount, updateFilterParam }) => {
     const t = useTranslations();
     const device = useBreakpoint();
-    const isMobile = (device === DEVICE_OPTIONS.MOBILE);
+    const isMobile = device !== null && (device === DEVICE_OPTIONS.MOBILE);
 
     if (Object.keys(tags).length === 0) return null;
 

package/src/home/page.tsx

@@ -37,7 +37,7 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
     const t = useTranslations();
     const { setLoading } = useSearchContext();
     const device = useBreakpoint();
-    const isMobile = device === DEVICE_OPTIONS.MOBILE;
+    const isMobile = device !== null && device === DEVICE_OPTIONS.MOBILE;
     const [open, setOpen] = useState<boolean>(false)
     const [params, setParams] = useQueryStates({
         language: parseAsString,

package/src/home/page2.tsx

@@ -37,7 +37,7 @@ export const HomePage: FC<HomePageProps> = ({ data }) => {
     const t = useTranslations();
     const { setLoading } = useSearchContext();
     const device = useBreakpoint();
-    const isMobile = device === DEVICE_OPTIONS.MOBILE;
+    const isMobile = device !== null && device === DEVICE_OPTIONS.MOBILE;
     const [open, setOpen] = useState<boolean>(false)
     const [params, setParams] = useQueryStates({
         language: parseAsString,

package/src/layout.tsx

@@ -4,13 +4,45 @@ 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'
+import { cookies } from "next/headers";
+import { CrexSDK } from "@c-rex/core/sdk";
+import { getIssuerMetadata } from "@c-rex/core/OIDC";
+import { resolveUILanguage, resolveContentLanguage } from "./utils";
+import { LanguageService } from "@c-rex/services";
+import { CONTENT_LANG_KEY, UI_LANG_KEY } from "@c-rex/constants";
 
 interface DefaultRootLayoutProps {
     children: React.ReactNode;
 }
 
 export const DefaultRootLayout = async ({ children }: DefaultRootLayoutProps) => {
+    const sdk = new CrexSDK()
     const locale = await getLocale();
+    const metadata = await getIssuerMetadata();
+    const cookieStore = cookies();
+    const uiLangCookie = cookieStore.get(UI_LANG_KEY)?.value ?? null;
+    const clientConfigs = sdk.getClientConfig();
+    const serverConfigs = sdk.getServerConfig();
+    const languageService = new LanguageService()
+    const contentLangCookie = cookieStore.get(CONTENT_LANG_KEY)?.value ?? null;
+
+    sdk.updateConfigProp('OIDC', {
+        ...serverConfigs.OIDC,
+        issuerMetadata: metadata
+    });
+
+    const availableLanguages = await languageService.getLanguagesAndCountries();
+
+    const uiLang = resolveUILanguage({
+        uiLangCookie,
+        defaultLang: clientConfigs.languageSwitcher.default
+    });
+
+    const contentLang = resolveContentLanguage({
+        contentLangCookie,
+        availableLanguages,
+        defaultLang: clientConfigs.languageSwitcher.default
+    });
 
     return (
         <NuqsAdapter>
@@ -20,7 +52,12 @@ export const DefaultRootLayout = async ({ children }: DefaultRootLayoutProps) =>
                 </head>
                 <body className="min-h-screen bg-background font-sans antialiased">
                     <NextIntlClientProvider>
-                        <AppConfigProvider>
+                        <AppConfigProvider
+                            uiLang={uiLang}
+                            contentLang={contentLang}
+                            availableLanguages={availableLanguages}
+                            initialConfig={clientConfigs}
+                        >
                             <Toaster />
                             {children}
                         </AppConfigProvider>

package/src/utils.ts

@@ -0,0 +1,49 @@
+import { UI_LANG_OPTIONS } from "@c-rex/constants";
+import { headers } from "next/headers";
+
+const getBrowserLangFromHeader = (): string => {
+    const h = headers();
+    const accept = h.get("accept-language"); // ex: "pt-BR,pt;q=0.9,en-US;q=0.8,en;q=0.7"
+
+    if (!accept) return "";
+
+    return accept.split(",")[0]?.toLowerCase() || "";
+}
+
+
+export const resolveUILanguage = ({
+    uiLangCookie,
+    defaultLang,
+}: {
+    uiLangCookie?: string | null;
+    defaultLang: string;
+}): string => {
+    const browserLang = getBrowserLangFromHeader();
+
+    if (uiLangCookie) return uiLangCookie;
+    if (browserLang && UI_LANG_OPTIONS.includes(browserLang)) return browserLang;
+
+    return defaultLang;
+}
+
+export const resolveContentLanguage = ({
+    contentLangCookie,
+    availableLanguages,
+    defaultLang,
+}: {
+    contentLangCookie?: string | null;
+    availableLanguages: { value: string }[];
+    defaultLang: string;
+}): string => {
+    const browserLang = getBrowserLangFromHeader();
+
+    if (contentLangCookie) return contentLangCookie;
+
+    const hasLang = browserLang
+        ? availableLanguages.some((l) => l.value === browserLang)
+        : false;
+
+    if (hasLang) return browserLang;
+
+    return defaultLang;
+}