Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add features list translations #2074

Merged
merged 4 commits into from
Aug 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 38 additions & 49 deletions components/features/FeatureList.js
Original file line number Diff line number Diff line change
@@ -1,50 +1,39 @@
export const features = [
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@anshgoyalevil

Do we need that file when we have this content inside locales? Except that question, everything is good :)

Copy link
Member Author

@anshgoyalevil anshgoyalevil Aug 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. Actually we are using the ids of those features to create unique translation keys to fetch those from the locales. It would also act like a first source of truth, and cypress testing, since parsing from the json would not be convenient in cypress tests

Copy link
Member Author

@anshgoyalevil anshgoyalevil Aug 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like here for example

{t(`features.${feature.id}.name`)}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So maybe put another texts as values to keys, not whole content, ok?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't get that. Please clarify. Do you mean creating another array of keys inside the file itself rather than importing features.js and using it for keys?

Copy link
Member

@magicmatatjahu magicmatatjahu Aug 21, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see what you did :) Only remove not needed keys from /features map, like description etc, only leave id, label, href etc, what you exactly used.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done with the changes 🚀

{
name: "Specification",
description:
"Allows you to define the interfaces of asynchronous APIs and is protocol agnostic.",
links: [{ label: "Documentation", href: "docs/specifications/latest", id:'whyasyncapi-spec-documentation-link' }],
},
{
name: "Document APIs",
description:
"Use our tools to generate documentation at the build level, on a server, and on a client.",
links: [
{
label: "HTML Template",
href: "https://github.com/asyncapi/html-template",
id:'whyasyncapi-apis-htmltemplate-link'
},
{
label: "React Component",
href: "https://github.com/asyncapi/asyncapi-react/",
id:'whyasyncapi-apis-reactcomponents-link'
},
],
},
{
name: "Code Generation",
description:
"Generate documentation, Code (TypeScript, Java, C#, etc), and more out of your AsyncAPI files.",
links: [{ label: "Generator", href: "tools/generator", id:'whyasyncapi-generation-generator-link' }, { label: "Modelina", href: "tools/modelina", id:'whyasyncapi-generation-modelina-link' }],
},
{
name: "Community",
description: "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.",
links: [
{ label: "Join our Slack", href: "https://asyncapi.com/slack-invite", id:'whyasyncapi-community-slack-link' },
],
},
{
name: "Open Governance",
description:
"Our Open-Source project is part of Linux Foundation and works under an Open Governance model.",
links: [{ label: "Read more about Open Governance", href: "blog/governance-motivation", id:'whyasyncapi-governance-more-link' }, { label: "TSC Members", href: "community/tsc", id:'whyasyncapi-governance-tsc-link' }],
},
{
name: "And much more...",
description:
"We have many different tools and welcome you to explore our ideas and propose new ideas to AsyncAPI.",
links: [{ label: "View GitHub Discussions", href: "https://github.com/asyncapi/community/discussions", id:'whyasyncapi-muchmore-github-link' }],
},
];
{
id: "specification",
links: [{ label: "Documentation", href: "docs/specifications/latest", id: 'whyasyncapi-spec-documentation-link' }],
},
{
id: 'document-apis',
links: [
{
label: "HTML Template",
href: "https://github.com/asyncapi/html-template",
id: 'whyasyncapi-apis-htmltemplate-link'
},
{
label: "React Component",
href: "https://github.com/asyncapi/asyncapi-react/",
id: 'whyasyncapi-apis-reactcomponents-link'
},
],
},
{
id: "code-generation",
links: [{ label: "Generator", href: "tools/generator", id: 'whyasyncapi-generation-generator-link' }, { label: "Modelina", href: "tools/modelina", id: 'whyasyncapi-generation-modelina-link' }],
},
{
id: "community",
links: [
{ label: "Join our Slack", href: "https://asyncapi.com/slack-invite", id: 'whyasyncapi-community-slack-link' },
],
},
{
id: "open-governance",
links: [{ label: "Read more about Open Governance", href: "blog/governance-motivation", id: 'whyasyncapi-governance-more-link' }, { label: "TSC Members", href: "community/tsc", id: 'whyasyncapi-governance-tsc-link' }],
},
{
id: "much-more",
links: [{ label: "View GitHub Discussions", href: "https://github.com/asyncapi/community/discussions", id: 'whyasyncapi-muchmore-github-link' }],
},
];
39 changes: 16 additions & 23 deletions components/features/index.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from "react";
import Heading from "../typography/Heading";
import Paragraph from "../typography/Paragraph";
import TextLink from "../typography/TextLink";
import Link from 'next/link'
import Link from 'next/link';
import { features } from "./FeatureList";
import { useTranslation } from "../../lib/i18n";

Expand All @@ -25,33 +26,25 @@ export default function Features() {
<div className="mt-12 text-left">
<ul className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3" data-testid="Feature-ul">
{features.map((feature) => (
<li key={feature.name} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8"
data-testid="Feature-li">
<div >
<Heading
level="h3"
typeStyle="heading-md-semibold"
className="mt-8"

>
{feature.name}
<li key={feature.id} className="flex flex-col justify-between border border-gray-200 shadow-md hover:shadow-lg transition-all duration-300 ease-in-out rounded-lg px-6 pb-8" data-testid="Feature-li">
<div>
<Heading level="h3" typeStyle="heading-md-semibold" className="mt-8">
{t(`features.${feature.id}.name`)}
</Heading>
{feature.description && (
{(
<Paragraph typeStyle="body-md" className="mt-5">
{feature.description}
{t(`features.${feature.id}.description`)}
</Paragraph>
)}
</div>
<div className="flex justify-between" >
{feature.links.map((link) => {
return (
<Link href={link.href} key={link.label}>
<TextLink id={link.id} href={link.href} className="mt-6 inline-block">
{link.label}
</TextLink>
</Link>
);
})}
<div className="flex justify-between">
{feature.links.map((link) => (
<Link href={link.href} key={link.label}>
<TextLink id={link.id} href={link.href} className="mt-6 inline-block">
{t(`features.${feature.id}.links.${link.id}`)}
</TextLink>
</Link>
))}
</div>
</li>
))}
Expand Down
4 changes: 2 additions & 2 deletions cypress/test/features/index.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ describe('Features Component', () => {
cy.get('[data-testid="Feature-ul"] [data-testid="Feature-li"]').eq(index).as('feature');

cy.get('@feature').within(() => {
cy.get('h3').should('have.text', feature.name);
cy.get('p').should('have.text', feature.description);
cy.get('h3').should('have.text', `features.${feature.id}.name`);
cy.get('p').should('have.text', `features.${feature.id}.description`);

feature.links.forEach((link, linkIndex) => {
cy.get('a').eq(linkIndex).should('have.attr', 'href').then((hrefValue) => {
Expand Down
29 changes: 28 additions & 1 deletion locales/de/landing-page.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,34 @@
},
"features": {
"title": "Warum AsyncAPI?",
"description": "Verbesserung des aktuellen Stands der ereignisgesteuerten Architekturen (EDA)"
"description": "Verbesserung des aktuellen Stands der ereignisgesteuerten Architekturen (EDA)",

"specification.name": "Spezifikation",
"specification.description": "Ermöglicht es Ihnen, die Schnittstellen von asynchronen APIs zu definieren und ist protokollunabhängig.",
"specification.links.whyasyncapi-spec-documentation-link": "Dokumentation",

"document-apis.name": "APIs dokumentieren",
"document-apis.description": "Verwenden Sie unsere Tools, um Dokumentation auf Build-Ebene, auf einem Server und auf einem Client zu generieren.",
"document-apis.links.whyasyncapi-apis-htmltemplate-link": "HTML-Vorlage",
"document-apis.links.whyasyncapi-apis-reactcomponents-link": "React-Komponente",

"code-generation.name": "Code-Generierung",
"code-generation.description": "Generieren Sie Dokumentation, Code (TypeScript, Java, C# usw.) und mehr aus Ihren AsyncAPI-Dateien.",
"code-generation.links.whyasyncapi-generation-generator-link": "Generator",
"code-generation.links.whyasyncapi-generation-modelina-link": "Modelina",

"community.name": "Gemeinschaft",
"community.description": "Wir sind eine Gemeinschaft von großartigen Menschen, die leidenschaftlich an AsyncAPI und ereignisgesteuerten Architekturen interessiert sind.",
"community.links.whyasyncapi-community-slack-link": "Treten Sie unserem Slack bei",

"open-governance.links.whyasyncapi-governance-more-link": "Erfahren Sie mehr über Offene Governance",
"open-governance.links.whyasyncapi-governance-tsc-link": "TSC-Mitglieder",
"open-governance.name": "Offene Governance",
"open-governance.description": "Unser Open-Source-Projekt ist Teil der Linux Foundation und arbeitet unter einem Modell der offenen Governance.",

"much-more.name": "Und noch viel mehr...",
"much-more.description": "Wir haben viele verschiedene Tools und laden Sie ein, unsere Ideen zu erkunden und neue Ideen für AsyncAPI vorzuschlagen.",
"much-more.links.whyasyncapi-muchmore-github-link": "GitHub-Diskussionen anzeigen"
},
"adopters": {
"title": "Von den weltweit führenden Marken übernommen",
Expand Down
29 changes: 28 additions & 1 deletion locales/en/landing-page.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,34 @@
},
"features": {
"title": "Why AsyncAPI?",
"description": "Improving the current state of Event-Driven Architectures (EDA)"
"description": "Improving the current state of Event-Driven Architectures (EDA)",

"specification.name": "Specification",
"specification.description": "Allows you to define the interfaces of asynchronous APIs and is protocol agnostic.",
"specification.links.whyasyncapi-spec-documentation-link": "Documentation",

"document-apis.name": "Document APIs",
"document-apis.description": "Use our tools to generate documentation at the build level, on a server, and on a client.",
"document-apis.links.whyasyncapi-apis-htmltemplate-link": "HTML Template",
"document-apis.links.whyasyncapi-apis-reactcomponents-link": "React Component",

"code-generation.name": "Code Generation",
"code-generation.description": "Generate documentation, Code (TypeScript, Java, C#, etc), and more out of your AsyncAPI files.",
"code-generation.links.whyasyncapi-generation-generator-link": "Generator",
"code-generation.links.whyasyncapi-generation-modelina-link": "Modelina",

"community.name": "Community",
"community.description": "We're a community of great people who are passionate about AsyncAPI and event-driven architectures.",
"community.links.whyasyncapi-community-slack-link": "Join our Slack",

"open-governance.name": "Open Governance",
"open-governance.description": "Our Open-Source project is part of Linux Foundation and works under an Open Governance model.",
"open-governance.links.whyasyncapi-governance-more-link": "Read more about Open Governance",
"open-governance.links.whyasyncapi-governance-tsc-link": "TSC Members",

"much-more.name": "And much more...",
"much-more.description": "We have many different tools and welcome you to explore our ideas and propose new ideas to AsyncAPI.",
"much-more.links.whyasyncapi-muchmore-github-link": "View GitHub Discussions"
},
"adopters": {
"title": "Adopted by the world leading brands",
Expand Down
Loading