Parse package name and latest version from artifactory

Feature Request

Description

Badge in terra-doc-template looks for package in npm repository, However we have package published in internal repo and would like to reference.

Additional Context / Screenshots

We could have new prop called internalNpmPackage in DocTemplate. If we have user defined value for the prop then we build href and img src with internal repository url otherwise always fallback to normal npm lookup.

Cosiderations

We have npm package published to internal artifactory and would like to fetch package name and latest version to display.

[bjankord]

Ran into an issue that made me think about this issue. The doc site has a stale deployment where the npm badge pulls the latest version from the released npm package, but the docs show an older version. This causes confusion as the user will think they are looking at the latest released docs.

This can happen if npm publish is successful but the doc site deploy fails. Edit: Or someone like me forgets to do doc deployment after release.

This made me think that this badge should be pulling the version directly from the package.json file instead of pulling from npm service. I think this could mitigate all the concerns noted on this issue.

[bjankord]

Talked with @mmalaker and @amichaelparker about this today. VoiceOver in Safari seems to get trapped in the SVG DOM loaded as a background image in this img.

Planning to update this so it is no longer a dynamically generated SVG via badgegen.

Tech Design

Replace this rendering with the following which would use a new prop packageVersion.

// do some cool styling in here via the .badge class to make this look nice.
 const badge = (
    <a className={cx('badge')} href={`https://www.npmjs.org/package/${packageName}`}>
      <span>Version:</span><span>{`${packageVersion}</span>
    </a>
  );

In our example files, we pull the packageName from the package.json file for the component. We could pull the package version as well and pass this into the <DocTemplate /> component.

import { name, version } from '../../../../package.json';

<DocTemplate
    packageName={name}
    packageVersion={version}
/>

Considerations

• To keep this passive, we should only conditionally render the markup if the packageVersion prop is set, otherwise, fallback to the current rendering.
• We could add a packageUrl prop that users could pass in. We could look into defaulting this to https://www.npmjs.org/package/${packageName} if you don’t pass in a packageUrl