Code Monkey home page Code Monkey logo

cli-portfolio-template's Introduction

CLI Portfolio Template

This is a template repository that lets you create an npx <yourName> cli portfolio extremely quickly. It is using React Ink.

Demo

npx-cli-portfolio.mp4

How to use this template

Prequisities

  • A GitHub account
  • A NPM account
  • A computer with NodeJS v10 or above and NPM installed (Note that NPM v5.2 or later is used for npx)

Cloning the template

Firstly, you need to click the green "Use this template" button on the top right corner image

Next, you will be presented with this page-

image

Here you can fill up anything for the repository name (try to keep it in accordance with the topic)

Note that putting your GitHub username for this repository won't work as it will overwrite your GitHub profile README repository

Now click the green button saying "Create repository from template"

image

Well done!!! Now you have created your cli portfolio repository. The next step would be to clone it down

image

Editing the required files

Now fill in the source/data.json file with your details. Note that the fields there are just given as an example, you can customize it to your preference by adding, renaming, and removing fields. Just remember to follow the JSON syntax.

Next, go to the package.json file.

image

  • Here in the name field, put in your name (note that it shouldn't have any whitespace characters and must be lowercase. This will be your npm package name)
  • In the url field under repository, put your GitHub repository url.
  • You can also fill out the keywords field by adding keywords as strings in the array.

We also need to edit the help command so go to source/cli.tsx and put in the package name in the field that says <package_name_here>

That is it!!! You are done with making your portfolio. Make sure you have NodeJS and NPM installed and then run npm start (this is important to populate th resulting js files with the updated details) to see your CLI portfolio. Now you must publish the changes to GitHub and publish the package on the NPM registry.

Note that you can also edit this README.md file.

Publishing changes to GitHub

Run the following commands -

git add -A
git commit -m "Personalized cli-portfolio with my details"

You might want to customize the commit message to your liking.

git push -u origin master

Publishing the package to the NPM Registry

You will need an NPM account for this which you can make here.

Note that this email will be a part of metadata of any packages you publish hence will be public.

Next, we need to login to the NPM CLI. Do this by running the following command -

npm login

Enter your username, password, and public email address

Now go to the project directory and run the following command -

npm publish --access=public

That is it!!!

Now you can run npx <yourPackagename> to see your cli-portfolio

Next Steps

You might choose to customize the portfolio further. You can do this by editing the Field.tsx and ui.tsx files. Make sure to increase the npm version with the npm version command each time you wish to publish the package to the registry. Also, don't forget to commit the changes to GitHub first.

Contributing

Feel free to open a pull request.

cli-portfolio-template's People

Contributors

anishde12020 avatar imsaptarshi avatar

Stargazers

Manya Chaudhary avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.