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

docsify-web-component-docs

v1.2.0

Published

A Docsify plugin for documenting web components.

Downloads

3

Readme

License: MIT

docsify-web-component-docs

A Docsify plugin for displaying documentation for Custom Elements (Web Components).

Requirements

You must provide a Custom Elements Manifest (CEM) file for this plugin to function. You can generate one for your project by incorporating the CEM Analyzer into your build process.

Refer to Docsify Breeze for a fully integrated example:

This project supports an additional status field, which is not part of the default CEM specification. Refer to the aforementioned config example for including this field in your CEM file.

Usage

Setup & Installation

<script>
  window.$docsify = {
    // ... (your existing Docsify config)
    componentDocs: {
      manifestPath: "/dist/custom-elements.json",
    },
  };
</script>
<script src="//cdn.jsdelivr.net/npm/docsify-web-component-docs@1/dist/web-component-docs.min.js"></script>

Default styles, which you can override or replace with your own:

<link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/docsify-web-component-docs@1/dist/web-component-docs.min.css"
/>

Available Tags for Displaying Documentation

Include the following tags in your Markdown file to display component documentation information:

# Button

[component-status:ds-button]

[component-description:ds-button]

## API Documentation

[component-metadata:ds-button]

💡 Protip: If your filename matches the name of your component (e.g., ds-button.md) then you can exclude the component name in the tag (e.g., just [component-status]).

[component-description:ds-button]

The description of your component, as provided in the first line of your component's documentation block:

/**
 * This is the description of a component.
 *
 * [...]
 */
@customElement("ds-button")
export default class DsButton extends LitElement {
  ...
}

[component-status:ds-button]

The status of your component, as provided in your documentation's component block:

/**
 * This is the description of a component.
 *
 * @status ready
 *
 * [...]
 */
@customElement("ds-button")
export default class DsButton extends LitElement {
  ...
}

This field requires a custom tag in your CEM config, as noted in Requirements. The default styles for this plugin support "draft", "ready", and "deprecated", but you can provide any desired value to this field and style it as desired.

[component-metadata:ds-button]

Complete metadata tables for slots, properties, events, methods, CSS parts, and CSS custom properties.

Options

componentDocs.manifestPath

  • Type: String
  • Default: undefined

Required. The path to your Custom Elements Manifest file (see requirements).

componentDocs.prefix

  • Type: String
  • Default: undefined

An optional standardized prefix used by all your components. For example, ds if all your components are named such as ds-button and ds-card. Setting this feature will allow you to exclude the prefix when specifying the component name in tags.

Live Example

You can see this plugin in use as part of Docsify Breeze (Live example, GitHub project).

Local Demo

You can test this project locally in a demo Docsify installation.

First, clone this repo:

git clone https://github.com/zolk/docsify-web-component-docs.git

Then install dependencies (you'll need Node installed and the docsify command available):

npm install -g docsify-cli
npm install

Finally, boot the local dev server:

npm start

By default, the server will boot at http://localhost:3000.

Acknowledgements

This plugin was inspired by and builds upon work done for the Shoelace component library documentation by Cory LaViska.

License

This project was created by Kevin Zolkiewicz and is licensed under an MIT License.