From c0c34a30dca55139af4f716b0b53d1ba98d5a9f8 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Sat, 13 Jan 2024 02:07:32 +0000 Subject: [PATCH] Fix Versioned Links --- docs/guides/basics/getting-started.md | 6 +++--- docs/guides/components/containers.md | 2 +- docs/guides/components/graphics.md | 4 ++-- docs/guides/components/interaction.md | 2 +- docs/guides/components/sprites.md | 2 +- docs/guides/components/text.md | 4 ++-- docs/guides/components/textures.md | 2 +- src/components/Homepage/ClosingSection/index.tsx | 2 +- src/components/Homepage/HeroHeader/index.tsx | 2 +- .../version-7.3.2/guides/basics/getting-started.md | 6 +++--- .../version-7.3.2/guides/components/containers.md | 2 +- versioned_docs/version-7.3.2/guides/components/graphics.md | 4 ++-- .../version-7.3.2/guides/components/interaction.md | 2 +- versioned_docs/version-7.3.2/guides/components/sprites.md | 2 +- versioned_docs/version-7.3.2/guides/components/text.md | 4 ++-- versioned_docs/version-7.3.2/guides/components/textures.md | 2 +- 16 files changed, 24 insertions(+), 24 deletions(-) diff --git a/docs/guides/basics/getting-started.md b/docs/guides/basics/getting-started.md index 8c84ec24d..a58391bb2 100644 --- a/docs/guides/basics/getting-started.md +++ b/docs/guides/basics/getting-started.md @@ -91,7 +91,7 @@ What we're doing here is adding a JavaScript code block, and in that block creat When the PIXI.Application class creates the renderer, it builds a Canvas element that it will render *to*. In order to see what we draw with PixiJS, we need to add this Canvas element to the web page's DOM. Append the following line to your page's script block: -```JavaScript +```javascript document.body.appendChild(app.view); ``` @@ -105,7 +105,7 @@ There are a number of ways to draw images in PixiJS, but the simplest is by usin 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: -```JavaScript +```javascript // Magically load the PNG asynchronously let sprite = PIXI.Sprite.from('sample.png'); ``` @@ -116,7 +116,7 @@ Before PixiJS can render an image, it needs to be loaded. Just like in any web Finally, 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. -```JavaScript +```javascript app.stage.addChild(sprite); ``` diff --git a/docs/guides/components/containers.md b/docs/guides/components/containers.md index c4bd5de39..9839140c0 100644 --- a/docs/guides/components/containers.md +++ b/docs/guides/components/containers.md @@ -10,7 +10,7 @@ However, it's a good idea _not_ to do this. Standalone Container objects are ** So that's the primary use for Containers - as groups of renderable objects in a hierarchy. -Check out the [container example code](/examples/basic/container). +Check out the [container example code](../../examples/basic/container). ## Masking diff --git a/docs/guides/components/graphics.md b/docs/guides/components/graphics.md index 5c1e0c73b..236e11946 100644 --- a/docs/guides/components/graphics.md +++ b/docs/guides/components/graphics.md @@ -4,7 +4,7 @@ In this guide, we're going to de-mystify the Graphics object, starting with how to think about what it does. -Check out the [graphics example code](/examples/graphics/simple). +Check out the [graphics example code](../../examples/graphics/simple). ## Graphics Is About Building - Not Drawing @@ -83,7 +83,7 @@ Doing so is simple. Create the object, call the various builder functions to ad You can also use a Graphics object as a complex mask. To do so, build your object and primitives as usual. Next create a PIXI.Container object that will contain the masked content, and set its `mask` property to your Graphics object. The children of the container will now be clipped to only show through inside the geometry you've created. This technique works for both WebGL and Canvas-based rendering. -Check out the [masking example code](/examples/graphics/simple). +Check out the [masking example code](../../examples/graphics/simple). ## Caveats and Gotchas diff --git a/docs/guides/components/interaction.md b/docs/guides/components/interaction.md index 3aa113495..7d98df968 100644 --- a/docs/guides/components/interaction.md +++ b/docs/guides/components/interaction.md @@ -59,7 +59,7 @@ PixiJS supports the following event types: Any DisplayObject-derived object (Sprite, Container, etc.) can become interactive simply by setting its `eventMode` property to any of the eventModes listed above. Doing so will cause the object to emit interaction events that can be responded to in order to drive your project's behavior. -Check out the [interaction example code](/examples/events/click). +Check out the [interaction example code](../../examples/events/click). To respond to clicks and taps, bind to the events fired on the object, like so: diff --git a/docs/guides/components/sprites.md b/docs/guides/components/sprites.md index db495b6b3..92ef5bb77 100644 --- a/docs/guides/components/sprites.md +++ b/docs/guides/components/sprites.md @@ -6,7 +6,7 @@ Sprites are the simplest and most common renderable object in PixiJS. They repr To create a Sprite, all you need is a Texture (check out the Texture guide). Load a PNG's URL using the PIXI.Loader class, then call `PIXI.Sprite.from(url)` and you're all set. As a convenience during prototyping, you can pass a non-loaded URL to `from()` and PixiJS will handle it, but your sprite will "pop in" after it loads if you don't pre-load your textures. -Check out the [sprite example code](/examples/sprite/basic). +Check out the [sprite example code](../../examples/sprite/basic). ## Using Sprites diff --git a/docs/guides/components/text.md b/docs/guides/components/text.md index d7a1b53c1..caf4aab69 100644 --- a/docs/guides/components/text.md +++ b/docs/guides/components/text.md @@ -14,7 +14,7 @@ In order to draw text to the screen, you use a [Text](https://pixijs.download/re So when working with PIXI.Text objects, there are two sets of options - standard display object options like position, rotation, etc that work *after* the text is rasterized internally, and text style options that are used *while* rasterizing. Because text once rendered is basically just a sprite, there's no need to review the standard options. Instead, let's focus on how text is styled. -Check out the [text example code](/examples/text/pixi-text). +Check out the [text example code](../../examples/text/pixi-text). ## Text Styles @@ -80,7 +80,7 @@ In addition to the standard PIXI.Text approach to adding text to your project, P The primary advantage of this approach is speed - changing text frequently is much cheaper and rendering each additional piece of text is much faster due to the shared source texture. -Check out the [bitmap text example code](/examples/text/bitmap-text). +Check out the [bitmap text example code](../../examples/text/bitmap-text). ## BitmapFont diff --git a/docs/guides/components/textures.md b/docs/guides/components/textures.md index 492cf2f8c..0dd4e38c9 100644 --- a/docs/guides/components/textures.md +++ b/docs/guides/components/textures.md @@ -72,4 +72,4 @@ RenderTexture: A more advanced (but very powerful!) feature is to build a Textur Each of these texture sources has caveats and nuances that we can't cover in this guide, but they should give you a feeling for the power of PixiJS's texture system. -Check out the [render texture example code](/examples/textures/render-texture-basic). +Check out the [render texture example code](../../examples/textures/render-texture-basic). diff --git a/src/components/Homepage/ClosingSection/index.tsx b/src/components/Homepage/ClosingSection/index.tsx index a08ce5019..4364131fc 100644 --- a/src/components/Homepage/ClosingSection/index.tsx +++ b/src/components/Homepage/ClosingSection/index.tsx @@ -37,7 +37,7 @@ export default function ClosingSection(): JSX.Element anim="short-up-anim" style={animShortUp(0.3, 0.7)} label="Get Started" - link="/tutorial" + link="next/tutorials" outline={true} /> diff --git a/src/components/Homepage/HeroHeader/index.tsx b/src/components/Homepage/HeroHeader/index.tsx index 98874c69a..c21a56295 100644 --- a/src/components/Homepage/HeroHeader/index.tsx +++ b/src/components/Homepage/HeroHeader/index.tsx @@ -16,7 +16,7 @@ export default function HeroHeader(): JSX.Element
  - +
diff --git a/versioned_docs/version-7.3.2/guides/basics/getting-started.md b/versioned_docs/version-7.3.2/guides/basics/getting-started.md index 8c84ec24d..a58391bb2 100644 --- a/versioned_docs/version-7.3.2/guides/basics/getting-started.md +++ b/versioned_docs/version-7.3.2/guides/basics/getting-started.md @@ -91,7 +91,7 @@ What we're doing here is adding a JavaScript code block, and in that block creat When the PIXI.Application class creates the renderer, it builds a Canvas element that it will render *to*. In order to see what we draw with PixiJS, we need to add this Canvas element to the web page's DOM. Append the following line to your page's script block: -```JavaScript +```javascript document.body.appendChild(app.view); ``` @@ -105,7 +105,7 @@ There are a number of ways to draw images in PixiJS, but the simplest is by usin 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: -```JavaScript +```javascript // Magically load the PNG asynchronously let sprite = PIXI.Sprite.from('sample.png'); ``` @@ -116,7 +116,7 @@ Before PixiJS can render an image, it needs to be loaded. Just like in any web Finally, 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. -```JavaScript +```javascript app.stage.addChild(sprite); ``` diff --git a/versioned_docs/version-7.3.2/guides/components/containers.md b/versioned_docs/version-7.3.2/guides/components/containers.md index c4bd5de39..9839140c0 100644 --- a/versioned_docs/version-7.3.2/guides/components/containers.md +++ b/versioned_docs/version-7.3.2/guides/components/containers.md @@ -10,7 +10,7 @@ However, it's a good idea _not_ to do this. Standalone Container objects are ** So that's the primary use for Containers - as groups of renderable objects in a hierarchy. -Check out the [container example code](/examples/basic/container). +Check out the [container example code](../../examples/basic/container). ## Masking diff --git a/versioned_docs/version-7.3.2/guides/components/graphics.md b/versioned_docs/version-7.3.2/guides/components/graphics.md index 5c1e0c73b..236e11946 100644 --- a/versioned_docs/version-7.3.2/guides/components/graphics.md +++ b/versioned_docs/version-7.3.2/guides/components/graphics.md @@ -4,7 +4,7 @@ In this guide, we're going to de-mystify the Graphics object, starting with how to think about what it does. -Check out the [graphics example code](/examples/graphics/simple). +Check out the [graphics example code](../../examples/graphics/simple). ## Graphics Is About Building - Not Drawing @@ -83,7 +83,7 @@ Doing so is simple. Create the object, call the various builder functions to ad You can also use a Graphics object as a complex mask. To do so, build your object and primitives as usual. Next create a PIXI.Container object that will contain the masked content, and set its `mask` property to your Graphics object. The children of the container will now be clipped to only show through inside the geometry you've created. This technique works for both WebGL and Canvas-based rendering. -Check out the [masking example code](/examples/graphics/simple). +Check out the [masking example code](../../examples/graphics/simple). ## Caveats and Gotchas diff --git a/versioned_docs/version-7.3.2/guides/components/interaction.md b/versioned_docs/version-7.3.2/guides/components/interaction.md index 3aa113495..7d98df968 100644 --- a/versioned_docs/version-7.3.2/guides/components/interaction.md +++ b/versioned_docs/version-7.3.2/guides/components/interaction.md @@ -59,7 +59,7 @@ PixiJS supports the following event types: Any DisplayObject-derived object (Sprite, Container, etc.) can become interactive simply by setting its `eventMode` property to any of the eventModes listed above. Doing so will cause the object to emit interaction events that can be responded to in order to drive your project's behavior. -Check out the [interaction example code](/examples/events/click). +Check out the [interaction example code](../../examples/events/click). To respond to clicks and taps, bind to the events fired on the object, like so: diff --git a/versioned_docs/version-7.3.2/guides/components/sprites.md b/versioned_docs/version-7.3.2/guides/components/sprites.md index db495b6b3..92ef5bb77 100644 --- a/versioned_docs/version-7.3.2/guides/components/sprites.md +++ b/versioned_docs/version-7.3.2/guides/components/sprites.md @@ -6,7 +6,7 @@ Sprites are the simplest and most common renderable object in PixiJS. They repr To create a Sprite, all you need is a Texture (check out the Texture guide). Load a PNG's URL using the PIXI.Loader class, then call `PIXI.Sprite.from(url)` and you're all set. As a convenience during prototyping, you can pass a non-loaded URL to `from()` and PixiJS will handle it, but your sprite will "pop in" after it loads if you don't pre-load your textures. -Check out the [sprite example code](/examples/sprite/basic). +Check out the [sprite example code](../../examples/sprite/basic). ## Using Sprites diff --git a/versioned_docs/version-7.3.2/guides/components/text.md b/versioned_docs/version-7.3.2/guides/components/text.md index d7a1b53c1..caf4aab69 100644 --- a/versioned_docs/version-7.3.2/guides/components/text.md +++ b/versioned_docs/version-7.3.2/guides/components/text.md @@ -14,7 +14,7 @@ In order to draw text to the screen, you use a [Text](https://pixijs.download/re So when working with PIXI.Text objects, there are two sets of options - standard display object options like position, rotation, etc that work *after* the text is rasterized internally, and text style options that are used *while* rasterizing. Because text once rendered is basically just a sprite, there's no need to review the standard options. Instead, let's focus on how text is styled. -Check out the [text example code](/examples/text/pixi-text). +Check out the [text example code](../../examples/text/pixi-text). ## Text Styles @@ -80,7 +80,7 @@ In addition to the standard PIXI.Text approach to adding text to your project, P The primary advantage of this approach is speed - changing text frequently is much cheaper and rendering each additional piece of text is much faster due to the shared source texture. -Check out the [bitmap text example code](/examples/text/bitmap-text). +Check out the [bitmap text example code](../../examples/text/bitmap-text). ## BitmapFont diff --git a/versioned_docs/version-7.3.2/guides/components/textures.md b/versioned_docs/version-7.3.2/guides/components/textures.md index 492cf2f8c..0dd4e38c9 100644 --- a/versioned_docs/version-7.3.2/guides/components/textures.md +++ b/versioned_docs/version-7.3.2/guides/components/textures.md @@ -72,4 +72,4 @@ RenderTexture: A more advanced (but very powerful!) feature is to build a Textur Each of these texture sources has caveats and nuances that we can't cover in this guide, but they should give you a feeling for the power of PixiJS's texture system. -Check out the [render texture example code](/examples/textures/render-texture-basic). +Check out the [render texture example code](../../examples/textures/render-texture-basic).