diff --git a/README.md b/README.md index d50ae8f..18146b6 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,15 @@ Small experiment to have a code sandbox for testing p5.js code. Based on [this blog](https://joyofcode.xyz/create-a-coding-sandbox) post "Create a JavaScript Code Sandbox" by Matija. +The idea is to be able to build a documentation page for sketches produced during seminars, like in my seminar [gestalten-in-code](https://interface.fh-potsdam.de/gestalten-in-code/) but have all the sketches editable in the sandbox. + +Current feature set is limited but it can: + +- Save changes to local storage +- Control via component prop if changes should be saved to local storage +- Control via URL SearchParameters if the local storage should be disabled + +See [@ff6347 p5js code sandbox project for planned features](https://github.com/users/ff6347/projects/2/views/1) ## Development @@ -22,7 +31,12 @@ Inside of your Astro project, you'll see the following folders and files: │ └── favicon.svg ├── src/ │ ├── components/ -│ │ └── Card.astro +│ │ └── sandbox.css // the components css +│ │ └── Sandbox.tsx // the component to load in pages +│ ├── hooks/ +│ │ └── local-storage.ts // the local storage customHook +│ ├── hooks/ +│ │ └── iframe-source.ts // the html for the iframe │ ├── layouts/ │ │ └── Layout.astro │ └── pages/ @@ -30,6 +44,8 @@ Inside of your Astro project, you'll see the following folders and files: └── package.json ``` +## Astro Docs + Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.