Chore: Website Restructuring

.eslintrc.js

@@ -37,6 +37,9 @@ module.exports = {
     rules: {
         'no-empty-function': 0,
         'no-prototype-builtins': 0,
+        'no-mixed-operators': 0,
+        'no-console': 0,
+        'global-require': 0,
         'react-hooks/rules-of-hooks': 'error',
         'react-hooks/exhaustive-deps': 'error',
         'spaced-comment': [1, 'always', { markers: ['/'] }],

.gitignore

@@ -8,6 +8,16 @@
 .docusaurus
 .cache-loader
 
+# Generated Example and Tutorial Markdowns
+/docs/tutorials/*
+!/docs/tutorials/index.md
+/docs/examples/*
+!/docs/examples/index.md
+/versioned_docs/version-*/tutorials/*
+!/versioned_docs/version-*/tutorials/index.md
+/versioned_docs/version-*/examples/*
+!/versioned_docs/version-*/examples/index.md
+
 # Misc
 .DS_Store
 .env.local
@@ -21,3 +31,7 @@ yarn-error.log*
 .vscode
 .idea
 .eslintcache
+
+scripts/pixiVersions.json
+
+.ghtoken

README.md

@@ -24,3 +24,81 @@ $ npm build
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
 
+### Working with Content
+
+Core content on the website is within the working `docs` directory and can have various versions that were snapshot and copied over into the `versioned_docs` directory.
+
+Core content consists of:
+- Guides
+- Examples
+- Tutorials
+
+#### Guides
+
+These are static markdown pages that can be added and edited directly within the `docs/guides` directory.
+
+#### Examples
+
+These are markdown compilations of the JS files on the `src/examples` directory. They are also versioned to match the versions of the docs snapshots. If the exact version of the example is not found, it will fallback to the best-matched most recent version of the examples. be Only the `docs/examples/index.md` entry point can be altered, but the examples themselves should be worked on from within the `src/examples/{version}` directories. Once updated, the command below can be called to generate out the markdown compilations of the examples.
+
+```
+$ npm run generate-example-docs
+```
+
+This command will trigger example markdowns generation on all of the docs directories altogether, both the working docs directory and the versioned docs directories.
+
+__Note__: The examples within the docs version active on the website will be shown on the drop-down menu on the Playground page to serve as starting points for users to explore PixiJS features to their heart's content
+
+#### Tutorials
+
+These also markdown compilations of groups of files on the `src/tutorials` directory. Each tutorial group consists of a number of steps where each step contains a JS code file accompanied by an instruction markdown file, and a separate completed JS code file if there is a next step to proceed towards. These completed code can be toggled on/off from the instruction card of the corresponded step. Like the examples, these are also versioned to match the versions of the docs snapshots and will fallback to the best-matched most recent version of the tutorials if the exact version is not found. Only the `docs/tutorials/index.md` entry point can be altered, but the tutorial groups themselves should be worked on from within the `src/tutorial/{version}` directories. Once updated, the command below can be called to generate out the markdown compilations of the tutorial groups.
+
+```
+$ npm run generate-tutorial-docs
+```
+
+This command will trigger tutorial markdowns generation on all of the docs directories altogether, both the working docs directory and the versioned docs directories.
+
+#### Workflow
+
+```
+$ npm start
+```
+
+The local development command will also trigger the `generate-content` command which, in turns, calls the `generate-example-docs` script and `generate-tutorial-docs` script respectively. Since the compiled markdown pages contain dynamic components, changes within the examples source or the tutorials source will be reflected on hot reloads.
+
+However, when adding or removing tutorials or examples, please make sure to re-do `npm start` or run `generate-content` manually to keep the markdown pages of these content up-to-date.
+
+#### Versioning
+
+Docs versioning is native to Docusaurus, but to make it easier to manage it is coupled with the PixiJS version. A `pixi-version.json` is required on the working docs directory to create a versioned snapshot of the docs. This can be generated and altered using the following command:
+
+```
+$ npm run generate-pixi-version-config
+```
+
+The command will retrieve the up-to-date versions and tags from PixiJS and display out as an interactive list for selection.
+
+Once satisfied with the state of the working docs and wanting to create a snapshot to make way for another upcoming version, the following command can be called:
+
+```
+$ npm run create-docs-version-snapshot
+```
+
+This will copy everything from the working docs into its own directory within the `versioned_docs` directory and named correspondingly to the version number from the encapsulated `pixi-version.json`, if chosen to be created as a specific version snapshot. If chosen to be snapshot as a generic version then the version key will be simplified to `{major}.x` (eg. `7.x`). Generic version snapshot is recommended over the specific one for maintaining major docs, but for a major version where multiple versions of docs are needed then the ability to create specific version snapshots can be handy. The command will also trigger `update-global-version-config` script which adds the pixi version config to the master `pixi-versions.json` on the root and alter the version config on the `docusaurus.config.js` accordingly. Docusaurus will also add the version to its `versions.json` file on the root.
+
+An existing docs snapshot can be removed using the following command:
+
+```
+$ npm run remove-docs-version-snapshot
+```
+
+Or can have its pixi version config altered to another version using the command:
+
+```
+$ npm run switch-snapshot-pixi-version-config
+```
+
+where both come with an interactive list of all the snapshots for selection to be actioned on accordingly.
+
+The `update-pixi-version-configs` script is also called pre-build and pre-deploy to update all the outdated labels or metadata on the `pixi-version.json` config on all the docs directories.

docs/guides/basics/getting-started.md

@@ -91,7 +91,7 @@ What we're doing here is adding a JavaScript code block, and in that block creat
 
 When the PIXI.Application class creates the renderer, it builds a Canvas element that it will render *to*.  In order to see what we draw with PixiJS, we need to add this Canvas element to the web page's DOM.  Append the following line to your page's script block:
 
-```JavaScript
+```javascript
   document.body.appendChild(app.view);
 ```
 
@@ -105,7 +105,7 @@ There are a number of ways to draw images in PixiJS, but the simplest is by usin
 
 Before PixiJS can render an image, it needs to be loaded.  Just like in any web page, image loading happens asynchronously.  We'll talk a lot more about resource loading in later guides.  For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us:
 
-```JavaScript
+```javascript
   // Magically load the PNG asynchronously
   let sprite = PIXI.Sprite.from('sample.png');
 ```
@@ -116,7 +116,7 @@ Before PixiJS can render an image, it needs to be loaded.  Just like in any web
 
 Finally, we need to add our new sprite to the stage.  The stage is simply a [Container](https://pixijs.download/release/docs/PIXI.Container.html) that is the root of the scene graph.  Every child of the stage container will be rendered every frame.  By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it.
 
-```JavaScript
+```javascript
   app.stage.addChild(sprite);
 ```
 

docs/guides/components/containers.md

@@ -10,7 +10,7 @@ However, it's a good idea _not_ to do this.  Standalone Container objects are **
 
 So that's the primary use for Containers - as groups of renderable objects in a hierarchy.
 
-Check out the [container example code](/examples/basic/container).
+Check out the [container example code](../../examples/basic/container).
 
 ## Masking
 

docs/guides/components/graphics.md

@@ -4,7 +4,7 @@
 
 In this guide, we're going to de-mystify the Graphics object, starting with how to think about what it does.
 
-Check out the [graphics example code](/examples/graphics/simple).
+Check out the [graphics example code](../../examples/graphics/simple).
 
 ## Graphics Is About Building - Not Drawing
 
@@ -83,7 +83,7 @@ Doing so is simple.  Create the object, call the various builder functions to ad
 
 You can also use a Graphics object as a complex mask.  To do so, build your object and primitives as usual.  Next create a PIXI.Container object that will contain the masked content, and set its `mask` property to your Graphics object.  The children of the container will now be clipped to only show through inside the geometry you've created.  This technique works for both WebGL and Canvas-based rendering.
 
-Check out the [masking example code](/examples/graphics/simple).
+Check out the [masking example code](../../examples/graphics/simple).
 
 ## Caveats and Gotchas
 

docs/guides/components/interaction.md

@@ -59,7 +59,7 @@ PixiJS supports the following event types:
 
 Any DisplayObject-derived object (Sprite, Container, etc.) can become interactive simply by setting its `eventMode` property to any of the eventModes listed above. Doing so will cause the object to emit interaction events that can be responded to in order to drive your project's behavior.
 
-Check out the [interaction example code](/examples/events/click).
+Check out the [interaction example code](../../examples/events/click).
 
 To respond to clicks and taps, bind to the events fired on the object, like so:
 

docs/guides/components/sprites.md

@@ -6,7 +6,7 @@ Sprites are the simplest and most common renderable object in PixiJS.  They repr
 
 To create a Sprite, all you need is a Texture (check out the Texture guide).  Load a PNG's URL using the PIXI.Loader class, then call `PIXI.Sprite.from(url)` and you're all set.  As a convenience during prototyping, you can pass a non-loaded URL to `from()` and PixiJS will handle it, but your sprite will "pop in" after it loads if you don't pre-load your textures.
 
-Check out the [sprite example code](/examples/sprite/basic).
+Check out the [sprite example code](../../examples/sprite/basic).
 
 ## Using Sprites
 

docs/guides/components/text.md

@@ -14,7 +14,7 @@ In order to draw text to the screen, you use a [Text](https://pixijs.download/re
 
 So when working with PIXI.Text objects, there are two sets of options - standard display object options like position, rotation, etc that work *after* the text is rasterized internally, and text style options that are used *while* rasterizing.  Because text once rendered is basically just a sprite, there's no need to review the standard options.  Instead, let's focus on how text is styled.
 
-Check out the [text example code](/examples/text/pixi-text).
+Check out the [text example code](../../examples/text/pixi-text).
 
 ## Text Styles
 
@@ -80,7 +80,7 @@ In addition to the standard PIXI.Text approach to adding text to your project, P
 
 The primary advantage of this approach is speed - changing text frequently is much cheaper and rendering each additional piece of text is much faster due to the shared source texture.
 
-Check out the [bitmap text example code](/examples/text/bitmap-text).
+Check out the [bitmap text example code](../../examples/text/bitmap-text).
 
 ## BitmapFont
 

docs/guides/components/textures.md

@@ -72,4 +72,4 @@ RenderTexture: A more advanced (but very powerful!) feature is to build a Textur
 
 Each of these texture sources has caveats and nuances that we can't cover in this guide, but they should give you a feeling for the power of PixiJS's texture system. <!--TODO: link to advanced textures guide-->
 
-Check out the [render texture example code](/examples/textures/render-texture-basic).
+Check out the [render texture example code](../../examples/textures/render-texture-basic).

docs/pixi-version.json

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

docs/playground/index.md

@@ -0,0 +1,11 @@
+---
+hide_title: true
+pagination_next: null
+pagination_prev: null
+custom_edit_url: null
+---
+
+import Playground from '@site/src/components/Playground/index';
+import version from '../pixi-version.json';
+
+<Playground pixiVersion={version} />

docs/tutorials/index.md

@@ -0,0 +1,11 @@
+---
+pagination_next: null
+pagination_prev: null
+custom_edit_url: null
+---
+
+# Tutorials
+
+Welcome to the tutorials page! Here you can find hand-crafted exercises to get you started with the PixiJS.
+
+- [Getting Started](./getting-started.md)

docusaurus.config.js

@@ -43,8 +43,17 @@ const config = {
                     editUrl: 'https://github.com/pixijs/pixijs.com/tree/main/',
                     routeBasePath: '/',
                     versions: {
+                        '7.x': {
+                            label: 'v7.x (Latest)',
+                            path: '7.x',
+                            banner: 'none',
+                            badge: false,
+                        },
+
                         current: {
-                            label: 'Latest',
+                            label: 'v8.x',
+                            banner: 'none',
+                            badge: false,
                         },
                     },
                 },
@@ -75,7 +84,7 @@ const config = {
                 highlightSearchTermsOnTargetPage: true,
                 docsRouteBasePath: '/',
                 explicitSearchResultPath: true,
-                searchContextByPaths: ['guides', 'examples', 'blog'],
+                searchContextByPaths: ['guides', 'examples', 'tutorials', 'blog'],
                 useAllContextsWithNoSearchContext: true,
             },
         ],
@@ -99,10 +108,10 @@ const config = {
                                 docId: 'guides/index',
                                 label: 'Guides',
                             },
-                            // TODO: add tutorial back in
                             {
-                                label: 'Tutorial',
-                                to: 'tutorial',
+                                type: 'doc',
+                                docId: 'tutorials/index',
+                                label: 'Tutorials',
                             },
                             {
                                 type: 'doc',
@@ -116,16 +125,10 @@ const config = {
                         position: 'left',
                         href: `https://pixijs.download/release/docs/index.html`,
                     },
-                    // TODO: add docs back in
-                    // {
-                    //     type: 'doc',
-                    //     docId: 'api/index',
-                    //     label: 'API',
-                    //     position: 'left',
-                    // },
                     {
-                        to: 'playground',
-                        label: 'Playground',
+                        type: 'doc',
+                        docId: 'playground/index',
+                        label: 'playground',
                         position: 'left',
                     },
                     {