From b7565d808c98b2bf8075747e422be2f4b1b50133 Mon Sep 17 00:00:00 2001 From: David Boyne Date: Mon, 29 Nov 2021 12:03:28 +0000 Subject: [PATCH] feat: adding CLI tool on the website (449) (#450) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: David Boyne Co-authored-by: Alejandra Quetzalli Co-authored-by: Maciej Urbańczyk Co-authored-by: Fran Méndez --- components/navigation/toolingItems.js | 2 + package-lock.json | 5 + package.json | 1 + pages/tools/cli.js | 174 ++++++++++++++++++++++++++ 4 files changed, 182 insertions(+) create mode 100644 pages/tools/cli.js diff --git a/components/navigation/toolingItems.js b/components/navigation/toolingItems.js index 813a1cb19d25..d7d7254473bd 100644 --- a/components/navigation/toolingItems.js +++ b/components/navigation/toolingItems.js @@ -5,10 +5,12 @@ import IconModelina from '../icons/Modelina' import IconGithubActions from '../icons/GithubActions' import IconParser from '../icons/Parser' // import IconPlugins from '../icons/Plugins' +import { TerminalIcon } from '@heroicons/react/outline'; export default [ { href: 'https://studio.asyncapi.com/', icon: IconHub, title: 'Studio', description: 'Visually design your AsyncAPI files and event-driven architecture.', beta: true }, { href: '/tools/generator', icon: IconGenerator, title: 'Generator', description: 'Use your AsyncAPI files to generate documentation, code, anything!' }, + { href: '/tools/cli', icon: TerminalIcon, title: 'CLI', description: 'Interact with AsyncAPI from the comfort of your CLI.' }, { href: '/tools/modelina', icon: IconModelina, title: 'Modelina', description: 'Sometimes you just want to generate data models from your payload.' }, // { href: '/react', icon: IconReact, title: 'React Component', description: 'Embed your AsyncAPI documentation in your React application.' }, { href: '/tools/github-actions', icon: IconGithubActions, title: 'Github Actions', description: 'Automate the validation and generation of documentation.' }, diff --git a/package-lock.json b/package-lock.json index 512a3333bbf0..eb0ec8350bae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1230,6 +1230,11 @@ "purgecss": "^2.3.0" } }, + "@heroicons/react": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.5.tgz", + "integrity": "sha512-UDMyLM2KavIu2vlWfMspapw9yii7aoLwzI2Hudx4fyoPwfKfxU8r3cL8dEBXOjcLG0/oOONZzbT14M1HoNtEcg==" + }, "@jsdevtools/ono": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz", diff --git a/package.json b/package.json index 2ab2e72358af..3107713dc765 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "@asyncapi/modelina": "^0.39.6", "@fec/remark-a11y-emoji": "^1.0.0", "@fullhuman/postcss-purgecss": "^2.2.0", + "@heroicons/react": "^1.0.5", "@mdx-js/loader": "^1.6.4", "@mdx-js/react": "^1.6.4", "@monaco-editor/react": "^3.3.0", diff --git a/pages/tools/cli.js b/pages/tools/cli.js new file mode 100644 index 000000000000..f797e40f049c --- /dev/null +++ b/pages/tools/cli.js @@ -0,0 +1,174 @@ +import GenericLayout from '../../components/layout/GenericLayout'; +import GithubButton from '../../components/buttons/GithubButton'; + +import { + DocumentAddIcon, + BadgeCheckIcon, + GlobeIcon, + CodeIcon, +} from '@heroicons/react/outline'; + +import CodeBlock from '../../components/editor/CodeBlock'; + +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 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, + }, +]; + +export default function CliPage() { + function renderButtons() { + return ( +
+ +
+ ); + } + + const description = + 'Create, validate, and explore your AsyncAPI files with our CLI tool.'; + const image = '/img/social/generator.png'; + + return ( + +
+
+
+

+ + 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()}
+
+
+ + ); +}