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

@sassydocs/sassydocs-sdk

v0.0.7

Published

The official Sassydocs SDK

Downloads

170

Readme

SassyDocs SDK

Version

The SassyDocs SDK is a wrapper for SassyDocs, allowing you to control your documentation and use our AI to answer questions from inside your app

Sassydocs website

Developer website


Installation

Install via NPM

npm install @sassydocs/sassydocs-sdk

or via Yarn

yarn add @sassydocs/sassydocs-sdk

or via PNPM

pnpm add @sassydocs/sassydocs-sdk

Installing Sassydocs

Call the sassyDocs method with your setup options to initialise the support widget. This will need to be included on every page / file where the SDK functions are required.

import SassyDocs from "@sassydocs/sassydocs-sdk"

new sassyDocs({
  // your app ID is always required as a key
  key: '{MY_APP_KEY}',
  // optionally pass in the user details for analytics
  user: {
    name: '{USER_NAME}',
    identifier: '{USER_ID}',
    digest: '{USER_ID_SHA256_HASH}',
  },
  // optionally display the widget automatically
  autoShowWidget: true,
  // optionally set the position of the widget (default is bottom right)
  position: 'bottom-left',
});

For ease, you could create a sassydocs file. For example:

#sassydoc.js
import SassyDocs from "@sassydocs/sassydocs-sdk"

const sassyDoc = new sassyDocs({
  key: '{MY_APP_KEY}',
  //...
});

export default sassyDoc;

Then you can use SassyDoc anywhere in your app:

#main.js
import sassyDoc from "./sassydoc"

sassyDoc.open() //show the widget
sassyDoc.close() //hide the widget
sassyDoc.page('my-page-slug') //navigate to a page
sassyDoc.tag('my-tag-slug') //navigate to a tag/category
sassyDoc.ask('how do I invite my team?') //ask a question

Methods

Without Sassydocs running on your website or application, the following methods will not work as expected

open

sassyDocs.open();

This will show the SassyDocs widget in full. It will be animated onto the page.


close

sassyDocs.close();

This will hide the SassyDocs widget in full. It will be animated out of the page.


home

sassyDocs.home();

Navigate back to the widget home page


navigate

This feature is for single page apps (SPAs), where page navigation is programmatic

sassyDocs.navigate('/some-path');

Update the router within the SassyDocs widget. This will automatically update the documents/articles shown on the SassyDocs widget to ensure the content is relevant and flows with your website or app.

The path must be valid, some examples are below:

  • / ✅
  • /a-page ✅
  • /directory/another-page ✅
  • /invalid/ ❌ #paths cannot end with a trailing slash
  • invalid ❌ #paths must start with a slash
  • /a-page?user=123 ❌ #paths must not contain query strings

An example using Vue-Router

router.afterEach((to, from, failure) => {
  //...
  sassyDocs.navigate(to.path);
})

page

sassyDocs.page('6e89d841-baf9-417b-8d80-b5981fc6801c'); //via the ID
sassyDocs.page('get-started'); //via the slug

Navigate to a specific page/document.


tag

sassyDocs.tag('99e8df53-b010-4ee1-8ce8-0c8f0064240a'); //via the ID
sassyDocs.tag('billing'); //via the slug

Navigate to a specific tag/category to view all the relevant support documents


ask

sassyDocs.ask();
sassyDocs.ask('how do I upgrade my account?');

Calling ask without passing a question will prompt the user to ask a question

Calling ask with a question will ask the question