fix image locations

blog/2023-10-03-pixi-v8-beta.md

@@ -22,7 +22,7 @@ Two driving factors catalysed our approach to re-engineering the codebase and re
 
 ### 1. 😍 Embracing WebGPU
 
-![PixiJS + webGPU = love](image-1.png)
+![PixiJS + webGPU = love](/assets/blog/image-1.png)
 
 The newcomer WebGPU offers a substantial performance improvement over its predecessor, WebGL. It propels web computations and graphics into a new era, providing a more efficient and robust API. Soon, it will be the go-to method for rendering most GPU-powered content on the web.
 
@@ -32,7 +32,7 @@ History is repeating itself with WebGPU, currently supported in only a few deskt
 
 ### 2. 🚀 Turbocharging Performance
 
-![bunnies](image.png)
+![bunnies](/assets/blog/image.png)
 
 PixiJS has always been synonymous with speed and high-performance graphics. With v8, we've revisited our architecture to optimize both static and dynamic rendering. While v7 is fast, it operates as a somewhat ‘naïve’ renderer.
 

blog/2024-03-05-pixi-v8-launches.md

@@ -50,7 +50,7 @@ There are numerous updates to discuss, more than can be covered in a single post
 
 #### 📈 New Performance Bar
 
-![bunnies](image.png)
+![bunnies](/assets/blog/image.png)
 
 The performance of v8 is faster for **both** renderers. This means by using v8 and the WebGL renderer, all the speed improvements apply! This is mainly as we have taken great care to make a more reactive render loop that only updates what it needs to. Check out the numbers here:
 
@@ -72,7 +72,7 @@ These benchmark numbers are based on the Bunnymark test that you can try yoursel
 
 #### 🖥️ WebGPU Renderer
 
-![PixiJS + webGPU = love](image-1.png)
+![PixiJS + webGPU = love](/assets/blog/image-1.png)
 
 We've implemented a WebGPU backend for rendering. Whilst this has created a better graphics paradigm under the hood and set us up for the future of rich web content, it's important to note that WebGPU does not automatically guarantee improved performance over WebGL in all scenarios, as PixiJS often encounters more limitations on the CPU side than the GPU. However, for scenes with numerous batch breaks, such as filters, masks, and blend modes, WebGPU may offer better performance due to its more modern to rendering. As WebGPU is relatively new, it's expected to enhance in speed over time, similar to the development of WebGL. It serves as a solid foundation for future advancements.
 
@@ -118,7 +118,7 @@ const app = new Application();
 
 #### 🌟 Scene Upgrades
 
-![PixiJS logo](blend-modes.png)
+![PixiJS logo](/assets/blog/blend-modes.png)
 
 - The concept of render groups has been introduced, enabling containers to utilize GPU for their transformations. This facilitates a true 2D hardware-accelerated camera, ideal for navigating large static worlds through panning and zooming, similar to how a camera moves in a 3D environment rather than moving the world itself. This approach can significantly enhance performance.
 
@@ -159,7 +159,7 @@ myContainer.blendMode = 'color-burn` // easy!
 
 #### 🎨 Graphics Upgrades
 
-![alt text](image-4.png)
+![alt text](/assets/blog/image-4.png)
 
 - The Graphics API has undergone changes to become more intuitive and user-friendly, closely resembling the HTML Canvas 2D context API. For instance, drawing and filling a rectangle is simplified as follows:
 

docs/guides/components/graphics-fill.md

@@ -16,7 +16,7 @@ const obj = new Graphics()
   .fill('red'); // Fill the rectangle with a red color
 ```
 
-![alt text](image.png)
+![alt text](/assets/guides/components/image.png)
 
 This creates a red rectangle. PixiJS supports multiple color formats for the `fill()` method. Developers can choose a format based on their needs. For example, CSS color strings are user-friendly and readable, hexadecimal strings are compact and widely used in design tools, and numbers are efficient for programmatic use. Arrays and Color objects offer precise control, making them ideal for advanced graphics.
 
@@ -54,7 +54,7 @@ const obj = new Graphics().rect(0, 0, 100, 100)
     alpha: 0.5, // 50% opacity
   });
 ```
-![alt text](image-1.png)
+![alt text](/assets/guides/components/image-1.png)
 
 ## Fill with Textures
 
@@ -66,14 +66,14 @@ const obj = new Graphics().rect(0, 0, 100, 100)
   .fill(texture);
 ```
 
-![alt text](image-2.png)
+![alt text](/assets/guides/components/image-2.png)
 
 ### Local vs. Global Texture Space
 
 Textures can be applied in two coordinate spaces:
 
 - **Local Space** (Default): The texture coordinates are mapped relative to the shape's dimensions and position. The texture coordinates use a normalized coordinate system where (0,0) is the top-left and (1,1) is the bottom-right of the shape, regardless of its actual pixel dimensions. For example, if you have a 300x200 pixel texture filling a 100x100 shape, the texture will be scaled to fit exactly within those 100x100 pixels. The texture's top-left corner (0,0) will align with the shape's top-left corner, and the texture's bottom-right corner (1,1) will align with the shape's bottom-right corner, stretching or compressing the texture as needed.
-  
+
 ```ts
 const shapes = new PIXI.Graphics()
     .rect(50,50,100, 100)
@@ -86,7 +86,7 @@ const shapes = new PIXI.Graphics()
     });
 ```
 
-![alt text](image-13.png)
+![alt text](/assets/guides/components/image-13.png)
 
 - **Global Space**: Set `textureSpace: 'global'` to make the texture position and scale relative to the Graphics object's coordinate system. Despite the name, this isn't truly "global" - the texture remains fixed relative to the Graphics object itself, maintaining its position even when the object moves or scales. See how the image goes across all the shapes (in the same graphics) below:
 
@@ -102,7 +102,7 @@ const shapes = new PIXI.Graphics()
     });
 ```
 
-![alt text](image-11.png)
+![alt text](/assets/guides/components/image-11.png)
 
 ### Using Matrices with Textures
 
@@ -118,7 +118,7 @@ const obj = new Graphics().rect(0, 0, 100, 100)
   });
 ```
 
-![alt text](image-4.png)
+![alt text](/assets/guides/components/image-4.png)
 
 ### Texture Gotcha's
 
@@ -155,7 +155,7 @@ const obj = new Graphics().rect(0, 0, 100, 100)
   .fill(gradient);
 ```
 
-![alt text](image-5.png)
+![alt text](/assets/guides/components/image-5.png)
 
 You can control the gradient direction with the following properties:
 
@@ -176,7 +176,7 @@ const diagonalGradient = new FillGradient({
 });
 ```
 
-![alt text](image-6.png)
+![alt text](/assets/guides/components/image-6.png)
 
 ### Radial Gradients
 
@@ -195,7 +195,7 @@ const obj = new Graphics().rect(0, 0, 100, 100)
   .fill(gradient);
 ```
 
-![alt text](image-7.png)
+![alt text](/assets/guides/components/image-7.png)
 
 You can control the gradient's shape and size using the following properties:
 
@@ -224,7 +224,7 @@ const obj = new Graphics().rect(0, 0, 100, 100)
   .fill(gradient);
 ```
 
-![alt text](image-8.png)
+![alt text](/assets/guides/components/image-8.png)
 
 ### Gradient Gotcha's
 
@@ -237,7 +237,7 @@ const obj = new Graphics().rect(0, 0, 100, 100)
 4. **Texture and Matrix Limitations**: Under the hood, gradient fills set both the texture and matrix properties internally. This means you cannot use a texture fill or matrix transformation at the same time as a gradient fill.
 
 ### Combining Textures and Colors
-You can combine a texture or gradients with a color tint and alpha to achieve more complex and visually appealing effects. This allows you to overlay a color on top of the texture or gradient, adjusting its transparency with the alpha value. 
+You can combine a texture or gradients with a color tint and alpha to achieve more complex and visually appealing effects. This allows you to overlay a color on top of the texture or gradient, adjusting its transparency with the alpha value.
 
 ```ts
 
@@ -257,7 +257,7 @@ const obj = new Graphics().rect(0, 0, 100, 100)
 
 ```
 
-![alt text](image-10.png)
+![alt text](/assets/guides/components/image-10.png)
 
 ```ts
 const obj = new Graphics().rect(0, 0, 100, 100)
@@ -269,7 +269,7 @@ const obj = new Graphics().rect(0, 0, 100, 100)
 
 ```
 
-![alt text](image-9.png)
+![alt text](/assets/guides/components/image-9.png)
 
 ---
 

docusaurus.config.js

@@ -65,6 +65,7 @@ const config = {
                     blogDescription: 'Latest news from the PixiJS team',
                     postsPerPage: 'ALL',
                     blogSidebarTitle: 'All posts',
+                    blogSidebarCount: 'ALL',
                 },
                 theme: {
                     customCss: require.resolve('./src/css/custom.scss'),