+
> & {
+ props: Required> & {
pixiVersion: string;
handleEditorCodeChanged?: (nextSourceCode: string | undefined) => void;
},
)
{
- const { showCode, showPreview, showConsole, fontSize, fullSizePreview, pixiVersion } = props;
+ const { viewType, showConsole, fontSize, pixiVersion } = props;
const [consoleVisibility, setConsoleVisibility] = useState(showConsole);
- const [codeVisibility, setCodeVisibility] = useState(showCode);
+ const [viewSelection, setViewSelection] = useState(viewType);
const actionsChildren = (
<>
- setCodeVisibility((prev) => !prev)} visible={codeVisibility} />
+ {/* setCodeVisibility((prev) => !prev)} visible={codeVisibility} /> */}
setConsoleVisibility((prev) => !prev)} />
);
- console.log(showPreview);
+ const handleSelectionChange = (selected: string) =>
+ {
+ setViewSelection(selected);
+ };
+
+ console.log('viewSelection', viewSelection);
return (
-
-
+
- {showPreview && (
+ >
+
)}
- )}
-
+
+
+
);
}
diff --git a/src/components/Editor/Sandpack/ToggleGroup.tsx b/src/components/Editor/Sandpack/ToggleGroup.tsx
new file mode 100644
index 000000000..e52a3497f
--- /dev/null
+++ b/src/components/Editor/Sandpack/ToggleGroup.tsx
@@ -0,0 +1,67 @@
+import { type FC, useState } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+
+interface ToggleGroupProps {
+ onSelectionChange: (selected: 'editor' | 'preview' | 'both') => void;
+ defaultSelection?: string;
+}
+
+export const ToggleGroup: FC
= ({ onSelectionChange, defaultSelection = 'both' }) =>
+{
+ const [selected, setSelected] = useState(defaultSelection);
+ const { colorMode } = useColorMode();
+
+ const handleClick = (button: 'editor' | 'preview' | 'both') =>
+ {
+ setSelected(button);
+ onSelectionChange(button);
+ };
+
+ const buttonStyle = {
+ height: '100%',
+ width: 'max-content',
+ padding: '0 16px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ cursor: 'pointer',
+ color: colorMode === 'dark' ? '#F6F8FA' : '#2E3138',
+ border: 'none',
+ };
+
+ const selectedBackgroundColor = colorMode === 'dark' ? '#22232A' : '#e2e2e2';
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src/components/Example/index.module.scss b/src/components/Example/index.module.scss
deleted file mode 100644
index 60babfe3c..000000000
--- a/src/components/Example/index.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.wrapper {
- display: flex;
- flex-wrap: wrap;
- overflow: hidden;
- height: calc(100vh - var(--ifm-navbar-height));
- width: 100%;
-
- .nav {
- display: flex;
- justify-content: space-between;
- margin: 16px 18px;
-
- .select {
- margin: 0 8px;
- }
- }
-}
-
-.embedded {
- width: 700px;
- margin: 0 auto;
- height: 400px;
-}
diff --git a/src/components/Example/index.tsx b/src/components/Example/index.tsx
deleted file mode 100644
index 9ca0243d7..000000000
--- a/src/components/Example/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import classNames from 'classnames';
-import { extractSource } from '../Playground/PixiPlayground/useEditorCode';
-import styles from './index.module.scss';
-import BrowserOnly from '@docusaurus/BrowserOnly';
-import PixiPlayground from '@site/src/components/Playground/PixiPlayground';
-import { getExampleEntry } from '@site/src/examples';
-
-import type { IVersion } from '@site/src/components/Playground/PixiPlayground/usePixiVersions';
-
-export default function Example({ id, pixiVersion, mode }: { id: string; pixiVersion: IVersion; mode?: any })
-{
- const entry = getExampleEntry(pixiVersion.version, id);
- const source = (entry?.source ?? entry) as string | Record;
- const { indexCode, extraFiles } = extractSource(source);
-
- return (
-
- );
-}
diff --git a/src/components/Playground/PixiPlayground/useEditorCode.ts b/src/components/Playground/PixiPlayground/useEditorCode.ts
index 9fa893485..27ff95b5f 100644
--- a/src/components/Playground/PixiPlayground/useEditorCode.ts
+++ b/src/components/Playground/PixiPlayground/useEditorCode.ts
@@ -1,8 +1,6 @@
import { useCallback, useMemo } from 'react';
-// @ts-expect-error - Ignore TS error
-import V7IndexFile from '!!raw-loader!@site/src/examples/v7.0.0/basic/container';
-// @ts-expect-error - Ignore TS error
-import V8IndexFile from '!!raw-loader!@site/src/examples/v8.0.0/container';
+import V7IndexFile from '!!raw-loader!../v7.0.0/container';
+import V8IndexFile from '!!raw-loader!../v8.0.0/container';
import type { IVersion } from './usePixiVersions';
import type { SetURLStateType } from '@site/src/components/Playground/PixiPlayground/usePlaygroundURLState';
diff --git a/src/examples/v7.0.0/basic/container.js b/src/components/Playground/v7.0.0/container.js
similarity index 100%
rename from src/examples/v7.0.0/basic/container.js
rename to src/components/Playground/v7.0.0/container.js
diff --git a/src/examples/v8.0.0/container.js b/src/components/Playground/v8.0.0/container.js
similarity index 100%
rename from src/examples/v8.0.0/container.js
rename to src/components/Playground/v8.0.0/container.js
diff --git a/src/examples/index.ts b/src/examples/index.ts
deleted file mode 100644
index e7e7ef3dd..000000000
--- a/src/examples/index.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { lte, major, minor, patch, prerelease, rcompare, valid } from 'semver';
-import v7x from './v7.0.0/index';
-import v8x from './v8.0.0/index';
-
-import type { OptionGroup } from '../components/Select';
-
-export type ExampleDataEntry = {
- name: string;
- hide?: boolean;
- usesWebWorkerLibrary?: boolean;
-};
-export type ExampleSourceEntry = {
- source: string | Record;
- hide: boolean;
- usesWebWorkerLibrary: boolean;
-};
-
-// json data structure
-export type ExamplesJsonType = Record;
-// Source code dictionary structure for below
-export type ExamplesSourceType = Record>>;
-// normalized combination of the above
-export type CategoryDataType = Record;
-export type ExamplesDataType = Record;
-
-// TODO: Use await import to dynamically load versioned content on demand instead?
-const versions: Record = {
- 'v7.0.0': v7x,
- 'v8.0.0': v8x,
-};
-
-function getBestVersion(version: string)
-{
- const isPrerelease = prerelease(version);
- const versionToCompare = isPrerelease ? `${major(version)}.${minor(version)}.${patch(version)}` : version;
-
- // Get the keys of the versions object and filter them to find the best match
- const bestMatch = Object.keys(versions)
- .filter((name) => valid(name) && lte(name, versionToCompare))
- .sort((a, b) => rcompare(a, b))[0];
-
- // Return the entries and options of the best match
- return versions[bestMatch];
-}
-
-export function getExampleEntry(version: string, pathString: string): ExampleSourceEntry | undefined
-{
- const bestVersion = getBestVersion(version);
- const [directory, example] = pathString.split('.');
-
- return bestVersion?.entries[directory]?.[example];
-}
-
-export function getExampleOptions(version: string): OptionGroup[]
-{
- const bestVersion = getBestVersion(version);
-
- return bestVersion?.options;
-}
diff --git a/src/examples/v7.0.0/events/hitTestingWithSpatialHash.js b/src/examples/v7.0.0/events/hitTestingWithSpatialHash.js
deleted file mode 100644
index 54ac85f1d..000000000
--- a/src/examples/v7.0.0/events/hitTestingWithSpatialHash.js
+++ /dev/null
@@ -1,219 +0,0 @@
-import * as PIXI from 'pixi.js';
-
-// This example shows how you can create your own EventBoundary to accelerate
-// hit-testing using spatial hashes. This can be used to optimize relatively
-// "flat" scene graphs, where a container contains so many objects that it
-// covers the whole scene.
-
-// This special event boundary overrides the hit-testing implementation to use
-// HashingContainer's own childHash to find children near the pointer
-// location.
-class HashingEventBoundary extends PIXI.EventBoundary
-{
- constructor(...args)
- {
- super(...args);
- // Create reusable temp rectangle for hit-testing!
- this.tempRect = new PIXI.Rectangle();
- }
-
- hitTestRecursive(currentTarget, interactive, location, testFn, pruneFn)
- {
- // If currentTarget isn't a HashingContainer, then default to the
- // regular hit-testing implementation provided by PixiJS.
- if (!currentTarget || !currentTarget.visible || !currentTarget.childHash)
- {
- return super.hitTestRecursive(currentTarget, interactive, location, testFn, pruneFn);
- }
-
- // Check if the location is outside of the entire container
- if (pruneFn(currentTarget, location)) return null;
-
- // Time to get recursive and find the next child in the propagation
- // path of the event, accelerated using the childHash.
- if (currentTarget.interactiveChildren)
- {
- /* This is where the magic happens! */
- const tempRect = this.tempRect;
-
- // Store the location as a 0x0 rectangle. SpatialHash requires a
- // rectangle for searching.
- tempRect.x = location.x;
- tempRect.y = location.y;
-
- // Find all the children overlapping with tempRect a.k.a location,
- // and then sort them by their index in the HashingContainer's
- // children array.
- const children = Array.from(currentTarget.childHash.search(tempRect)).sort((a, b) => a.refIndex - b.refIndex);
-
- /* The following is copied from EventBoundary's code. */
- for (let i = children.length - 1; i >= 0; i--)
- {
- const child = children[i];
- const nestedHit = this.hitTestRecursive(child, interactive || child.interactive, location, testFn, pruneFn);
-
- if (nestedHit)
- {
- // Its a good idea to check if a child has lost its
- // parent. this means it has been removed whilst looping
- // so its best
- if (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent)
- {
- // eslint-disable-next-line no-continue
- continue;
- }
-
- // Only add the current hit-test target to the hit-test
- // chain if the chain has already started (i.e. the event
- // target has been found) or if the current target is
- // interactive (i.e. it becomes the event target).
- if (nestedHit.length > 0 || currentTarget.interactive)
- {
- nestedHit.push(currentTarget);
- }
-
- return nestedHit;
- }
- }
- }
-
- /* The following is copied from EventBoundary's own implementation. */
-
- // Finally, hit test this DisplayObject itself.
- if (interactive && testFn(currentTarget, location))
- {
- // The current hit-test target is the event's target only if it
- // is interactive. Otherwise, the first interactive ancestor will
- // be the event's target.
- return currentTarget.interactive ? [currentTarget] : [];
- }
-
- return null;
- }
-}
-
-// HashingContainer is a special kind of container that organizes its children
-// in a spatial hash. It also sets each child's refIndex property to its index
-// in the hashing container's children array.
-class HashingContainer extends PIXI.Container
-{
- constructor()
- {
- super();
- this.childHash = new PIXI.SpatialHash();
- }
-
- // Override updateTransform to update this.childHash!
- updateTransform()
- {
- super.updateTransform();
-
- // Reset childHash & re-add all the children. This will
- // make the spatial hash re-evaluate the coverage of each child.
- this.childHash.reset();
- for (let i = 0; i < this.children.length; i++)
- {
- const child = this.children[i];
-
- this.childHash.put(child);
- child.refIndex = i;
- }
- }
-}
-
-// This is the actual program using HashingEventBoundary, HashingContainer.
-function main()
-{
- // Create app. autoStart = false so that the app doesn't render until
- // something changes - this prevents redundant spatial-hash updates.
- const app = new PIXI.Application({
- antialias: true,
- autoStart: false,
- background: '#1099bb',
- });
-
- document.body.appendChild(app.view);
-
- // Install our own EventBoundary!
- app.renderer.events.rootBoundary = new HashingEventBoundary(app.stage);
-
- // Make the hashing container
- const container = app.stage.addChild(new HashingContainer());
- // Textures to choose from for each random character
- const textures = [
- PIXI.Texture.from('https://pixijs.com/assets/skully.png'),
- PIXI.Texture.from('https://pixijs.com/assets/eggHead.png'),
- PIXI.Texture.from('https://pixijs.com/assets/flowerTop.png'),
- PIXI.Texture.from('https://pixijs.com/assets/helmlok.png'),
- ];
- // Rerender scene when each texture loads
-
- textures.forEach((tex) => tex.baseTexture.once('loaded', () => app.render()));
-
- // Populate the hashing container!
- function makeMonster(x, y)
- {
- const texture = textures[Math.floor(Math.random() * textures.length)];
- const sprite = new PIXI.Sprite(texture);
-
- // Randomly place the character
- sprite.position.set(
- x || Math.random() * (app.screen.width - 64),
- y || 64 + Math.random() * (app.screen.height - 128),
- );
-
- // Make character smaller so we can have a bunch of 'em
- sprite.scale.set(0.34);
-
- // Make the character interactive!
- sprite.eventMode = 'static';
-
- // Explode on clicks!
- sprite.addEventListener('click', onMonsterClicked);
-
- container.addChild(sprite);
-
- return sprite;
- }
- function onMonsterClicked(e)
- {
- const monster = this;
- const pos = monster.position;
- const radius = Math.max(monster.width, monster.height) * 2;
-
- // Remove monster from scene once the event finishes propagating.
- e.manager.dispatch.once('click', () =>
- {
- // TODO: Fix PixiJS throwing errors since the monster is removed
- // from scene graph while was under hover.
-
- monster.parent.removeChild(monster);
- PIXI.Ticker.shared.addOnce(() => app.render());
- });
-
- for (let i = 0; i < 8; i++)
- {
- const x = pos.x + radius * Math.cos((i * Math.PI) / 4);
- const y = pos.y + radius * Math.sin((i * Math.PI) / 4);
-
- makeMonster(x, y);
- }
- }
- // Make initial set of monsters
- for (let i = 0; i < 100; i++) makeMonster();
-
- // Add a descriptive title
- const title = app.stage.addChild(
- new PIXI.Text('Click on a monster and see it explode into more!', {
- fontSize: 12,
- }),
- );
-
- title.position.set(12, 12);
-
- // Render the stage once
- app.render();
-}
-
-// Run our program!
-main();
diff --git a/src/examples/v7.0.0/examplesData.json b/src/examples/v7.0.0/examplesData.json
deleted file mode 100644
index 50a3f3d4d..000000000
--- a/src/examples/v7.0.0/examplesData.json
+++ /dev/null
@@ -1,108 +0,0 @@
-{
- "basic": [
- "container",
- "transparentBackground",
- "tinting",
- "cacheAsBitmap",
- "particleContainer",
- "blendModes",
- "simplePlane"
- ],
- "advanced": [
- "slots",
- "scratchCard",
- "starWarp",
- "mouseTrail",
- "screenShot",
- "collisionDetection",
- "spinners"
- ],
- "sprite": [
- "basic",
- "textureSwap",
- "animatedSpriteExplosion",
- "animatedSpriteJet",
- "animatedSpriteAnimationSpeed",
- "tilingSprite",
- "video"
- ],
- "text": [
- "pixiText",
- "bitmapText",
- "fromFont",
- "webFont"
- ],
- "graphics": [
- "simple",
- "advanced",
- "dynamic"
- ],
- "events": [
- "click",
- "interactivity",
- "dragging",
- "customMouseIcon",
- "customHitarea",
- {
- "name": "hitTestingWithSpatialHash",
- "hide": true
- },
- "logger",
- "nestedBoundaryWithProjection",
- "pointerTracker",
- "slider"
- ],
- "masks": [
- "graphics",
- "sprite",
- "filter"
- ],
- "filtersBasic": [
- "blur",
- "colorMatrix",
- "displacementMapCrawlies",
- "displacementMapFlag"
- ],
- "filtersAdvanced": [
- "mouseBlending",
- "custom",
- "shaderToyFilterRenderTexture"
- ],
- "meshAndShaders": [
- "texturedMeshBasic",
- "texturedMeshAdvanced",
- "triangle",
- "triangleColor",
- "triangleTextured",
- "uniforms",
- "sharingGeometry",
- "sharedShader",
- "mergingGeometry",
- "interleavingGeometry",
- "instancedGeometry",
- "shaderToyMesh",
- "multiPassShaderGeneratedMesh"
- ],
- "textures": [
- "textureRotate",
- "renderTextureBasic",
- "renderTextureAdvanced",
- "gradientBasic",
- "gradientResource"
- ],
- "assets": [
- "promise",
- "async",
- "multiple",
- "background",
- "bundle"
- ],
- "offscreenCanvas": [
- "basic",
- {
- "name": "webWorker",
- "hide": true,
- "usesWebWorkerLibrary": true
- }
- ]
-}
diff --git a/src/examples/v7.0.0/index.ts b/src/examples/v7.0.0/index.ts
deleted file mode 100644
index 482bba06a..000000000
--- a/src/examples/v7.0.0/index.ts
+++ /dev/null
@@ -1,249 +0,0 @@
-// Defines order of examples in documentation and playground dropdown, it's defined
-// separately here so it can be used in runtime code and in the md generation script
-import examplesData from './examplesData.json';
-import collisionDetection from '!!raw-loader!./advanced/collisionDetection.js';
-import mouseTrail from '!!raw-loader!./advanced/mouseTrail.js';
-import scratchCard from '!!raw-loader!./advanced/scratchCard.js';
-import screenShot from '!!raw-loader!./advanced/screenShot.js';
-import slots from '!!raw-loader!./advanced/slots.js';
-import spinners from '!!raw-loader!./advanced/spinners.js';
-import starWarp from '!!raw-loader!./advanced/starWarp.js';
-import async from '!!raw-loader!./assets/async.js';
-import background from '!!raw-loader!./assets/background.js';
-import bundle from '!!raw-loader!./assets/bundle.js';
-import multiple from '!!raw-loader!./assets/multiple.js';
-import promise from '!!raw-loader!./assets/promise.js';
-import blendModes from '!!raw-loader!./basic/blendModes.js';
-import cacheAsBitmap from '!!raw-loader!./basic/cacheAsBitmap.js';
-import container from '!!raw-loader!./basic/container.js';
-import particleContainer from '!!raw-loader!./basic/particleContainer.js';
-import simplePlane from '!!raw-loader!./basic/simplePlane.js';
-import tinting from '!!raw-loader!./basic/tinting.js';
-import transparentBackground from '!!raw-loader!./basic/transparentBackground.js';
-import click from '!!raw-loader!./events/click.js';
-import customHitarea from '!!raw-loader!./events/customHitarea.js';
-import customMouseIcon from '!!raw-loader!./events/customMouseIcon.js';
-import dragging from '!!raw-loader!./events/dragging.js';
-import hitTestingWithSpatialHash from '!!raw-loader!./events/hitTestingWithSpatialHash.js';
-import interactivity from '!!raw-loader!./events/interactivity.js';
-import logger from '!!raw-loader!./events/logger.js';
-import nestedBoundaryWithProjection from '!!raw-loader!./events/nestedBoundaryWithProjection.js';
-import pointerTracker from '!!raw-loader!./events/pointerTracker.js';
-import slider from '!!raw-loader!./events/slider.js';
-import custom from '!!raw-loader!./filtersAdvanced/custom.js';
-import mouseBlending from '!!raw-loader!./filtersAdvanced/mouseBlending.js';
-import shaderToyFilterRenderTexture from '!!raw-loader!./filtersAdvanced/shaderToyFilterRenderTexture.js';
-import blur from '!!raw-loader!./filtersBasic/blur.js';
-import colorMatrix from '!!raw-loader!./filtersBasic/colorMatrix.js';
-import displacementMapCrawlies from '!!raw-loader!./filtersBasic/displacementMapCrawlies.js';
-import displacementMapFlag from '!!raw-loader!./filtersBasic/displacementMapFlag.js';
-import advanced from '!!raw-loader!./graphics/advanced.js';
-import dynamic from '!!raw-loader!./graphics/dynamic.js';
-import simple from '!!raw-loader!./graphics/simple.js';
-import filter from '!!raw-loader!./masks/filter.js';
-import graphics from '!!raw-loader!./masks/graphics.js';
-import sprite from '!!raw-loader!./masks/sprite.js';
-import instancedGeometry from '!!raw-loader!./meshAndShaders/instancedGeometry.js';
-import interleavingGeometry from '!!raw-loader!./meshAndShaders/interleavingGeometry.js';
-import mergingGeometry from '!!raw-loader!./meshAndShaders/mergingGeometry.js';
-import multiPassShaderGeneratedMesh from '!!raw-loader!./meshAndShaders/multiPassShaderGeneratedMesh.js';
-import shaderToyMesh from '!!raw-loader!./meshAndShaders/shaderToyMesh.js';
-import sharedShader from '!!raw-loader!./meshAndShaders/sharedShader.js';
-import sharingGeometry from '!!raw-loader!./meshAndShaders/sharingGeometry.js';
-import texturedMeshAdvanced from '!!raw-loader!./meshAndShaders/texturedMeshAdvanced.js';
-import texturedMeshBasic from '!!raw-loader!./meshAndShaders/texturedMeshBasic.js';
-import triangle from '!!raw-loader!./meshAndShaders/triangle.js';
-import triangleColor from '!!raw-loader!./meshAndShaders/triangleColor.js';
-import triangleTextured from '!!raw-loader!./meshAndShaders/triangleTextured.js';
-import uniforms from '!!raw-loader!./meshAndShaders/uniforms.js';
-import offscreenCanvasBasic from '!!raw-loader!./offscreenCanvas/basic.js';
-import webWorker from '!!raw-loader!./offscreenCanvas/webWorker.js';
-import animatedSpriteAnimationSpeed from '!!raw-loader!./sprite/animatedSpriteAnimationSpeed.js';
-import animatedSpriteExplosion from '!!raw-loader!./sprite/animatedSpriteExplosion.js';
-import animatedSpriteJet from '!!raw-loader!./sprite/animatedSpriteJet.js';
-import spriteBasic from '!!raw-loader!./sprite/basic.js';
-import textureSwap from '!!raw-loader!./sprite/textureSwap.js';
-import tilingSprite from '!!raw-loader!./sprite/tilingSprite.js';
-import video from '!!raw-loader!./sprite/video.js';
-import bitmapText from '!!raw-loader!./text/bitmapText.js';
-import fromFont from '!!raw-loader!./text/fromFont.js';
-import pixiText from '!!raw-loader!./text/pixiText.js';
-import webFont from '!!raw-loader!./text/webFont.js';
-import gradientBasic from '!!raw-loader!./textures/gradientBasic.js';
-import gradientResource from '!!raw-loader!./textures/gradientResource.js';
-import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js';
-import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js';
-import textureRotate from '!!raw-loader!./textures/textureRotate.js';
-import { camelCaseToSentenceCase } from '@site/src/utils/utils';
-
-import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..';
-import type { Option } from '@site/src/components/Select';
-
-const examplesSource: ExamplesSourceType = {
- basic: {
- blendModes,
- cacheAsBitmap,
- container,
- particleContainer,
- simplePlane,
- tinting,
- transparentBackground,
- },
- sprite: {
- animatedSpriteAnimationSpeed,
- animatedSpriteExplosion,
- animatedSpriteJet,
- basic: spriteBasic,
- textureSwap,
- tilingSprite,
- video,
- },
- text: {
- bitmapText,
- fromFont,
- pixiText,
- webFont,
- },
- graphics: {
- advanced,
- dynamic,
- simple,
- },
- events: {
- click,
- customHitarea,
- customMouseIcon,
- dragging,
- hitTestingWithSpatialHash,
- interactivity,
- logger,
- nestedBoundaryWithProjection,
- pointerTracker,
- slider,
- },
- masks: {
- filter,
- graphics,
- sprite,
- },
- textures: {
- gradientBasic,
- gradientResource,
- renderTextureAdvanced,
- renderTextureBasic,
- textureRotate,
- },
- assets: {
- async,
- background,
- bundle,
- multiple,
- promise,
- },
- offscreenCanvas: {
- basic: offscreenCanvasBasic,
- webWorker,
- },
- filtersBasic: {
- blur,
- colorMatrix,
- displacementMapCrawlies,
- displacementMapFlag,
- },
- filtersAdvanced: {
- custom,
- mouseBlending,
- shaderToyFilterRenderTexture,
- },
- advanced: {
- collisionDetection,
- mouseTrail,
- scratchCard,
- screenShot,
- slots,
- spinners,
- starWarp,
- },
- meshAndShaders: {
- instancedGeometry,
- interleavingGeometry,
- mergingGeometry,
- multiPassShaderGeneratedMesh,
- shaderToyMesh,
- sharedShader,
- sharingGeometry,
- texturedMeshAdvanced,
- texturedMeshBasic,
- triangleColor,
- triangleTextured,
- triangle,
- uniforms,
- },
-};
-
-const normalizeExampleDataEntry = (categoryExample: ExampleDataEntry | string): Required =>
-{
- const defaults = {
- hide: false,
- usesWebWorkerLibrary: false,
- };
-
- if (typeof categoryExample === 'string')
- {
- return {
- ...defaults,
- name: categoryExample,
- };
- }
-
- return {
- ...defaults,
- ...categoryExample,
- };
-};
-
-const entries = Object.entries(examplesData as ExamplesJsonType).reduce(
- (directoryAcc, [categoryKey, categoryExamples]) => ({
- ...directoryAcc,
- [categoryKey]: categoryExamples.reduce((categoryAcc, categoryExampleOrString) =>
- {
- const categoryExample = normalizeExampleDataEntry(categoryExampleOrString);
- const { name: categoryName, hide, usesWebWorkerLibrary } = categoryExample;
-
- return {
- ...categoryAcc,
- [categoryName]: {
- source: examplesSource[categoryKey][categoryName],
- hide,
- usesWebWorkerLibrary,
- },
- };
- }, {} as CategoryDataType),
- }),
- {} as ExamplesDataType,
-);
-
-const options = Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) =>
-{
- const options = folderEntries.reduce((acc, exampleDataEntry) =>
- {
- const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry);
-
- if (hide)
- {
- return acc;
- }
-
- return acc.concat({
- value: `${folderKey}.${exampleKey}`,
- label: camelCaseToSentenceCase(exampleKey),
- });
- }, [] as Option[]);
-
- return {
- label: camelCaseToSentenceCase(folderKey),
- options,
- };
-});
-
-export default { entries, options };
diff --git a/src/examples/v7.0.0/offscreenCanvas/webWorker.js b/src/examples/v7.0.0/offscreenCanvas/webWorker.js
deleted file mode 100644
index 44f0b99e6..000000000
--- a/src/examples/v7.0.0/offscreenCanvas/webWorker.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as PIXI from '@pixi/webworker';
-
-// This example is the based on basic/container, but running in Web Worker.
-
-function workerSource(self)
-{
- self.onmessage = async ({ data: { baseUrl, pixiWebWorkerUrl, options } }) =>
- {
- self.importScripts(new URL(pixiWebWorkerUrl, baseUrl));
-
- const app = new PIXI.Application(options);
-
- document.body.appendChild(app.view);
-
- const container = new PIXI.Container();
-
- app.stage.addChild(container);
-
- // Create a new texture
- const textureUrl = new URL('https://pixijs.com/assets/bunny.png', baseUrl).toString();
- const texture = PIXI.Texture.from(textureUrl);
-
- // Create a 5x5 grid of bunnies
- for (let i = 0; i < 25; i++)
- {
- const bunny = new PIXI.Sprite(texture);
-
- bunny.anchor.set(0.5);
- bunny.x = (i % 5) * 40;
- bunny.y = Math.floor(i / 5) * 40;
- container.addChild(bunny);
- }
-
- // Move container to the center
- container.x = app.screen.width / 2;
- container.y = app.screen.height / 2;
-
- // Center bunny sprite in local container coordinates
- container.pivot.x = container.width / 2;
- container.pivot.y = container.height / 2;
-
- // Listen for animate update
- app.ticker.add((delta) =>
- {
- // rotate the container!
- // use delta to create frame-independent transform
- container.rotation -= 0.01 * delta;
- });
- };
-}
-
-const blob = new Blob(['(', workerSource, ')(self);'], { type: 'application/javascript' });
-
-const url = URL.createObjectURL(blob);
-const worker = new Worker(url);
-
-URL.revokeObjectURL(url);
-
-const width = 800;
-const height = 600;
-const resolution = window.devicePixelRatio;
-const canvas = document.createElement('canvas');
-
-canvas.style.width = `${width}px`;
-canvas.style.height = `${height}px`;
-const view = canvas.transferControlToOffscreen();
-
-const baseUrl = window.location.href;
-const pixiWebWorkerUrl = window.PIXI_WEBWORKER_URL;
-
-worker.postMessage(
- {
- baseUrl,
- pixiWebWorkerUrl,
- options: {
- width,
- height,
- resolution,
- view,
- background: 0x1099bb,
- },
- },
- [view],
-);
diff --git a/src/examples/v8.0.0/examplesData.json b/src/examples/v8.0.0/examplesData.json
deleted file mode 100644
index 08e163ce8..000000000
--- a/src/examples/v8.0.0/examplesData.json
+++ /dev/null
@@ -1,110 +0,0 @@
-{
- "basic": [
- "container",
- "transparentBackground",
- "tinting",
- "particleContainer",
- "blendModes",
- "meshPlane",
- "renderGroup",
- "cacheAsTexture"
- ],
- "advanced": [
- "slots",
- "scratchCard",
- "starWarp",
- "mouseTrail",
- "screenShot",
- "collisionDetection",
- "spinners"
- ],
- "sprite": [
- "basic",
- "textureSwap",
- "animatedSpriteExplosion",
- "animatedSpriteJet",
- "animatedSpriteAnimationSpeed",
- "tilingSprite",
- "video"
- ],
- "text": [
- "pixiText",
- "bitmapText",
- "fromFont",
- "webFont"
- ],
- "graphics": [
- "simple",
- "advanced",
- "dynamic",
- "svg",
- "svgLoad",
- "texture",
- "fillGradient",
- "meshFromPath",
- "pixelLine"
- ],
- "events": [
- "click",
- "interactivity",
- "dragging",
- "customMouseIcon",
- "customHitarea",
- {
- "name": "hitTestingWithSpatialHash",
- "hide": true
- },
- "logger",
- "pointerTracker",
- "slider"
- ],
- "masks": [
- "graphics",
- "sprite",
- "filter",
- "inverseMask"
- ],
- "filtersBasic": [
- "blur",
- "colorMatrix",
- "displacementMapCrawlies",
- "displacementMapFlag"
- ],
- "filtersAdvanced": [
- "mouseBlending",
- "custom"
- ],
- "meshAndShaders": [
- "perspectiveMesh",
- "texturedMeshBasic",
- "texturedMeshAdvanced",
- "triangle",
- "triangleColor",
- "triangleTextured",
- "sharedGeometry",
- "sharedShader",
- "instancedGeometry",
- "shaderToyMesh",
- "multipassMesh"
- ],
- "textures": [
- "textureRotate",
- "renderTextureBasic",
- "renderTextureAdvanced"
- ],
- "assets": [
- "promise",
- "async",
- "multiple",
- "background",
- "bundle"
- ],
- "offscreenCanvas": [
- "basic",
- {
- "name": "webWorker",
- "hide": true,
- "usesWebWorkerLibrary": true
- }
- ]
-}
diff --git a/src/examples/v8.0.0/index.ts b/src/examples/v8.0.0/index.ts
deleted file mode 100644
index 5ee09cb08..000000000
--- a/src/examples/v8.0.0/index.ts
+++ /dev/null
@@ -1,341 +0,0 @@
-// Defines order of examples in documentation and playground dropdown, it's defined
-// separately here so it can be used in runtime code and in the md generation script
-import examplesData from './examplesData.json';
-// import collisionDetection from '!!raw-loader!./advanced/collisionDetection.js';
-// import mouseTrail from '!!raw-loader!./advanced/mouseTrail.js';
-// import scratchCard from '!!raw-loader!./advanced/scratchCard.js';
-// import screenShot from '!!raw-loader!./advanced/screenShot.js';
-// import slots from '!!raw-loader!./advanced/slots.js';
-// import spinners from '!!raw-loader!./advanced/spinners/index.js';
-// import spinnersIntersect from '!!raw-loader!./advanced/spinners/intersect.js';
-// import spinnerGenerator1 from '!!raw-loader!./advanced/spinners/spinner1.js';
-// import spinnerGenerator2 from '!!raw-loader!./advanced/spinners/spinner2.js';
-// import spinnerGenerator3 from '!!raw-loader!./advanced/spinners/spinner3.js';
-// import spinnerGenerator4 from '!!raw-loader!./advanced/spinners/spinner4.js';
-// import spinnerGenerator5 from '!!raw-loader!./advanced/spinners/spinner5.js';
-// import starWarp from '!!raw-loader!./advanced/starWarp.js';
-// import async from '!!raw-loader!./assets/async.js';
-// import background from '!!raw-loader!./assets/background.js';
-// import bundle from '!!raw-loader!./assets/bundle.js';
-// import multiple from '!!raw-loader!./assets/multiple.js';
-// import promise from '!!raw-loader!./assets/promise.js';
-// import blendModes from '!!raw-loader!./basic/blendModes.js';
-// import cacheAsTexture from '!!raw-loader!./basic/cacheAsTexture.js';
-// import container from '!!raw-loader!./basic/container.js';
-// import meshPlane from '!!raw-loader!./basic/meshPlane.js';
-// import particleContainer from '!!raw-loader!./basic/particleContainer.js';
-// import renderGroup from '!!raw-loader!./basic/renderGroup.js';
-// import tinting from '!!raw-loader!./basic/tinting.js';
-// import transparentBackground from '!!raw-loader!./basic/transparentBackground.js';
-// import click from '!!raw-loader!./events/click.js';
-// import customHitarea from '!!raw-loader!./events/customHitarea.js';
-// import customMouseIcon from '!!raw-loader!./events/customMouseIcon.js';
-// import dragging from '!!raw-loader!./events/dragging.js';
-// import hitTestingWithSpatialHash from '!!raw-loader!./events/hitTestingWithSpatialHash.js';
-// import interactivity from '!!raw-loader!./events/interactivity.js';
-// import logger from '!!raw-loader!./events/logger.js';
-// import pointerTracker from '!!raw-loader!./events/pointerTracker.js';
-// import slider from '!!raw-loader!./events/slider.js';
-// import customFrag from '!!raw-loader!./filtersAdvanced/custom/custom.frag';
-// import customVert from '!!raw-loader!./filtersAdvanced/custom/custom.vert';
-// import custom from '!!raw-loader!./filtersAdvanced/custom/index.js';
-// import mouseBlending from '!!raw-loader!./filtersAdvanced/mouseBlending/index.js';
-// import mouseBlendingFrag from '!!raw-loader!./filtersAdvanced/mouseBlending/mouseBlending.frag';
-// import mouseBlendingVert from '!!raw-loader!./filtersAdvanced/mouseBlending/mouseBlending.vert';
-// import blur from '!!raw-loader!./filtersBasic/blur.js';
-// import colorMatrix from '!!raw-loader!./filtersBasic/colorMatrix.js';
-// import displacementMapCrawlies from '!!raw-loader!./filtersBasic/displacementMapCrawlies.js';
-// import displacementMapFlag from '!!raw-loader!./filtersBasic/displacementMapFlag.js';
-// import advanced from '!!raw-loader!./graphics/advanced.js';
-// import dynamic from '!!raw-loader!./graphics/dynamic.js';
-// import fillGradient from '!!raw-loader!./graphics/fillGradient.js';
-// import meshFromPath from '!!raw-loader!./graphics/meshFromPath.js';
-// import pixelLine from '!!raw-loader!./graphics/pixelLine.js';
-// import simple from '!!raw-loader!./graphics/simple.js';
-// import svg from '!!raw-loader!./graphics/svg.js';
-// import svgLoad from '!!raw-loader!./graphics/svgLoad.js';
-// import texture from '!!raw-loader!./graphics/texture.js';
-// import filter from '!!raw-loader!./masks/filter.js';
-// import graphics from '!!raw-loader!./masks/graphics.js';
-// import inverseMask from '!!raw-loader!./masks/inverseMask.js';
-// import sprite from '!!raw-loader!./masks/sprite.js';
-// import instancedGeometry from '!!raw-loader!./meshAndShaders/instancedGeometry/index.js';
-// import instancedGeometryFrag from '!!raw-loader!./meshAndShaders/instancedGeometry/instancedGeometry.frag';
-// import instancedGeometryVert from '!!raw-loader!./meshAndShaders/instancedGeometry/instancedGeometry.vert';
-// import instancedGeometryWgsl from '!!raw-loader!./meshAndShaders/instancedGeometry/instancedGeometry.wgsl';
-// import multipassMeshCombineFrag from '!!raw-loader!./meshAndShaders/multipassMesh/combine.frag';
-// import multipassMeshGridFrag from '!!raw-loader!./meshAndShaders/multipassMesh/grid.frag';
-// import multipassMesh from '!!raw-loader!./meshAndShaders/multipassMesh/index.js';
-// import multipassMeshVert from '!!raw-loader!./meshAndShaders/multipassMesh/multipassMesh.vert';
-// import multipassMeshNoiseFrag from '!!raw-loader!./meshAndShaders/multipassMesh/noise.frag';
-// import multipassMeshRippleFrag from '!!raw-loader!./meshAndShaders/multipassMesh/ripple.frag';
-// import multipassMeshWaveFrag from '!!raw-loader!./meshAndShaders/multipassMesh/wave.frag';
-// import perspectiveMesh from '!!raw-loader!./meshAndShaders/perspectiveMesh.js';
-// import shaderToyMesh from '!!raw-loader!./meshAndShaders/shaderToyMesh/index.js';
-// import shaderToyMeshFrag from '!!raw-loader!./meshAndShaders/shaderToyMesh/shaderToy.frag';
-// import shaderToyMeshVert from '!!raw-loader!./meshAndShaders/shaderToyMesh/shaderToy.vert';
-// import sharedGeometry from '!!raw-loader!./meshAndShaders/sharedGeometry/index.js';
-// import sharedGeometryFrag from '!!raw-loader!./meshAndShaders/sharedGeometry/sharedGeometry.frag';
-// import sharedGeometryVert from '!!raw-loader!./meshAndShaders/sharedGeometry/sharedGeometry.vert';
-// import sharedShader from '!!raw-loader!./meshAndShaders/sharedShader/index.js';
-// import sharedShaderFrag from '!!raw-loader!./meshAndShaders/sharedShader/sharedShader.frag';
-// import sharedShaderVert from '!!raw-loader!./meshAndShaders/sharedShader/sharedShader.vert';
-// import texturedMeshAdvanced from '!!raw-loader!./meshAndShaders/texturedMeshAdvanced.js';
-// import texturedMeshBasic from '!!raw-loader!./meshAndShaders/texturedMeshBasic.js';
-// import triangle from '!!raw-loader!./meshAndShaders/triangle/index.js';
-// import triangleFrag from '!!raw-loader!./meshAndShaders/triangle/triangle.frag';
-// import triangleVert from '!!raw-loader!./meshAndShaders/triangle/triangle.vert';
-// import triangleWgsl from '!!raw-loader!./meshAndShaders/triangle/triangle.wgsl';
-// import triangleColor from '!!raw-loader!./meshAndShaders/triangleColor/index.js';
-// import triangleColorFrag from '!!raw-loader!./meshAndShaders/triangleColor/triangleColor.frag';
-// import triangleColorVert from '!!raw-loader!./meshAndShaders/triangleColor/triangleColor.vert';
-// import triangleColorWgsl from '!!raw-loader!./meshAndShaders/triangleColor/triangleColor.wgsl';
-// import triangleTextured from '!!raw-loader!./meshAndShaders/triangleTextured/index.js';
-// import triangleTexturedFrag from '!!raw-loader!./meshAndShaders/triangleTextured/triangleTextured.frag';
-// import triangleTexturedVert from '!!raw-loader!./meshAndShaders/triangleTextured/triangleTextured.vert';
-// import offscreenCanvasBasic from '!!raw-loader!./offscreenCanvas/basic.js';
-// import webWorker from '!!raw-loader!./offscreenCanvas/webWorker.js';
-// import animatedSpriteAnimationSpeed from '!!raw-loader!./sprite/animatedSpriteAnimationSpeed.js';
-// import animatedSpriteExplosion from '!!raw-loader!./sprite/animatedSpriteExplosion.js';
-// import animatedSpriteJet from '!!raw-loader!./sprite/animatedSpriteJet.js';
-// import spriteBasic from '!!raw-loader!./sprite/basic.js';
-// import textureSwap from '!!raw-loader!./sprite/textureSwap.js';
-// import tilingSprite from '!!raw-loader!./sprite/tilingSprite.js';
-// import video from '!!raw-loader!./sprite/video.js';
-// import bitmapText from '!!raw-loader!./text/bitmapText.js';
-// import fromFont from '!!raw-loader!./text/fromFont.js';
-// import pixiText from '!!raw-loader!./text/pixiText.js';
-// import webFont from '!!raw-loader!./text/webFont.js';
-// import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js';
-// import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js';
-// import textureRotate from '!!raw-loader!./textures/textureRotate.js';
-import { camelCaseToSentenceCase } from '@site/src/utils/utils';
-
-import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..';
-import type { Option } from '@site/src/components/Select';
-
-const examplesSource: ExamplesSourceType = {
- basic: {
- // blendModes,
- // container,
- // particleContainer,
- // meshPlane,
- // tinting,
- // transparentBackground,
- // renderGroup,
- // cacheAsTexture,
- },
- sprite: {
- // animatedSpriteAnimationSpeed,
- // animatedSpriteExplosion,
- // animatedSpriteJet,
- // basic: spriteBasic,
- // textureSwap,
- // tilingSprite,
- // video,
- },
- text: {
- // bitmapText,
- // fromFont,
- // pixiText,
- // webFont,
- },
- graphics: {
- // advanced,
- // dynamic,
- // fillGradient,
- // meshFromPath,
- // pixelLine,
- // simple,
- // svg,
- // svgLoad,
- // texture,
- },
- events: {
- // click,
- // customHitarea,
- // customMouseIcon,
- // dragging,
- // hitTestingWithSpatialHash,
- // interactivity,
- // logger,
- // pointerTracker,
- // slider,
- },
- masks: {
- // filter,
- // graphics,
- // inverseMask,
- // sprite,
- },
- textures: {
- // renderTextureAdvanced,
- // renderTextureBasic,
- // textureRotate,
- },
- assets: {
- // async,
- // background,
- // bundle,
- // multiple,
- // promise,
- },
- offscreenCanvas: {
- // basic: offscreenCanvasBasic,
- // webWorker,
- },
- filtersBasic: {
- // blur,
- // colorMatrix,
- // displacementMapCrawlies,
- // displacementMapFlag,
- },
- filtersAdvanced: {
- // custom: {
- // index: custom,
- // 'src/custom.vert': customVert,
- // 'src/custom.frag': customFrag,
- // },
- // mouseBlending: {
- // index: mouseBlending,
- // 'src/mouseBlending.vert': mouseBlendingVert,
- // 'src/mouseBlending.frag': mouseBlendingFrag,
- // },
- },
- advanced: {
- // collisionDetection,
- // mouseTrail,
- // scratchCard,
- // screenShot,
- // slots,
- // spinners: {
- // index: spinners,
- // 'src/spinner1.js': spinnerGenerator1,
- // 'src/spinner2.js': spinnerGenerator2,
- // 'src/spinner3.js': spinnerGenerator3,
- // 'src/spinner4.js': spinnerGenerator4,
- // 'src/spinner5.js': spinnerGenerator5,
- // 'src/intersect.js': spinnersIntersect,
- // },
- // starWarp,
- },
- meshAndShaders: {
- // perspectiveMesh,
- // instancedGeometry: {
- // index: instancedGeometry,
- // 'src/instancedGeometry.vert': instancedGeometryVert,
- // 'src/instancedGeometry.frag': instancedGeometryFrag,
- // 'src/instancedGeometry.wgsl': instancedGeometryWgsl,
- // },
- // multipassMesh: {
- // index: multipassMesh,
- // 'src/multipassMesh.vert': multipassMeshVert,
- // 'src/grid.frag': multipassMeshGridFrag,
- // 'src/ripple.frag': multipassMeshRippleFrag,
- // 'src/noise.frag': multipassMeshNoiseFrag,
- // 'src/wave.frag': multipassMeshWaveFrag,
- // 'src/combine.frag': multipassMeshCombineFrag,
- // },
- // shaderToyMesh: {
- // index: shaderToyMesh,
- // 'src/shaderToy.vert': shaderToyMeshVert,
- // 'src/shaderToy.frag': shaderToyMeshFrag,
- // },
- // sharedShader: {
- // index: sharedShader,
- // 'src/sharedShader.vert': sharedShaderVert,
- // 'src/sharedShader.frag': sharedShaderFrag,
- // },
- // sharedGeometry: {
- // index: sharedGeometry,
- // 'src/sharedGeometry.vert': sharedGeometryVert,
- // 'src/sharedGeometry.frag': sharedGeometryFrag,
- // },
- // texturedMeshAdvanced,
- // texturedMeshBasic,
- // triangleColor: {
- // index: triangleColor,
- // 'src/triangleColor.vert': triangleColorVert,
- // 'src/triangleColor.frag': triangleColorFrag,
- // 'src/triangleColor.wgsl': triangleColorWgsl,
- // },
- // triangleTextured: {
- // index: triangleTextured,
- // 'src/triangleTextured.vert': triangleTexturedVert,
- // 'src/triangleTextured.frag': triangleTexturedFrag,
- // },
- // triangle: {
- // index: triangle,
- // 'src/triangle.vert': triangleVert,
- // 'src/triangle.frag': triangleFrag,
- // 'src/triangle.wgsl': triangleWgsl,
- // },
- },
-};
-
-const normalizeExampleDataEntry = (categoryExample: ExampleDataEntry | string): Required =>
-{
- const defaults = {
- hide: false,
- usesWebWorkerLibrary: false,
- };
-
- if (typeof categoryExample === 'string')
- {
- return {
- ...defaults,
- name: categoryExample,
- };
- }
-
- return {
- ...defaults,
- ...categoryExample,
- };
-};
-
-const entries = Object.entries(examplesData as ExamplesJsonType).reduce(
- (directoryAcc, [categoryKey, categoryExamples]) => ({
- ...directoryAcc,
- [categoryKey]: categoryExamples.reduce((categoryAcc, categoryExampleOrString) =>
- {
- const categoryExample = normalizeExampleDataEntry(categoryExampleOrString);
- const { name: categoryName, hide, usesWebWorkerLibrary } = categoryExample;
-
- return {
- ...categoryAcc,
- [categoryName]: {
- source: examplesSource[categoryKey][categoryName],
- hide,
- usesWebWorkerLibrary,
- },
- };
- }, {} as CategoryDataType),
- }),
- {} as ExamplesDataType,
-);
-
-const options = Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) =>
-{
- const options = folderEntries.reduce((acc, exampleDataEntry) =>
- {
- const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry);
-
- if (hide)
- {
- return acc;
- }
-
- return acc.concat({
- value: `${folderKey}.${exampleKey}`,
- label: camelCaseToSentenceCase(exampleKey),
- });
- }, [] as Option[]);
-
- return {
- label: camelCaseToSentenceCase(folderKey),
- options,
- };
-});
-
-export default { entries, options };
diff --git a/tsconfig.eslint.json b/tsconfig.eslint.json
index 03c78825e..5a73fc42b 100644
--- a/tsconfig.eslint.json
+++ b/tsconfig.eslint.json
@@ -1,5 +1,5 @@
{
"extends": "./tsconfig.json",
"files": [".eslintrc.js", "babel.config.js", "docusaurus.config.js", "sidebars.js"],
- "include": ["scripts/**/*", "src/**/*", "docs/**/*"],
+ "include": ["scripts/**/*", "src/**/*", "docs/**/*", "versioned_docs/**/*", "versioned_sidebars/**/*"],
}
diff --git a/versioned_docs/version-7.x/examples/advanced/_category_.yml b/versioned_docs/version-7.x/examples/advanced/_category_.yml
new file mode 100644
index 000000000..894610266
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/advanced/_category_.yml
@@ -0,0 +1,2 @@
+label: Advanced
+position: 2
\ No newline at end of file
diff --git a/src/examples/v7.0.0/advanced/collisionDetection.js b/versioned_docs/version-7.x/examples/advanced/collision-detection.js
similarity index 100%
rename from src/examples/v7.0.0/advanced/collisionDetection.js
rename to versioned_docs/version-7.x/examples/advanced/collision-detection.js
diff --git a/versioned_docs/version-7.x/examples/advanced/collision-detection.mdx b/versioned_docs/version-7.x/examples/advanced/collision-detection.mdx
new file mode 100644
index 000000000..baa2a7166
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/advanced/collision-detection.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 5
+custom_edit_url: null
+title: Collision Detection
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./collision-detection';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/advanced/mouseTrail.js b/versioned_docs/version-7.x/examples/advanced/mouse-trail.js
similarity index 100%
rename from src/examples/v7.0.0/advanced/mouseTrail.js
rename to versioned_docs/version-7.x/examples/advanced/mouse-trail.js
diff --git a/versioned_docs/version-7.x/examples/advanced/mouse-trail.mdx b/versioned_docs/version-7.x/examples/advanced/mouse-trail.mdx
new file mode 100644
index 000000000..a29f5bed3
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/advanced/mouse-trail.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Mouse Trail
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./mouse-trail';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/advanced/scratchCard.js b/versioned_docs/version-7.x/examples/advanced/scratch-card.js
similarity index 100%
rename from src/examples/v7.0.0/advanced/scratchCard.js
rename to versioned_docs/version-7.x/examples/advanced/scratch-card.js
diff --git a/versioned_docs/version-7.x/examples/advanced/scratch-card.mdx b/versioned_docs/version-7.x/examples/advanced/scratch-card.mdx
new file mode 100644
index 000000000..ad3750a96
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/advanced/scratch-card.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Scratch Card
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./scratch-card';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/advanced/screenShot.js b/versioned_docs/version-7.x/examples/advanced/screen-shot.js
similarity index 100%
rename from src/examples/v7.0.0/advanced/screenShot.js
rename to versioned_docs/version-7.x/examples/advanced/screen-shot.js
diff --git a/versioned_docs/version-7.x/examples/advanced/screen-shot.mdx b/versioned_docs/version-7.x/examples/advanced/screen-shot.mdx
new file mode 100644
index 000000000..efb33f5c7
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/advanced/screen-shot.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Screen Shot
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./screen-shot';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/advanced/slots.js b/versioned_docs/version-7.x/examples/advanced/slots.js
similarity index 100%
rename from src/examples/v7.0.0/advanced/slots.js
rename to versioned_docs/version-7.x/examples/advanced/slots.js
diff --git a/versioned_docs/version-7.x/examples/advanced/slots.mdx b/versioned_docs/version-7.x/examples/advanced/slots.mdx
new file mode 100644
index 000000000..9dba495b6
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/advanced/slots.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Slots
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./slots';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/advanced/spinners.js b/versioned_docs/version-7.x/examples/advanced/spinners.js
similarity index 100%
rename from src/examples/v7.0.0/advanced/spinners.js
rename to versioned_docs/version-7.x/examples/advanced/spinners.js
diff --git a/versioned_docs/version-7.x/examples/advanced/spinners.mdx b/versioned_docs/version-7.x/examples/advanced/spinners.mdx
new file mode 100644
index 000000000..50e8be13d
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/advanced/spinners.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 6
+custom_edit_url: null
+title: Spinners
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./spinners';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/advanced/starWarp.js b/versioned_docs/version-7.x/examples/advanced/star-warp.js
similarity index 100%
rename from src/examples/v7.0.0/advanced/starWarp.js
rename to versioned_docs/version-7.x/examples/advanced/star-warp.js
diff --git a/versioned_docs/version-7.x/examples/advanced/star-warp.mdx b/versioned_docs/version-7.x/examples/advanced/star-warp.mdx
new file mode 100644
index 000000000..4796c24fb
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/advanced/star-warp.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Star Warp
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./star-warp';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/assets/_category_.yml b/versioned_docs/version-7.x/examples/assets/_category_.yml
new file mode 100644
index 000000000..715922acd
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/assets/_category_.yml
@@ -0,0 +1,2 @@
+label: Assets
+position: 12
\ No newline at end of file
diff --git a/src/examples/v7.0.0/assets/async.js b/versioned_docs/version-7.x/examples/assets/async.js
similarity index 100%
rename from src/examples/v7.0.0/assets/async.js
rename to versioned_docs/version-7.x/examples/assets/async.js
diff --git a/versioned_docs/version-7.x/examples/assets/async.mdx b/versioned_docs/version-7.x/examples/assets/async.mdx
new file mode 100644
index 000000000..01d3d6542
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/assets/async.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Async
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./async';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/assets/background.js b/versioned_docs/version-7.x/examples/assets/background.js
similarity index 100%
rename from src/examples/v7.0.0/assets/background.js
rename to versioned_docs/version-7.x/examples/assets/background.js
diff --git a/versioned_docs/version-7.x/examples/assets/background.mdx b/versioned_docs/version-7.x/examples/assets/background.mdx
new file mode 100644
index 000000000..d581ac452
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/assets/background.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Background
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./background';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/assets/bundle.js b/versioned_docs/version-7.x/examples/assets/bundle.js
similarity index 100%
rename from src/examples/v7.0.0/assets/bundle.js
rename to versioned_docs/version-7.x/examples/assets/bundle.js
diff --git a/versioned_docs/version-7.x/examples/assets/bundle.mdx b/versioned_docs/version-7.x/examples/assets/bundle.mdx
new file mode 100644
index 000000000..84b2173b7
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/assets/bundle.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Bundle
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./bundle';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/assets/multiple.js b/versioned_docs/version-7.x/examples/assets/multiple.js
similarity index 100%
rename from src/examples/v7.0.0/assets/multiple.js
rename to versioned_docs/version-7.x/examples/assets/multiple.js
diff --git a/versioned_docs/version-7.x/examples/assets/multiple.mdx b/versioned_docs/version-7.x/examples/assets/multiple.mdx
new file mode 100644
index 000000000..b4a9f8220
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/assets/multiple.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Multiple
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./multiple';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/assets/promise.js b/versioned_docs/version-7.x/examples/assets/promise.js
similarity index 100%
rename from src/examples/v7.0.0/assets/promise.js
rename to versioned_docs/version-7.x/examples/assets/promise.js
diff --git a/versioned_docs/version-7.x/examples/assets/promise.mdx b/versioned_docs/version-7.x/examples/assets/promise.mdx
new file mode 100644
index 000000000..0a6354088
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/assets/promise.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Promise
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./promise';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/basic/_category_.yml b/versioned_docs/version-7.x/examples/basic/_category_.yml
new file mode 100644
index 000000000..0c4c76541
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/_category_.yml
@@ -0,0 +1,2 @@
+label: Basic
+position: 1
\ No newline at end of file
diff --git a/src/examples/v7.0.0/basic/blendModes.js b/versioned_docs/version-7.x/examples/basic/blend-modes.js
similarity index 100%
rename from src/examples/v7.0.0/basic/blendModes.js
rename to versioned_docs/version-7.x/examples/basic/blend-modes.js
diff --git a/versioned_docs/version-7.x/examples/basic/blend-modes.mdx b/versioned_docs/version-7.x/examples/basic/blend-modes.mdx
new file mode 100644
index 000000000..0a10b0f29
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/blend-modes.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Blend Modes
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./blend-modes';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/basic/cacheAsBitmap.js b/versioned_docs/version-7.x/examples/basic/cache-as-bitmap.js
similarity index 100%
rename from src/examples/v7.0.0/basic/cacheAsBitmap.js
rename to versioned_docs/version-7.x/examples/basic/cache-as-bitmap.js
diff --git a/versioned_docs/version-7.x/examples/basic/cache-as-bitmap.mdx b/versioned_docs/version-7.x/examples/basic/cache-as-bitmap.mdx
new file mode 100644
index 000000000..91807ed35
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/cache-as-bitmap.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Cache As Bitmap
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./cache-as-bitmap';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/basic/container.js b/versioned_docs/version-7.x/examples/basic/container.js
new file mode 100644
index 000000000..9d23157ca
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/container.js
@@ -0,0 +1,39 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+const container = new PIXI.Container();
+
+app.stage.addChild(container);
+
+// Create a new texture
+const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
+
+// Create a 5x5 grid of bunnies
+for (let i = 0; i < 25; i++)
+{
+ const bunny = new PIXI.Sprite(texture);
+
+ bunny.anchor.set(0.5);
+ bunny.x = (i % 5) * 40;
+ bunny.y = Math.floor(i / 5) * 40;
+ container.addChild(bunny);
+}
+
+// Move container to the center
+container.x = app.screen.width / 2;
+container.y = app.screen.height / 2;
+
+// Center bunny sprite in local container coordinates
+container.pivot.x = container.width / 2;
+container.pivot.y = container.height / 2;
+
+// Listen for animate update
+app.ticker.add((delta) =>
+{
+ // rotate the container!
+ // use delta to create frame-independent transform
+ container.rotation -= 0.01 * delta;
+});
diff --git a/versioned_docs/version-7.x/examples/basic/container.mdx b/versioned_docs/version-7.x/examples/basic/container.mdx
new file mode 100644
index 000000000..d9fd9f9b4
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/container.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Container
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./container';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/basic/particleContainer.js b/versioned_docs/version-7.x/examples/basic/particle-container.js
similarity index 100%
rename from src/examples/v7.0.0/basic/particleContainer.js
rename to versioned_docs/version-7.x/examples/basic/particle-container.js
diff --git a/versioned_docs/version-7.x/examples/basic/particle-container.mdx b/versioned_docs/version-7.x/examples/basic/particle-container.mdx
new file mode 100644
index 000000000..852d4b70c
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/particle-container.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Particle Container
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./particle-container';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/basic/simplePlane.js b/versioned_docs/version-7.x/examples/basic/simple-plane.js
similarity index 100%
rename from src/examples/v7.0.0/basic/simplePlane.js
rename to versioned_docs/version-7.x/examples/basic/simple-plane.js
diff --git a/versioned_docs/version-7.x/examples/basic/simple-plane.mdx b/versioned_docs/version-7.x/examples/basic/simple-plane.mdx
new file mode 100644
index 000000000..c8b5c9901
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/simple-plane.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 6
+custom_edit_url: null
+title: Simple Plane
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./simple-plane';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/basic/tinting.js b/versioned_docs/version-7.x/examples/basic/tinting.js
similarity index 100%
rename from src/examples/v7.0.0/basic/tinting.js
rename to versioned_docs/version-7.x/examples/basic/tinting.js
diff --git a/versioned_docs/version-7.x/examples/basic/tinting.mdx b/versioned_docs/version-7.x/examples/basic/tinting.mdx
new file mode 100644
index 000000000..6e29011bd
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/tinting.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Tinting
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./tinting';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/basic/transparentBackground.js b/versioned_docs/version-7.x/examples/basic/transparent-background.js
similarity index 100%
rename from src/examples/v7.0.0/basic/transparentBackground.js
rename to versioned_docs/version-7.x/examples/basic/transparent-background.js
diff --git a/versioned_docs/version-7.x/examples/basic/transparent-background.mdx b/versioned_docs/version-7.x/examples/basic/transparent-background.mdx
new file mode 100644
index 000000000..046b29155
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/basic/transparent-background.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Transparent Background
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./transparent-background';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/events/_category_.yml b/versioned_docs/version-7.x/examples/events/_category_.yml
new file mode 100644
index 000000000..595d7dce4
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/_category_.yml
@@ -0,0 +1,2 @@
+label: Events
+position: 6
\ No newline at end of file
diff --git a/src/examples/v7.0.0/events/click.js b/versioned_docs/version-7.x/examples/events/click.js
similarity index 100%
rename from src/examples/v7.0.0/events/click.js
rename to versioned_docs/version-7.x/examples/events/click.js
diff --git a/versioned_docs/version-7.x/examples/events/click.mdx b/versioned_docs/version-7.x/examples/events/click.mdx
new file mode 100644
index 000000000..0def771ce
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/click.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Click
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./click';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/events/customHitarea.js b/versioned_docs/version-7.x/examples/events/custom-hitarea.js
similarity index 100%
rename from src/examples/v7.0.0/events/customHitarea.js
rename to versioned_docs/version-7.x/examples/events/custom-hitarea.js
diff --git a/versioned_docs/version-7.x/examples/events/custom-hitarea.mdx b/versioned_docs/version-7.x/examples/events/custom-hitarea.mdx
new file mode 100644
index 000000000..26ce3ae22
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/custom-hitarea.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Custom Hitarea
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./custom-hitarea';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/events/customMouseIcon.js b/versioned_docs/version-7.x/examples/events/custom-mouse-icon.js
similarity index 100%
rename from src/examples/v7.0.0/events/customMouseIcon.js
rename to versioned_docs/version-7.x/examples/events/custom-mouse-icon.js
diff --git a/versioned_docs/version-7.x/examples/events/custom-mouse-icon.mdx b/versioned_docs/version-7.x/examples/events/custom-mouse-icon.mdx
new file mode 100644
index 000000000..dadd336ed
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/custom-mouse-icon.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Custom Mouse Icon
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./custom-mouse-icon';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/events/dragging.js b/versioned_docs/version-7.x/examples/events/dragging.js
similarity index 100%
rename from src/examples/v7.0.0/events/dragging.js
rename to versioned_docs/version-7.x/examples/events/dragging.js
diff --git a/versioned_docs/version-7.x/examples/events/dragging.mdx b/versioned_docs/version-7.x/examples/events/dragging.mdx
new file mode 100644
index 000000000..af601bb43
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/dragging.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Dragging
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./dragging';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/events/interactivity.js b/versioned_docs/version-7.x/examples/events/interactivity.js
similarity index 100%
rename from src/examples/v7.0.0/events/interactivity.js
rename to versioned_docs/version-7.x/examples/events/interactivity.js
diff --git a/versioned_docs/version-7.x/examples/events/interactivity.mdx b/versioned_docs/version-7.x/examples/events/interactivity.mdx
new file mode 100644
index 000000000..ae75c1ce6
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/interactivity.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Interactivity
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./interactivity';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/events/logger.js b/versioned_docs/version-7.x/examples/events/logger.js
similarity index 100%
rename from src/examples/v7.0.0/events/logger.js
rename to versioned_docs/version-7.x/examples/events/logger.js
diff --git a/versioned_docs/version-7.x/examples/events/logger.mdx b/versioned_docs/version-7.x/examples/events/logger.mdx
new file mode 100644
index 000000000..b649ddc39
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/logger.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 5
+custom_edit_url: null
+title: Logger
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./logger';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/events/nestedBoundaryWithProjection.js b/versioned_docs/version-7.x/examples/events/nested-boundary-with-projection.js
similarity index 100%
rename from src/examples/v7.0.0/events/nestedBoundaryWithProjection.js
rename to versioned_docs/version-7.x/examples/events/nested-boundary-with-projection.js
diff --git a/versioned_docs/version-7.x/examples/events/nested-boundary-with-projection.mdx b/versioned_docs/version-7.x/examples/events/nested-boundary-with-projection.mdx
new file mode 100644
index 000000000..ea81c43b0
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/nested-boundary-with-projection.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 6
+custom_edit_url: null
+title: Nested Boundary With Projection
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./nested-boundary-with-projection';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/events/pointerTracker.js b/versioned_docs/version-7.x/examples/events/pointer-tracker.js
similarity index 100%
rename from src/examples/v7.0.0/events/pointerTracker.js
rename to versioned_docs/version-7.x/examples/events/pointer-tracker.js
diff --git a/versioned_docs/version-7.x/examples/events/pointer-tracker.mdx b/versioned_docs/version-7.x/examples/events/pointer-tracker.mdx
new file mode 100644
index 000000000..e0cdd3569
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/pointer-tracker.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 6
+custom_edit_url: null
+title: Pointer Tracker
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./pointer-tracker';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/events/slider.js b/versioned_docs/version-7.x/examples/events/slider.js
similarity index 100%
rename from src/examples/v7.0.0/events/slider.js
rename to versioned_docs/version-7.x/examples/events/slider.js
diff --git a/versioned_docs/version-7.x/examples/events/slider.mdx b/versioned_docs/version-7.x/examples/events/slider.mdx
new file mode 100644
index 000000000..098a48d68
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/events/slider.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 7
+custom_edit_url: null
+title: Slider
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./slider';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/filters-advanced/_category_.yml b/versioned_docs/version-7.x/examples/filters-advanced/_category_.yml
new file mode 100644
index 000000000..bd8bc8527
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-advanced/_category_.yml
@@ -0,0 +1,2 @@
+label: Filters Advanced
+position: 9
\ No newline at end of file
diff --git a/src/examples/v7.0.0/filtersAdvanced/custom.js b/versioned_docs/version-7.x/examples/filters-advanced/custom.js
similarity index 100%
rename from src/examples/v7.0.0/filtersAdvanced/custom.js
rename to versioned_docs/version-7.x/examples/filters-advanced/custom.js
diff --git a/versioned_docs/version-7.x/examples/filters-advanced/custom.mdx b/versioned_docs/version-7.x/examples/filters-advanced/custom.mdx
new file mode 100644
index 000000000..f4ec26ad1
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-advanced/custom.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Custom
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./custom';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/filtersAdvanced/mouseBlending.js b/versioned_docs/version-7.x/examples/filters-advanced/mouse-blending.js
similarity index 100%
rename from src/examples/v7.0.0/filtersAdvanced/mouseBlending.js
rename to versioned_docs/version-7.x/examples/filters-advanced/mouse-blending.js
diff --git a/versioned_docs/version-7.x/examples/filters-advanced/mouse-blending.mdx b/versioned_docs/version-7.x/examples/filters-advanced/mouse-blending.mdx
new file mode 100644
index 000000000..9de60d315
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-advanced/mouse-blending.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Mouse Blending
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./mouse-blending';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/filtersAdvanced/shaderToyFilterRenderTexture.js b/versioned_docs/version-7.x/examples/filters-advanced/shader-toy-filter-render-texture.js
similarity index 100%
rename from src/examples/v7.0.0/filtersAdvanced/shaderToyFilterRenderTexture.js
rename to versioned_docs/version-7.x/examples/filters-advanced/shader-toy-filter-render-texture.js
diff --git a/versioned_docs/version-7.x/examples/filters-advanced/shader-toy-filter-render-texture.mdx b/versioned_docs/version-7.x/examples/filters-advanced/shader-toy-filter-render-texture.mdx
new file mode 100644
index 000000000..45c6b5e3d
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-advanced/shader-toy-filter-render-texture.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Shader Toy Filter Render Texture
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./shader-toy-filter-render-texture';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/filters-basic/_category_.yml b/versioned_docs/version-7.x/examples/filters-basic/_category_.yml
new file mode 100644
index 000000000..82e8c9685
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-basic/_category_.yml
@@ -0,0 +1,2 @@
+label: Filters Basic
+position: 8
\ No newline at end of file
diff --git a/src/examples/v7.0.0/filtersBasic/blur.js b/versioned_docs/version-7.x/examples/filters-basic/blur.js
similarity index 100%
rename from src/examples/v7.0.0/filtersBasic/blur.js
rename to versioned_docs/version-7.x/examples/filters-basic/blur.js
diff --git a/versioned_docs/version-7.x/examples/filters-basic/blur.mdx b/versioned_docs/version-7.x/examples/filters-basic/blur.mdx
new file mode 100644
index 000000000..dee54694a
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-basic/blur.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Blur
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./blur';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/filtersBasic/colorMatrix.js b/versioned_docs/version-7.x/examples/filters-basic/color-matrix.js
similarity index 100%
rename from src/examples/v7.0.0/filtersBasic/colorMatrix.js
rename to versioned_docs/version-7.x/examples/filters-basic/color-matrix.js
diff --git a/versioned_docs/version-7.x/examples/filters-basic/color-matrix.mdx b/versioned_docs/version-7.x/examples/filters-basic/color-matrix.mdx
new file mode 100644
index 000000000..59165c3c3
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-basic/color-matrix.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Color Matrix
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./color-matrix';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/filtersBasic/displacementMapCrawlies.js b/versioned_docs/version-7.x/examples/filters-basic/displacement-map-crawlies.js
similarity index 100%
rename from src/examples/v7.0.0/filtersBasic/displacementMapCrawlies.js
rename to versioned_docs/version-7.x/examples/filters-basic/displacement-map-crawlies.js
diff --git a/versioned_docs/version-7.x/examples/filters-basic/displacement-map-crawlies.mdx b/versioned_docs/version-7.x/examples/filters-basic/displacement-map-crawlies.mdx
new file mode 100644
index 000000000..7babfb6cc
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-basic/displacement-map-crawlies.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Displacement Map Crawlies
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./displacement-map-crawlies';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/filtersBasic/displacementMapFlag.js b/versioned_docs/version-7.x/examples/filters-basic/displacement-map-flag.js
similarity index 100%
rename from src/examples/v7.0.0/filtersBasic/displacementMapFlag.js
rename to versioned_docs/version-7.x/examples/filters-basic/displacement-map-flag.js
diff --git a/versioned_docs/version-7.x/examples/filters-basic/displacement-map-flag.mdx b/versioned_docs/version-7.x/examples/filters-basic/displacement-map-flag.mdx
new file mode 100644
index 000000000..a566c7974
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/filters-basic/displacement-map-flag.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Displacement Map Flag
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./displacement-map-flag';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/graphics/_category_.yml b/versioned_docs/version-7.x/examples/graphics/_category_.yml
new file mode 100644
index 000000000..cd580033c
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/graphics/_category_.yml
@@ -0,0 +1,2 @@
+label: Graphics
+position: 5
\ No newline at end of file
diff --git a/src/examples/v7.0.0/graphics/advanced.js b/versioned_docs/version-7.x/examples/graphics/advanced.js
similarity index 100%
rename from src/examples/v7.0.0/graphics/advanced.js
rename to versioned_docs/version-7.x/examples/graphics/advanced.js
diff --git a/versioned_docs/version-7.x/examples/graphics/advanced.mdx b/versioned_docs/version-7.x/examples/graphics/advanced.mdx
new file mode 100644
index 000000000..3e0e68b25
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/graphics/advanced.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Advanced
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./advanced';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/graphics/dynamic.js b/versioned_docs/version-7.x/examples/graphics/dynamic.js
similarity index 100%
rename from src/examples/v7.0.0/graphics/dynamic.js
rename to versioned_docs/version-7.x/examples/graphics/dynamic.js
diff --git a/versioned_docs/version-7.x/examples/graphics/dynamic.mdx b/versioned_docs/version-7.x/examples/graphics/dynamic.mdx
new file mode 100644
index 000000000..2aaee2134
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/graphics/dynamic.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Dynamic
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./dynamic';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/graphics/simple.js b/versioned_docs/version-7.x/examples/graphics/simple.js
similarity index 100%
rename from src/examples/v7.0.0/graphics/simple.js
rename to versioned_docs/version-7.x/examples/graphics/simple.js
diff --git a/versioned_docs/version-7.x/examples/graphics/simple.mdx b/versioned_docs/version-7.x/examples/graphics/simple.mdx
new file mode 100644
index 000000000..0671040ad
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/graphics/simple.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Simple
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./simple';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/index.md b/versioned_docs/version-7.x/examples/index.md
index 98e22ea4b..6d1cde0a6 100644
--- a/versioned_docs/version-7.x/examples/index.md
+++ b/versioned_docs/version-7.x/examples/index.md
@@ -9,9 +9,9 @@ Welcome to the PixiJS Examples page! Here you can find a variety of demos and co
Check out some of our featured examples below:
-- [Basic Container](./basic/container.md)
-- [Blend Modes](./basic/blend-modes.md)
-- [Tiling Sprite](./sprite/tiling-sprite.md)
-- [Animated Sprite](./sprite/animated-sprite-jet.md)
-- [Text](./text/pixi-text.md)
-- [Graphics](./graphics/simple.md)
+- [Basic Container](./basic/container.mdx)
+- [Blend Modes](./basic/blend-modes.mdx)
+- [Tiling Sprite](./sprite/tiling-sprite.mdx)
+- [Animated Sprite](./sprite/animated-sprite-jet.mdx)
+- [Text](./text/pixi-text.mdx)
+- [Graphics](./graphics/simple.mdx)
diff --git a/versioned_docs/version-7.x/examples/masks/_category_.yml b/versioned_docs/version-7.x/examples/masks/_category_.yml
new file mode 100644
index 000000000..1165f57f9
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/masks/_category_.yml
@@ -0,0 +1,2 @@
+label: Masks
+position: 7
\ No newline at end of file
diff --git a/src/examples/v7.0.0/masks/filter.js b/versioned_docs/version-7.x/examples/masks/filter.js
similarity index 100%
rename from src/examples/v7.0.0/masks/filter.js
rename to versioned_docs/version-7.x/examples/masks/filter.js
diff --git a/versioned_docs/version-7.x/examples/masks/filter.mdx b/versioned_docs/version-7.x/examples/masks/filter.mdx
new file mode 100644
index 000000000..942d63141
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/masks/filter.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Filter
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./filter';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/masks/graphics.js b/versioned_docs/version-7.x/examples/masks/graphics.js
similarity index 100%
rename from src/examples/v7.0.0/masks/graphics.js
rename to versioned_docs/version-7.x/examples/masks/graphics.js
diff --git a/versioned_docs/version-7.x/examples/masks/graphics.mdx b/versioned_docs/version-7.x/examples/masks/graphics.mdx
new file mode 100644
index 000000000..bde9a5b5e
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/masks/graphics.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Graphics
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./graphics';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/masks/sprite.js b/versioned_docs/version-7.x/examples/masks/sprite.js
similarity index 100%
rename from src/examples/v7.0.0/masks/sprite.js
rename to versioned_docs/version-7.x/examples/masks/sprite.js
diff --git a/versioned_docs/version-7.x/examples/masks/sprite.mdx b/versioned_docs/version-7.x/examples/masks/sprite.mdx
new file mode 100644
index 000000000..09292341a
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/masks/sprite.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Sprite
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./sprite';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/_category_.yml b/versioned_docs/version-7.x/examples/mesh-and-shaders/_category_.yml
new file mode 100644
index 000000000..495d6bc0d
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/_category_.yml
@@ -0,0 +1,2 @@
+label: Mesh And Shaders
+position: 10
\ No newline at end of file
diff --git a/src/examples/v7.0.0/meshAndShaders/instancedGeometry.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/instanced-geometry.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/instancedGeometry.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/instanced-geometry.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/instanced-geometry.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/instanced-geometry.mdx
new file mode 100644
index 000000000..9f8c9c61f
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/instanced-geometry.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 8
+custom_edit_url: null
+title: Instanced Geometry
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./instanced-geometry';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/interleavingGeometry.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/interleaving-geometry.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/interleavingGeometry.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/interleaving-geometry.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/interleaving-geometry.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/interleaving-geometry.mdx
new file mode 100644
index 000000000..81dca7a68
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/interleaving-geometry.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 9
+custom_edit_url: null
+title: Interleaving Geometry
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./interleaving-geometry';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/mergingGeometry.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/merging-geometry.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/mergingGeometry.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/merging-geometry.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/merging-geometry.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/merging-geometry.mdx
new file mode 100644
index 000000000..d870ecb9a
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/merging-geometry.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 8
+custom_edit_url: null
+title: Merging Geometry
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./merging-geometry';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/multiPassShaderGeneratedMesh.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/multiPassShaderGeneratedMesh.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.mdx
new file mode 100644
index 000000000..8943ece7e
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 12
+custom_edit_url: null
+title: Multi Pass Shader Generated Mesh
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./multi-pass-shader-generated-mesh';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/shaderToyMesh.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/shader-toy-mesh.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/shaderToyMesh.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/shader-toy-mesh.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/shader-toy-mesh.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/shader-toy-mesh.mdx
new file mode 100644
index 000000000..dcb6b7c6d
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/shader-toy-mesh.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 9
+custom_edit_url: null
+title: Shader Toy Mesh
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./shader-toy-mesh';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/sharedShader.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/shared-shader.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/sharedShader.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/shared-shader.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/shared-shader.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/shared-shader.mdx
new file mode 100644
index 000000000..71ce483bc
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/shared-shader.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 7
+custom_edit_url: null
+title: Shared Shader
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./shared-shader';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/sharingGeometry.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/sharing-geometry.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/sharingGeometry.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/sharing-geometry.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/sharing-geometry.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/sharing-geometry.mdx
new file mode 100644
index 000000000..bcc19f2e0
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/sharing-geometry.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 6
+custom_edit_url: null
+title: Sharing Geometry
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./sharing-geometry';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/texturedMeshAdvanced.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-advanced.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/texturedMeshAdvanced.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-advanced.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-advanced.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-advanced.mdx
new file mode 100644
index 000000000..06a1eb9c3
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-advanced.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Textured Mesh Advanced
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./textured-mesh-advanced';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/texturedMeshBasic.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-basic.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/texturedMeshBasic.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-basic.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-basic.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-basic.mdx
new file mode 100644
index 000000000..46f24b9f0
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-basic.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Textured Mesh Basic
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./textured-mesh-basic';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/triangleColor.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-color.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/triangleColor.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-color.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-color.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-color.mdx
new file mode 100644
index 000000000..de08b0209
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-color.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Triangle Color
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./triangle-color'
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/triangleTextured.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-textured.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/triangleTextured.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-textured.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-textured.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-textured.mdx
new file mode 100644
index 000000000..9014b7ae9
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-textured.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 5
+custom_edit_url: null
+title: Triangle Textured
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./triangle-textured';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/triangle.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/triangle.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/triangle.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle.mdx
new file mode 100644
index 000000000..a949a66d3
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Triangle
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./triangle';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/meshAndShaders/uniforms.js b/versioned_docs/version-7.x/examples/mesh-and-shaders/uniforms.js
similarity index 100%
rename from src/examples/v7.0.0/meshAndShaders/uniforms.js
rename to versioned_docs/version-7.x/examples/mesh-and-shaders/uniforms.js
diff --git a/versioned_docs/version-7.x/examples/mesh-and-shaders/uniforms.mdx b/versioned_docs/version-7.x/examples/mesh-and-shaders/uniforms.mdx
new file mode 100644
index 000000000..3dfb068a3
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/mesh-and-shaders/uniforms.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 5
+custom_edit_url: null
+title: Uniforms
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./uniforms';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/offscreen-canvas/_category_.yml b/versioned_docs/version-7.x/examples/offscreen-canvas/_category_.yml
new file mode 100644
index 000000000..5d5015476
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/offscreen-canvas/_category_.yml
@@ -0,0 +1,2 @@
+label: Offscreen Canvas
+position: 13
\ No newline at end of file
diff --git a/src/examples/v7.0.0/offscreenCanvas/basic.js b/versioned_docs/version-7.x/examples/offscreen-canvas/basic.js
similarity index 100%
rename from src/examples/v7.0.0/offscreenCanvas/basic.js
rename to versioned_docs/version-7.x/examples/offscreen-canvas/basic.js
diff --git a/versioned_docs/version-7.x/examples/offscreen-canvas/basic.mdx b/versioned_docs/version-7.x/examples/offscreen-canvas/basic.mdx
new file mode 100644
index 000000000..a16b84a1b
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/offscreen-canvas/basic.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Basic
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./basic';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/sprite/_category_.yml b/versioned_docs/version-7.x/examples/sprite/_category_.yml
new file mode 100644
index 000000000..2dda005fc
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/sprite/_category_.yml
@@ -0,0 +1,2 @@
+label: Sprite
+position: 3
\ No newline at end of file
diff --git a/src/examples/v7.0.0/sprite/animatedSpriteAnimationSpeed.js b/versioned_docs/version-7.x/examples/sprite/animated-sprite-animation-speed.js
similarity index 100%
rename from src/examples/v7.0.0/sprite/animatedSpriteAnimationSpeed.js
rename to versioned_docs/version-7.x/examples/sprite/animated-sprite-animation-speed.js
diff --git a/versioned_docs/version-7.x/examples/sprite/animated-sprite-animation-speed.mdx b/versioned_docs/version-7.x/examples/sprite/animated-sprite-animation-speed.mdx
new file mode 100644
index 000000000..4b8480678
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/sprite/animated-sprite-animation-speed.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Animated Sprite Animation Speed
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./animated-sprite-animation-speed';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/sprite/animatedSpriteExplosion.js b/versioned_docs/version-7.x/examples/sprite/animated-sprite-explosion.js
similarity index 100%
rename from src/examples/v7.0.0/sprite/animatedSpriteExplosion.js
rename to versioned_docs/version-7.x/examples/sprite/animated-sprite-explosion.js
diff --git a/versioned_docs/version-7.x/examples/sprite/animated-sprite-explosion.mdx b/versioned_docs/version-7.x/examples/sprite/animated-sprite-explosion.mdx
new file mode 100644
index 000000000..09abe218c
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/sprite/animated-sprite-explosion.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Animated Sprite Explosion
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./animated-sprite-explosion';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/sprite/animatedSpriteJet.js b/versioned_docs/version-7.x/examples/sprite/animated-sprite-jet.js
similarity index 100%
rename from src/examples/v7.0.0/sprite/animatedSpriteJet.js
rename to versioned_docs/version-7.x/examples/sprite/animated-sprite-jet.js
diff --git a/versioned_docs/version-7.x/examples/sprite/animated-sprite-jet.mdx b/versioned_docs/version-7.x/examples/sprite/animated-sprite-jet.mdx
new file mode 100644
index 000000000..2b2895496
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/sprite/animated-sprite-jet.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Animated Sprite Jet
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./animated-sprite-jet';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/sprite/basic.js b/versioned_docs/version-7.x/examples/sprite/basic.js
similarity index 100%
rename from src/examples/v7.0.0/sprite/basic.js
rename to versioned_docs/version-7.x/examples/sprite/basic.js
diff --git a/versioned_docs/version-7.x/examples/sprite/basic.mdx b/versioned_docs/version-7.x/examples/sprite/basic.mdx
new file mode 100644
index 000000000..a16b84a1b
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/sprite/basic.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Basic
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./basic';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/sprite/textureSwap.js b/versioned_docs/version-7.x/examples/sprite/texture-swap.js
similarity index 100%
rename from src/examples/v7.0.0/sprite/textureSwap.js
rename to versioned_docs/version-7.x/examples/sprite/texture-swap.js
diff --git a/versioned_docs/version-7.x/examples/sprite/texture-swap.mdx b/versioned_docs/version-7.x/examples/sprite/texture-swap.mdx
new file mode 100644
index 000000000..f8f7812c8
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/sprite/texture-swap.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Texture Swap
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./texture-swap';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/sprite/tilingSprite.js b/versioned_docs/version-7.x/examples/sprite/tiling-sprite.js
similarity index 100%
rename from src/examples/v7.0.0/sprite/tilingSprite.js
rename to versioned_docs/version-7.x/examples/sprite/tiling-sprite.js
diff --git a/versioned_docs/version-7.x/examples/sprite/tiling-sprite.mdx b/versioned_docs/version-7.x/examples/sprite/tiling-sprite.mdx
new file mode 100644
index 000000000..fbaaebdb4
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/sprite/tiling-sprite.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 5
+custom_edit_url: null
+title: Tiling Sprite
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./tiling-sprite';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/sprite/video.js b/versioned_docs/version-7.x/examples/sprite/video.js
similarity index 100%
rename from src/examples/v7.0.0/sprite/video.js
rename to versioned_docs/version-7.x/examples/sprite/video.js
diff --git a/versioned_docs/version-7.x/examples/sprite/video.mdx b/versioned_docs/version-7.x/examples/sprite/video.mdx
new file mode 100644
index 000000000..f3b4862f4
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/sprite/video.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 6
+custom_edit_url: null
+title: Video
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./video';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/text/_category_.yml b/versioned_docs/version-7.x/examples/text/_category_.yml
new file mode 100644
index 000000000..e3786327a
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/text/_category_.yml
@@ -0,0 +1,2 @@
+label: Text
+position: 4
\ No newline at end of file
diff --git a/src/examples/v7.0.0/text/bitmapText.js b/versioned_docs/version-7.x/examples/text/bitmap-text.js
similarity index 100%
rename from src/examples/v7.0.0/text/bitmapText.js
rename to versioned_docs/version-7.x/examples/text/bitmap-text.js
diff --git a/versioned_docs/version-7.x/examples/text/bitmap-text.mdx b/versioned_docs/version-7.x/examples/text/bitmap-text.mdx
new file mode 100644
index 000000000..7bdee6cbf
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/text/bitmap-text.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Bitmap Text
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./bitmap-text';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/text/fromFont.js b/versioned_docs/version-7.x/examples/text/from-font.js
similarity index 100%
rename from src/examples/v7.0.0/text/fromFont.js
rename to versioned_docs/version-7.x/examples/text/from-font.js
diff --git a/versioned_docs/version-7.x/examples/text/from-font.mdx b/versioned_docs/version-7.x/examples/text/from-font.mdx
new file mode 100644
index 000000000..9a4a022e1
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/text/from-font.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: From Font
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./from-font';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/text/pixiText.js b/versioned_docs/version-7.x/examples/text/pixi-text.js
similarity index 100%
rename from src/examples/v7.0.0/text/pixiText.js
rename to versioned_docs/version-7.x/examples/text/pixi-text.js
diff --git a/versioned_docs/version-7.x/examples/text/pixi-text.mdx b/versioned_docs/version-7.x/examples/text/pixi-text.mdx
new file mode 100644
index 000000000..cd1b3f6ba
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/text/pixi-text.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Pixi Text
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./pixi-text';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/text/webFont.js b/versioned_docs/version-7.x/examples/text/web-font.js
similarity index 100%
rename from src/examples/v7.0.0/text/webFont.js
rename to versioned_docs/version-7.x/examples/text/web-font.js
diff --git a/versioned_docs/version-7.x/examples/text/web-font.mdx b/versioned_docs/version-7.x/examples/text/web-font.mdx
new file mode 100644
index 000000000..73d728a5f
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/text/web-font.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Web Font
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./web-font';
+import version from '../../pixi-version.json';
+
+
diff --git a/versioned_docs/version-7.x/examples/textures/_category_.yml b/versioned_docs/version-7.x/examples/textures/_category_.yml
new file mode 100644
index 000000000..b5dde4f6c
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/textures/_category_.yml
@@ -0,0 +1,2 @@
+label: Textures
+position: 11
\ No newline at end of file
diff --git a/src/examples/v7.0.0/textures/gradientBasic.js b/versioned_docs/version-7.x/examples/textures/gradient-basic.js
similarity index 100%
rename from src/examples/v7.0.0/textures/gradientBasic.js
rename to versioned_docs/version-7.x/examples/textures/gradient-basic.js
diff --git a/versioned_docs/version-7.x/examples/textures/gradient-basic.mdx b/versioned_docs/version-7.x/examples/textures/gradient-basic.mdx
new file mode 100644
index 000000000..c86c50c25
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/textures/gradient-basic.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 3
+custom_edit_url: null
+title: Gradient Basic
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./gradient-basic';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/textures/gradientResource.js b/versioned_docs/version-7.x/examples/textures/gradient-resource.js
similarity index 100%
rename from src/examples/v7.0.0/textures/gradientResource.js
rename to versioned_docs/version-7.x/examples/textures/gradient-resource.js
diff --git a/versioned_docs/version-7.x/examples/textures/gradient-resource.mdx b/versioned_docs/version-7.x/examples/textures/gradient-resource.mdx
new file mode 100644
index 000000000..ed3369833
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/textures/gradient-resource.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 4
+custom_edit_url: null
+title: Gradient Resource
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./gradient-resource'
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/textures/renderTextureAdvanced.js b/versioned_docs/version-7.x/examples/textures/render-texture-advanced.js
similarity index 100%
rename from src/examples/v7.0.0/textures/renderTextureAdvanced.js
rename to versioned_docs/version-7.x/examples/textures/render-texture-advanced.js
diff --git a/versioned_docs/version-7.x/examples/textures/render-texture-advanced.mdx b/versioned_docs/version-7.x/examples/textures/render-texture-advanced.mdx
new file mode 100644
index 000000000..e24df0ec5
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/textures/render-texture-advanced.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 2
+custom_edit_url: null
+title: Render Texture Advanced
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./render-texture-advanced';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/textures/renderTextureBasic.js b/versioned_docs/version-7.x/examples/textures/render-texture-basic.js
similarity index 100%
rename from src/examples/v7.0.0/textures/renderTextureBasic.js
rename to versioned_docs/version-7.x/examples/textures/render-texture-basic.js
diff --git a/versioned_docs/version-7.x/examples/textures/render-texture-basic.mdx b/versioned_docs/version-7.x/examples/textures/render-texture-basic.mdx
new file mode 100644
index 000000000..0a817f829
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/textures/render-texture-basic.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 1
+custom_edit_url: null
+title: Render Texture Basic
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./render-texture-basic';
+import version from '../../pixi-version.json';
+
+
diff --git a/src/examples/v7.0.0/textures/textureRotate.js b/versioned_docs/version-7.x/examples/textures/texture-rotate.js
similarity index 100%
rename from src/examples/v7.0.0/textures/textureRotate.js
rename to versioned_docs/version-7.x/examples/textures/texture-rotate.js
diff --git a/versioned_docs/version-7.x/examples/textures/texture-rotate.mdx b/versioned_docs/version-7.x/examples/textures/texture-rotate.mdx
new file mode 100644
index 000000000..51cfb9bec
--- /dev/null
+++ b/versioned_docs/version-7.x/examples/textures/texture-rotate.mdx
@@ -0,0 +1,12 @@
+---
+hide_table_of_contents: true
+hide_edit_this_page: true
+sidebar_position: 0
+custom_edit_url: null
+title: Texture Rotate
+---
+import { ExampleEditor } from "@site/src/components/Editor/ExampleEditor";
+import IndexFile from '!!raw-loader!./texture-rotate';
+import version from '../../pixi-version.json';
+
+