Chore: Website Restructuring (#49)

* Restructuring: Move Tutorial and Playground into the Docusaurus Docs Structure

* Fix main container styling in coding mode for full-screen

* Chore: Website Restructuring

* Updated content generation scripts

* Minor fixes

* Chore: Website Versioning Scripts (#52)

* Chore: Website Versioning

* Versions page fixes

* Add `Working with Content` Section on README (#54)

* Added Working with Content Section on README

* Quick adjustment

---------

Co-authored-by: Baz Utsahajit <[email protected]>

* Chore: Create v7.x Snapshot + Make Working Docs the Pre-Release v8 (#53)

* Chore: Create v7.x Snapshot + Make Working Docs the Pre-Release v8

* Tweaked Sandpack Dependencies Config

* Hotfix: Restructure Source Examples and Tutorial (#55)

* Hotfix: Restructure Source Examples and Tutorial

* Type hotfix

* Added back parcel-bundler for all pixi versions

* Reverted conditioned babel core dev dependency

* Chore: Upgrade Working Docs to use PixiJS v8.0.0-rc.2 and Simplify examples and tutorial source versioning (#60)

* Chore: Upgrade Working Docs to use PixiJS v8.0.0-rc.1

* Simplify source versioning for examples and tutorials

* Bump up to v8.0.0-rc.2

* Type fix

* Add ghtoken ignore

* Fix Versioned Links

* Upgrade to RC4

* More Assorted fixes

---------

Co-authored-by: Baz Utsahajit <[email protected]>

---------

Co-authored-by: Baz Utsahajit <[email protected]>

---------

Co-authored-by: Baz Utsahajit <[email protected]>

---------

Co-authored-by: Baz Utsahajit <[email protected]>

* Upgrade to RC4

* No footer on example pages

* Update v7.x versioned docs

* Use semver to pick the latest version instead of relying on the latest tag

* Update Versions Page + Add devs and unmaintained versions

* More readme update

* Allowing user to customize pixi version label

* Add the ability to manage generic snapshots

* Combine gitignores into the root one

* Add ability to add extra packages to the playground

* Update examples config to allow multiple files

* Adapt syntax highlighting on tab switches

* Extract multi-file handling into a useCodeSource function

* Allow active file override with '$'

* Editor tutorial code change fix

* Allow extra packages on tutorial + add babel plugin

* Resolve conflict

* Fix editor styling and persisting playground changes

* Updated editor now keep persisted changes on all visible files + Fix tabs overflowing

* Tabs style update and fixes

* Upgrade to RC5

* Remove unused types and functions

* Fix tab scroll

* Bump up to RC6

* Upgrade to RC7

* Updated v7.x to latest

* Upgrade to RC.9

* upgrade to RC 10

* update

* undo

---------

Co-authored-by: Baz Utsahajit <[email protected]>
Co-authored-by: Zyie <[email protected]>

.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',
                     },
                     {