18

GitHub - glaucia86/glaucia86: Desenvolvimento de um Cartão Pessoal via NPX

 4 years ago
source link: https://github.com/glaucia86/glaucia86
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

Build GHTopLanguages Vulnerabilities RepoSize Downloads Issues PullRequests HitCount

Cartão Pessoal em NPX - Glaucia Lemos ?

68747470733a2f2f692e706f7374696d672e63632f534b4631675948562f53637265656e2d53686f742d30362d30342d31392d61742d30312d31392d504d2e706e67

Desenvolvimento de um package que simula um cartão pessoal. O exemplo desenvolvido aqui foi baseado no repositório do ilustre Tierney Cyren

No caso aqui, estou usando os meus dados para criar o meu Cartão Pessoal. O pacote, que nesse caso é o meu cartão pessoal, encontra-se disponível no site do npmjs pelo link:

Para instalar o package do meu cartão pessoal, bastam executar o seguinte comando abaixo:

> npm install glaucia_lemos86

Recursos Utilizados: ?

Okay... Curti! Quero fazer o meu.. Como faço?! ?

Bastam seguir os passos abaixo:

  1. Crie uma pasta do projeto de acordo com o seu nome do GitHub e siga os passos abaixo:
> mkdir glaucia86

> cd glaucia86

> npm init 

> mkdir bin

> touch card.js
  1. Após criar a estrutura do projeto, execute os seguintes comandos para incluir os seguintes pacotes no arquivo package.json:
> npm install standard --save-dev
> npm install chalk --save
> npm install boxen --save
> npm install commander --save
  1. Feito isso, agora copie o código abaixo e coloque no arquivo card.js: (inclua os seus dados!!)
#!/usr/bin/env node
// Usado para dizer ao Node.js que se trata de uma ferramenta do CLI

// Declarando os módulos:
const chalk = require('chalk')
const boxen = require('boxen')

// Definindo as opções para o ‘boxen’:
const options = {
  padding: 1,
  margin: 1,
  borderStyle: 'round'
}

// Inclusão do Text e mais as definições do ‘chalk’:
const data = {
  name: chalk.white('Glaucia Lemos /'),
  handle: chalk.cyan('glaucia_lemos86'),
  work: chalk.white('Regional Cloud Developer at Microsoft'),
  twitter: chalk.cyan('https://twitter.com/glaucia_lemos86'),
  github: chalk.cyan('https://github.com/glaucia86'),
  linkedin: chalk.cyan('https://www.linkedin.com/in/glaucialemos/'),
  medium: chalk.cyan('https://medium.com/@glaucia86'),
  web: chalk.cyan('https://code4coders.wordpress.com/'),
  npx: chalk.white('npx glaucia_lemos86'),
  labelWork: chalk.white.bold('      Work:'),
  labelTwitter: chalk.white.bold('   Twitter:'),
  labelGitHub: chalk.white.bold('    GitHub:'),
  labelLinkedIn: chalk.white.bold('  LinkedIn:'),
  labelMedium: chalk.white.bold('    Medium:')
  labelWeb: chalk.white.bold('       Web:'),
  labelCard: chalk.white.bold('      Card:')
}

// Aqui será a saída do nosso Cartão Pessoal em NPX:
const newline = '\n'
const heading = `${data.name} ${data.handle}`
const working = `${data.labelWork}  ${data.work}`
const twittering = `${data.labelTwitter}  ${data.twitter}`
const githubing = `${data.labelGitHub}  ${data.github}`
const linkedining = `${data.labelLinkedIn}  ${data.linkedin}`
const mediuming = `${data.labelMedium}  ${data.medium}`
const webing = `${data.labelWeb}  ${data.web}`
const carding = `${data.labelCard}  ${data.npx}`

// Aqui devemos colocar toda a nossa saída numa única variável para que possamos usar 
// o ‘boxen de maneira efetiva: 
const output = heading + newline + newline + working + newline + twittering + newline + githubing + newline + linkedining + newline + mediuming + newline + webing + newline + newline + carding

console.log(chalk.green(boxen(output, options)))
  1. Execute o comando abaixo para que possamos verificar a versão que possuem do npm:
> npm version major
  1. Após verificar qual a versão do npm que possuem, execute o comando abaixo:
> npm adduser
  1. Enfim, vamos publicar o nosso pacote para o site do npmjs. Para isso, basta executar o seguinte comando abaixo:
> npm publish
  1. E finalmente... execute o comando abaixo para visualizar o seu cartão pessoal criado:
> npx glaucia_lemos86 

E vòilá! Aparecerá o seu Cartão Pessoal!! ?

Screen-Shot-06-04-19-at-01-19-PM.png

A versão da foto foi aprimorada. Aqui no README.md só estou explicando como desenvolver de uma maneira mais simples. Fiquem à vontade para alterarem o cartão pessoal de vocês!!! ?

Agradecimentos! ?

Conforme mencionado acima, esse projeto foi baseado pelo repositório do Tierney Cyren. So, I would like to say thank you @bitandbang for your contribution in this awesome project! NPX Card Profile ⭐️⭐️⭐️

Links & Recursos Adicionais ?

Querem Propor Melhorias no Código? Façam Pull Request!!!

Caso queiram que eu implemente algo no código, abram uma ISSUE nesse repositório. Assim, todos poderão colaborar para o melhor desenvolvimento desse projeto. E sintam-se à vontade em fazer Pull Requests!! ❤️❤️❤️


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK