Feat: v8 tutorials update (#62)

* 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 * Chore: Create v7.x Snapshot + Make Working Docs the Pre-Release v8 * Versions page fixes * Tweaked Sandpack Dependencies Config * Hotfix: Restructure Source Examples and Tutorial * Type hotfix * Pre-Release v8 Examples Update * Added back parcel-bundler for all pixi versions * More examples updated * More examples update * Updated/Added/Removed more examples * Reverted conditioned babel core dev dependency * Pre-update Shader examples * Revert Ticker.shared back to app.ticker * Lint fix * Chore: Upgrade Working Docs to use PixiJS v8.0.0-rc.1 * Remove v8.0.0-rc (old) content * Simplify source versioning for examples and tutorials * Bump up to v8.0.0-rc.2 * Type fix * Add ghtoken ignore * Pre-Release v8 Examples Update (WIP) * Update Fish Pond step4 * Revert Pixi Version Change * Add remaining Fish Pond tutorial steps * Fish Pond Tutorial Adjustments * Fix Versioned Links * Upgrade to RC4 * 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 * Choo Choo Train Tutorial (WIP) * 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 * Updated Mesh and Shaders Section * Update Choo Choo Train Tutorial * Remove Nested Boundary with Projection Example * Remove 7.3.2 * Update generate example docs script to fix sidebar names * Add SpineBoy Adventure tutorial structure * Add Choo Choo Train tutorial thumbnail * Update the remain choo choo train tutorial steps * Add ability to add extra packages to the playground * Split out Triangle example into multiple files * Update examples config to allow multiple files * Adapt syntax highlighting on tab switches * Extract multi-file handling into a useCodeSource function * Split long examples into multiple files * Use multi-files on Fish Pond tutorial * Allow active file override with '$' * Use multi-file on Choo Choo Train tutorial * Editor tutorial code change fix * WIP SpineBoy tutorial * 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 * Fix texture url * Fix Fish Pond tutorial codes * Lint Fix * SpineBoy WIP * Remove ShaderToy Filter Render Texture Example * Update Instanced Geometry + Multipass Mesh Codes * Complete SpineBoy Adventure tutorial * Bump up to RC6 * Uncomment in instanced geometry * Fix uniform float type * Update SpineBoy Adventure tutorial assets' path * Add SpineBoy Adventure thumbnail * Revert spine assets source * fix up the custom shaders for gl * Upgrade to RC7 * Updated v7.x to latest * add more examples for v8 (#71) * undo change * remove file --------- Co-authored-by: Baz Utsahajit <[email protected]> Co-authored-by: Mat Groves <[email protected]> Co-authored-by: Zyie <[email protected]>
pixijs · Feb 22, 2024 · 96fd771 · 96fd771
1 parent 37e1b95
commit 96fd771
Show file tree

Hide file tree

Showing 128 changed files with 5,309 additions and 122 deletions.
diff --git a/docs/tutorials/index.md b/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} />
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Playground/PixiPlayground/useSandpackConfiguration.ts b/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,

diff --git a/src/components/Tutorial/index.module.scss b/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);

diff --git a/src/components/TutorialGallery/TutorialCard/index.module.scss b/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%;
+    }
+}
diff --git a/src/components/TutorialGallery/TutorialCard/index.tsx b/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()}`);
+}
diff --git a/src/components/TutorialGallery/index.module.scss b/src/components/TutorialGallery/index.module.scss
@@ -0,0 +1,6 @@
+.tutorialGallery {
+    margin-top: 2.5rem;
+    display: flex;
+    gap: 2rem;
+    flex-wrap: wrap;
+}
diff --git a/src/components/TutorialGallery/index.tsx b/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>
+    );
+}
diff --git a/src/tutorials/index.ts b/src/tutorials/index.ts
@@ -5,8 +5,9 @@ import v8x from './v8.0.0/index';
 export type TutorialStep = {
     header: string;
     Content: string;
-    code: string;
-    completedCode?: string;
+    code: string | Record<string, string>;
+    completedCode?: string | Record<string, string>;
+    activeFile?: string;
 };
 
 export type TutorialEntry = {
@@ -16,6 +17,12 @@ export type TutorialEntry = {
     extraPackages?: Record<string, string>;
 };
 
+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,
@@ -42,3 +49,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;
+}
diff --git a/src/tutorials/v7.0.0/gettingStarted/step2-content.md b/src/tutorials/v7.0.0/gettingStarted/step2-content.md
@@ -6,20 +6,20 @@ 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
 const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png')
 ```
 
 Then 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(bunny)
 ```
 
 Now let's set the Sprite's anchor and position it so that it's bang on at the center.
 
-```JavaScript
+```javascript
 // center the sprite's anchor point
 bunny.anchor.set(0.5)
 

diff --git a/src/tutorials/v7.0.0/index.ts b/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,
     },
 };
-Original file line number
+Diff line change
@@ Expand Up @@
                                     },
                                 ],
                             ],
-                            plugins: [
-                                '@babel/plugin-proposal-class-properties',
-                            ],
+                            plugins: ['@babel/plugin-proposal-class-properties'],
                         },
                         null,
 ,
@@ Expand Down @@