Merge branch '2.0' into extra-slash

Author: ksen0

public/assets/anglurBulge.png

@@ -19,7 +19,7 @@ const newCurationId = "89576";
  */
 export type OpenProcessingCurationResponse = Array<{
   /** Sketch ID used for constructing URLs */
-  visualID: string;
+  visualID: number;
   /** Title of sketch */
   title: string;
   /** Description of sketch */
@@ -85,7 +85,7 @@ export const getCurationSketches = memoize(async (
  */
 export type OpenProcessingSketchResponse = {
   /** Sketch ID used for constructing URLs */
-  visualID: string;
+  visualID: number;
   /** Title of sketch */
   title: string;
   /** Description of sketch */
@@ -108,7 +108,7 @@ export type OpenProcessingSketchResponse = {
  * @returns
  */
 export const getSketch = memoize(
-  async (id: string): Promise<OpenProcessingSketchResponse> => {
+  async (id: number): Promise<OpenProcessingSketchResponse> => {
     // check for memoized sketch in curation sketches
     const curationSketches = await getCurationSketches();
     const memoizedSketch = curationSketches.find((el) => el.visualID === id);
@@ -134,7 +134,7 @@ export const getSketch = memoize(
  * But only uses the width and height properties from this call
  * Width and height should instead be added to properties for `/api/sketch/:id` or `api/curation/:curationId/sketches` instead
  */
-export const getSketchSize = memoize(async (id: string) => {
+export const getSketchSize = memoize(async (id: number) => {
   const sketch = await getSketch(id)
   if (sketch.mode !== 'p5js') {
     return { width: undefined, height: undefined };
@@ -164,16 +164,16 @@ export const getSketchSize = memoize(async (id: string) => {
   return { width: undefined, height: undefined };
 });
 
-export const makeSketchLinkUrl = (id: string) =>
+export const makeSketchLinkUrl = (id: number) =>
   `https://openprocessing.org/sketch/${id}`;
 
-export const makeSketchEmbedUrl = (id: string) =>
+export const makeSketchEmbedUrl = (id: number) =>
   `https://openprocessing.org/sketch/${id}/embed/?plusEmbedFullscreen=true&plusEmbedInstructions=false`;
 
-export const makeThumbnailUrl = (id: string) =>
+export const makeThumbnailUrl = (id: number) =>
   `https://openprocessing-usercontent.s3.amazonaws.com/thumbnails/visualThumbnail${id}@2x.jpg`;
 
-export const getSketchThumbnailSource = async (id: string) => {
+export const getSketchThumbnailSource = async (id: number) => {
   const manualThumbs = import.meta.glob<ImageMetadata>('./images/*', { import: 'default' })
   const key = `./images/${id}.png`;
   if (manualThumbs[key]) {

public/assets/closeCurveSpline.png

@@ -50,13 +50,35 @@ const bannerEntry = await getEntry("banner", currentLocale);
     <div class="lg:col-start-2 mt-xl lg:mt-0">
       <div class="mb-5" id="socials-footer-category">{t("Socials")}</div>
       <ul aria-labelledby="socials-footer-category">
-        <li><a href="https://github.com/processing/p5.js">GitHub</a></li>
-        <li><a href="https://www.instagram.com/p5xjs/">Instagram</a></li>
-        <li><a href="https://twitter.com/p5xjs">X</a></li>
-        <li><a href="https://www.youtube.com/@ProcessingFoundation">YouTube</a></li>     
-        <li><a href="https://discord.gg/SHQ8dH25r9">Discord</a></li>
         <li>
-          <a href="https://discourse.processing.org/c/p5js">{t("Forum")}</a>
+          <a href="https://github.com/processing/p5.js" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            GitHub ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://www.instagram.com/p5xjs/" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            Instagram ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://twitter.com/p5xjs" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            X ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://www.youtube.com/@ProcessingFoundation" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            YouTube ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://discord.gg/SHQ8dH25r9" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            Discord ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://discourse.processing.org/c/p5js" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            {t("Forum")} ↗
+          </a>
         </li>
       </ul>
     </div>
@@ -65,3 +87,4 @@ const bannerEntry = await getEntry("banner", currentLocale);
 {bannerEntry && !bannerEntry.data.hidden && (<Banner entry={bannerEntry} />)}
 
 <style></style>
+

public/assets/excludeSpline.png

@@ -380,21 +380,35 @@ Class constructors are defined with the `@class` tag and the `@constructor` tag.
 
 The p5.js repository is set up so that you can generate and preview the reference without needing to build and run the p5.js website as well.
 
-* The main command to generate the reference from the reference comments in the source code is to run the following command.
+To do so, make sure you have committed and pushed your changes to a branch of your fork of p5.js.
+
+**Important:** Make sure you're working with compatible branches:
+
+- Use the `2.0` branch of p5.js-website with the `dev-2.0` branch of p5.js
+- Use the `main` branch of p5.js-website with the `main` branch of p5.js
+
+* First, ensure you have the necessary dependencies installed in the p5.js-website repository:
 
 ```
-npm run docs
+npm install
 ```
 
-This will generate the necessary preview files and the main `docs/reference/data.json` file, which is the same file (after minification) that will be used to render the reference page on the website.
-
-* For continuous work on the reference, you can run the following command.
+* Then, in the p5.js-website repo, run the following command, using the URL of your fork of p5 before the `#`, and the name of your branch after the `#`:
 
 ```
-npm run docs:dev
+npm run custom:dev https://github.com/yourUsername/p5.js.git#yourBranch
 ```
 
-This will launch a live preview of the rendered reference that will update each time you make changes (you will need to refresh the page after making changes to see them appear). This is useful, especially for previewing example code running in the browser.
+This will build the reference from your branch and start a development preview of the website. A URL will be logged in the console that you can go to in your browser to test out your changes.
+
+If everything is working correctly, your terminal output should look similar to this:
+![Terminal output showing successful npm run custom:dev execution](src/content/contributor-docs/images/custom-dev-terminal-output.png)
+
+* When you're done, you can run this command to reset your changes:
+
+```
+npm run custom:cleanup
+```
 
 * The main template files are stored in the `docs/` folder and, in most cases, you should not make changes directly to files in this folder, except to add new asset files in the `docs/yuidoc-p5-theme/assets` folder.