Skip to content

Commit b9fc2a4

Browse files
abdulrahmancodesFelixMalfait
authored and
remi
committed
fix(docs): Use content instead of props for Card titles to enable translation (twentyhq#15756)
Co-authored-by: Félix Malfait <[email protected]>
1 parent 651347a commit b9fc2a4

File tree

7 files changed

+120
-40
lines changed

7 files changed

+120
-40
lines changed

‎packages/twenty-docs/developers/introduction.mdx‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,42 @@ title: Overview
33
description: Technical documentation for contributors and developers working with Twenty
44
---
55

6+
import { CardTitle } from "/snippets/card-title.mdx"
7+
68
## Getting started
79

810
<CardGroup cols={2}>
9-
<Card title="Local Setup" href="/developers/local-setup" img="/images/user-guide/fields/field.png">
11+
<Card href="/developers/local-setup" img="/images/user-guide/fields/field.png">
12+
<CardTitle>Local Setup</CardTitle>
1013
The guide for contributors (or curious developers) who want to run Twenty locally (on laptop, PC...)
1114
</Card>
1215

13-
<Card title="Self-Hosting" href="/developers/self-hosting/docker-compose" img="/images/user-guide/integrations/plug.png">
16+
<Card href="/developers/self-hosting/docker-compose" img="/images/user-guide/integrations/plug.png">
17+
<CardTitle>Self-Hosting</CardTitle>
1418
Learn how to host Twenty on your own server
1519
</Card>
1620

17-
<Card title="API and Webhooks" href="/developers/api-and-webhooks/api" img="/images/user-guide/api/api.png">
21+
<Card href="/developers/api-and-webhooks/api" img="/images/user-guide/api/api.png">
22+
<CardTitle>API and Webhooks</CardTitle>
1823
REST and GraphQL APIs, webhooks, and integrations
1924
</Card>
2025
</CardGroup>
2126

2227
## Contributing
2328

2429
<CardGroup cols={2}>
25-
<Card title="Bugs and Requests" href="/developers/bug-and-requests" img="/images/user-guide/api/api.png">
30+
<Card href="/developers/bug-and-requests" img="/images/user-guide/api/api.png">
31+
<CardTitle>Bugs and Requests</CardTitle>
2632
Ask for help on GitHub or Discord
2733
</Card>
2834

29-
<Card title="Frontend Development" href="/developers/frontend-development/frontend-commands" img="/images/user-guide/create-workspace/workspace-cover.png">
35+
<Card href="/developers/frontend-development/frontend-commands" img="/images/user-guide/create-workspace/workspace-cover.png">
36+
<CardTitle>Frontend Development</CardTitle>
3037
Frontend commands, Figma, React Best Practices...
3138
</Card>
3239

33-
<Card title="Backend Development" href="/developers/backend-development/server-commands" img="/images/user-guide/kanban-views/kanban.png">
40+
<Card href="/developers/backend-development/server-commands" img="/images/user-guide/kanban-views/kanban.png">
41+
<CardTitle>Backend Development</CardTitle>
3442
NestJS, Custom Objects, Queues...
3543
</Card>
3644
</CardGroup>

‎packages/twenty-docs/l/fr/developers/introduction.mdx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,42 @@ title: Vue d'ensemble
33
description: Documentation technique pour les contributeurs et développeurs travaillant avec Twenty
44
---
55

6+
import { CardTitle } from "/snippets/card-title.mdx"
7+
68
## Commencer
79

810
<CardGroup cols={2}>
9-
<Card title="Local Setup" href="/l/fr/developers/local-setup" img="/images/user-guide/fields/field.png">
11+
<Card href="/l/fr/developers/local-setup" img="/images/user-guide/fields/field.png">
12+
<CardTitle>Configuration locale</CardTitle>
1013
Le guide pour les contributeurs (ou les développeurs curieux) qui veulent exécuter Twenty localement (sur un ordinateur portable, PC...)
1114
</Card>
1215

13-
<Card title="Self-Hosting" href="/l/fr/developers/self-hosting/docker-compose" img="/images/user-guide/integrations/plug.png">
16+
<Card href="/l/fr/developers/self-hosting/docker-compose" img="/images/user-guide/integrations/plug.png">
17+
<CardTitle>Auto-hébergement</CardTitle>
1418
Apprenez à héberger Twenty sur votre propre serveur
1519
</Card>
1620

17-
<Card title="API and Webhooks" href="/l/fr/developers/api-and-webhooks/api" img="/images/user-guide/api/api.png">
21+
<Card href="/l/fr/developers/api-and-webhooks/api" img="/images/user-guide/api/api.png">
22+
<CardTitle>API et webhooks</CardTitle>
1823
APIs REST et GraphQL, webhooks et intégrations
1924
</Card>
2025
</CardGroup>
2126

2227
## Contribution
2328

2429
<CardGroup cols={2}>
25-
<Card title="Bugs and Requests" href="/l/fr/developers/bug-and-requests" img="/images/user-guide/api/api.png">
30+
<Card href="/l/fr/developers/bug-and-requests" img="/images/user-guide/api/api.png">
31+
<CardTitle>Bugs et demandes</CardTitle>
2632
Demandez de l'aide sur GitHub ou Discord
2733
</Card>
2834

29-
<Card title="Frontend Development" href="/l/fr/developers/frontend-development/frontend-commands" img="/images/user-guide/create-workspace/workspace-cover.png">
35+
<Card href="/l/fr/developers/frontend-development/frontend-commands" img="/images/user-guide/create-workspace/workspace-cover.png">
36+
<CardTitle>Développement frontend</CardTitle>
3037
Commandes frontales, Figma, Meilleures pratiques React...
3138
</Card>
3239

33-
<Card title="Backend Development" href="/l/fr/developers/backend-development/server-commands" img="/images/user-guide/kanban-views/kanban.png">
40+
<Card href="/l/fr/developers/backend-development/server-commands" img="/images/user-guide/kanban-views/kanban.png">
41+
<CardTitle>Développement backend</CardTitle>
3442
NestJS, Objets personnalisés, Files d'attente...
3543
</Card>
36-
</CardGroup>
44+
</CardGroup>

‎packages/twenty-docs/l/fr/user-guide/introduction.mdx‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,56 @@ title: Vue d'ensemble
33
description: Votre guide complet des fonctionnalités de Twenty CRM et des meilleures pratiques.
44
---
55

6+
import { CardTitle } from "/snippets/card-title.mdx"
7+
68
<CardGroup cols={2}>
7-
<Card title="Getting Started" href="/l/fr/user-guide/getting-started/what-is-twenty" img="/images/user-guide/what-is-twenty/20.png">
9+
<Card href="/l/fr/user-guide/getting-started/what-is-twenty" img="/images/user-guide/what-is-twenty/20.png">
10+
<CardTitle>Prise en main</CardTitle>
811
Commencez votre parcours Twenty avec ces guides essentiels.
912
</Card>
1013

11-
<Card title="Data Model" href="/l/fr/user-guide/data-model/customize-your-data-model" img="/images/user-guide/fields/data_model.png">
14+
<Card href="/l/fr/user-guide/data-model/customize-your-data-model" img="/images/user-guide/fields/data_model.png">
15+
<CardTitle>Modèle de données</CardTitle>
1216
Personnalisez votre modèle de données pour s'adapter à vos processus métier uniques.
1317
</Card>
1418

15-
<Card title="CRM Essentials" href="/l/fr/user-guide/crm-essentials/contact-and-account-management" img="/images/user-guide/home/contact-and-account-management.png">
19+
<Card href="/l/fr/user-guide/crm-essentials/contact-and-account-management" img="/images/user-guide/home/contact-and-account-management.png">
20+
<CardTitle>Essentiels du CRM</CardTitle>
1621
Fonctions CRM essentielles pour la gestion des prospects, des ventes et des clients.
1722
</Card>
1823

19-
<Card title="Workflows" href="/l/fr/user-guide/workflows/getting-started-workflows" img="/images/user-guide/workflows/workflow.png">
24+
<Card href="/l/fr/user-guide/workflows/getting-started-workflows" img="/images/user-guide/workflows/workflow.png">
25+
<CardTitle>Flux de travail</CardTitle>
2026
Automatisez les processus et intégrez avec des outils externes.
2127
</Card>
2228

23-
<Card title="Collaboration" href="/l/fr/user-guide/collaboration/emails-and-calendars" img="/images/user-guide/emails/emails_header.png">
29+
<Card href="/l/fr/user-guide/collaboration/emails-and-calendars" img="/images/user-guide/emails/emails_header.png">
30+
<CardTitle>Collaboration</CardTitle>
2431
Centralisez les communications et la collaboration d'équipe.
2532
</Card>
2633

27-
<Card title="Integrations API" href="/l/fr/user-guide/integrations-api/apis-overview" img="/images/user-guide/integrations/plug.png">
34+
<Card href="/l/fr/user-guide/integrations-api/apis-overview" img="/images/user-guide/integrations/plug.png">
35+
<CardTitle>Intégrations et API</CardTitle>
2836
Apprenez à connecter Twenty à vos autres outils.
2937
</Card>
3038

31-
<Card title="Reporting" href="/l/fr/user-guide/reporting/reporting-overview" img="/images/user-guide/reporting/reporting.png">
32-
Suivez les performances grâce à des rapports et tableaux de bord personnalisés. Arrive T4 2025
33-
</Card>
39+
<Card href="/l/fr/user-guide/reporting/reporting-overview" img="/images/user-guide/reporting/reporting.png">
40+
<CardTitle>Rapports</CardTitle>
41+
Suivez les performances grâce à des rapports et tableaux de bord personnalisés. Arrive T4 2025
42+
</Card>
3443

35-
<Card title="Settings" href="/l/fr/user-guide/settings/workspace-settings" img="/images/user-guide/setup/settings.png">
44+
<Card href="/l/fr/user-guide/settings/workspace-settings" img="/images/user-guide/setup/settings.png">
45+
<CardTitle>Paramètres</CardTitle>
3646
Configurez les paramètres et préférences de votre espace de travail Twenty.
3747
</Card>
3848

39-
<Card title="Pricing" href="/l/fr/user-guide/pricing/billing-and-pricing-faq" img="/images/user-guide/setup/pricing.png">
49+
<Card href="/l/fr/user-guide/pricing/billing-and-pricing-faq" img="/images/user-guide/setup/pricing.png">
50+
<CardTitle>Tarification</CardTitle>
4051
Comprenez comment fonctionne la tarification de Twenty.
4152
</Card>
4253

43-
<Card title="Resources" href="/l/fr/user-guide/resources/glossary" img="/images/user-guide/glossary/glossary.png">
54+
<Card href="/l/fr/user-guide/resources/glossary" img="/images/user-guide/glossary/glossary.png">
55+
<CardTitle>Ressources</CardTitle>
4456
Définitions de terminologie et liens communautaires.
4557
</Card>
46-
</CardGroup>
58+
</CardGroup>

‎packages/twenty-docs/snippets/card-title.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const CardTitle = ({ children }) => {
2+
return (
3+
<div className="text-base font-semibold text-gray-900 dark:text-gray-100">
4+
{children}
5+
</div>
6+
);
7+
};
8+

‎packages/twenty-docs/snippets/translatable-card.mdx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export const TranslatableCardTitle = ({ children }) => {
2+
return <>{children}</>;
3+
};
4+
5+
export const TranslatableCard = ({ children, ...props }) => {
6+
const childrenArray = React.Children.toArray(children);
7+
8+
let title = '';
9+
let content = [];
10+
11+
childrenArray.forEach((child) => {
12+
// Check if child is TranslatableCardTitle component
13+
if (child?.type?.name === 'TranslatableCardTitle' || child?.props?.mdxType === 'TranslatableCardTitle') {
14+
title = child.props.children;
15+
} else {
16+
content.push(child);
17+
}
18+
});
19+
20+
return (
21+
<Card title={title} {...props}>
22+
{content}
23+
</Card>
24+
);
25+
};
26+

‎packages/twenty-docs/twenty-ui/introduction.mdx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,28 @@ title: Overview
33
description: Component library for Twenty CRM
44
---
55

6+
import { CardTitle } from "/snippets/card-title.mdx"
7+
68
## Components
79

810
<CardGroup cols={2}>
9-
<Card title="Display" href="/twenty-ui/display" img="/images/user-guide/views/filter.png">
11+
<Card href="/twenty-ui/display" img="/images/user-guide/views/filter.png">
12+
<CardTitle>Display</CardTitle>
1013
Display components for showing information visually
1114
</Card>
1215

13-
<Card title="Feedback" href="/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
16+
<Card href="/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
17+
<CardTitle>Feedback</CardTitle>
1418
Feedback components for user notifications
1519
</Card>
1620

17-
<Card title="Input" href="/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
21+
<Card href="/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
22+
<CardTitle>Input</CardTitle>
1823
Input components for user interaction
1924
</Card>
2025

21-
<Card title="Navigation" href="/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
26+
<Card href="/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
27+
<CardTitle>Navigation</CardTitle>
2228
Navigation components for user interface
2329
</Card>
2430
</CardGroup>

‎packages/twenty-docs/user-guide/introduction.mdx‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,56 @@ title: Overview
33
description: Your complete guide to Twenty CRM features and best practices.
44
---
55

6+
import { CardTitle } from "/snippets/card-title.mdx"
7+
68
<CardGroup cols={2}>
7-
<Card title="Getting Started" href="/user-guide/getting-started/what-is-twenty" img="/images/user-guide/what-is-twenty/20.png">
9+
<Card href="/user-guide/getting-started/what-is-twenty" img="/images/user-guide/what-is-twenty/20.png">
10+
<CardTitle>Getting Started</CardTitle>
811
Start your Twenty journey with these essential guides.
912
</Card>
1013

11-
<Card title="Data Model" href="/user-guide/data-model/customize-your-data-model" img="/images/user-guide/fields/data_model.png">
14+
<Card href="/user-guide/data-model/customize-your-data-model" img="/images/user-guide/fields/data_model.png">
15+
<CardTitle>Data Model</CardTitle>
1216
Customize your data model to fit your unique business processes.
1317
</Card>
1418

15-
<Card title="CRM Essentials" href="/user-guide/crm-essentials/contact-and-account-management" img="/images/user-guide/home/contact-and-account-management.png">
19+
<Card href="/user-guide/crm-essentials/contact-and-account-management" img="/images/user-guide/home/contact-and-account-management.png">
20+
<CardTitle>CRM Essentials</CardTitle>
1621
Essential CRM features for managing leads, sales, and customers.
1722
</Card>
1823

19-
<Card title="Workflows" href="/user-guide/workflows/getting-started-workflows" img="/images/user-guide/workflows/workflow.png">
24+
<Card href="/user-guide/workflows/getting-started-workflows" img="/images/user-guide/workflows/workflow.png">
25+
<CardTitle>Workflows</CardTitle>
2026
Automate processes and integrate with external tools.
2127
</Card>
2228

23-
<Card title="Collaboration" href="/user-guide/collaboration/emails-and-calendars" img="/images/user-guide/emails/emails_header.png">
29+
<Card href="/user-guide/collaboration/emails-and-calendars" img="/images/user-guide/emails/emails_header.png">
30+
<CardTitle>Collaboration</CardTitle>
2431
Centralize communications and team collaboration.
2532
</Card>
2633

27-
<Card title="Integrations API" href="/user-guide/integrations-api/apis-overview" img="/images/user-guide/integrations/plug.png">
34+
<Card href="/user-guide/integrations-api/apis-overview" img="/images/user-guide/integrations/plug.png">
35+
<CardTitle>Integrations API</CardTitle>
2836
Learn how to connect Twenty to your other tools.
2937
</Card>
3038

31-
<Card title="Reporting" href="/user-guide/reporting/reporting-overview" img="/images/user-guide/reporting/reporting.png">
39+
<Card href="/user-guide/reporting/reporting-overview" img="/images/user-guide/reporting/reporting.png">
40+
<CardTitle>Reporting</CardTitle>
3241
Track performance with custom reports and dashboards. Coming Q4 2025
3342
</Card>
3443

35-
<Card title="Settings" href="/user-guide/settings/workspace-settings" img="/images/user-guide/setup/settings.png">
44+
<Card href="/user-guide/settings/workspace-settings" img="/images/user-guide/setup/settings.png">
45+
<CardTitle>Settings</CardTitle>
3646
Configure your Twenty workspace settings and preferences.
3747
</Card>
3848

39-
<Card title="Pricing" href="/user-guide/pricing/billing-and-pricing-faq" img="/images/user-guide/setup/pricing.png">
49+
<Card href="/user-guide/pricing/billing-and-pricing-faq" img="/images/user-guide/setup/pricing.png">
50+
<CardTitle>Pricing</CardTitle>
4051
Understand how Twenty pricing works.
4152
</Card>
4253

43-
<Card title="Resources" href="/user-guide/resources/glossary" img="/images/user-guide/glossary/glossary.png">
54+
<Card href="/user-guide/resources/glossary" img="/images/user-guide/glossary/glossary.png">
55+
<CardTitle>Resources</CardTitle>
4456
Terminology definitions and community links.
4557
</Card>
4658
</CardGroup>

0 commit comments

Comments
 (0)