Pre-Release v8 Examples Update (WIP)

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} />

docusaurus.config.js

@@ -44,7 +44,7 @@ const config = {
                     routeBasePath: '/',
                     versions: {
                         '7.3.2': {
-                            label: 'v7.x (Latest)',
+                            label: 'v7.3.2',
                             path: '7.3.2',
                         },
 

pixi-versions.json

@@ -1,13 +1,13 @@
 [
   {
-    "versionLabel": "v7.x (Latest)",
+    "versionLabel": "v7.3.2",
     "version": "7.3.2",
     "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v7.3.2",
     "build": "https://pixijs.download/v7.3.2/pixi.min.js",
     "docs": "https://pixijs.download/v7.3.2/docs/index.html",
     "npm": "7.3.2",
     "prerelease": false,
-    "latest": true,
+    "latest": false,
     "isCurrent": false
   },
   {

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;

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

src/components/TutorialGallery/index.tsx

@@ -0,0 +1,18 @@
+import styles from './index.module.scss';
+import type { IVersion } from '../Playground/PixiPlayground/usePixiVersions';
+import { getTutorialCardsData } from '@site/src/tutorials';
+import TutorialCard from './TutorialCard';
+
+export default function TutorialGallery({ pixiVersion }: { pixiVersion: IVersion }): JSX.Element
+{
+    const version = pixiVersion.version;
+    const data = getTutorialCardsData(version);
+
+    return (
+        <div className={styles.tutorialGallery}>
+            {data.map((card, i) => (
+                <TutorialCard data={card} key={i} />
+            ))}
+        </div>
+    );
+}

src/tutorials/index.ts

@@ -15,6 +15,12 @@ export type TutorialEntry = {
     steps: TutorialStep[];
 };
 
+export type TutorialCardData = {
+    title: string;
+    description: string;
+    thumbnail?: string;
+};
+
 // TODO: Use await import to dynamically load versioned content on demand instead?
 const versions: Record<string, Record<string, TutorialEntry>> = {
     'v7.0.0': v7x,
@@ -41,3 +47,19 @@ export function getTutorialEntry(version: string, key: string)
 
     return bestVersion?.[key];
 }
+
+export function getTutorialCardsData(version: string)
+{
+    const bestVersion = getBestVersion(version);
+    const list: TutorialCardData[] = [];
+
+    for (const key in bestVersion)
+    {
+        const tutorial = bestVersion[key];
+        const { description, thumbnail } = tutorial;
+
+        list.push({ title: key, description, thumbnail });
+    }
+
+    return list;
+}

src/tutorials/v7.0.0/index.ts

@@ -3,6 +3,7 @@ import { gettingStartedTutorialSteps } from './gettingStarted';
 export default {
     gettingStarted: {
         description: 'Learn the basics of how to use PixiJS.',
+        thumbnail: 'thumb_getting_started.png',
         steps: gettingStartedTutorialSteps,
     },
 };

src/tutorials/v8.0.0/fishPond/index.ts

@@ -0,0 +1,48 @@
+import code1 from '!!raw-loader!./step1-code';
+import completedCode1 from '!!raw-loader!./step1-completed-code';
+import code2 from '!!raw-loader!./step2-code';
+import completedCode2 from '!!raw-loader!./step2-completed-code';
+import code3 from '!!raw-loader!./step3-code';
+import completedCode3 from '!!raw-loader!./step3-completed-code';
+import code4 from '!!raw-loader!./step4-code';
+import type { TutorialStep } from '../..';
+import content1 from './step1-content.md';
+import content2 from './step2-content.md';
+import content3 from './step3-content.md';
+import content4 from './step4-content.md';
+
+export const fishPondTutorialSteps: TutorialStep[] = [
+    {
+        header: 'Introduction',
+        Content: content1,
+        code: code1,
+        completedCode: completedCode1,
+    },
+    {
+        header: 'Adding Background',
+        Content: content2,
+        code: code2,
+        completedCode: completedCode2,
+    },
+    {
+        header: 'Adding Fishes',
+        Content: content3,
+        code: code3,
+        completedCode: completedCode3,
+    },
+    // {
+    //     header: 'Add Water Surface',
+    //     Content: content4,
+    //     code: code4,
+    // },
+    // {
+    //     header: 'Add Displacement Effect',
+    //     Content: content4,
+    //     code: code4,
+    // },
+    // {
+    //     header: 'You did it!',
+    //     Content: content4,
+    //     code: code4,
+    // },
+];

src/tutorials/v8.0.0/fishPond/step1-code.js

@@ -0,0 +1,21 @@
+import { Application, Assets } from 'pixi.js';
+
+// Create a PixiJS application.
+const app = new Application();
+
+// Asynchronous IIFE
+(async () =>
+{
+    await setup();
+    await preload();
+})();
+
+async function setup()
+{
+    /** -- INSERT CODE HERE -- */
+}
+
+async function preload()
+{
+    /** -- INSERT CODE HERE -- */
+}

src/tutorials/v8.0.0/fishPond/step1-completed-code.js

@@ -0,0 +1,38 @@
+import { Application, Assets } from 'pixi.js';
+
+// Create a PixiJS application.
+const app = new Application();
+
+// Asynchronous IIFE
+(async () =>
+{
+    await setup();
+    await preload();
+})();
+
+async function setup()
+{
+    // Intialize the application.
+    await app.init({ background: '#1099bb', resizeTo: window });
+
+    // Then adding the application's canvas to the DOM body.
+    document.body.appendChild(app.canvas);
+}
+
+async function preload()
+{
+    // Create an array of asset data to load.
+    const assets = [
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+    ];
+
+    // Load the assets defined above.
+    await Assets.load(assets);
+}

src/tutorials/v8.0.0/fishPond/step1-content.md

@@ -0,0 +1,44 @@
+# Let's make a pond!
+
+Welcome to the Fish Pond workshop!
+
+Please go through the tutorial steps at your own pace and challenge yourself using the editor on the right hand side. Here PixiJS has already been included as guided under the [Getting Started](/guides/basics/getting-started#loading-pixijs) section. Let's start off by creation a PixiJS application, initialize it, add its canvas to the DOM, and preload the required assets ahead of the subsequent steps.
+
+We will be using an asynchronous immediately invoked function expression ([IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE)), but you are free to switch to use promises instead.
+
+## Application Setup
+
+Let's create the application outside of the IIFE just so that it can be referenced across other functions declared outside. The initialization and appending the application's canvas will be done from within the `setup` function which is called inside the IIFE.
+
+```javascript
+async function setup()
+{
+    await app.init({ background: '#1099bb', resizeTo: window });
+    document.body.appendChild(app.canvas);
+}
+```
+
+## Preloading Assets
+
+After the application setup, we will then preload all the textures required for the rest of the tutorial. Here we also provide aliases so that they can be intuitively referred to later on. This will be done inside the `preload` function which is also called inside the IIFE after the setup.
+
+```javascript
+async function preload()
+{
+    const assets = [
+        { alias: 'background', src: 'https://pixijs.com/assets/tutorials/pond_background.jpg' },
+        { alias: 'fish1', src: 'https://pixijs.com/assets/tutorials/fish1.png' },
+        { alias: 'fish2', src: 'https://pixijs.com/assets/tutorials/fish2.png' },
+        { alias: 'fish3', src: 'https://pixijs.com/assets/tutorials/fish3.png' },
+        { alias: 'fish4', src: 'https://pixijs.com/assets/tutorials/fish4.png' },
+        { alias: 'fish5', src: 'https://pixijs.com/assets/tutorials/fish5.png' },
+        { alias: 'overlay', src: 'https://pixijs.com/assets/tutorials/wave_overlay.png' },
+        { alias: 'displacement', src: 'https://pixijs.com/assets/tutorials/displacemnet_map.png' },
+    ];
+    await Assets.load(assets);
+}
+```
+
+At this point, you should see the preview filled with an empty light blue background.
+
+When you are ready, proceed to the next exercise using the _Next >_ button below, or feel free to skip to any exercise using the drop-down menu on the top right hand corner of the card.