fix: a variety of links, docs, and tutorial issues (#138)

docs/guides/components/interaction.md

@@ -33,7 +33,7 @@ PixiJS supports the following event types:
 | `globalpointermove` | Fired when a pointer device is moved, regardless of hit-testing the current object.                                |
 | `pointerout`        | Fired when a pointer device is moved off the display object.                                                       |
 | `pointerover`       | Fired when a pointer device is moved onto the display object.                                                      |
-| `pointertap`        | Fired when a pointer device is tapped twice on the display object.                                                 |
+| `pointertap`        | Fired when a pointer device is tapped on the display object.                                                       |
 | `pointerup`         | Fired when a pointer device button is released over the display object.                                            |
 | `pointerupoutside`  | Fired when a pointer device button is released outside the display object that initially registered a pointerdown. |
 | `mousedown `        | Fired when a mouse button is pressed on the display object.                                                        |
@@ -52,7 +52,7 @@ PixiJS supports the following event types:
 | `touchmove `        | Fired when a touch point is moved along the display object.                                                        |
 | `globaltouchmove`   | Fired when a touch point is moved, regardless of hit-testing the current object.                                   |
 | `touchstart `       | Fired when a touch point is placed on the display object.                                                          |
-| `tap `              | Fired when a touch point is tapped twice on the display object.                                                    |
+| `tap `              | Fired when a touch point is tapped on the display object.                                                          |
 | `wheel `            | Fired when a mouse wheel is spun over the display object.                                                          |
 | `rightclick `       | Fired when a right mouse button is clicked (pressed and released) over the display object.                         |
 | `rightdown `        | Fired when a right mouse button is pressed on the display object.                                                  |

docs/guides/migrations/v5.md

@@ -37,7 +37,7 @@ PIXI.settings.PREFER_ENV = PIXI.ENV.WEBGL;
 
 PixiJS v5 introduces a new class called `PIXI.Mesh`. This allows overriding the default shader and the ability to add more attributes to geometry. For [example](https://pixijs.io/examples/#/mesh/triangle-textured.js), you can add colors to vertices.
 
-The old v4 Mesh class has moved from `PIXI.mesh.Mesh` to [`PIXI.SimpleMesh`](http://pixijs.download/dev/docs/PIXI.SimpleMesh.html), it extends `PIXI.Mesh`.
+The old v4 Mesh class has moved from `PIXI.mesh.Mesh` to [`PIXI.SimpleMesh`](http://pixijs.download/v5.3.12/docs/PIXI.SimpleMesh.html), it extends `PIXI.Mesh`.
 
 `PIXI.mesh.Rope`, `PIXI.mesh.Plane`, `PIXI.mesh.NineSlicePlane` have moved to `PIXI.SimpleRope`, `PIXI.SimplePlane` and `PIXI.NineSlicePlane` respectively.
 
@@ -123,7 +123,7 @@ In v5, this code is no longer needed.
 
 One of the newest features in v5 is that we decoupled all the asset-specific functionality from BaseTexture. We created a new system called "resources" and each BaseTexture now has a resource that wraps some specific asset type. For instance: VideoResource, SVGResource, ImageResource, CanvasResource. In the future, we hope to be able to add other resource types. If there were asset-specific methods or properties being called before, these will probably be on `baseTexture.resource`.
 
-Also, we removed all of the `from*` methods from BaseTexture, so you just can call `BaseTexture.from` and pass in whatever resource. Please see [docs](http://pixijs.download/dev/docs/PIXI.BaseTexture.html) for more information about `from`.
+Also, we removed all of the `from*` methods from BaseTexture, so you just can call `BaseTexture.from` and pass in whatever resource. Please see [docs](http://pixijs.download/v5.3.12/docs/PIXI.BaseTexture.html) for more information about `from`.
 
 ```js
 const canvas = document.createElement('canvas');

docs/pixi-version.json

@@ -1,10 +1,10 @@
 {
   "versionLabel": "v8.x",
-  "version": "8.5.1",
-  "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.5.1",
-  "build": "https://pixijs.download/v8.5.1/pixi.min.js",
-  "docs": "https://pixijs.download/v8.5.1/docs/index.html",
-  "npm": "8.5.1",
+  "version": "8.6.0",
+  "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.0",
+  "build": "https://pixijs.download/v8.6.0/pixi.min.js",
+  "docs": "https://pixijs.download/v8.6.0/docs/index.html",
+  "npm": "8.6.0",
   "prerelease": false,
   "latest": true
 }

pixi-versions.json

@@ -12,11 +12,11 @@
   },
   {
     "versionLabel": "v8.x",
-    "version": "8.5.1",
-    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.5.1",
-    "build": "https://pixijs.download/v8.5.1/pixi.min.js",
-    "docs": "https://pixijs.download/v8.5.1/docs/index.html",
-    "npm": "8.5.1",
+    "version": "8.6.0",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.6.0",
+    "build": "https://pixijs.download/v8.6.0/pixi.min.js",
+    "docs": "https://pixijs.download/v8.6.0/docs/index.html",
+    "npm": "8.6.0",
     "prerelease": false,
     "latest": true,
     "isCurrent": true

src/pages/team.tsx

@@ -15,7 +15,10 @@ export default function Team(): JSX.Element
     });
 
     return (
-        <Layout title={'Meet the Team'} description="Description will go into a meta tag in <head />">
+        <Layout
+            title={'Meet the Team'}
+            description="The handful of dedicated individuals who volunteer their time to make PixiJS better."
+        >
             <main>
                 <div className={`${styles.header} padding-horiz--lg text--center margin-vert--xl`}>
                     <h1 className="underline">Meet the Team</h1>

src/tutorials/v7.0.0/gettingStarted/step2-content.md

@@ -2,7 +2,7 @@
 
 So far all we've been doing is prep work. We haven't actually told PixiJS to draw anything. Let's fix that by adding an image to be displayed.
 
-There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/release/docs/PIXI.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [DisplayObjects](https://pixijs.download/release/docs/PIXI.DisplayObject.html). A Sprite is a type of DisplayObject that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth.
+There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/v7.4.2/docs/PIXI.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [DisplayObjects](https://pixijs.download/v7.4.2/docs/PIXI.DisplayObject.html). A Sprite is a type of DisplayObject that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth.
 
 Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. We'll talk a lot more about resource loading in later guides. For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us:
 
@@ -11,7 +11,7 @@ Before PixiJS can render an image, it needs to be loaded. Just like in any web p
 const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png')
 ```
 
-Then we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/release/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it.
+Then we need to add our new sprite to the stage. The stage is simply a [Container](https://pixijs.download/v7.4.2/docs/PIXI.Container.html) that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it.
 
 ```javascript
 app.stage.addChild(bunny)

src/tutorials/v8.0.0/chooChooTrain/step1/step1-content.md

@@ -2,9 +2,9 @@
 
 Welcome to the Choo Choo Train workshop!
 
-We are going to handcraft a cute little scene of a train moving through a landscape at night. We will solely be using the [Graphics](https://pixijs.com/guides/components/graphics) API to draw out the whole scene. In this tutorial, we will be exploring a handful of methods it provides to draw a variety of shapes. For the full list of methods, please check out the Graphics [documentation](https://pixijs.download/release/docs/PIXI.Graphics.html).
+We are going to handcraft a cute little scene of a train moving through a landscape at night. We will solely be using the [Graphics](https://pixijs.com/guides/components/graphics) API to draw out the whole scene. In this tutorial, we will be exploring a handful of methods it provides to draw a variety of shapes. For the full list of methods, please check out the Graphics [documentation](https://pixijs.download/release/docs/scene.Graphics.html).
 
-Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps.
+Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/8.x/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps.
 
 We will be using an asynchronous immediately invoked function expression ([IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)), but you are free to switch to use promises instead.
 
@@ -19,4 +19,4 @@ document.body.appendChild(app.canvas);
 
 At this point, you should see the preview filled with an empty light blue background.
 
-When you are ready, proceed to the next exercise using the _Next >_ button below, or feel free to skip to any exercise using the drop-down menu on the top right hand corner of the card.
+When you are ready, proceed to the next exercise using the _Next >_ button below, or feel free to skip to any exercise using the drop-down menu on the top right hand corner of the card.

src/tutorials/v8.0.0/chooChooTrain/step10/step10-content.md

@@ -1,5 +1,5 @@
 # You did it!
 
-Congratulations, hope you enjoyed the journey! Now you are an expert on the Graphics API. Make sure to explore other features that the API has to offer on the official [documentation](https://pixijs.download/release/docs/PIXI.Graphics.html), like the ability to cut shapes out from existing ones, advance lines and curves, using gradients or textures for fill and stroke - just to list a few.
+Congratulations, hope you enjoyed the journey! Now you are an expert on the Graphics API. Make sure to explore other features that the API has to offer on the official [documentation](https://pixijs.download/release/docs/scene.Graphics.html), like the ability to cut shapes out from existing ones, advance lines and curves, using gradients or textures for fill and stroke - just to list a few.
 
-Feel free to head back to the gallery and explore other tutorials.
+Feel free to head back to the gallery and explore other tutorials.

src/tutorials/v8.0.0/fishPond/step1/step1-content.md

@@ -2,9 +2,9 @@
 
 Welcome to the Fish Pond workshop!
 
-We are going to build a virtual pond and fill them with a number of colorful fishes. In the process, we will be learning about basic manipulation of [Sprites](/guides/components/sprites), [TilingSprite](https://pixijs.download/release/docs/PIXI.TilingSprite.html) and Filter, specifically the [Displacement Filter](https://pixijs.download/release/docs/PIXI.DisplacementFilter.html).
+We are going to build a virtual pond and fill them with a number of colorful fishes. In the process, we will be learning about basic manipulation of [Sprites](/8.x/guides/components/sprites), [TilingSprite](https://pixijs.download/release/docs/scene.TilingSprite.html) and Filter, specifically the [Displacement Filter](https://pixijs.download/release/docs/filters.DisplacementFilter.html).
 
-Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps.
+Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/8.x/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps.
 
 We will be using an asynchronous immediately invoked function expression ([IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)), but you are free to switch to use promises instead.
 

src/tutorials/v8.0.0/fishPond/step5/addDisplacementEffect-completed.js

@@ -12,8 +12,6 @@ export function addDisplacementEffect(app)
     const filter = new DisplacementFilter({
         sprite,
         scale: 50,
-        width: app.screen.width,
-        height: app.screen.height,
     });
 
     // Add the filter to the stage.

src/tutorials/v8.0.0/fishPond/step5/step5-content.md

@@ -18,11 +18,9 @@ From here, we can simply create the displacement filter and add it to the stage
 const filter = new DisplacementFilter({
     sprite,
     scale: 50,
-    width: app.screen.width,
-    height: app.screen.height,
 });
 
 app.stage.filters = [filter];
 ```
 
-Now you should see the post-processed pond in effect. Looks like we are looking down directly into a real pond, right?
+Now you should see the post-processed pond in effect. Looks like we are looking down directly into a real pond, right?

src/tutorials/v8.0.0/gettingStarted/step1-content.md

@@ -2,7 +2,7 @@
 
 Welcome to the PixiJS tutorial!
 
-Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/guides/basics/getting-started#loading-pixijs) section. Let's start with the creation of a PixiJS canvas application and add its view to the DOM.
+Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/8.x/guides/basics/getting-started#loading-pixijs) section. Let's start with the creation of a PixiJS canvas application and add its view to the DOM.
 
 We will be using an asynchronous immediately invoked function expression ([IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)), but you are free to switch to use promises instead.
 

src/tutorials/v8.0.0/gettingStarted/step2-content.md

@@ -2,7 +2,7 @@
 
 So far all we've been doing is prep work. We haven't actually told PixiJS to draw anything. Let's fix that by adding an image to be displayed.
 
-There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/release/docs/PIXI.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [Containers](https://pixijs.download/release/docs/PIXI.Container.html). A Sprite is an extension of Container that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth.
+There are a number of ways to draw images in PixiJS, but the simplest is by using a [Sprite](https://pixijs.download/release/docs/scene.Sprite.html). We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of [Containers](https://pixijs.download/release/docs/scene.Container.html). A Sprite is an extension of Container that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth.
 
 Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. For now, we will simply load a single texture up on the spot with the `Assets` utility class.
 

src/tutorials/v8.0.0/index.ts

@@ -24,7 +24,7 @@ export default {
         thumbnail: 'thumb_spineboy_adventure.png',
         steps: spineBoyAdventureTutorialSteps,
         extraPackages: {
-            '@pixi/spine-pixi': '^1.0.4',
+            '@esotericsoftware/spine-pixi-v8': '^4.2.66',
         },
     },
 };

src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-code.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 

src/tutorials/v8.0.0/spineBoyAdventure/step1/step1-content.md

@@ -2,7 +2,7 @@
 
 Welcome to the SpineBoy Adventure workshop!
 
-Let's venture into the world of the PixiJS ecosystem. We are going to explore one of the official plugins; [Spine plugin (`@pixi/spine-pixi`)](https://github.com/pixijs/spine-v8) which allow us to render and manipulate Spine animations on our PixiJS.
+Let's venture into the world of the PixiJS ecosystem. We are going to explore one of the official plugins; [Spine plugin (`@esotericsoftware/spine-pixi-v8`)](https://github.com/EsotericSoftware/spine-runtimes/tree/4.2/spine-ts) which allow us to render and manipulate Spine animations on our PixiJS.
 
 We will be creating a mini interactive side-scroller experience using the famous SpineBoy which will be controlled by the keyboard. For the sake of simplicity, we will be focusing on just the movement around the scene.
 

src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1-completed.js

@@ -1,4 +1,4 @@
-import { Spine } from '@pixi/spine-pixi';
+import { Spine } from '@esotericsoftware/spine-pixi-v8';
 import { Container } from 'pixi.js';
 
 // Class for handling the character Spine and its animations.

src/tutorials/v8.0.0/spineBoyAdventure/step2/SpineBoy1.js

@@ -1,4 +1,4 @@
-import { Spine } from '@pixi/spine-pixi';
+import { Spine } from '@esotericsoftware/spine-pixi-v8';
 import { Container } from 'pixi.js';
 
 // Class for handling the character Spine and its animations.

src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code-completed.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 import { SpineBoy } from './SpineBoy';

src/tutorials/v8.0.0/spineBoyAdventure/step2/step2-code.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 import { SpineBoy } from './SpineBoy';

src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code-completed.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 import { SpineBoy } from './SpineBoy';

src/tutorials/v8.0.0/spineBoyAdventure/step3/step3-code.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 import { SpineBoy } from './SpineBoy';

src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2-completed.js

@@ -1,4 +1,4 @@
-import { Spine } from '@pixi/spine-pixi';
+import { Spine } from '@esotericsoftware/spine-pixi-v8';
 import { Container } from 'pixi.js';
 
 // Define the Spine animation map for the character.

src/tutorials/v8.0.0/spineBoyAdventure/step4/SpineBoy2.js

@@ -1,4 +1,4 @@
-import { Spine } from '@pixi/spine-pixi';
+import { Spine } from '@esotericsoftware/spine-pixi-v8';
 import { Container } from 'pixi.js';
 
 // Define the Spine animation map for the character.

src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code-completed.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 import { SpineBoy } from './SpineBoy';

src/tutorials/v8.0.0/spineBoyAdventure/step4/step4-code.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 import { SpineBoy } from './SpineBoy';

src/tutorials/v8.0.0/spineBoyAdventure/step5/step5-code.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 import { SpineBoy } from './SpineBoy';

src/tutorials/v8.0.0/spineBoyAdventure/step6/step6-code-completed.js

@@ -1,4 +1,4 @@
-import '@pixi/spine-pixi';
+import '@esotericsoftware/spine-pixi-v8';
 
 import { Application, Assets } from 'pixi.js';
 import { SpineBoy } from './SpineBoy';