diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3389cfe0..23018349 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -102,7 +102,25 @@ pytest # Documentation -Place relevant markdown files in the `docs` directory and index them in README.md located at the root of repo. +Documentation is written as markdown files, and placed inside the `docs/` directory. There are multiple sub directories under `docs/`, and be sure to place the `.md` file in the relevant sub directory if you are adding a new page. + +If you want to include any image in the markdown file, place them in the `docs/images/` folder, and add a relative link in the `.md` file. + +Frappe Docker also have a static site version of the documentation, which is made using the same `.md` files in the `docs/` directory. Build pipeline uses [VitePress](https://vitepress.dev/) as the Static Site builder, which is a JavaScript (TypeScript) static site builder. Note that to contribute to the documentation JavaScript or VitePress knowledge is not needed. Updating the `.md` file is enough. + +The only additional content needed that is specific to VitePress, is a ['frontmatter'](https://vitepress.dev/guide/frontmatter#frontmatter). Frontmatter is like the `metadata` or `config` of that specific `.md` file, added at the beginning of the file and enclosed in `---`. For example, the frontmatter can include a friendly title, author, date of publishing, etc. A more detailed overview on what is frontmatter can be found in this [blog](https://www.seancdavis.com/posts/wtf-is-frontmatter/). + +In this project only one field is used in the frontmatter. The `title` field. This is used to specify the title of the page shown in the sidebar, which is either same or a simpler and smaller version of the first heading `#` of the page. To add the required frontmatter just add a block at the beginning of the `.md` file as shown below + +```yaml +--- +title: +--- +``` + +In case of any doubt, just refer to any of the existing `.md` file. Also checkout the Markdown section in the VitePress documentation to see some additional features supported by VitePress: [Markdown Extensions](https://vitepress.dev/guide/markdown). Be careful not to break compatibility with what is supported by GitHub markdown. It is recommended to keep the documentation simple. + +If you want details on how to configure or update VitePress specific settings and and functionalities, refer this page: [Configuring VitePress](https://github.com/frappe/frappe_docker/blob/main/docs/08-reference/02-configuring-vitepress.md) # Frappe and ERPNext updates diff --git a/docs/08-reference/02-configuring-vitepress.md b/docs/08-reference/02-configuring-vitepress.md new file mode 100644 index 00000000..9e396e35 --- /dev/null +++ b/docs/08-reference/02-configuring-vitepress.md @@ -0,0 +1,45 @@ +--- +title: Configuring VitePress +--- + +# Configuring VitePress + +To modify any VitePress related settings, a JavaScript development environment is needed. Everything related to VitePress is contained in the `docs/` folder. + +## Prerequisites + +1. Node.js v24 or above is recommended. To install and manage Node.js [nvm](https://github.com/nvm-sh/nvm) is the preferred way for Linux and MacOS. For Windows either official installer or [fnm](https://github.com/Schniz/fnm). +2. pnpm package manager, v10.28 or above. Easiest way to install pnpm is using [corepack](https://pnpm.io/installation#using-corepack) which is part of Node.js. + +## Development + +To start a development environment, + +1. Navigate to `/docs` directory in the terminal + +```sh +cd docs +``` + +2. Install dependencies + +```sh +pnpm install +``` + +3. Start the development server + +```sh +pnpm run docs:dev +``` + +4. Open `http://localhost:5173` in your browser to see the development version which will update the preview as you make changes. + +## Configurations + +1. Public assets related to VitePress site is added in the `docs/public` folder. This folder should not be used for adding images added inside the `.md` file. +2. VitePress uses `index.md` files to do some special things. For example the home page is configured using the `docs/index.md` file. Checkout the file for more details. +3. VitePress uses 'file based routing', meaning the URL paths mimics the directory and file structure inside the `docs/` directory. +4. VitePress specific config is `docs/.vitepress/config.mts`. +5. To auto populate the sidebar, a plugin called 'VitePress Sidebar' is used. The `config.mts` also include config for this plugin. More details can be found in the [documentation page](https://vitepress-sidebar.cdget.com/guide/getting-started). +6. Each subfolder has an `index.md` file. This is used to specify the group heading of the pages in the sidebar.