diff --git a/docs/guides/writing-examples.md b/docs/guides/writing-examples.md index 096ea3fa..4362a7be 100644 --- a/docs/guides/writing-examples.md +++ b/docs/guides/writing-examples.md @@ -46,23 +46,15 @@ files or using environment variables). - Develop the example independently of the library as a standalone mini-application (using `npm install` and `npm start` to start the vite dev-server). -- If you install additional dependencies, the "Examples" section of [the website](https://visgl.github.io/react-google-maps/examples/) will not be able to host your example, but you can still [link to a CodeSandbox](https://codesandbox.io/docs/learn/devboxes/synced-templates#creating-a-synced-template) for the example. - Edit the title, description and sourcecode links in the `README.md`, `index.html`, and `./src/control-panel.tsx` files. ### Adding examples to the website -If you are adding an example with **no additional dependencies**: - -1. Create the example page in `./website/src/examples/your-example-id.mdx` -2. Add the example to `./website/src/examples-sidebar.js` -3. Create a 400x400 px image for the overview page and place it in +- Create the example page in `./website/src/examples/your-example-id.mdx` +- Add the example to `./website/src/examples-sidebar.js` +- Create a 400x400 px image for the overview page and place it in `./website/static/images/examples/your-example-id.jpg` -4. The whole website can be started in dev-mode by running `npm i` and +- The whole website can be started in dev-mode by running `npm i` and `npm start` in the `./website` directory. The website build can be tested by running `npm run build`. - -If you are adding an example **with additional dependencies**: - -1. Create a 400x400 px image for the overview page and place it in `./website/static/images/examples/your-example-id.jpg` -2. Add the example to `./website/src/examples-sidebar.js` as an [external link](https://docusaurus.io/docs/sidebar/items#sidebar-item-link) to [a CodeSandbox](https://codesandbox.io/docs/learn/devboxes/synced-templates#creating-a-synced-template) based on the title of your new example folder in the `./examples` folder.