feat: Added Contribution Guide

The README.md gives a brief overview about how to contribute to
documentation, and more detailed isntructions specific to VitePress is
added as a new page under References.

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: <short-title-for-sidebar>
+---
+```
+
+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
 

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.