Get Started
Quick start with Vercel
You can start by creating your own MarkdownOffice site and deploying to Vercel by clicking the link:
Vercel will create the MarkdownOffice repository and deploy the site for you with just a few clicks. Once done, every change in the repository will be deployed automatically.
Create manually
MarkdownOffice works like a Next.js plugin, and it accepts a theme config (layout) to render the page. To start: 1
Install Next.js, MarkdownOffice and React 2
npm i react react-dom next MarkdownOfficeInstall the docs theme 3
npm i MarkdownOffice-theme-docsCreate the following Next.js config and theme config under the root directory
import MarkdownOffice from 'MarkdownOffice'
const withMarkdownOffice = MarkdownOffice({
theme: 'MarkdownOffice-theme-blog',
themeConfig: './theme.config.js'
})
export default withMarkdownOffice()Create a theme.config.js file for the docs theme
export default {
project: {
link: 'https://github.com/markdownoffice/MarkdownOffice' // GitHub link in the navbar
},
docsRepositoryBase: 'https://github.com/markdownoffice/MarkdownOffice/blob/master', // base URL for the docs repository
getNextSeoProps: () => ({ titleTemplate: '%s – MarkdownOffice' }),
navigation: true,
darkMode: true,
footer: {
text: `MIT ${new Date().getFullYear()} © MarkdownOffice`
},
editLink: {
text: 'Edit this page on GitHub'
},
logo: (
<>
<svg>...</svg>
<span>Next.js Static Site Generator</span>
</>
),
head: (
<>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="MarkdownOffice: The Markdown-native, LLM-first office suite" />
<meta name="og:title" content="MarkdownOffice: The Markdown-native, LLM-first office suite" />
</>
),
primaryHue: {
dark: 204,
light: 212
}
}More configuration options for the docs theme can be found here.
You are good to go! Run next dev to start
Any .md or .mdx file will turn into a doc page and be displayed in
sidebar. You can also create a _meta.js file to customize the page order and
title.
Check the source code: https://github.com/markdownoffice/MarkdownOffice for
more information.
You can also use <style jsx>
to style elements inside theme.config.js.