doczjs/docz v0.10.0 on GitHub

Changelog

🐞 Bug Fixes

bug template typo (#197) (497fcfb)
docz: add initial loading as true (3f05536)
docz-core: prevent crash on delete entry (28e1728)
docz-core: prevent delete entire app folder on build (e345896)
docz-theme-default: playground overflow on mobile (db1eb5b)
rehype-docz: add props on playground scope (ee4b6c0)
rehype-docz: allow ticks and backticks inside playground (#203) (fa4ff40)

🚀 Features

docz: fetch data on documents (04ff0d6)
docz-core: add cache system for entries (b90e598)
docz-core: resolve markdown files by default (#210) (e0a95b3)
add github repository link (78a19f6)
allow edit code inside playground (#205) (4f948f7)

⚠️ BREAKING CHANGE

docz-core: add htmlContext and mini-html-webpack-plugin (4b6ec0f)

By some performance and architecture issues, we changed to use mini-html-webpack-plugin instead of html-webpack-plugin. So, this can affect your index.html file if you're customizing it since html-webpack-plugin inject automatically scripts and styles and with mini-html-webpack-plugin we need to do this manually. To avoid a page without any script, just add this lines of code on your custom index.html:

<!DOCTYPE html>
+<html lang="{{ lang }}">
-<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="{{ description }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{ title }}</title>
+   {{ head }}
  </head>
  <body>
    <div id="root" />
+   {{ footer }}
  </body>
</html>

📺 Allow users to edit the playground examples

🔗 Automatic Github Link

Now, if you have a repository field on your package.json, docz you add a github link to your repo on the docz-theme-default:

📌 Custom head tags

With mini-html-webpack-plugin now you can add custom head tags without need to use a custom index.html file. The new htmlContext property on doczrc.js gives you the ability to add this tags:

// doczrc.js
export default {
  htmlContext: {
    head: {
      links: [{
        rel: 'stylesheet',
        href: '/some/style/custom.css'
      }]
    }
  }
}

⏳ Fetch data on documents

Now you can fetch data on documents just by exporting an async method called getInitialData, then you can use document data property inside your componentes, like that:

import { MyComponent } from './MyComponent'

export const getInitialData = async () => {
  return {
    myProp: await someAsyncMethod()
  }
}

# My Component

This is just markdown

<MyComponent loading={props.data.loading} prop={props.data.myProp} />

🔖 Resolve markdown files by default

In the new version of docz you can import markdown files inside your mdx:

import Readme from './readme.md'

# My Component

<Readme />

So, if you want to resolve markdown files by default you can change files property on your doczrc.js to parse markdown extensions together with mdx, this will result in markdown files automatically parsed and routes generated by this file like we do with mdx:

// doczrc.js
export default {
  files: '**/*.{md,markdown,mdx}'
}