Adding a blog (experimental)#

Many documentation websites nowadays have a blog, it's an awesome way to announce new features and new releases in an official way

You can view a demo of how it looks here

Enabling the Blog for a site subpath#

Dokz have a built in blog feature that can be enabled for a sub path of your website:

jsx
1
import { DokzProvider, DokzBlogProvider } from 'dokz'
2
import { useRouter } from 'next/router'
3
4
export default function App(props) {
5
    const { Component, pageProps } = props
6
    const { pathname } = useRouter()
7
    if (pathname.startsWith('/blog')) {
8
        return (
9
            <DokzBlogProvider blogRootPath='pages/blog'>
10
                <Component {...pageProps} />
11
            </DokzBlogProvider>
12
        )
13
    }
14
    if (pathname.startsWith('/docs')) {
15
        return (
16
            <DokzProvider>
17
                <Component {...pageProps} />
18
            </DokzProvider>
19
        )
20
    }
21
    return <Component {...pageProps} />
22
}

Adding a post list#

To add a page to list all your posts you can add a page that exports the BlogPosts component

jsx
1
// pages/index.jsx
2
export { BlogPosts as default } from 'dokz/src'

This page will render a grid of all you documents under the blogRootPath directory, using the details given in the front matter

To see a demo of how it looks you can go to the dokz blog

Customization#

The customization you can do to the blog are similar to what you can do to the docs site

For example you can pass the following props to DokzBlogProvider:

• headerLogo

• headerItems

• footer

• prismTheme

• initialColorMode

• fontFamily

You can also change the main blog posts grid heading and subheading

jsx
1
// pages/index.jsx
2
import { BlogPosts } from 'dokz/src'
3
4
export default function Page() {
5
    return <BlogPosts heading='My Blog' subheading='Awesome articles every week' />
6
}