Merge branch 'migration-guide' into chore/v8-guides

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"
+  }
+]

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%;
+    }
+}

src/components/TutorialGallery/TutorialCard/index.tsx

@@ -0,0 +1,31 @@
+import { useHistory } from '@docusaurus/router';
+import styles from './index.module.scss';
+import type { TutorialCardData } from '@site/src/tutorials';
+
+export default function TutorialCard({ data }: { data: TutorialCardData }): JSX.Element
+{
+    const history = useHistory();
+    const title = camelCaseToSentenceCase(data.title);
+    const thumb = `/assets/tutorials/thumbnails/${data.thumbnail ?? 'thumb_default.png'}`;
+    const url = `tutorials/${camelCaseToSnakeCase(data.title)}`;
+
+    return (
+        <div className={styles.tutorialCard} onClick={() => history.push(url)}>
+            <div style={{ backgroundImage: `url(${thumb})` }} />
+            <h2>{title}</h2>
+            <p>{data.description}</p>
+        </div>
+    );
+}
+
+function camelCaseToSentenceCase(str: string)
+{
+    const tmp = str.replace(/([A-Z])/g, ' $1');
+
+    return tmp.charAt(0).toUpperCase() + tmp.slice(1);
+}
+
+function camelCaseToSnakeCase(str: string)
+{
+    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}

src/components/TutorialGallery/index.module.scss

@@ -0,0 +1,6 @@
+.tutorialGallery {
+    margin-top: 2.5rem;
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+}