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

@rocketseat/gatsby-theme-docs-core

v4.0.0

Published

Core theme for @rocketseat/gatsby-theme-docs with no additional theming or style opinions. Includes all of the data structures you need to get up and build a documentation website.

Downloads

170

Readme

🚀 Features

  • MDX for docs;
  • Sidebar customization with Yaml;

⚡️ Getting started

Using Yarn:

yarn add @rocketseat/gatsby-theme-docs-core

Using NPM:

npm i @rocketseat/gatsby-theme-docs-core

🔥 Usage

Theme options

| Key | Default | Required | Description | | ------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | basePath | / | No | Root url for all docs | | configPath | config | No | Location of config files | | docsPath | docs | No | The site description for SEO and social (FB, Twitter) tags | | githubUrl | - | - | Deprecated in favor of repositoryUrl | | repositoryUrl | - | No | The URL of your repository (supports GitHub, GitLab and Bitbucket). Example: https://github/jpedroschmitz/rocketdocs | | baseDir | - | No | If your Gatsby site does not live in the root of your project directory/git repo, pass the subdirectory name here (docs, for example) | | withMdx | true | No | If necessary, you can add your own MDX options to the theme. To do so, make sure you turn this option to false and include gatsby-plugin-mdx on your gatsby-config | | branch | main | No | Default branch of the repository |

Note: When adding a BitBucket link on the repositoryUrl option, don't add the src/<branch> to it. Example of correct link: https://bitbucket.org/jpedroschmitz/rocketdocs

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@rocketseat/gatsby-theme-docs-core`,
      options: {
        basePath: `documentation`,
        configPath: `config`,
        docsPath: `docs`,
        githubUrl: `https://github.com/jpedroschmitz/rocketdocs`,
        baseDir: `www`,
      },
    },
  ],
};

Navigation

The sidebar is highly customizable, you can create a file under the config folder named sidebar.yml. If you add a basePath in the theme options, you don't need to add it before the links, the useSidebar hook will append it.

Here is an example:

# Simple item
- label: 'Home'
  link: '/'
# With list of subitems
- label: 'With dropdown'
  items:
    - label: 'My Example'
      link: '/my-example'

useSidebar

To get all the sidebar items, you can use the useSidebar hook. Example:

import React from 'react';
import { useSidebar } from '@rocketseat/gatsby-theme-docs-core';

export default function Sidebar() {
  const data = useSidebar();

  console.log(data);
  /*
    [
      {
        "node": {
          "label": "Home",
          "link": "/",
          "items": null,
          "id": "a2913be3-af3c-5fc9-967e-a058e86b20a9"
        }
      },
      {
        "node": {
          "label": "With dropdown",
          "link": null,
          "items": [{ "label": "My Example", "link": "/my-example" }],
          "id": "c7d9606c-4bda-5097-a0df-53108e9f4efd"
        }
      }
    ]
  */
}

Docs Fields

Inside your docs folder, you can create MDX files. The filename will be the page path.

Add a title to the frontmatter of the MDX file and place the content below it. For example:

---
title: 'My Example'
description: 'A simple description for this page'
image: 'banner.png'
disableTableOfContents: false
---

Your amazing page

Every file must have a custom title. Description and image are not required.

Shadowing

Check the Shadowing in Gatsby Themes docs to understand how to customize this theme!

In general, you will need to create two files (Docs.js and Homepage.js) into src/@rocketseat/gatsby-theme-docs-core/components/templates to shadow/override it.

✨ Contributing

Thanks for being interested in contributing! We’re so glad you want to help! Please take a little bit of your time and look at our contributing guidelines and our code of conduct! All type of contributions are welcome, such as bug fixes, issues or feature requests.

📝 License

Licensed under the MIT License.


Made with 💜 by João Pedro