fix(docs): Use content instead of props for Card titles to enable translation (#15756)
Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Abdul Rahman
@@ -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
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Local Setup" href="/developers/local-setup" img="/images/user-guide/fields/field.png">
|
||||
<Card href="/developers/local-setup" img="/images/user-guide/fields/field.png">
|
||||
<CardTitle>Local Setup</CardTitle>
|
||||
The guide for contributors (or curious developers) who want to run Twenty locally (on laptop, PC...)
|
||||
</Card>
|
||||
|
||||
<Card title="Self-Hosting" href="/developers/self-hosting/docker-compose" img="/images/user-guide/integrations/plug.png">
|
||||
<Card href="/developers/self-hosting/docker-compose" img="/images/user-guide/integrations/plug.png">
|
||||
<CardTitle>Self-Hosting</CardTitle>
|
||||
Learn how to host Twenty on your own server
|
||||
</Card>
|
||||
|
||||
<Card title="API and Webhooks" href="/developers/api-and-webhooks/api" img="/images/user-guide/api/api.png">
|
||||
<Card href="/developers/api-and-webhooks/api" img="/images/user-guide/api/api.png">
|
||||
<CardTitle>API and Webhooks</CardTitle>
|
||||
REST and GraphQL APIs, webhooks, and integrations
|
||||
</Card>
|
||||
</CardGroup>
|
||||
@@ -22,15 +27,18 @@ description: Technical documentation for contributors and developers working wit
|
||||
## Contributing
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Bugs and Requests" href="/developers/bug-and-requests" img="/images/user-guide/api/api.png">
|
||||
<Card href="/developers/bug-and-requests" img="/images/user-guide/api/api.png">
|
||||
<CardTitle>Bugs and Requests</CardTitle>
|
||||
Ask for help on GitHub or Discord
|
||||
</Card>
|
||||
|
||||
<Card title="Frontend Development" href="/developers/frontend-development/frontend-commands" img="/images/user-guide/create-workspace/workspace-cover.png">
|
||||
<Card href="/developers/frontend-development/frontend-commands" img="/images/user-guide/create-workspace/workspace-cover.png">
|
||||
<CardTitle>Frontend Development</CardTitle>
|
||||
Frontend commands, Figma, React Best Practices...
|
||||
</Card>
|
||||
|
||||
<Card title="Backend Development" href="/developers/backend-development/server-commands" img="/images/user-guide/kanban-views/kanban.png">
|
||||
<Card href="/developers/backend-development/server-commands" img="/images/user-guide/kanban-views/kanban.png">
|
||||
<CardTitle>Backend Development</CardTitle>
|
||||
NestJS, Custom Objects, Queues...
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -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
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Local Setup" href="/l/fr/developers/local-setup" img="/images/user-guide/fields/field.png">
|
||||
<Card href="/l/fr/developers/local-setup" img="/images/user-guide/fields/field.png">
|
||||
<CardTitle>Configuration locale</CardTitle>
|
||||
Le guide pour les contributeurs (ou les développeurs curieux) qui veulent exécuter Twenty localement (sur un ordinateur portable, PC...)
|
||||
</Card>
|
||||
|
||||
<Card title="Self-Hosting" href="/l/fr/developers/self-hosting/docker-compose" img="/images/user-guide/integrations/plug.png">
|
||||
<Card href="/l/fr/developers/self-hosting/docker-compose" img="/images/user-guide/integrations/plug.png">
|
||||
<CardTitle>Auto-hébergement</CardTitle>
|
||||
Apprenez à héberger Twenty sur votre propre serveur
|
||||
</Card>
|
||||
|
||||
<Card title="API and Webhooks" href="/l/fr/developers/api-and-webhooks/api" img="/images/user-guide/api/api.png">
|
||||
<Card href="/l/fr/developers/api-and-webhooks/api" img="/images/user-guide/api/api.png">
|
||||
<CardTitle>API et webhooks</CardTitle>
|
||||
APIs REST et GraphQL, webhooks et intégrations
|
||||
</Card>
|
||||
</CardGroup>
|
||||
@@ -22,15 +27,18 @@ description: Documentation technique pour les contributeurs et développeurs tra
|
||||
## Contribution
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Bugs and Requests" href="/l/fr/developers/bug-and-requests" img="/images/user-guide/api/api.png">
|
||||
<Card href="/l/fr/developers/bug-and-requests" img="/images/user-guide/api/api.png">
|
||||
<CardTitle>Bugs et demandes</CardTitle>
|
||||
Demandez de l'aide sur GitHub ou Discord
|
||||
</Card>
|
||||
|
||||
<Card title="Frontend Development" href="/l/fr/developers/frontend-development/frontend-commands" img="/images/user-guide/create-workspace/workspace-cover.png">
|
||||
<Card href="/l/fr/developers/frontend-development/frontend-commands" img="/images/user-guide/create-workspace/workspace-cover.png">
|
||||
<CardTitle>Développement frontend</CardTitle>
|
||||
Commandes frontales, Figma, Meilleures pratiques React...
|
||||
</Card>
|
||||
|
||||
<Card title="Backend Development" href="/l/fr/developers/backend-development/server-commands" img="/images/user-guide/kanban-views/kanban.png">
|
||||
<Card href="/l/fr/developers/backend-development/server-commands" img="/images/user-guide/kanban-views/kanban.png">
|
||||
<CardTitle>Développement backend</CardTitle>
|
||||
NestJS, Objets personnalisés, Files d'attente...
|
||||
</Card>
|
||||
</CardGroup>
|
||||
</CardGroup>
|
||||
|
||||
@@ -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"
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Getting Started" href="/l/fr/user-guide/getting-started/what-is-twenty" img="/images/user-guide/what-is-twenty/20.png">
|
||||
<Card href="/l/fr/user-guide/getting-started/what-is-twenty" img="/images/user-guide/what-is-twenty/20.png">
|
||||
<CardTitle>Prise en main</CardTitle>
|
||||
Commencez votre parcours Twenty avec ces guides essentiels.
|
||||
</Card>
|
||||
|
||||
<Card title="Data Model" href="/l/fr/user-guide/data-model/customize-your-data-model" img="/images/user-guide/fields/data_model.png">
|
||||
<Card href="/l/fr/user-guide/data-model/customize-your-data-model" img="/images/user-guide/fields/data_model.png">
|
||||
<CardTitle>Modèle de données</CardTitle>
|
||||
Personnalisez votre modèle de données pour s'adapter à vos processus métier uniques.
|
||||
</Card>
|
||||
|
||||
<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">
|
||||
<Card href="/l/fr/user-guide/crm-essentials/contact-and-account-management" img="/images/user-guide/home/contact-and-account-management.png">
|
||||
<CardTitle>Essentiels du CRM</CardTitle>
|
||||
Fonctions CRM essentielles pour la gestion des prospects, des ventes et des clients.
|
||||
</Card>
|
||||
|
||||
<Card title="Workflows" href="/l/fr/user-guide/workflows/getting-started-workflows" img="/images/user-guide/workflows/workflow.png">
|
||||
<Card href="/l/fr/user-guide/workflows/getting-started-workflows" img="/images/user-guide/workflows/workflow.png">
|
||||
<CardTitle>Flux de travail</CardTitle>
|
||||
Automatisez les processus et intégrez avec des outils externes.
|
||||
</Card>
|
||||
|
||||
<Card title="Collaboration" href="/l/fr/user-guide/collaboration/emails-and-calendars" img="/images/user-guide/emails/emails_header.png">
|
||||
<Card href="/l/fr/user-guide/collaboration/emails-and-calendars" img="/images/user-guide/emails/emails_header.png">
|
||||
<CardTitle>Collaboration</CardTitle>
|
||||
Centralisez les communications et la collaboration d'équipe.
|
||||
</Card>
|
||||
|
||||
<Card title="Integrations API" href="/l/fr/user-guide/integrations-api/apis-overview" img="/images/user-guide/integrations/plug.png">
|
||||
<Card href="/l/fr/user-guide/integrations-api/apis-overview" img="/images/user-guide/integrations/plug.png">
|
||||
<CardTitle>Intégrations et API</CardTitle>
|
||||
Apprenez à connecter Twenty à vos autres outils.
|
||||
</Card>
|
||||
|
||||
<Card title="Reporting" href="/l/fr/user-guide/reporting/reporting-overview" img="/images/user-guide/reporting/reporting.png">
|
||||
Suivez les performances grâce à des rapports et tableaux de bord personnalisés. Arrive T4 2025
|
||||
</Card>
|
||||
<Card href="/l/fr/user-guide/reporting/reporting-overview" img="/images/user-guide/reporting/reporting.png">
|
||||
<CardTitle>Rapports</CardTitle>
|
||||
Suivez les performances grâce à des rapports et tableaux de bord personnalisés. Arrive T4 2025
|
||||
</Card>
|
||||
|
||||
<Card title="Settings" href="/l/fr/user-guide/settings/workspace-settings" img="/images/user-guide/setup/settings.png">
|
||||
<Card href="/l/fr/user-guide/settings/workspace-settings" img="/images/user-guide/setup/settings.png">
|
||||
<CardTitle>Paramètres</CardTitle>
|
||||
Configurez les paramètres et préférences de votre espace de travail Twenty.
|
||||
</Card>
|
||||
|
||||
<Card title="Pricing" href="/l/fr/user-guide/pricing/billing-and-pricing-faq" img="/images/user-guide/setup/pricing.png">
|
||||
<Card href="/l/fr/user-guide/pricing/billing-and-pricing-faq" img="/images/user-guide/setup/pricing.png">
|
||||
<CardTitle>Tarification</CardTitle>
|
||||
Comprenez comment fonctionne la tarification de Twenty.
|
||||
</Card>
|
||||
|
||||
<Card title="Resources" href="/l/fr/user-guide/resources/glossary" img="/images/user-guide/glossary/glossary.png">
|
||||
<Card href="/l/fr/user-guide/resources/glossary" img="/images/user-guide/glossary/glossary.png">
|
||||
<CardTitle>Ressources</CardTitle>
|
||||
Définitions de terminologie et liens communautaires.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
</CardGroup>
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
export const CardTitle = ({ children }) => {
|
||||
return (
|
||||
<div className="text-base font-semibold text-gray-900 dark:text-gray-100">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Card title={title} {...props}>
|
||||
{content}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,22 +3,28 @@ title: Overview
|
||||
description: Component library for Twenty CRM
|
||||
---
|
||||
|
||||
import { CardTitle } from "/snippets/card-title.mdx"
|
||||
|
||||
## Components
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Display" href="/twenty-ui/display" img="/images/user-guide/views/filter.png">
|
||||
<Card href="/twenty-ui/display" img="/images/user-guide/views/filter.png">
|
||||
<CardTitle>Display</CardTitle>
|
||||
Display components for showing information visually
|
||||
</Card>
|
||||
|
||||
<Card title="Feedback" href="/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
|
||||
<Card href="/twenty-ui/progress-bar" img="/images/user-guide/fields/field.png">
|
||||
<CardTitle>Feedback</CardTitle>
|
||||
Feedback components for user notifications
|
||||
</Card>
|
||||
|
||||
<Card title="Input" href="/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
|
||||
<Card href="/twenty-ui/input" img="/images/user-guide/tips/light-bulb.png">
|
||||
<CardTitle>Input</CardTitle>
|
||||
Input components for user interaction
|
||||
</Card>
|
||||
|
||||
<Card title="Navigation" href="/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
|
||||
<Card href="/twenty-ui/navigation" img="/images/user-guide/tasks/tasks_header.png">
|
||||
<CardTitle>Navigation</CardTitle>
|
||||
Navigation components for user interface
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
@@ -3,44 +3,56 @@ title: Overview
|
||||
description: Your complete guide to Twenty CRM features and best practices.
|
||||
---
|
||||
|
||||
import { CardTitle } from "/snippets/card-title.mdx"
|
||||
|
||||
<CardGroup cols={2}>
|
||||
<Card title="Getting Started" href="/user-guide/getting-started/what-is-twenty" img="/images/user-guide/what-is-twenty/20.png">
|
||||
<Card href="/user-guide/getting-started/what-is-twenty" img="/images/user-guide/what-is-twenty/20.png">
|
||||
<CardTitle>Getting Started</CardTitle>
|
||||
Start your Twenty journey with these essential guides.
|
||||
</Card>
|
||||
|
||||
<Card title="Data Model" href="/user-guide/data-model/customize-your-data-model" img="/images/user-guide/fields/data_model.png">
|
||||
<Card href="/user-guide/data-model/customize-your-data-model" img="/images/user-guide/fields/data_model.png">
|
||||
<CardTitle>Data Model</CardTitle>
|
||||
Customize your data model to fit your unique business processes.
|
||||
</Card>
|
||||
|
||||
<Card title="CRM Essentials" href="/user-guide/crm-essentials/contact-and-account-management" img="/images/user-guide/home/contact-and-account-management.png">
|
||||
<Card href="/user-guide/crm-essentials/contact-and-account-management" img="/images/user-guide/home/contact-and-account-management.png">
|
||||
<CardTitle>CRM Essentials</CardTitle>
|
||||
Essential CRM features for managing leads, sales, and customers.
|
||||
</Card>
|
||||
|
||||
<Card title="Workflows" href="/user-guide/workflows/getting-started-workflows" img="/images/user-guide/workflows/workflow.png">
|
||||
<Card href="/user-guide/workflows/getting-started-workflows" img="/images/user-guide/workflows/workflow.png">
|
||||
<CardTitle>Workflows</CardTitle>
|
||||
Automate processes and integrate with external tools.
|
||||
</Card>
|
||||
|
||||
<Card title="Collaboration" href="/user-guide/collaboration/emails-and-calendars" img="/images/user-guide/emails/emails_header.png">
|
||||
<Card href="/user-guide/collaboration/emails-and-calendars" img="/images/user-guide/emails/emails_header.png">
|
||||
<CardTitle>Collaboration</CardTitle>
|
||||
Centralize communications and team collaboration.
|
||||
</Card>
|
||||
|
||||
<Card title="Integrations API" href="/user-guide/integrations-api/apis-overview" img="/images/user-guide/integrations/plug.png">
|
||||
<Card href="/user-guide/integrations-api/apis-overview" img="/images/user-guide/integrations/plug.png">
|
||||
<CardTitle>Integrations API</CardTitle>
|
||||
Learn how to connect Twenty to your other tools.
|
||||
</Card>
|
||||
|
||||
<Card title="Reporting" href="/user-guide/reporting/reporting-overview" img="/images/user-guide/reporting/reporting.png">
|
||||
<Card href="/user-guide/reporting/reporting-overview" img="/images/user-guide/reporting/reporting.png">
|
||||
<CardTitle>Reporting</CardTitle>
|
||||
Track performance with custom reports and dashboards. Coming Q4 2025
|
||||
</Card>
|
||||
|
||||
<Card title="Settings" href="/user-guide/settings/workspace-settings" img="/images/user-guide/setup/settings.png">
|
||||
<Card href="/user-guide/settings/workspace-settings" img="/images/user-guide/setup/settings.png">
|
||||
<CardTitle>Settings</CardTitle>
|
||||
Configure your Twenty workspace settings and preferences.
|
||||
</Card>
|
||||
|
||||
<Card title="Pricing" href="/user-guide/pricing/billing-and-pricing-faq" img="/images/user-guide/setup/pricing.png">
|
||||
<Card href="/user-guide/pricing/billing-and-pricing-faq" img="/images/user-guide/setup/pricing.png">
|
||||
<CardTitle>Pricing</CardTitle>
|
||||
Understand how Twenty pricing works.
|
||||
</Card>
|
||||
|
||||
<Card title="Resources" href="/user-guide/resources/glossary" img="/images/user-guide/glossary/glossary.png">
|
||||
<Card href="/user-guide/resources/glossary" img="/images/user-guide/glossary/glossary.png">
|
||||
<CardTitle>Resources</CardTitle>
|
||||
Terminology definitions and community links.
|
||||
</Card>
|
||||
</CardGroup>
|
||||
|
||||
Reference in New Issue
Block a user