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

gatsby-theme-document

v1.0.10

Published

Welcome to Document, a Gatsby.js theme by [Code Bushi](https://codebushi.com/gatsby-starters-and-themes/). Quickly and easily create documentation for anything using MDX or Markdown.

Downloads

16

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

changodamanchangodaman

Keywords

gatsbygatsby-plugingatsby-themegatsby-theme-documentmdxtheme-uireact

Readme

Gatsby Theme Document

Welcome to Document, a Gatsby.js theme by Code Bushi. Quickly and easily create documentation for anything using MDX or Markdown.

👀 View the Live Demo

Getting Started

Using the Gatsby CLI

gatsby new document-site https://github.com/codebushi/gatsby-theme-document-example
cd document-site
gatsby develop

Your new site will be up at http://localhost:8000

Try changing the logo by editing the file at src/gatsby-theme-document/logo.mdx.

Adding Content

Document is built with MDX. Content can be added by creating or editing the MDX files in the content folder content/index.mdx.

With MDX, you can add JSX or even React components to your markdown files. Images can also be added to any .mdx file, and will be automatically optimized using gatsby-remark-images.

Left Sidebar

The left sidebar navigation is automatically populated by the pages in the content folder. To sort the top level navigation, edit the forcedNavOrder option in the gatsby-config.js file.

The logo will link to the index.mdx page. To make the index.mdx page visible in the left navigation, set ignoreIndex to false.

Sub navigation items are created by making a folder with the same name as the top level .mdx file. The sub navigation is ordered alphabetically.

Right Sidebar

The contents of the right sidebar will be automatically populated by any heading tags h1, h2, h3, etc. that are added to the page. They will anchor link to the corresponding heading.

Theme Colors

Document is also built with Theme UI. The icon in the top right of the site will cycle through the various color modes that are available.

To edit or add colors modes, edit the file at src/gatsby-plugin-theme-ui/colors.js. To learn more about color modes, check out the Theme UI docs.

The contents of the MDX files are also styled with Theme UI and can be edited at src/gatsby-plugin-theme-ui/index.js. The styles for the heading tags are found at src/gatsby-plugin-theme-ui/headingsjs. Learn more about styling MDX from the Theme UI docs.

Syntax Colors

Document uses @theme-ui/prism for syntax highlighting. Different presets can be used by editing the file at src/gatsby-plugin-theme-ui/index.js. The desired preset must be included at the top of the file and spread into the pre styles

import dracula from '@theme-ui/prism/presets/dracula.json';

styles: {
  pre: {
    ...dracula,
  }
}

The code blocks will not change color based on the color modes. For a complete list of all available prism presets, check out the Theme UI syntax themes.

Social Media Icons

The social media icons in the header can be edited in the gatsby-config.js file, under social. Currently, you can only add Twitter and Github links.

SEO, Site Image, and Manifest Icons

Document uses React Helmet to add meta tags to the website's <head> tag. When adding/editing a file in the content folder, be sure to include the Title and Description in the frontmatter. These are automatically used to generate the title and description meta tags for the page.

---
title: 'Document by Code Bushi'
description: 'This is the meta description'
---

There is also an image at src/site-image.jpg which is used for the Open Graph image tag, as well as the Twitter card. Another image at src/site-icon.png is used by the gatsby-plugin-manifest to generate a Favicon and other device icons.