egoist / docup

The easiest way to write beautiful docs.

Docup

Docup is a single JavaScript file that fetches Markdown file and renders it as a beautiful one-page documentation.

Docup is built with Preact, the entire bundle (with CSS) is just 30kB minified and gzipped.

View Documentation

Donate

Liense

MIT © EGOIST (Kevin Titor)

docup's Issues

Provide CSS for buttons

Scrolling up from bottom doesn't update hash

• Right now, if you scroll down and go back to the top, #quick-start is kept in the hash
• If you go to https://docup.now.sh/#embeding for example and start to scroll up, technically you're already reading "Message Blocks", but the hash/active link doesn't change until you reach the header.

It's probably related to the headings being used as targets https://github.com/egoist/docup/blob/master/src/components/App.tsx#L13

Wrapping the sections with an element like a div could solve these issues.

Nice project btw 🎉

Add some predefined themes

Add a theme option to switch css variables, e.g. solarized dark etc.

Implement MDX Live code

https://mdxjs.com/guides/live-code

Cache the markdown file in local storage

like stale-while-revalidate

Use the blockquote between h1 and h2 as description by default

Related: https://docup.egojump.com/#description

Support spa route.

GitHub Pages doesn't support rewrites like something in vercel

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

Maybe docup can support spa route?
It means for the following config:

{
        text: "中文",
        link: "zh",
}

Docup will fetch zh.md directly instead of jump to /zh

option to disable or speedup scroll animation

I'm trying to use docup for a simple documentation, and would love to have an option to disable the slow scroll when I click on a section title on the left column.

Hidden H2s still appear in Menu component

Hiding H2s via comments will prevent them from being shown in main content area, however they still appear in the menu section. This can reproduced by taking the boilerplate index.html (described in the "Quick Start" instructions), and creating a README.md with the following content.

# Title

lorem ipsum ...

<!-- hide-on-docup-start -->

## Table of Contents

- [Installation](#installation)
- [Getting Started](#getting-started)

<!-- hide-on-docup-stop -->

## Installation

`npm i some-package`

## Getting Started

blah blah blah

The generated website will show three sections in the menu: "Table of Contents", "Installation", and "Getting Started". My expectation is that it would only show the latter two.

Prerender

Create a CLI to prerender a docup site into static files, so it fetches and renders markdown at build time rather than in browser (optionally allow to disable js)

Logo design

Docup sounds like a cup of tea (or coffee), maybe that's a good start point for the logo.

Explains why single-page docs might work for you

.. on the website

Strip HTML tags from README.md

Stripe HTML tags in headings, to ignore badges.

For example:

# [React](https://reactjs.org/) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![Coverage Status](https://img.shields.io/coveralls/facebook/react/master.svg?style=flat)](https://coveralls.io/github/facebook/react?branch=master) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)

React is a JavaScript library for building user interfaces.

* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).

[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).

## Documentation

You can find the React documentation [on the website](https://reactjs.org/docs).  
It is divided into several sections:

* [Quick Start](https://reactjs.org/docs/hello-world.html)
* [Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)
* [API Reference](https://reactjs.org/docs/react-api.html)
* [Tutorial](https://reactjs.org/tutorial/tutorial.html)
* [Where to Get Support](https://reactjs.org/community/support.html)
* [Contributing Guide](https://reactjs.org/docs/how-to-contribute.html)

You can improve it by sending pull requests to [this repository](https://github.com/reactjs/reactjs.org).

Fix message block styling in dark theme

Versioning

Similar to https://docute.org/guide/customization#versioning

Publish esm bundle only

The next major release (2.0.0) will only contain the esm version of docup, i.e. the umd version will be removed.

Table style

Use throttle instead of debounce

When scrolling, the current behavior looks laggy because debounce actually only fires after 200ms have passed since the last scroll.

Using throttle, with the same 200ms delay, it would fire every 200ms.

It would still avoid performance problems, but give a more instant feedback (you could even make it fire every 100ms).

I'm talking about this line https://github.com/egoist/docup/blob/master/src/components/App.tsx#L12

Here's an example of the behavior of debounce and throttle https://codepen.io/chriscoyier/pen/vOZNQV

Add COPY button on code blocks

Run specific code blocks

```js,console
console.log('12')
```

```js,html
document.write('12')
```

```js,console,html
console.log('12')
document.write('12')
```

Alert messages

We can transform：

> **TAG**: This is a alert!

Into:

<p class="Tag">This is a alert!</p>

About mdx support

Hi, @egoist , thank you for continuously creating high quality OSS, docup looks easy to use.

Is it possible for docup to support .mdx document in the future?

Displaying a loading skeleton

Like react-content-loader

Easier "Google-able" name instead of docup?

Really cool project that does one thing well. Thanks!
However, would it be nice to have a name that is easier to Google and is not the same as another npm package or a document management company in India?
Image
Just my two cents.