Publishing images to be included in README.md on NPM

Viewed 368

In this project the README.md displays the logo/pnglogo.png logo at the top of the README.md file.

We'd like the same logo to display on NPM. So we copy it into the dist/fs-validator directory where the publish files are located. This is the npm script (From package.json):

"p": "cp README.md ./projects/fs-validator/ && npm run bp && npm run b && cp -r logo ./dist/fs-validator/ && cd dist/fs-validator/ && npm publish",

If I understand correctly, this should publish the logo directory along with the other files. However the logo is not showing up at the top of the README.md within NPM. How can I fix that?

I moved the logo to the root of the repository and changed the README.md to include it like this:

![Validator](pnglogo.png)

As that works for publishing with this repository:

https://github.com/fireflysemantics/slice

However I'm still not getting any success.

1 Answers

Figured it out. The package.json that I was publishing did not have the Github repository fields included.

{
  "name": "@fireflysemantics/validator",
  "version": "0.0.9",
  "peerDependencies": {
    "@fireflysemantics/is": "*",
    "@fireflysemantics/validatorts": "*"
  },
  "dependencies": {
    "tslib": "^2.2.0"
  }
}

Apparently these are needed in order for NPM to know where the image is located.

I changed package.json to incoulde the repository data so that it now looks like this:

{
  "name": "@fireflysemantics/validator",
  "version": "0.0.11",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/fireflysemantics/validator/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/fireflysemantics/validator.git"
  },
  "keywords": [
    "Validation",
    "Javascript",
    "Typescript",
    "Angular Package Format"
  ],
  "peerDependencies": {
    "@fireflysemantics/is": "*",
    "@fireflysemantics/validatorts": "*"
  },
  "dependencies": {
    "tslib": "^2.2.0"
  }
}

And now the logo shows up.

Related