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

@codedoc/core

v0.3.2

Published

Create beautiful modern documentation websites.

Downloads

123

Readme

CODEDOC

npm i -g @codedoc/cli

CODEDOC is an open-source tool that helps you with creating beautiful and modern software documentation. It creates a JAMStack app from your markdown files that you can easily deploy on services such as GitHub Pages. Read the docs for more info.

Installation

npm i -g @codedoc/cli

cd my-project
codedoc init

Read the docs for more info.

Usage

codedoc serve

Modify your markdown files (by default in docs/md/, for example docs/md/index.md) and see changes in real time. When you are done, build your documentations for deployment:

codedoc build

and if you are for example using GitHub Pages, deploy by pushing:

git add -A
git commit -m "added docs"
git push

Read the docs for more info.

Prior Work

While there are multiple frameworks and tools that help with building websites from a bunch of markdown files, I will only focus on those who are specifically designed for writing documentation/wikis, since the rest naturally come with a configuration overhead. You can read this section for more info on CODEDOC's features compared to the works mentioned here.

Jekyll

A lot of the ideas of the workflow are shared between Jekyll and CODEDOC. The reason I created CODEDOC despite Jekyll being out there because:

  • Jekyll is a bit old-school and hence heavy handed by modern frontend standards (no component structure, etc),
  • Jekyll's themes are not up to modern standards, and it is quite some work to create new themes,
  • Jekyll is not yet specifically designed for documentation and project wikis (thats why GitHub has a separate wiki section for projects despite supporting Jekyll out of the box).

GitBook

GitBook is a nice SaaS built specifically for documentation and project wikis. However:

  • It lacks some essential features (such as code-snippet hints),
  • It hides some essential features behind a paywall (for example the dark mode), which hurts open-source projects,
  • It is not customizable enough for my taste.

Acknowledgements

The following tools and open-source libraries are used by CODEDOC, so shout-out to their creators/maintainers/collaborators:

webpack
Used by CONNECTIVE SDH as client-side code bundler. CONNECTIVE SDH is the basis of server-side/client-side rendering and components of CODEDOC.

jsdom, jsdom-global
Used by CONNECTIVE SDH for ease of HTML element creation on the server side.

Marked.js
Used by @connectv/marked as markdown processor (@connectv/marked enables using TSX-components for processing markdown and powers the custom components system).

JSS
Used by CONNECTIVE JSS Theme which is the themed-component library used by CODEDOC.

Prism
Used for syntax highlighting in code snippets.

Color Hunt
For picking the default colors (also thanks to Niyousha Karimi for helping on that front, besides helping with usability testing).

RxJS
Used by CONNECTIVE, CONNECTIVE HTML (which is the TSX-Component library behind CODEDOC components) for client-side interactions and RxLine for asynchronous build process.

ts-node, ts-node-dev
Used by the CLI to run the build process and watch over markdown/config files.

Express
Used for the local development server.

ShellJS, chalk
Powering the CLI and making it look nice.

select
Used for convenient copy-to-clipboard functionality.

KaTeX
Used for rendering LaTeX formulas.

color
Used for automatic color deduction/manipulation.