Pkg
Stats

npm package discovery and stats viewer.

Discover Tips

General search
[free text search, go nuts!]
Package details
pkg:[package-name]
User packages
@[username]

Sponsor

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.

Twitter
@PkgStats
GitHub
pkgstats
Twitter
@ryanhefner
GitHub
ryanhefner
Site
ryanhefner.com

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 🙏

Framework
react / react-dom
Server
next / express / next-routes
Data Store
redux / react-redux / next-redux-wrapper / redux-thunk / redux-logger
Caching
lru-cache
CSS / Styling
next-page-transitions / styled-components
Typeface
@ibm/plex
Avatars
gravatar
Data Viz
chart.js / react-sparklines
Date formatting
dayjs
Infinite scrolling
react-scroll-trigger
Markdown rendering
react-markdown
Repository url parsing
hosted-git-info
User data
npm-user
Compiling
babel-plugin-module-resolver / babel-plugin-styled-components
Types
prop-types
Odds & Ends
es6-promise / isomorphic-fetch

© 2024 – Pkg Stats / Ryan Hefner

naked_doc

v1.0.3

Published

3 years ago

Simple documentation template

Downloads

2

0High
0Medium
0Low

gatsby gatsby-plugin gatsby-theme document

Naked Doc

Naked Doc can be used for your projects and internal documents. You just set up a little bit and add markdown content.

Let's create your document!

nake_logo_header

↓Here is sample document

https://yellow-high5.github.io/naked_doc/

How to Install

$ gatsby new [YOUR_DOCUMENT_NAME] https://github.com/yellow-high5/naked_doc

Local Development

$ npm run start

Configure

Naked Doc consists of three elements, header, sidebar, content.
Edit the config.ts file and it will be your favorite document in no time.

1. Header

You can embed any social link in the document header. (ex: Github, Twitter...)

Logo

You edit config.header.logo in config.ts

If you want the link to be accessible when you click on the logo, you edit config.header.logoLink in config.ts

Search Engine

Lunr

Recommended if you want to create an internal document.

You just only edit config.header.search

Algolia

Recommended if you want search performance. You must be registered for Algorlia in advance.

You edit config.header.search and describe .env file about Algolia API Keys. You can get API Keys from Algolia Dashboard.

After that, you should command npm run build to push document content data.

2. Sidebar

If you control the order of sections in the document, edit config.sidebar.forcedNavOrder.

If you want to control whether sections of the document are collapsed, edit config.sidebar.collapsedNav.

3. Markdown Content

Please put the markdown file that describes the document in the content folder. If you want to create a section, create a folder in the content folder.

Edit this page

Naked Doc can access source repository link from document, so you edit config.siteMetadata.docsLocation in config.ts.

React Component(MDX)

MDX is a great format to embed JSX in Markdown and makes the document richer

You store the JSX component you want to insert in Markdown in src/components/docParts folder and import it with mdx to use it.

Deploy

You check Deploying and Hosting | GatsbyJS

By default, it is set to deploy to Github pages.

$ npm run deploy

PWA

You can add this document to mobile home screen.

Thanks OSS and the Predecessor!

Licence

MIT