-
-
Notifications
You must be signed in to change notification settings - Fork 681
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
chore(migrate): migrate tools pages #2876
Merged
Merged
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
1cf6330
feat: migrate tools page
Shurtu-gal 8a25a8d
chore: run prettier
Shurtu-gal 85b0bf4
chore: migrate code component to new version
Shurtu-gal 6cfddbc
Merge branch 'migrate-ts' into migrate-tools
Shurtu-gal b806222
resolved lint errors
akshatnema 91a0e39
Merge branch 'migrate-ts' into migrate-tools
akshatnema b0a95ca
Added tools cli page
akshatnema e8953b4
Merge branch 'migrate-ts' into migrate-tools
akshatnema bd63ecc
changes according to code review
akshatnema a370a67
added padding before lineNumbers
akshatnema 003c71d
fix codeblock
anshgoyalevil File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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{' '} | ||
| <code className=' rounded bg-gray-200 px-1 py-0.5 font-mono text-sm text-gray-900'>asyncapi start studio</code>{' '} | ||
| 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 ( | ||
| <div className='mt-8'> | ||
| <GithubButton | ||
| className='mt-2 block w-full sm:w-auto md:mt-0 md:inline-block' | ||
| href='https://www.github.com/asyncapi/cli' | ||
| /> | ||
| <Button | ||
| text='View Docs' | ||
| href='/docs/tools/cli' | ||
| className='mt-2 block w-full sm:w-auto md:ml-2 md:mt-0 md:inline-block' | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * @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/<replace this with the specific CLI version e.g v0.13.0>/asyncapi.deb /'; | ||
| }; | ||
|
|
||
| return ( | ||
| <GenericLayout title='CLI' description={description} image={image} wide> | ||
| <div className='overflow-hidden py-12'> | ||
| <div className='relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8'> | ||
| <div className='relative'> | ||
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg} className='text-center'> | ||
| <span className='hidden md:block'>Interact with AsyncAPI from the comfort of your CLI</span> | ||
| <span className='md:hidden'>AsyncAPI CLI</span> | ||
| </Heading> | ||
| <Paragraph className='mx-auto mt-4 max-w-3xl text-center'>{description}</Paragraph> | ||
| </div> | ||
|
|
||
| <div className='relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8'> | ||
| <div className='relative lg:mt-8'> | ||
| <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}> | ||
| Installation & Usage | ||
| </Heading> | ||
| <Paragraph className='mt-3 lg:pr-4'> | ||
| Start using AsyncAPI CLI within seconds by selecting one of our commands to get started. | ||
| </Paragraph> | ||
| {renderButtons()} | ||
| </div> | ||
|
|
||
| <div className='relative mx-auto mt-8 w-full space-y-10'> | ||
| <div> | ||
| <Heading | ||
| level={HeadingLevel.h3} | ||
| typeStyle={HeadingTypeStyle.mdSemibold} | ||
| className='mb-4 text-center md:text-left' | ||
| > | ||
| Installing | ||
| </Heading> | ||
| <CodeBlock | ||
| language='generator-cli' | ||
| textSizeClassName='text-sm' | ||
| className='shadow-lg' | ||
| codeBlocks={[ | ||
| { | ||
| language: 'npm', | ||
| code: 'npm install -g @asyncapi/cli' | ||
| }, | ||
| { | ||
| language: 'brew', | ||
| code: 'brew install asyncapi' | ||
| }, | ||
| { | ||
| language: '.pkg', | ||
| code: getPkgCode() | ||
| }, | ||
| { | ||
| language: 'windows', | ||
| code: setUpWin() | ||
| }, | ||
| { | ||
| language: 'linux', | ||
| code: setUpLinux() | ||
| } | ||
| ]} | ||
| /> | ||
| </div> | ||
|
|
||
| <div> | ||
| <Heading | ||
| level={HeadingLevel.h3} | ||
| typeStyle={HeadingTypeStyle.mdSemibold} | ||
| className='mb-4 text-center md:text-left' | ||
| > | ||
| Example | ||
| </Heading> | ||
| <div className='space-y-5'> | ||
| <div> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='mb-4'> | ||
| Create a new AsyncAPI file | ||
| </Paragraph> | ||
| <CodeBlock | ||
| language='generator-cli' | ||
| textSizeClassName='text-sm' | ||
| className='shadow-lg' | ||
| codeBlocks={[ | ||
| { | ||
| language: 'npm', | ||
| code: 'asyncapi new' | ||
| } | ||
| ]} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='mt-20 bg-white lg:py-12'> | ||
| <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'> | ||
| <div className='mb-16 text-center'> | ||
| <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}> | ||
| Features | ||
| </Heading> | ||
| <Paragraph className='mx-auto mt-3 max-w-lg text-center lg:pr-4'> | ||
| Use the AsyncAPI CLI tool to help you create, develop, and maintain your AsyncAPI files. | ||
| </Paragraph> | ||
| </div> | ||
|
|
||
| <div className='mt-10'> | ||
| <dl className=' md:grid lg:grid-cols-2 lg:space-y-0'> | ||
| {features.map(({ description: Description, ...feature }) => ( | ||
| <div key={feature.name} className='relative mb-10'> | ||
| <dt> | ||
| <div className='absolute flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900'> | ||
| <feature.icon className='size-6' aria-hidden='true' /> | ||
| </div> | ||
| <Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.smSemibold} className='ml-16'> | ||
| {feature.name} | ||
| </Heading> | ||
| </dt> | ||
| <dd className='ml-16 mt-2 pr-10'> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md}> | ||
| <Description /> | ||
| </Paragraph> | ||
| </dd> | ||
| </div> | ||
| ))} | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='mt-16 text-center'>{renderButtons()}</div> | ||
| </div> | ||
| </div> | ||
| </GenericLayout> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className='mt-8'> | ||
| {/* <Button | ||
| text="Learn more" | ||
| href="/docs/tools/generator" | ||
| iconPosition="left" | ||
| icon={<IconRocket className="inline-block w-6 h-6 -mt-1" />} | ||
| className="w-full mb-2 sm:w-auto sm:mb-0 sm:mr-2" | ||
| /> */} | ||
| <GithubButton className='w-full sm:w-auto' href='https://www.github.com/asyncapi/generator' /> | ||
| <Button | ||
| text='View Docs' | ||
| href='/docs/tools/generator' | ||
| className='ml-2 mt-2 block w-full sm:w-auto md:mt-0 md:inline-block' | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * @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 ( | ||
| <GenericLayout title='Generator' description={description} image={image} wide> | ||
| <div className='overflow-hidden py-12'> | ||
| <div className='relative mx-auto max-w-xl px-4 sm:px-6 lg:max-w-screen-xl lg:px-8'> | ||
| <div className='relative text-center'> | ||
| <Heading level={HeadingLevel.h1} typeStyle={HeadingTypeStyle.lg}> | ||
| Docs, Code, Anything! | ||
| </Heading> | ||
| <Paragraph className='mt-4'>{description}</Paragraph> | ||
| </div> | ||
|
|
||
| <div className='relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8'> | ||
| <div className='relative lg:mt-8'> | ||
| <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}> | ||
| Installation & Usage | ||
| </Heading> | ||
| <Paragraph className='mt-3 lg:pr-4'> | ||
| Start using Generator really quickly. Select one of the multiple templates we offer and start generating | ||
| documentation and code in a few seconds. | ||
| </Paragraph> | ||
| {renderButtons()} | ||
| </div> | ||
|
|
||
| <GeneratorInstallation /> | ||
|
|
||
| <div className='relative mt-20'> | ||
| <Heading level={HeadingLevel.h2} typeStyle={HeadingTypeStyle.mdSemibold}> | ||
| Ready to use | ||
| </Heading> | ||
| <Paragraph className='mt-3 lg:pr-4'> | ||
| 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! | ||
| </Paragraph> | ||
|
|
||
| <ul className='mt-10 lg:pr-4'> | ||
| <li> | ||
| <div className='flex'> | ||
| <div className='shrink-0'> | ||
| <div className='flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900'> | ||
| <IconDocuments className='size-6' /> | ||
| </div> | ||
| </div> | ||
| <div className='ml-4'> | ||
| {/* <Heading level="h4" typeStyle="heading-sm-semibold"> */} | ||
| <Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.smSemibold}> | ||
| HTML & Markdown | ||
| </Heading> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2'> | ||
| Generate beautiful HTML documentation that's easy to share with your team and customers. | ||
| Markdown docs that will seat along with your code? Perfect! | ||
| </Paragraph> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li className='mt-10'> | ||
| <div className='flex'> | ||
| <div className='shrink-0'> | ||
| <div className='flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900'> | ||
| <IconCode className='size-6' /> | ||
| </div> | ||
| </div> | ||
| <div className='ml-4'> | ||
| <Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.smSemibold}> | ||
| Node.js, Java, Python, and more... | ||
| </Heading> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2'> | ||
| 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. | ||
| </Paragraph> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li className='mt-10'> | ||
| <div className='flex'> | ||
| <div className='shrink-0'> | ||
| <div className='flex size-12 items-center justify-center rounded-md border border-gray-900 bg-secondary-100 text-gray-900'> | ||
| <IconPowerPlug className='size-6' /> | ||
| </div> | ||
| </div> | ||
| <div className='ml-4'> | ||
| <Heading level={HeadingLevel.h4} typeStyle={HeadingTypeStyle.smSemibold}> | ||
| Highly extensible | ||
| </Heading> | ||
| <Paragraph typeStyle={ParagraphTypeStyle.md} className='mt-2'> | ||
| 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. | ||
| </Paragraph> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div className='relative -mx-4 mt-10 lg:mt-0'> | ||
| <img className='relative mx-auto rounded shadow-lg' src='/img/tools/generator-1.png' alt='' /> | ||
| <img className='relative mx-auto mt-8 rounded shadow-lg' src='/img/tools/generator-2.png' alt='' /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className='mt-16 text-center'>{renderButtons()}</div> | ||
| </div> | ||
| </GenericLayout> | ||
| ); | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This needs to be
githubButtonfor the translation string to work