New Things

docs/README.md

@@ -1,43 +1,48 @@
 # [p5.genzine](https://munusshih.github.io/p5.genzine/)
 
-p5.(gen)Zine is a free and friendly library created by [Munus Shih](https://munusshih.com) and [Iley Cao](https://www.ileycao.com/) for anyone curious about creative code and zine-making. It utilizes the p5.js library to experiment with collaborative zine-coding, forking, remixing and explore what generative coded zine can do to contribute to community building.
+p5.(gen)Zine is an open-sourced and friendly library created by [Munus Shih](https://munusshih.com) and [Iley Cao](https://www.ileycao.com/) for anyone curious about creative code and zine-making. 
 
-See the [Quick start](intro/quickstart.md) guide for more details.
-
-**CURRENT STATUS**: `v1.2` is in beta. Please feel free to send issues or pull request us!
-
-## Documentation / Tutorials
-- You can play with [this interactive documentation]() in OpenProcessing (not finished!)
-- You can find the recording of a workshop we taught at 2022's Virtual Creative Coding Festival [here](https://www.youtube.com/watch?v=lAQc3Ij3O8k&ab_channel=ProcessingFoundation).
+![The starter code for p5.genzine on the p5 editor. It is interactive and uses the webcam to generate content.](img/p5-genzine.gif)
 
-```link-preview
-https://www.youtube.com/watch?v=lAQc3Ij3O8k&ab_channel=ProcessingFoundation
-```
+It utilizes the p5.js library to experiment with collaborative zine-coding, forking, remixing and explore what generative coded zine can do to contribute to community building.
 
-- [This is the link](https://docs.google.com/presentation/d/1EJhxkK4Y07TfD7r6gUuXITqdYWmzFHE_BbPqNvFViuM/edit?usp=sharing) to our slides we used to teach `function` and `p5.gen(zine)` at POWRPLNT.
-- [There is the link](https://docs.google.com/presentation/d/1VEQN4Ro4POYxDtKL6aLBGOjlln6rnFerCH_ebJS2VUE/edit?usp=sharing) to the talk that Munus gave at 2023's Open Source Art Contributor's Conference.
+**CURRENT STATUS**: `v1.2` is in beta. Please feel free to send issues or pull request us!
 
-## Next Step
+## Getting Started
+![A series of p5.genzines workshop hosted at different locations.](img/export.gif)
 
-Some of the functions we are thinking of adding includes
-- an `all` namespacing function, etc. `all.pageNumbers()`
-- more typography functions, etc. `columns()`, `border()`, `gutter()`
-- a more accessible way of rendering the canvas
-- save `styles()`, a hierarchy-based way of writing code, etc. `h1, h2`
-- add more helper functions, etc.`setFillStroke()`
-- making it mobile friendly (currently jsPDF doesn't support mobile download)
-- different way to flip through the zine
-- more detailed printSettings: `paper`, `borderline`, `highres`, `mp4 export`
+Easily import the p5.js and p5.genzine library and start making your own zine!
 
+```HTML
+<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
+<script src="https://munusshih.github.io/p5.genzine/p5.(gen)zine.js"></script>
+<script src="sketch.js"></script>
+```
+We will put the below starter code below in our `sketch.js` so we have something in our code.
+
+```Javascript
+const zine = {
+  title: "Insert Title Here",
+  author: "Your Beautiful Name",
+  description: "Your first p5.genzine!"
+}
+
+function setupPage() {
+// This replaces the old p5 setup()
+}
+
+function drawPage() {
+// This replaces the old p5 draw()
+}
+```
 
-## You Can Help ❤️
+See the [Quick start](intro/quickstart.md) guide for more details.
 
-- By making a zine out of this and we can link them here :)
-- Use them in your class, workshops or just simply sharing!
-- Think of creative ways of using this library!
-- Write tutorial/documentation on ur exp using this library
-- issues or pull request us on how to enhance/fix the code
+## Other Tutorials & Resources
 
-## License
+![A series of p5.genzines workshop hosted at different locations.](img/workshop.gif)
 
-It is a open source project with [MIT license](https://github.com/munusshih/p5.genzine/blob/main/license).
+- You can play with [this interactive documentation]() in OpenProcessing (not finished!)
+- You can find the recording of a workshop we taught at 2022's Virtual Creative Coding Festival [here](https://www.youtube.com/watch?v=lAQc3Ij3O8k&ab_channel=ProcessingFoundation).
+- [This is the link](https://docs.google.com/presentation/d/1EJhxkK4Y07TfD7r6gUuXITqdYWmzFHE_BbPqNvFViuM/edit?usp=sharing) to our slides we used to teach `function` and `p5.gen(zine)` at POWRPLNT.
+- [There is the link](https://docs.google.com/presentation/d/1VEQN4Ro4POYxDtKL6aLBGOjlln6rnFerCH_ebJS2VUE/edit?usp=sharing) to the talk that Munus gave at 2023's Open Source Art Contributor's Conference.

docs/_sidebar.md

@@ -2,23 +2,22 @@
 - 🎉 Introduction
 
   - [Homepage]()
+  - [Quick Start](intro/quickstart.md)
   - [Example/Gallery](intro/example.md)
-  - [Motivation](intro/motivation.md)
+  - [About](intro/about.md)
 
 - ✍️ Getting Started
 
-  - [Quick Start](intro/quickstart.md)
-  - [Installation](learn/installation.md)
+  - [Forking & Remix](learn/fork-remix.md)
   - [Basic Functions](learn/basic.md)
   - [Interactivity](learn/interact.md)
-  - [Randomize & Generative](learn/random.md)
+  - [Export & Print](learn/export.md)
 
 - 📚 Further References
 
   - [Custom Functions](learn/custom.md)
-  - [System & Accessibility](learn/custom.md)
+  - [System & Templates](learn/system.md)
   - [Multiplayer](learn/multi.md)
-  - [Forking & Remixing](learn/multi.md)
   - [Next Step](learn/next-step.md)
 
 <!-- - 📚 Resources
@@ -28,10 +27,10 @@
   - [For community-builders](resources/fork-zine.md)
   - [Tools & Libraries](resouces/tools.md) -->
 
-- 💻 Code 
+<!-- - 💻 Code 
   - [Github](https://github.com/munusshih/p5.genzine)
   - [Download](https://github.com/munusshih/p5.genzine)
-  - [Editor](https://github.com/munusshih/p5.genzine)
+  - [Editor](https://github.com/munusshih/p5.genzine) -->
 
 
 

docs/index.html

@@ -10,8 +10,6 @@
     content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="main.css">
   <link rel="stylesheet" href="prism.css">
-  <link rel="stylesheet"
-    href="//unpkg.com/docsify-link-preview/src/style.css" />
 </head>
 
 <body>
@@ -21,7 +19,7 @@
     window.$docsify = {
       name: 'p5.genzine',
       repo: 'munusshih/p5.genzine',
-      coverpage: true,
+      //coverpage: true,
 
       el: '#main',
       search: 'auto', // default

docs/intro/about.md

@@ -0,0 +1,26 @@
+# About
+
+## Next Step
+
+Some of the functions we are thinking of adding includes
+- an `all` namespacing function, etc. `all.pageNumbers()`
+- more typography functions, etc. `columns()`, `border()`, `gutter()`
+- a more accessible way of rendering the canvas
+- save `styles()`, a hierarchy-based way of writing code, etc. `h1, h2`
+- add more helper functions, etc.`setFillStroke()`
+- making it mobile friendly (currently jsPDF doesn't support mobile download)
+- different way to flip through the zine
+- more detailed printSettings: `paper`, `borderline`, `highres`, `mp4 export`
+
+
+## You Can Help ❤️
+
+- By making a zine out of this and we can link them here :)
+- Use them in your class, workshops or just simply sharing!
+- Think of creative ways of using this library!
+- Write tutorial/documentation on ur exp using this library
+- issues or pull request us on how to enhance/fix the code
+
+## License
+
+It is a open source project with [MIT license](https://github.com/munusshih/p5.genzine/blob/main/license).

docs/main.css

@@ -865,4 +865,7 @@ code .token {
   min-height: 1.5rem;
   position: relative;
   left: auto;
+}
+.fab.light-green{
+  background: var(--theme-color, #42b983)!important;
 }