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
import { ChakraProvider } from '@chakra-ui/react'
4
5
export default function App(props) {
6
    const { Component, pageProps } = props
7
    const { pathname } = useRouter()
8
    if (pathname.startsWith('/blog')) {
9
        return (
10
            <ChakraProvider>
11
                <DokzBlogProvider blogRootPath='pages/blog'>
12
                    <Component {...pageProps} />
13
                </DokzBlogProvider>
14
            </ChakraProvider>
15
        )
16
    }
17
    if (pathname.startsWith('/docs')) {
18
        return (
19
            <ChakraProvider>
20
                <DokzProvider>
21
                    <Component {...pageProps} />
22
                </DokzProvider>
23
            </ChakraProvider>
24
        )
25
    }
26
    return <Component {...pageProps} />
27
}

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 (
6
        <BlogPosts heading='My Blog' subheading='Awesome articles every week' />
7
    )
8
}