);
}
-export default function Tutorial({ id, version }: { id: string; version: IVersion }): JSX.Element
+export default function Tutorial({ id, pixiVersion }: { id: string; pixiVersion: IVersion }): JSX.Element
{
+ const version = pixiVersion.version;
const [showEditor, setShowEditor] = useState(false);
const handleEditorToggle = (): void =>
{
setShowEditor(!showEditor);
};
- const entry = getTutorialEntry(id);
+ const entry = getTutorialEntry(version, id);
return (
@@ -87,7 +89,7 @@ export default function Tutorial({ id, version }: { id: string; version: IVersio
{showEditor ? '< To Instructions' : 'To Editor >'}
LOADING...}>
- {() => }
+ {() => }
);
diff --git a/src/examples/index.ts b/src/examples/index.ts
new file mode 100644
index 000000000..ca4f2e393
--- /dev/null
+++ b/src/examples/index.ts
@@ -0,0 +1,40 @@
+import type { OptionGroup } from '../components/Select';
+import v7x from './v7.3.2/index';
+import v8x from './v8.0.0-rc/index';
+
+export type ExampleDataEntry = {
+ name: string;
+ hide?: boolean;
+ usesWebWorkerLibrary?: boolean;
+};
+export type ExampleSourceEntry = {
+ source: string;
+ hide: boolean;
+ usesWebWorkerLibrary: boolean;
+};
+
+// json data structure
+export type ExamplesJsonType = Record;
+// sourcecode dictionary structure for below
+export type ExamplesSourceType = Record>;
+// normalized combination of the above
+export type CategoryDataType = Record;
+export type ExamplesDataType = Record;
+
+// TODO: Use await import to dynamically load versioned content on demand instead?
+const versions: Record = {
+ '7.3.2': v7x,
+ '8.0.0-rc': v8x,
+};
+
+export function getExampleEntry(version: string, pathString: string): ExampleSourceEntry | undefined
+{
+ const [directory, example] = pathString.split('.');
+
+ return versions[version]?.entries[directory]?.[example];
+}
+
+export function getExampleOptions(version: string): OptionGroup[]
+{
+ return versions[version]?.options;
+}
diff --git a/src/examples/v7.3.2/index.ts b/src/examples/v7.3.2/index.ts
index 7588e51dc..e950e4884 100644
--- a/src/examples/v7.3.2/index.ts
+++ b/src/examples/v7.3.2/index.ts
@@ -83,30 +83,13 @@ import gradientResource from '!!raw-loader!./textures/gradientResource.js';
import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js';
import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js';
import textureRotate from '!!raw-loader!./textures/textureRotate.js';
-import type { Option, OptionGroup } from '@site/src/components/Select';
+import type { Option } from '@site/src/components/Select';
// Defines order of examples in documentation and playground dropdown, it's defined
// separately here so it can be used in runtime code and in the md generation script
import examplesData from './examplesData.json';
import { camelCaseToSentenceCase } from '@site/src/utils/utils';
-
-export type ExampleDataEntry = {
- name: string;
- hide?: boolean;
- usesWebWorkerLibrary?: boolean;
-};
-export type ExampleSourceEntry = {
- source: string;
- hide: boolean;
- usesWebWorkerLibrary: boolean;
-};
-// json data structure
-export type ExamplesJsonType = Record;
-// sourcecode dictionary structure for below
-export type ExamplesSourceType = Record>;
-// normalized combination of the above
-export type CategoryDataType = Record;
-export type ExamplesDataType = Record;
+import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..';
const examplesSource: ExamplesSourceType = {
basic: {
@@ -231,7 +214,7 @@ const normalizeExampleDataEntry = (categoryExample: ExampleDataEntry | string):
};
};
-const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType).reduce(
+const entries = Object.entries(examplesData as ExamplesJsonType).reduce(
(directoryAcc, [categoryKey, categoryExamples]) => ({
...directoryAcc,
[categoryKey]: categoryExamples.reduce((categoryAcc, categoryExampleOrString) =>
@@ -252,35 +235,27 @@ const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType).
{} as ExamplesDataType,
);
-export function getExampleEntry(pathString: string): ExampleSourceEntry | undefined
-{
- const [directory, example] = pathString.split('.');
-
- return normalizedExamplesData[directory]?.[example];
-}
-
-export function getExampleOptions(): OptionGroup[]
+const options = Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) =>
{
- return Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) =>
+ const options = folderEntries.reduce((acc, exampleDataEntry) =>
{
- const options = folderEntries.reduce((acc, exampleDataEntry) =>
+ const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry);
+
+ if (hide)
{
- const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry);
+ return acc;
+ }
- if (hide)
- {
- return acc;
- }
+ return acc.concat({
+ value: `${folderKey}.${exampleKey}`,
+ label: camelCaseToSentenceCase(exampleKey),
+ });
+ }, [] as Option[]);
- return acc.concat({
- value: `${folderKey}.${exampleKey}`,
- label: camelCaseToSentenceCase(exampleKey),
- });
- }, [] as Option[]);
+ return {
+ label: camelCaseToSentenceCase(folderKey),
+ options,
+ };
+});
- return {
- label: camelCaseToSentenceCase(folderKey),
- options,
- };
- });
-}
+export default { entries, options };
diff --git a/src/examples/v8.0.0-rc/index.ts b/src/examples/v8.0.0-rc/index.ts
index 7588e51dc..e950e4884 100644
--- a/src/examples/v8.0.0-rc/index.ts
+++ b/src/examples/v8.0.0-rc/index.ts
@@ -83,30 +83,13 @@ import gradientResource from '!!raw-loader!./textures/gradientResource.js';
import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js';
import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js';
import textureRotate from '!!raw-loader!./textures/textureRotate.js';
-import type { Option, OptionGroup } from '@site/src/components/Select';
+import type { Option } from '@site/src/components/Select';
// Defines order of examples in documentation and playground dropdown, it's defined
// separately here so it can be used in runtime code and in the md generation script
import examplesData from './examplesData.json';
import { camelCaseToSentenceCase } from '@site/src/utils/utils';
-
-export type ExampleDataEntry = {
- name: string;
- hide?: boolean;
- usesWebWorkerLibrary?: boolean;
-};
-export type ExampleSourceEntry = {
- source: string;
- hide: boolean;
- usesWebWorkerLibrary: boolean;
-};
-// json data structure
-export type ExamplesJsonType = Record;
-// sourcecode dictionary structure for below
-export type ExamplesSourceType = Record>;
-// normalized combination of the above
-export type CategoryDataType = Record;
-export type ExamplesDataType = Record;
+import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..';
const examplesSource: ExamplesSourceType = {
basic: {
@@ -231,7 +214,7 @@ const normalizeExampleDataEntry = (categoryExample: ExampleDataEntry | string):
};
};
-const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType).reduce(
+const entries = Object.entries(examplesData as ExamplesJsonType).reduce(
(directoryAcc, [categoryKey, categoryExamples]) => ({
...directoryAcc,
[categoryKey]: categoryExamples.reduce((categoryAcc, categoryExampleOrString) =>
@@ -252,35 +235,27 @@ const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType).
{} as ExamplesDataType,
);
-export function getExampleEntry(pathString: string): ExampleSourceEntry | undefined
-{
- const [directory, example] = pathString.split('.');
-
- return normalizedExamplesData[directory]?.[example];
-}
-
-export function getExampleOptions(): OptionGroup[]
+const options = Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) =>
{
- return Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) =>
+ const options = folderEntries.reduce((acc, exampleDataEntry) =>
{
- const options = folderEntries.reduce((acc, exampleDataEntry) =>
+ const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry);
+
+ if (hide)
{
- const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry);
+ return acc;
+ }
- if (hide)
- {
- return acc;
- }
+ return acc.concat({
+ value: `${folderKey}.${exampleKey}`,
+ label: camelCaseToSentenceCase(exampleKey),
+ });
+ }, [] as Option[]);
- return acc.concat({
- value: `${folderKey}.${exampleKey}`,
- label: camelCaseToSentenceCase(exampleKey),
- });
- }, [] as Option[]);
+ return {
+ label: camelCaseToSentenceCase(folderKey),
+ options,
+ };
+});
- return {
- label: camelCaseToSentenceCase(folderKey),
- options,
- };
- });
-}
+export default { entries, options };
diff --git a/src/tutorials/index.ts b/src/tutorials/index.ts
new file mode 100644
index 000000000..88dd5b4fe
--- /dev/null
+++ b/src/tutorials/index.ts
@@ -0,0 +1,26 @@
+import v7x from './v7.3.2/index';
+import v8x from './v8.0.0-rc/index';
+
+export type TutorialStep = {
+ header: string;
+ Content: string;
+ code: string;
+ completedCode?: string;
+};
+
+export type TutorialEntry = {
+ description: string;
+ thumbnail?: string;
+ steps: TutorialStep[];
+};
+
+// TODO: Use await import to dynamically load versioned content on demand instead?
+const versions: Record> = {
+ '7.3.2': v7x,
+ '8.0.0-rc': v8x,
+};
+
+export function getTutorialEntry(version: string, key: string)
+{
+ return versions[version]?.[key];
+}
diff --git a/src/tutorials/v7.3.2/index.ts b/src/tutorials/v7.3.2/index.ts
index 30959e667..78bf74949 100644
--- a/src/tutorials/v7.3.2/index.ts
+++ b/src/tutorials/v7.3.2/index.ts
@@ -1,26 +1,8 @@
import { gettingStartedTutorialSteps } from './gettingStarted';
-export type TutorialStep = {
- header: string;
- Content: string;
- code: string;
- completedCode?: string;
-};
-
-export type TutorialEntry = {
- description: string;
- thumbnail?: string;
- steps: TutorialStep[];
-};
-
-const tutorialsData: Record = {
+export default {
gettingStarted: {
description: 'Learn the basics of how to use PixiJS.',
steps: gettingStartedTutorialSteps,
},
};
-
-export function getTutorialEntry(key: string)
-{
- return tutorialsData[key];
-}
diff --git a/src/tutorials/v8.0.0-rc/index.ts b/src/tutorials/v8.0.0-rc/index.ts
index 30959e667..78bf74949 100644
--- a/src/tutorials/v8.0.0-rc/index.ts
+++ b/src/tutorials/v8.0.0-rc/index.ts
@@ -1,26 +1,8 @@
import { gettingStartedTutorialSteps } from './gettingStarted';
-export type TutorialStep = {
- header: string;
- Content: string;
- code: string;
- completedCode?: string;
-};
-
-export type TutorialEntry = {
- description: string;
- thumbnail?: string;
- steps: TutorialStep[];
-};
-
-const tutorialsData: Record = {
+export default {
gettingStarted: {
description: 'Learn the basics of how to use PixiJS.',
steps: gettingStartedTutorialSteps,
},
};
-
-export function getTutorialEntry(key: string)
-{
- return tutorialsData[key];
-}
diff --git a/versioned_docs/version-7.3.2/playground/index.md b/versioned_docs/version-7.3.2/playground/index.md
index 149bc48b7..66ab04f5f 100644
--- a/versioned_docs/version-7.3.2/playground/index.md
+++ b/versioned_docs/version-7.3.2/playground/index.md
@@ -8,4 +8,4 @@ custom_edit_url: null
import Playground from '@site/src/components/Playground/index';
import version from '../pixi-version.json';
-
\ No newline at end of file
+
\ No newline at end of file