done

Author: runemadsen

docs/examples.md

@@ -1,27 +1,33 @@
 # Examples
 
-The content for the examples lives in `/content/examples` split into 2 folders corresponding to the categories: `basic` and `topic`. Each example has a subfolder inside one of those folders. The subfolder contains all the files necessary to build the individual example page: a `.json` that has the content, `.pde` files containing the code and `.png` file for the image.
+The content for the examples lives in `/content/examples` and are nested in folders named after the main category and the subcategory. The actual `.pde` files and the data associated with the Processing sketch are automatically copied from the [`processing-examples`](https://github.com/processing/processing-examples) repo while the rest of the content only live in this repo and should be edited here.
 
-The actual Processing code is copied from [`processing-examples`](https://github.com/processing/processing-examples) via a script and the rest of the content is updated directly in this repo. Here is a breakdown for `Basic Examples > Image > AlphaMask` example:
+Here is a quick overview of these files for the `Basic Examples > Image > BackgroundImage` example:
 
-- `AlphaMask.json` - Edit in this repo
-- `AlphaMask.png` - Edit in this repo
-- `liveSketch.js` - Edit in this repo
-- `AlphaMask.pde` - Copied from `processing-examples` via script
-- Besides this, all content inside `data` folders will be moved automatically to the `static` folder so the live sketches work on the website
+- `/content/examples/BackgroundImage/BackgroundImage.json` - This is the metadata for the example, and this file should be edited in this repo.
+- `/content/examples/BackgroundImage/BackgroundImage.png` - This is the image use on page listings and this file should be edited in this repo.
+- `/content/examples/BackgroundImage/liveSketch.js` - This is the P5.js live sketch code that runs on the example page, and this file should be edited in this repo.
+- `/content/examples/BackgroundImage/BackgroundImage.pde` - This file is synced from the `processing-examples` repo via a script and should **not** be edited in this repo.
+- `/static/livesketch/backgroundimage` - This folder is the `data` folder for the example from the `processing-examples` repo and should \**not*8 be edited in this repo.
 
-## Updating via script
+## Updating examples via script
 
-The Processing code for each example is copied via a script from the [`processing-examples`](https://github.com/processing/processing-examples) repo to the `/content/examples` folder in this repo. The script will only copy examples into example folders that already exist, but it will output a summary of the update before it happens.
+The Processing code for each example is copied via a script from the [`processing-examples`](https://github.com/processing/processing-examples) repo to website. The script will do two things: It will copy all `.pde` files into the `content/examples/TOPIC/SUBTOPIC/EXAMPLE` folder and it will copy all files in the `data` folder of the example into a `static/livesketch/EXAMPLE` folder. This makes it possible for the `liveSketch.js` sketch to load the original data. Some live sketches differ slightly from the original example (such as the AlphaMask example requiring a `.png` file instead of a `.jpg` file) and these files are manually place in the `static/livesketch-manual` folder.
+
+**Note**: The script will only copy examples into the website that already have an existing `.pde` file. This means that the script will only update examples, not add new ones.
 
 This is what you need to run the script:
 
 1. Make sure that you have the `processing-examples` repo next to this `processing-website` repo on your computer
 1. Pull the latest `main` from the `processing-examples` repository
-1. From the root of this repo, run `npm run updateExamples`
+1. From the root of this repo, run `npm run updateExamples`. The script will prompt you with an overview of the changes before it does anything.
 
 You should now have the updated example files in your repo ready to be committed. Please submit the changes as a PR to the `main` branch of `processing-website`.
 
+## Adding a new example
+
+When adding a new example, copy/paste an existing example folder and change the content of all files to reflect the example. Remember to put any files inside the `data` folder into `/static/livesketch/EXAMPLE` and write the `liveSketch.js` file to read from this folder.
+
 ## Content file
 
 Each example has to have a `.json` file in this format:

src/components/examples/ExamplesList.js

@@ -39,7 +39,7 @@ const ExamplesList = ({ tree }) => {
             </div>
           </div>
           <p className={css.categoryDescription}>
-            {category === 'Topic Examples'
+            {category === 'Topics'
               ? intl.formatMessage({ id: 'topicExamples' })
               : intl.formatMessage({ id: 'basicExamples' })}
           </p>