Merge branch 'v8' into blog/v8-launch-post

docs/pixi-version.json

@@ -1,10 +1,10 @@
 {
   "versionLabel": "v8.x",
-  "version": "8.0.0-rc.7",
-  "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc.7",
-  "build": "https://pixijs.download/v8.0.0-rc.7/pixi.min.js",
-  "docs": "https://pixijs.download/v8.0.0-rc.7/docs/index.html",
-  "npm": "8.0.0-rc.7",
+  "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/tutorials/index.md

@@ -2,10 +2,13 @@
 pagination_next: null
 pagination_prev: null
 custom_edit_url: null
+
 ---
+import TutorialGallery from '@site/src/components/TutorialGallery/index';
+import version from '../pixi-version.json';
 
 # 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)
+<TutorialGallery pixiVersion={version} />

pixi-legacy-versions.json

@@ -0,0 +1,58 @@
+[
+  {
+    "versionLabel": "v7.3.x",
+    "version": "7.3.3",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v7.3.3",
+    "build": "https://pixijs.download/v7.3.3/pixi.min.js",
+    "docs": "https://pixijs.download/v7.3.3/docs/index.html",
+    "npm": "7.3.3"
+  },
+  {
+    "versionLabel": "v7.2.x",
+    "version": "7.2.4",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v7.2.4",
+    "build": "https://pixijs.download/v7.2.4/pixi.min.js",
+    "docs": "https://pixijs.download/v7.2.4/docs/index.html",
+    "npm": "7.2.4"
+  },
+  {
+    "versionLabel": "v7.1.x",
+    "version": "7.1.4",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v7.1.4",
+    "build": "https://pixijs.download/v7.1.4/pixi.min.js",
+    "docs": "https://pixijs.download/v7.1.4/docs/index.html",
+    "npm": "7.1.4"
+  },
+  {
+    "versionLabel": "v7.0.x",
+    "version": "7.0.5",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v7.0.5",
+    "build": "https://pixijs.download/v7.0.5/pixi.min.js",
+    "docs": "https://pixijs.download/v7.0.5/docs/index.html",
+    "npm": "7.0.5"
+  },
+  {
+    "versionLabel": "v6.x",
+    "version": "6.5.10",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v6.5.10",
+    "build": "https://pixijs.download/v6.5.10/pixi.min.js",
+    "docs": "https://pixijs.download/v6.5.10/docs/index.html",
+    "npm": "6.5.10"
+  },
+  {
+    "versionLabel": "v5.x",
+    "version": "5.3.12",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v5.3.12",
+    "build": "https://pixijs.download/v5.3.12/pixi.min.js",
+    "docs": "https://pixijs.download/v5.3.12/docs/index.html",
+    "npm": "5.3.12"
+  },
+  {
+    "versionLabel": "v4.x",
+    "version": "4.8.9",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v4.8.9",
+    "build": "https://pixijs.download/v4.8.9/pixi.min.js",
+    "docs": "https://pixijs.download/v4.8.9/docs/index.html",
+    "npm": "4.8.9"
+  }
+]

pixi-versions.json

@@ -12,11 +12,11 @@
   },
   {
     "versionLabel": "v8.x",
-    "version": "8.0.0-rc.7",
-    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc.7",
-    "build": "https://pixijs.download/v8.0.0-rc.7/pixi.min.js",
-    "docs": "https://pixijs.download/v8.0.0-rc.7/docs/index.html",
-    "npm": "8.0.0-rc.7",
+    "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,
     "isCurrent": true

src/components/Playground/PixiPlayground/useSandpackConfiguration.ts

@@ -35,9 +35,7 @@ export const useFiles = (code: string, extraFiles?: Record<string, string>) =>
                                 },
                             ],
                         ],
-                        plugins: [
-                            '@babel/plugin-proposal-class-properties',
-                        ],
+                        plugins: ['@babel/plugin-proposal-class-properties'],
                     },
                     null,
                     2,

src/components/Tutorial/index.module.scss

@@ -22,6 +22,10 @@
             padding: 2.5rem;
             word-wrap: normal;
 
+            & > h1 {
+                padding-left: 0;
+            }
+
             .navigator {
                 position: relative;
                 margin-top: 0.6rem;
@@ -68,6 +72,7 @@
                     transform: translateY(-5%);
                     opacity: 0;
                     transition: all 0.2s ease-out;
+                    z-index: 2;
 
                     a {
                         color: var(--ifm-font-color-base);

src/components/TutorialGallery/TutorialCard/index.module.scss

@@ -0,0 +1,44 @@
+.tutorialCard {
+    background: var(--ifm-navbar-background-color);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+    border-radius: 1rem;
+    width: 45%;
+    max-width: 360px;
+    transition: all 0.1s ease-in-out;
+
+    div {
+        width: 100%;
+        height: 200px;
+        background-size: cover;
+        background-position: center;
+        border-radius: 1rem 1rem 0 0;
+    }
+
+    h2 {
+        padding: 1.5rem;
+        color: var(--ifm-color-primary);
+        padding-bottom: 0.5rem;
+        margin-bottom: 0;
+    }
+
+    p {
+        padding: 1rem 1.5rem;
+        padding-top: 0;
+        margin-bottom: 1rem;
+    }
+
+    &:hover {
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+        transform: scale(1.02);
+    }
+
+    &:active {
+        transition: all 0.025s ease-in-out;
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
+        transform: scale(0.98);
+    }
+
+    @media only screen and (max-width: 540px) {
+        width: 100%;
+    }
+}