{heading}
{outsideClick && visible[type] && (
diff --git a/components/tools/Filters.tsx b/components/tools/Filters.tsx
index 4f956dca53eb..a565d2130b8b 100644
--- a/components/tools/Filters.tsx
+++ b/components/tools/Filters.tsx
@@ -73,8 +73,11 @@ export default function Filters({ setOpenFilter }: FiltersProps) {
// Set the params key only when the default value of the key changes. This is to know when the user actually applies filter(s).
+ if (checkPaid !== 'all') {
+ searchParams.set('pricing', checkPaid);
+ }
if (checkOwner) {
- searchParams.set('owned', isAsyncAPIOwner ? 'true' : 'false');
+ searchParams.set('owned', checkOwner ? 'true' : 'false');
}
if (checkedTechnology.length > 0) {
searchParams.set('techs', checkedTechnology.join(','));
diff --git a/components/tools/ToolsCard.tsx b/components/tools/ToolsCard.tsx
index eec4062c4c5a..0d725788bf04 100644
--- a/components/tools/ToolsCard.tsx
+++ b/components/tools/ToolsCard.tsx
@@ -90,7 +90,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
@@ -100,7 +100,7 @@ export default function ToolsCard({ toolData }: ToolsCardProp) {
}
>
+
{toolsListData[categoryName].toolsList.map((tool, toolIndex) => (
diff --git a/context/ToolFilterContext.tsx b/context/ToolFilterContext.tsx
index 5bee1a20da2f..b3ea042f49d3 100644
--- a/context/ToolFilterContext.tsx
+++ b/context/ToolFilterContext.tsx
@@ -10,16 +10,20 @@ interface ToolFilterContextProps {
}
export const ToolFilterContext = createContext({
- isPaid: "all",
+ isPaid: 'all',
isAsyncAPIOwner: false,
languages: [],
technologies: [],
- categories: [],
+ categories: []
});
+/**
+ * @description This component provides the context for the tool filter.
+ * @param props.children - The children to be rendered.
+ */
function ToolFilter({ children }: { children: React.ReactNode }) {
const router = useRouter();
- const [isPaid, setIsPaid] = useState("all");
+ const [isPaid, setIsPaid] = useState('all');
const [isAsyncAPIOwner, setIsAsyncAPIOwner] = useState(false);
const [languages, setLanguages] = useState([]);
const [technologies, setTechnologies] = useState([]);
@@ -29,19 +33,17 @@ function ToolFilter({ children }: { children: React.ReactNode }) {
useEffect(() => {
if (!router || !router.isReady) return;
- let { pricing, owned, langs, techs, categories } = router.query;
+ const { pricing, owned, langs, techs, categories: Categories } = router.query;
- setIsPaid(pricing as string || "all");
- setIsAsyncAPIOwner(owned === "true");
- setLanguages((langs as string)?.split(",") || []);
- setTechnologies((techs as string)?.split(",") || []);
- setCategories((categories as string)?.split(",") || []);
+ setIsPaid((pricing as string) || 'all');
+ setIsAsyncAPIOwner(owned === 'true');
+ setLanguages((langs as string)?.split(',') || []);
+ setTechnologies((techs as string)?.split(',') || []);
+ setCategories((Categories as string)?.split(',') || []);
}, [router?.query]);
return (
-
+
{children}
);
diff --git a/package-lock.json b/package-lock.json
index 3c7af87781de..8fc8f3268714 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -69,7 +69,7 @@
"remark-slug": "^7.0.1",
"swiper": "^11.0.7",
"tailwind-merge": "^2.2.1",
- "tailwindcss": "^3.4.1",
+ "tailwindcss": "^3.4.3",
"typescript": "^5.3.3",
"yaml": "^2.3.4"
},
@@ -14447,9 +14447,9 @@
}
},
"node_modules/tailwindcss": {
- "version": "3.4.2",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.2.tgz",
- "integrity": "sha512-1kIzVecynNKMhhX8mPTOwTkkVHupUTMbEvk4n1ByxdM8sQTJ8fE41Y4TdORG6GmiVXHhfZ/++0hiIFJFwfadsA==",
+ "version": "3.4.3",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz",
+ "integrity": "sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==",
"dependencies": {
"@alloc/quick-lru": "^5.2.0",
"arg": "^5.0.2",
diff --git a/package.json b/package.json
index 7982633c17f7..4a900298c9e8 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
"remark-slug": "^7.0.1",
"swiper": "^11.0.7",
"tailwind-merge": "^2.2.1",
- "tailwindcss": "^3.4.1",
+ "tailwindcss": "^3.4.3",
"typescript": "^5.3.3",
"yaml": "^2.3.4"
},
diff --git a/pages/[lang]/tools/cli.tsx b/pages/[lang]/tools/cli.tsx
new file mode 100644
index 000000000000..7dc11473a08d
--- /dev/null
+++ b/pages/[lang]/tools/cli.tsx
@@ -0,0 +1,265 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { BadgeCheckIcon, CodeIcon, DocumentAddIcon, GlobeIcon } from '@heroicons/react/outline';
+import React from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import Button from '../../../components/buttons/Button';
+import GithubButton from '../../../components/buttons/GithubButton';
+import CodeBlock from '../../../components/editor/CodeBlock';
+import GenericLayout from '../../../components/layout/GenericLayout';
+import Heading from '../../../components/typography/Heading';
+import Paragraph from '../../../components/typography/Paragraph';
+import { getAllLanguageSlugs, getLanguage, useTranslation } from '../../../utils/i18n';
+
+interface Feature {
+ name: string;
+ description: () => string | JSX.Element;
+ icon: (props: React.ComponentProps<'svg'>) => JSX.Element;
+}
+
+const features: Feature[] = [
+ {
+ name: 'cli.features.new-files.name',
+ description: () => {
+ const { t } = useTranslation('tools');
+
+ return t('cli.features.new-files.description');
+ },
+ icon: DocumentAddIcon
+ },
+ {
+ name: 'cli.features.validate.name',
+ description: () => {
+ const { t } = useTranslation('tools');
+
+ return t('cli.features.validate.description');
+ },
+ icon: BadgeCheckIcon
+ },
+ {
+ name: 'cli.features.open-studio.name',
+ description: () => {
+ const { t } = useTranslation('tools');
+
+ return (
+ <>
+ {t('cli.features.open-studio.description_pretext')}{' '}
+ /asyncapi.deb /';
+ };
+
+ return (
+
+
+ );
+}
+
+/**
+ * @description Get the language for the CLI page.
+ * @returns { paths: { params: { lang: string } }[]; fallback: boolean }
+ */
+export async function getStaticPaths() {
+ const paths = getAllLanguageSlugs();
+
+ return {
+ paths,
+ fallback: false
+ };
+}
+
+/**
+ * @description Get the language for the CLI page.
+ * @param { params: { lang: string } }
+ * @returns { props: { language: string } }
+ */
+export async function getStaticProps({ params }: any) {
+ const language = getLanguage(params.lang);
+
+ return {
+ props: {
+ language
+ }
+ };
+}
diff --git a/pages/tools/cli.tsx b/pages/tools/cli.tsx
new file mode 100644
index 000000000000..a4a017605274
--- /dev/null
+++ b/pages/tools/cli.tsx
@@ -0,0 +1,213 @@
+import { BadgeCheckIcon, CodeIcon, DocumentAddIcon, GlobeIcon } from '@heroicons/react/outline';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import Button from '../../components/buttons/Button';
+import GithubButton from '../../components/buttons/GithubButton';
+import CodeBlock from '../../components/editor/CodeBlock';
+import GenericLayout from '../../components/layout/GenericLayout';
+import Heading from '../../components/typography/Heading';
+import Paragraph from '../../components/typography/Paragraph';
+
+const features = [
+ {
+ name: 'New files',
+ description: () =>
+ 'Use the CLI tool to quickly create new AsyncAPI files. Select from a range of templates (MQTT, WebSockets, Kafka, and more.)',
+ icon: DocumentAddIcon
+ },
+ {
+ name: 'Validate',
+ description: () =>
+ 'Validate your AsyncAPI documents with the CLI. Quickly get feedback to verify your AsyncAPI document is within the correct format.',
+ icon: BadgeCheckIcon
+ },
+ {
+ name: 'Open Studio',
+ // eslint-disable-next-line react/display-name
+ description: () => (
+ <>
+ Got an AsyncAPI file locally? Run{' '}
+ /asyncapi.deb /';
+ };
+
+ return (
+
+
+ );
+}
diff --git a/pages/tools/generator.tsx b/pages/tools/generator.tsx
new file mode 100644
index 000000000000..7e1fe25ba445
--- /dev/null
+++ b/pages/tools/generator.tsx
@@ -0,0 +1,148 @@
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import Button from '../../components/buttons/Button';
+import GithubButton from '../../components/buttons/GithubButton';
+import GeneratorInstallation from '../../components/GeneratorInstallation';
+import IconCode from '../../components/icons/Code';
+import IconDocuments from '../../components/icons/Documents';
+import IconPowerPlug from '../../components/icons/PowerPlug';
+import GenericLayout from '../../components/layout/GenericLayout';
+import Heading from '../../components/typography/Heading';
+import Paragraph from '../../components/typography/Paragraph';
+
+/**
+ * @description Render the buttons for the Generator page.
+ */
+function renderButtons(): JSX.Element {
+ return (
+
+
+ );
+}
diff --git a/pages/tools/github-actions.tsx b/pages/tools/github-actions.tsx
new file mode 100644
index 000000000000..ae6043721834
--- /dev/null
+++ b/pages/tools/github-actions.tsx
@@ -0,0 +1,93 @@
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import GithubButton from '../../components/buttons/GithubButton';
+import CodeBlock from '../../components/editor/CodeBlock';
+import GenericLayout from '../../components/layout/GenericLayout';
+import Heading from '../../components/typography/Heading';
+import Paragraph from '../../components/typography/Paragraph';
+
+/**
+ * @description Render the buttons for the Github Actions page.
+ */
+function renderButtons(): JSX.Element {
+ return (
+
+
+ );
+}
diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
new file mode 100644
index 000000000000..7ed98f27b12f
--- /dev/null
+++ b/pages/tools/index.tsx
@@ -0,0 +1,45 @@
+import ToolsDashboard from '@/components/tools/ToolsDashboard';
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import GenericLayout from '../../components/layout/GenericLayout';
+import Heading from '../../components/typography/Heading';
+import Paragraph from '../../components/typography/Paragraph';
+import TextLink from '../../components/typography/TextLink';
+import ToolFilter from '../../context/ToolFilterContext';
+
+/**
+ * @description The Tools Index page component.
+ */
+export default function ToolsIndex() {
+ const description = 'Tools Dashboard for AsyncAPI Initiative';
+ const image = '/img/social/tools-dashboard-card.webp';
+
+ return (
+ additionalProperties;
+
+ public Integer getId() { return this.id; }
+ public void setId(Integer id) { this.id = id; }
+
+ public Integer getLumens() { return this.lumens; }
+ public void setLumens(Integer lumens) { this.lumens = lumens; }
+
+ public java.time.OffsetDateTime getSentAt() { return this.sentAt; }
+ public void setSentAt(java.time.OffsetDateTime sentAt) { this.sentAt = sentAt; }
+
+ public Map getAdditionalProperties() { return this.additionalProperties; }
+ public void setAdditionalProperties(Map additionalProperties) { this.additionalProperties = additionalProperties; }
+
+ @Override
+ public String toString() {
+ return "class LightMeasured {\\n" +
+ " id: " + toIndentedString(id) + "\\n" +
+ " lumens: " + toIndentedString(lumens) + "\\n" +
+ " sentAt: " + toIndentedString(sentAt) + "\\n" +
+ " additionalProperties: " + toIndentedString(additionalProperties) + "\\n" +
+ "}";
+ }
+
+ /**
+ * Convert the given object to string with each line indented by 4 spaces
+ * (except the first line).
+ */
+ private String toIndentedString(Object o) {
+ if (o == null) {
+ return "null";
+ }
+ return o.toString().replace("\\n", "\\n ");
+ }
+}`;
+
+/**
+ * @description The Modelina page component.
+ */
+export default function ModelinaPlaygroundPage() {
+ const [error, setError] = useState(undefined);
+ const description =
+ 'Sometimes you just want to generate data models for your payload. Modelina is a library for generating data models based on inputs such as AsyncAPI, OpenAPI, or JSON Schema documents.';
+ const image = '/img/social/modelina-card.jpg';
+
+ const tabs = (
+
+
+ );
+}
diff --git a/pages/tools/parsers.tsx b/pages/tools/parsers.tsx
new file mode 100644
index 000000000000..ee65ebc7c8f0
--- /dev/null
+++ b/pages/tools/parsers.tsx
@@ -0,0 +1,105 @@
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import GithubButton from '../../components/buttons/GithubButton';
+import CodeBlock from '../../components/editor/CodeBlock';
+import GenericLayout from '../../components/layout/GenericLayout';
+import Heading from '../../components/typography/Heading';
+import Paragraph from '../../components/typography/Paragraph';
+
+/**
+ * @description The initial code for the Parsers page.
+ */
+function getCode() {
+ return `import { parse } from '@asyncapi/parser'
+
+const doc = await parse(\`
+asyncapi: '3.0.0'
+info:
+ title: Example
+ version: '1.0.0'
+channels:
+ example:
+ address: example-channel
+ messages:
+ example:
+ payload:
+ type: object
+ properties:
+ exampleField:
+ type: string
+ exampleNumber:
+ type: number
+ exampleDate:
+ type: string
+ format: date-time
+operations:
+ example:
+ action: send
+ channel:
+ $ref: '#/channels/example'
+\`)
+
+console.log(doc.info().title())
+// => Example`;
+}
+
+/**
+ * @description Render the buttons for the Parsers page.
+ */
+function renderButtons(): JSX.Element {
+ return (
+
+
+ );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 53ccebbff611..56834905610f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -67,7 +67,8 @@ const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
- './app/**/*.{js,ts,jsx,tsx,mdx}'
+ './app/**/*.{js,ts,jsx,tsx,mdx}',
+ './config/**/*.json'
],
theme: {
fontWeight: {
diff --git a/types/components/tools/ToolDataType.ts b/types/components/tools/ToolDataType.ts
index 6479f67cc073..ef636d09b7e9 100644
--- a/types/components/tools/ToolDataType.ts
+++ b/types/components/tools/ToolDataType.ts
@@ -2,25 +2,25 @@ export interface Link {
repoUrl?: string;
websiteUrl?: string;
docsUrl?: string;
-};
+}
export interface Language {
name: string;
color: string;
borderColor: string;
-};
+}
export interface Technology {
name: string;
color: string;
borderColor: string;
-};
+}
export interface Category {
name: string;
tag: string;
description: string;
-};
+}
export interface Filter {
categories: string[];
@@ -28,21 +28,21 @@ export interface Filter {
isAsyncAPIOwner?: boolean;
language?: { name: string; color: string; borderColor: string }[];
technology?: { name: string; color: string; borderColor: string }[];
-};
+}
export interface ToolData {
title: string;
description?: string;
links?: Link;
filters: Filter;
-};
+}
export interface ToolsListData {
[category: string]: {
description: string;
toolsList: ToolData[];
- }
-};
+ };
+}
export interface VisibleDataListType {
lang?: boolean;
@@ -51,4 +51,4 @@ export interface VisibleDataListType {
category?: boolean;
pricing?: boolean;
ownership?: boolean;
-};
+}
+ asyncapi start studio
+ {' '}
+ {t('cli.features.open-studio.description_posttext')}
+
+ );
+ },
+ icon: CodeIcon
+ },
+ {
+ name: 'cli.features.open-source.name',
+ description: () => {
+ const { t } = useTranslation('tools');
+
+ return t('cli.features.open-source.description');
+ },
+ icon: GlobeIcon
+ }
+];
+
+/**
+ * @description The CLI tools page that displays the AsyncAPI CLI tool.
+ */
+export default function CliPage() {
+ const { t } = useTranslation('tools');
+
+ /**
+ * @description Render the buttons on the CLI page.
+ * @returns { JSX.Element } The buttons to render on the CLI page.
+ */
+ function renderButtons() {
+ return (
+
+
+ );
+ }
+
+ const description = 'cli.description';
+ const image = '/img/social/cli-card.jpg';
+
+ const getPkgCode = () => {
+ return '# Download latest PKG file\ncurl -OL https://github.com/asyncapi/cli/releases/latest/download/asyncapi.pkg\n# Install application on MacOS\nsudo installer -pkg asyncapi.pkg -target /';
+ };
+
+ const setUpWin = () => {
+ return '# Download latest asyncapi.x64.exe for 64-bit Windows\n https://github.com/asyncapi/cli/releases/latest/download/asyncapi.x64.exe\n# Download asyncapi.x86.exe for 32-bit Windows\n https://github.com/asyncapi/cli/releases/latest/download/asyncapi.x86.exe';
+ };
+
+ const setUpLinux = () => {
+ return '# For Debian based distros, you can install the AsycAPI CLI using the dpkg package manager for Debian\ncurl -OL https://github.com/asyncapi/cli/releases/latest/download/asyncapi.deb\n# To download a specific release of the CLI, run this command in your terminal\ncurl -OL https://github.com/asyncapi/cli/releases/download/
+
+
+
+
+
+ {t('cli.title')}
+ AsyncAPI CLI
+
+ {t(description)}
+
+
+
+
+
+
+ {t('cli.installationTitle')}
+
+ {t('cli.installationDescription')}
+ {renderButtons()}
+
+
+
+
+
+
+ {t('cli.installingTitle')}
+
+
+
+
+
+ {t('cli.exampleTitle')}
+
+
+
+
+
+
+ {t('cli.exampleDescription')}
+
+
+
+
+
+
+
+
+ {t('cli.featuresTitle')}
+
+
+ {t('cli.featuresDescription')}
+
+
+
+
+
+ -
+ {features.map(({ description: Description, ...feature }) => (
+
-
+ + ++
+ {t(feature.name)} + +
+ -
+
+ ++
+
+
+ ))}
+ {renderButtons()}
+ asyncapi start studio{' '}
+ to open our studio in seconds.
+
+ ),
+ icon: CodeIcon
+ },
+ {
+ name: 'Open Source',
+ description: () =>
+ 'All our tools are open source, feel free to contribute new commands or help evolve our existing ones.',
+ icon: GlobeIcon
+ }
+];
+
+/**
+ * @description Render the buttons for the CLI page.
+ */
+function renderButtons(): JSX.Element {
+ return (
+
+
+ );
+}
+
+/**
+ * @description The CLI page component.
+ */
+export default function CliPage() {
+ const description = 'Create, validate, and explore your AsyncAPI files with our CLI tool.';
+ const image = '/img/social/cli-card.jpg';
+
+ const getPkgCode = () => {
+ return '# Download latest PKG file\ncurl -OL https://github.com/asyncapi/cli/releases/latest/download/asyncapi.pkg\n# Install application on MacOS\nsudo installer -pkg asyncapi.pkg -target /';
+ };
+
+ const setUpWin = () => {
+ return '# Download latest asyncapi.x64.exe for 64-bit Windows\n https://github.com/asyncapi/cli/releases/latest/download/asyncapi.x64.exe\n# Download asyncapi.x86.exe for 32-bit Windows\n https://github.com/asyncapi/cli/releases/latest/download/asyncapi.x86.exe';
+ };
+
+ const setUpLinux = () => {
+ return '# For Debian based distros, you can install the AsycAPI CLI using the dpkg package manager for Debian\ncurl -OL https://github.com/asyncapi/cli/releases/latest/download/asyncapi.deb\n# To download a specific release of the CLI, run this command in your terminal\ncurl -OL https://github.com/asyncapi/cli/releases/download/
+
+
+
+
+
+ Interact with AsyncAPI from the comfort of your CLI
+ AsyncAPI CLI
+
+ {description}
+
+
+
+
+
+
+ Installation & Usage
+
+
+ Start using AsyncAPI CLI within seconds by selecting one of our commands to get started.
+
+ {renderButtons()}
+
+
+
+
+
+
+ Installing
+
+
+
+
+
+ Example
+
+
+
+
+
+
+ Create a new AsyncAPI file
+
+
+
+
+
+
+
+
+ Features
+
+
+ Use the AsyncAPI CLI tool to help you create, develop, and maintain your AsyncAPI files.
+
+
+
+
+
+ -
+ {features.map(({ description: Description, ...feature }) => (
+
-
+ + ++
+ {feature.name} + +
+ -
+
+ ++
+
+
+ ))}
+ {renderButtons()}
+
+ {/* }
+ className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
+ /> */}
+
+ );
+}
+
+/**
+ * @description The Generator page component.
+ */
+export default function GeneratorPage() {
+ const description = 'Generate documentation, code, and more out of your AsyncAPI files with the Generator.';
+ const image = '/img/social/generator-card.jpg';
+
+ return (
+
+
+
+
+
+
+
+ Docs, Code, Anything!
+
+ {description}
+
+
+
+
+
+
+ Installation & Usage
+
+
+ Start using Generator really quickly. Select one of the multiple templates we offer and start generating
+ documentation and code in a few seconds.
+
+ {renderButtons()}
+
+
+
+
+ Ready to use
+
+
+ The Generator is our solution to automatically generate documentation and code from your AsyncAPI files.
+ It comes packed with lots of cool features you can't miss. Have a look!
+
+
+
+
+ -
+
-
+ ++++++
+ + {/*+*/} + + HTML & Markdown + ++ Generate beautiful HTML documentation that's easy to share with your team and customers. + Markdown docs that will seat along with your code? Perfect! + +
+ -
+ ++++++
+ +++ Node.js, Java, Python, and more... + ++ Generate code out of your AsyncAPI files in your favourite programming language. Speed up the + time-to-first-prototype. Keep using it even after you wrote your custom business logic. + +
+ -
+ ++++++
+ +++ Highly extensible + ++ Don't see your programming language of choice? Want to generate docs that meet your brand + look and feel? Create your custom templates or extend existing ones. + +
+
+ 
+ 
+
+
+
+ {renderButtons()}
+
+ {/* }
+ className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
+ /> */}
+
+ );
+}
+
+/**
+ * @description Get the code for the Github Actions page.
+ */
+function getCode() {
+ return `name: AsyncAPI documents processing
+
+on:
+ push:
+ branches: [ master ]
+
+jobs:
+ generate:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout repo
+ uses: actions/checkout@v2
+
+ - name: Generating HTML from my AsyncAPI document
+ uses: asyncapi/github-action-for-generator
+
+ - name: Deploy GH page
+ uses: JamesIves/github-pages-deploy-action
+ with:
+ ACCESS_TOKEN: \${{ secrets.GITHUB_TOKEN }}
+ BRANCH: gh-pages
+ FOLDER: generated-html`;
+}
+
+/**
+ * @description The Github Actions page component.
+ */
+export default function GithubActionsPage() {
+ const description = 'Generate docs and code on your GitHub Actions pipeline.';
+ const image = '/img/social/githubactions-card.jpg';
+
+ return (
+
+
+
+
+
+
+ Automate using GitHub Actions
+
+ {description}
+
+
+
+
+ {getCode()}
+
+
+
+
+ Generate docs
+
+
+ Seamlessly integrate the docs generation process with your GitHub pipeline. Make sure your documentation
+ is always up to date. It will be a gift to your team and your future self.
+
+ {renderButtons()}
+
+
+
+
+
+
+ );
+}
diff --git a/pages/tools/modelina.tsx b/pages/tools/modelina.tsx
new file mode 100644
index 000000000000..43423e1e5d57
--- /dev/null
+++ b/pages/tools/modelina.tsx
@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import Button from '../../components/buttons/Button';
+import GithubButton from '../../components/buttons/GithubButton';
+import CodeBlock from '../../components/editor/CodeBlock';
+import IconRocket from '../../components/icons/Rocket';
+import GenericLayout from '../../components/layout/GenericLayout';
+import Heading from '../../components/typography/Heading';
+import Paragraph from '../../components/typography/Paragraph';
+
+const exampleModelinaCode = `import { JavaGenerator, JAVA_COMMON_PRESET } from '@asyncapi/modelina'
+
+const generator = new JavaGenerator({
+ collectionType: "List",
+ presets: [
+ {
+ preset: JAVA_COMMON_PRESET,
+ options: {
+ classToString: true
+ }
+ }
+ ]
+});
+
+// const input = ...AsyncAPI document
+const models = await generator.generate(input)`;
+
+const exampleOutputModel = `import java.util.List;
+import java.util.Map;
+
+public class LightMeasured {
+ private Integer id;
+ private Integer lumens;
+ private java.time.OffsetDateTime sentAt;
+ private Map
+
+
+
+
+
+ AsyncAPI Tools Dashboard
+
+
+ Discover various AsyncAPI tools to optimize your journey! These tools are made by the community, for the
+ community. Have an AsyncAPI tool you want to be featured on this list? Then follow the procedure given in
+ the
+
+ Tool Documentation
+ {' '}
+ file, and show up your AsyncAPI Tool card in the website.
+
+
+
+
+
+
+ Modelina
+
+ {description}
+
+
+
+
+
+ {error && (
+
+
+ Installation & Usage
+
+
+ Start using Modelina really quickly. Select one of the available languages we offer and start generating
+ models from your AsyncAPI document in a few seconds.
+
+
+
+
+ npm install @asyncapi/modelina
+
+
+
+
+ {tabs}
+
+ Error!
+ {typeof error.toString === 'function' ? error.toString() : error}
+
+
+
+
+ )}
+
+ {/* }
+ className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2"
+ /> */}
+
+ );
+}
+
+/**
+ * @description The Parsers page component.
+ */
+export default function ParsersPage() {
+ const description = 'Use our parsers to build your own tools or add AsyncAPI support to your product.';
+ const image = '/img/social/parsers-card.jpg';
+
+ return (
+
+
+
+
+
+
+ Build your own tools
+
+ {description}
+
+
+
+
+ {getCode()}
+
+
+
+
+ JavaScript parser
+
+
+ Parse AsyncAPI documents in your JavaScript tooling and products. It works on Node.js{' '}
+ and browsers.
+
+
+ npm install @asyncapi/parser
+
+ {renderButtons()}
+
+
+