npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

glaucia_lemos86

v4.0.3

Published

Pacote que simula um Cartão Pessoal da Glaucia Lemos (@glaucia86) em npx. Esse projeto foi baseado pelo repositório do Tierney Cyren (@bitandbang)

Downloads

37

Readme

Build GHTopLanguages Vulnerabilities RepoSize Downloads Issues PullRequests HitCount

Cartão Pessoal em NPX - Glaucia Lemos :floppy_disk:

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: :fire:

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

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!! :heart_eyes:

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! :smiley:

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 :star::star::star:

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!! ❤️ ❤️ ❤️