-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #220 from oclif/mdonnalley/update-bin-refs
fix: update bin script references
- Loading branch information
Showing
5 changed files
with
208 additions
and
105 deletions.
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
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 |
|---|---|---|
| @@ -1,121 +1,224 @@ | ||
| import Layout from '@theme/Layout'; | ||
| import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; | ||
| import React from 'react'; | ||
| import Layout from "@theme/Layout"; | ||
| import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; | ||
| import React from "react"; | ||
|
|
||
| import {useColorMode} from '@docusaurus/theme-common'; | ||
| import { useColorMode } from "@docusaurus/theme-common"; | ||
|
|
||
| function docUrl(doc, language) { | ||
| const {siteConfig} = useDocusaurusContext(); | ||
| return siteConfig.baseUrl + 'docs/' + (language ? language + '/' : '') + doc; | ||
| const { siteConfig } = useDocusaurusContext(); | ||
| return siteConfig.baseUrl + "docs/" + (language ? language + "/" : "") + doc; | ||
| } | ||
|
|
||
| function toTitleCase(str) { | ||
| return str.split(' ') | ||
| .map(w => w[0].toUpperCase() + w.substring(1).toLowerCase()) | ||
| .join(' '); | ||
| return str | ||
| .split(" ") | ||
| .map((w) => w[0].toUpperCase() + w.substring(1).toLowerCase()) | ||
| .join(" "); | ||
| } | ||
|
|
||
| const ImageSwitcher = ({lightImageSrc, darkImageSrc, width, className}) => { | ||
| const ImageSwitcher = ({ lightImageSrc, darkImageSrc, width, className }) => { | ||
| return ( | ||
| <img width={width ?? 512} | ||
| className={className ?? 'center'} | ||
| src={useColorMode().colorMode === 'dark' ? darkImageSrc : lightImageSrc} | ||
| alt='oclif'/> | ||
| ) | ||
| } | ||
| <img | ||
| width={width ?? 512} | ||
| className={className ?? "center"} | ||
| src={useColorMode().colorMode === "dark" ? darkImageSrc : lightImageSrc} | ||
| alt="oclif" | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| const Example = () => { | ||
| return ( | ||
| <pre className={useColorMode().colorMode === 'dark' ? 'get-started-example-dark' : 'get-started-example'}> | ||
| <code> | ||
| <span className='block'><span className='opacity--60'>$</span> npx oclif generate mynewcli</span> | ||
| <span className='block padding-bottom--sm opacity--60'>? npm package name (mynewcli): mynewcli</span> | ||
| <span className='block padding-bottom--sm'><span className='opacity--60'>$</span> cd mynewcli</span> | ||
| <span className='block'><span className='opacity--60'>$</span> ./bin/run hello world</span> | ||
| <span className='block opacity--60'>hello world! (./src/commands/hello/world.ts)</span> | ||
| </code> | ||
| </pre> | ||
| ) | ||
| } | ||
| <pre | ||
| className={ | ||
| useColorMode().colorMode === "dark" | ||
| ? "get-started-example-dark" | ||
| : "get-started-example" | ||
| } | ||
| > | ||
| <code> | ||
| <span className="block"> | ||
| <span className="opacity--60">$</span> npx oclif generate mynewcli | ||
| </span> | ||
| <span className="block padding-bottom--sm opacity--60"> | ||
| ? npm package name (mynewcli): mynewcli | ||
| </span> | ||
| <span className="block padding-bottom--sm"> | ||
| <span className="opacity--60">$</span> cd mynewcli | ||
| </span> | ||
| <span className="block"> | ||
| <span className="opacity--60">$</span> ./bin/run.js hello world | ||
| </span> | ||
| <span className="block opacity--60"> | ||
| hello world! (./src/commands/hello/world.ts) | ||
| </span> | ||
| </code> | ||
| </pre> | ||
| ); | ||
| }; | ||
|
|
||
| const CompanyLogo = ({width, viewBox, href, company}) => { | ||
| const alt = `${toTitleCase(company)} CLI` | ||
| const src = `img/${company}-logo.svg` | ||
| const CompanyLogo = ({ width, viewBox, href, company }) => { | ||
| const alt = `${toTitleCase(company)} CLI`; | ||
| const src = `img/${company}-logo.svg`; | ||
| return ( | ||
| <a href={href} className='company-logo' target='_blank'> | ||
| <img alt={alt} src={src} width={width} viewBox={viewBox}/> | ||
| <a href={href} className="company-logo" target="_blank"> | ||
| <img alt={alt} src={src} width={width} viewBox={viewBox} /> | ||
| </a> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default (props) => { | ||
| return <Layout> | ||
| <div> | ||
| <main className='homepage page-content' aria-label='Content'> | ||
| <section className='hero'> | ||
| <div className='container'> | ||
| <ImageSwitcher lightImageSrc={'img/oclif.svg'} darkImageSrc={'img/oclif_rev.svg'}/> | ||
| <h1 className='hero__title center code-font padding-vert--lg'>The Open CLI Framework</h1> | ||
| <h2 className='hero__subtitle center'>Create command line tools your users love</h2> | ||
| <div className='row'> | ||
| <div className='col col--6 col--offset-3'> | ||
| <p className='center'>oclif is an open source framework for building a command line interface (CLI) in Node.js and Typescript. Create CLIs with a few flags or advanced CLIs that have subcommands. oclif makes it easy for you to build CLIs for your company, service, or your own development needs.</p> | ||
| return ( | ||
| <Layout> | ||
| <div> | ||
| <main className="homepage page-content" aria-label="Content"> | ||
| <section className="hero"> | ||
| <div className="container"> | ||
| <ImageSwitcher | ||
| lightImageSrc={"img/oclif.svg"} | ||
| darkImageSrc={"img/oclif_rev.svg"} | ||
| /> | ||
| <h1 className="hero__title center code-font padding-vert--lg"> | ||
| The Open CLI Framework | ||
| </h1> | ||
| <h2 className="hero__subtitle center"> | ||
| Create command line tools your users love | ||
| </h2> | ||
| <div className="row"> | ||
| <div className="col col--6 col--offset-3"> | ||
| <p className="center"> | ||
| oclif is an open source framework for building a command | ||
| line interface (CLI) in Node.js and Typescript. Create CLIs | ||
| with a few flags or advanced CLIs that have subcommands. | ||
| oclif makes it easy for you to build CLIs for your company, | ||
| service, or your own development needs. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='row'> | ||
| <div className='center'> | ||
| <Example/> | ||
| <a className='button button--info button--lg shadow--tl' href={docUrl('introduction.html', props.language)}> | ||
| Get Started → | ||
| </a> | ||
| <div className="row"> | ||
| <div className="center"> | ||
| <Example /> | ||
| <a | ||
| className="button button--info button--lg shadow--tl" | ||
| href={docUrl("introduction.html", props.language)} | ||
| > | ||
| Get Started → | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section className='hero padding--sm'> | ||
| <div className='container top-border'> | ||
| <div className='row'> | ||
| <div className='col col--3'> | ||
| <h2><span className='margin-right--xs'>⚡</span>Ready to go</h2> | ||
| <p>Scaffold a fully functional CLI to get started quickly. oclif packages our years of experience into out-of-the-box functionality for argument parsing, command testing, and auto-documentation of CLI features.</p> | ||
| </div> | ||
| <div className='col col--3'> | ||
| <h2><span className='margin-right--xs'>👐</span>Open source</h2> | ||
| <p>oclif is <a href='https://github.com/oclif/oclif/blob/main/LICENSE'>open source</a> and free to use or modify. We think you’ll love it too and you can also help make it better.</p> | ||
| </div> | ||
| <div className='col col--3'> | ||
| <h2><span className='margin-right--xs'>✅</span>Extendable</h2> | ||
| <p>You or your users can easily extend your CLI functionality to meet custom needs using plugins. Plugins are modular and shareable, encouraging reuse.</p> | ||
| </div> | ||
| <div className='col col--3'> | ||
| <h2><span className='margin-right--xs'>🔒</span>Trusted</h2> | ||
| <p>oclif is actively used to build the <a href='https://github.com/heroku/cli' className='dim mid-gray'>Heroku</a> and <a href='https://developer.salesforce.com/tools/sfdxcli' className='dim mid-gray'>Salesforce CLIs</a>, powering millions of interactions for developers every day.</p> | ||
| </section> | ||
| <section className="hero padding--sm"> | ||
| <div className="container top-border"> | ||
| <div className="row"> | ||
| <div className="col col--3"> | ||
| <h2> | ||
| <span className="margin-right--xs">⚡</span>Ready to go | ||
| </h2> | ||
| <p> | ||
| Scaffold a fully functional CLI to get started quickly. | ||
| oclif packages our years of experience into out-of-the-box | ||
| functionality for argument parsing, command testing, and | ||
| auto-documentation of CLI features. | ||
| </p> | ||
| </div> | ||
| <div className="col col--3"> | ||
| <h2> | ||
| <span className="margin-right--xs">👐</span>Open source | ||
| </h2> | ||
| <p> | ||
| oclif is{" "} | ||
| <a href="https://github.com/oclif/oclif/blob/main/LICENSE"> | ||
| open source | ||
| </a>{" "} | ||
| and free to use or modify. We think you’ll love it too and | ||
| you can also help make it better. | ||
| </p> | ||
| </div> | ||
| <div className="col col--3"> | ||
| <h2> | ||
| <span className="margin-right--xs">✅</span>Extendable | ||
| </h2> | ||
| <p> | ||
| You or your users can easily extend your CLI functionality | ||
| to meet custom needs using plugins. Plugins are modular and | ||
| shareable, encouraging reuse. | ||
| </p> | ||
| </div> | ||
| <div className="col col--3"> | ||
| <h2> | ||
| <span className="margin-right--xs">🔒</span>Trusted | ||
| </h2> | ||
| <p> | ||
| oclif is actively used to build the{" "} | ||
| <a | ||
| href="https://github.com/heroku/cli" | ||
| className="dim mid-gray" | ||
| > | ||
| Heroku | ||
| </a>{" "} | ||
| and{" "} | ||
| <a | ||
| href="https://developer.salesforce.com/tools/sfdxcli" | ||
| className="dim mid-gray" | ||
| > | ||
| Salesforce CLIs | ||
| </a> | ||
| , powering millions of interactions for | ||
| developers every day. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </section> | ||
|
|
||
| <section className='hero padding--sm'> | ||
| <div className='container top-border'> | ||
| <div className='row'> | ||
| <div className='col col--6 col--offset-3'> | ||
| <span className='center'> | ||
| <h2 className='hero__subtitle'>CLIs built using <ImageSwitcher lightImageSrc={'img/oclif.svg'} darkImageSrc={'img/oclif_rev.svg'} className='margin-left--xs inline-block' width={128}/></h2> | ||
| <p>With oclif you can build command line tools for your business, open source project, or your own development workflow. Check out what others have built.</p> | ||
| </span> | ||
| <section className="hero padding--sm"> | ||
| <div className="container top-border"> | ||
| <div className="row"> | ||
| <div className="col col--6 col--offset-3"> | ||
| <span className="center"> | ||
| <h2 className="hero__subtitle"> | ||
| CLIs built using{" "} | ||
| <ImageSwitcher | ||
| lightImageSrc={"img/oclif.svg"} | ||
| darkImageSrc={"img/oclif_rev.svg"} | ||
| className="margin-left--xs inline-block" | ||
| width={128} | ||
| /> | ||
| </h2> | ||
| <p> | ||
| With oclif you can build command line tools for your | ||
| business, open source project, or your own development | ||
| workflow. Check out what others have built. | ||
| </p> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className='row'> | ||
| <div className='company-container center'> | ||
| <CompanyLogo company='salesforce' href='https://github.com/salesforcecli/cli' width='96' viewBox='16 16 0 0'/> | ||
| <CompanyLogo company='heroku' href='https://github.com/heroku/cli' width='96' viewBox='16 16 0 0'/> | ||
| <CompanyLogo company='twilio' href='https://twilio.com/cli'/> | ||
| <CompanyLogo company='shopify' href='https://shopify.dev/apps/tools/cli'/> | ||
| <div className="row"> | ||
| <div className="company-container center"> | ||
| <CompanyLogo | ||
| company="salesforce" | ||
| href="https://github.com/salesforcecli/cli" | ||
| width="96" | ||
| viewBox="16 16 0 0" | ||
| /> | ||
| <CompanyLogo | ||
| company="heroku" | ||
| href="https://github.com/heroku/cli" | ||
| width="96" | ||
| viewBox="16 16 0 0" | ||
| /> | ||
| <CompanyLogo company="twilio" href="https://twilio.com/cli" /> | ||
| <CompanyLogo | ||
| company="shopify" | ||
| href="https://shopify.dev/apps/tools/cli" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
| </div> | ||
| </Layout>; | ||
| </section> | ||
| </main> | ||
| </div> | ||
| </Layout> | ||
| ); | ||
| }; |