From 12e2820715ecd8a5ff547c92e7038a0ff627ad88 Mon Sep 17 00:00:00 2001 From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com> Date: Wed, 12 Nov 2025 15:14:04 +0530 Subject: [PATCH] fix(docs): Use content instead of props for Card titles to enable translation (#15756) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Félix Malfait --- .../twenty-docs/developers/introduction.mdx | 20 +++++++--- .../l/fr/developers/introduction.mdx | 22 +++++++---- .../l/fr/user-guide/introduction.mdx | 38 ++++++++++++------- packages/twenty-docs/snippets/card-title.mdx | 8 ++++ .../snippets/translatable-card.mdx | 26 +++++++++++++ .../twenty-docs/twenty-ui/introduction.mdx | 14 +++++-- .../twenty-docs/user-guide/introduction.mdx | 32 +++++++++++----- 7 files changed, 120 insertions(+), 40 deletions(-) create mode 100644 packages/twenty-docs/snippets/card-title.mdx create mode 100644 packages/twenty-docs/snippets/translatable-card.mdx diff --git a/packages/twenty-docs/developers/introduction.mdx b/packages/twenty-docs/developers/introduction.mdx index 2996c67c45..34927854dc 100644 --- a/packages/twenty-docs/developers/introduction.mdx +++ b/packages/twenty-docs/developers/introduction.mdx @@ -3,18 +3,23 @@ title: Overview description: Technical documentation for contributors and developers working with Twenty --- +import { CardTitle } from "/snippets/card-title.mdx" + ## Getting started - + + Local Setup The guide for contributors (or curious developers) who want to run Twenty locally (on laptop, PC...) - + + Self-Hosting Learn how to host Twenty on your own server - + + API and Webhooks REST and GraphQL APIs, webhooks, and integrations @@ -22,15 +27,18 @@ description: Technical documentation for contributors and developers working wit ## Contributing - + + Bugs and Requests Ask for help on GitHub or Discord - + + Frontend Development Frontend commands, Figma, React Best Practices... - + + Backend Development NestJS, Custom Objects, Queues... diff --git a/packages/twenty-docs/l/fr/developers/introduction.mdx b/packages/twenty-docs/l/fr/developers/introduction.mdx index 1916575ae1..955c7efd9d 100644 --- a/packages/twenty-docs/l/fr/developers/introduction.mdx +++ b/packages/twenty-docs/l/fr/developers/introduction.mdx @@ -3,18 +3,23 @@ title: Vue d'ensemble description: Documentation technique pour les contributeurs et développeurs travaillant avec Twenty --- +import { CardTitle } from "/snippets/card-title.mdx" + ## Commencer - + + Configuration locale Le guide pour les contributeurs (ou les développeurs curieux) qui veulent exécuter Twenty localement (sur un ordinateur portable, PC...) - + + Auto-hébergement Apprenez à héberger Twenty sur votre propre serveur - + + API et webhooks APIs REST et GraphQL, webhooks et intégrations @@ -22,15 +27,18 @@ description: Documentation technique pour les contributeurs et développeurs tra ## Contribution - + + Bugs et demandes Demandez de l'aide sur GitHub ou Discord - + + Développement frontend Commandes frontales, Figma, Meilleures pratiques React... - + + Développement backend NestJS, Objets personnalisés, Files d'attente... - \ No newline at end of file + diff --git a/packages/twenty-docs/l/fr/user-guide/introduction.mdx b/packages/twenty-docs/l/fr/user-guide/introduction.mdx index 4a4a5efce6..d7595baf44 100644 --- a/packages/twenty-docs/l/fr/user-guide/introduction.mdx +++ b/packages/twenty-docs/l/fr/user-guide/introduction.mdx @@ -3,44 +3,56 @@ title: Vue d'ensemble description: Votre guide complet des fonctionnalités de Twenty CRM et des meilleures pratiques. --- +import { CardTitle } from "/snippets/card-title.mdx" + - + + Prise en main Commencez votre parcours Twenty avec ces guides essentiels. - + + Modèle de données Personnalisez votre modèle de données pour s'adapter à vos processus métier uniques. - + + Essentiels du CRM Fonctions CRM essentielles pour la gestion des prospects, des ventes et des clients. - + + Flux de travail Automatisez les processus et intégrez avec des outils externes. - + + Collaboration Centralisez les communications et la collaboration d'équipe. - + + Intégrations et API Apprenez à connecter Twenty à vos autres outils. - - Suivez les performances grâce à des rapports et tableaux de bord personnalisés. Arrive T4 2025 - + + Rapports + Suivez les performances grâce à des rapports et tableaux de bord personnalisés. Arrive T4 2025 + - + + Paramètres Configurez les paramètres et préférences de votre espace de travail Twenty. - + + Tarification Comprenez comment fonctionne la tarification de Twenty. - + + Ressources Définitions de terminologie et liens communautaires. - \ No newline at end of file + diff --git a/packages/twenty-docs/snippets/card-title.mdx b/packages/twenty-docs/snippets/card-title.mdx new file mode 100644 index 0000000000..759543ca47 --- /dev/null +++ b/packages/twenty-docs/snippets/card-title.mdx @@ -0,0 +1,8 @@ +export const CardTitle = ({ children }) => { + return ( +
+ {children} +
+ ); +}; + diff --git a/packages/twenty-docs/snippets/translatable-card.mdx b/packages/twenty-docs/snippets/translatable-card.mdx new file mode 100644 index 0000000000..5401eff3d4 --- /dev/null +++ b/packages/twenty-docs/snippets/translatable-card.mdx @@ -0,0 +1,26 @@ +export const TranslatableCardTitle = ({ children }) => { + return <>{children}; +}; + +export const TranslatableCard = ({ children, ...props }) => { + const childrenArray = React.Children.toArray(children); + + let title = ''; + let content = []; + + childrenArray.forEach((child) => { + // Check if child is TranslatableCardTitle component + if (child?.type?.name === 'TranslatableCardTitle' || child?.props?.mdxType === 'TranslatableCardTitle') { + title = child.props.children; + } else { + content.push(child); + } + }); + + return ( + + {content} + + ); +}; + diff --git a/packages/twenty-docs/twenty-ui/introduction.mdx b/packages/twenty-docs/twenty-ui/introduction.mdx index ae8ffa292a..c51fb0b77d 100644 --- a/packages/twenty-docs/twenty-ui/introduction.mdx +++ b/packages/twenty-docs/twenty-ui/introduction.mdx @@ -3,22 +3,28 @@ title: Overview description: Component library for Twenty CRM --- +import { CardTitle } from "/snippets/card-title.mdx" + ## Components - + + Display Display components for showing information visually - + + Feedback Feedback components for user notifications - + + Input Input components for user interaction - + + Navigation Navigation components for user interface diff --git a/packages/twenty-docs/user-guide/introduction.mdx b/packages/twenty-docs/user-guide/introduction.mdx index a11762f1ad..f31cb08276 100644 --- a/packages/twenty-docs/user-guide/introduction.mdx +++ b/packages/twenty-docs/user-guide/introduction.mdx @@ -3,44 +3,56 @@ title: Overview description: Your complete guide to Twenty CRM features and best practices. --- +import { CardTitle } from "/snippets/card-title.mdx" + - + + Getting Started Start your Twenty journey with these essential guides. - + + Data Model Customize your data model to fit your unique business processes. - + + CRM Essentials Essential CRM features for managing leads, sales, and customers. - + + Workflows Automate processes and integrate with external tools. - + + Collaboration Centralize communications and team collaboration. - + + Integrations API Learn how to connect Twenty to your other tools. - + + Reporting Track performance with custom reports and dashboards. Coming Q4 2025 - + + Settings Configure your Twenty workspace settings and preferences. - + + Pricing Understand how Twenty pricing works. - + + Resources Terminology definitions and community links.