From ebbb389c02024abfe72bdec65c5611a5d71e1db0 Mon Sep 17 00:00:00 2001 From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com> Date: Tue, 27 Feb 2024 16:36:42 -0800 Subject: [PATCH 01/12] Encapsulated sample page link logic into its own component, which will be necessary to prevent duplication of the sample initialization code for each sub category of samples --- src/components/SampleLink.tsx | 44 +++++++++++++++++++++++++++++++++++ src/pages/_app.tsx | 29 +++++++---------------- src/pages/samples/[slug].tsx | 20 ++++++++++------ 3 files changed, 65 insertions(+), 28 deletions(-) create mode 100644 src/components/SampleLink.tsx diff --git a/src/components/SampleLink.tsx b/src/components/SampleLink.tsx new file mode 100644 index 00000000..296c3437 --- /dev/null +++ b/src/components/SampleLink.tsx @@ -0,0 +1,44 @@ +import { NextRouter } from 'next/router'; +import styles from '../pages/MainLayout.module.css'; +import Link from 'next/link'; + +type PageType = { + [key: string]: React.ComponentType & { render: { preload: () => void } }; +}; + +type PageComponentType = { + [key: string]: React.ComponentType; +}; + +interface SampleLinkProps { + router: NextRouter; + slug: string; + pages: PageComponentType; + onClick: () => void; +} + +export const SampleLink = ({ + router, + slug, + pages, + onClick, +}: SampleLinkProps) => { + const className = + router.pathname === `/samples/[slug]` && router.query['slug'] === slug + ? styles.selected + : undefined; + + return ( +
  • { + (pages as PageType)[slug].render.preload(); + }} + > + onClick()}> + {slug} + +
    • + ); +}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index d01f075c..a477d893 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -8,6 +8,7 @@ import './styles.css'; import styles from './MainLayout.module.css'; import { pages } from './samples/[slug]'; +import { SampleLink } from '../components/SampleLink'; const title = 'WebGPU Samples'; @@ -68,28 +69,14 @@ const MainLayout: React.FunctionComponent = ({
    diff --git a/src/pages/samples/[slug].tsx b/src/pages/samples/[slug].tsx index 079d501d..702a7297 100644 --- a/src/pages/samples/[slug].tsx +++ b/src/pages/samples/[slug].tsx @@ -13,12 +13,24 @@ type PageComponentType = { [key: string]: React.ComponentType; }; +export const webPlatformPages: PageComponentType = { + resizeCanvas: dynamic(() => import('../../sample/resizeCanvas/main')), + videoUploading: dynamic(() => import('../../sample/videoUploading/main')), + videoUploadingWebCodecs: dynamic( + () => import('../../sample/videoUploadingWebCodecs/main') + ), + worker: dynamic(() => import('../../sample/worker/main')), +}; + +export const benchmarkPages: PageComponentType = { + animometer: dynamic(() => import('../../sample/animometer/main')), +}; + export const pages: PageComponentType = { helloTriangle: dynamic(() => import('../../sample/helloTriangle/main')), helloTriangleMSAA: dynamic( () => import('../../sample/helloTriangleMSAA/main') ), - resizeCanvas: dynamic(() => import('../../sample/resizeCanvas/main')), rotatingCube: dynamic(() => import('../../sample/rotatingCube/main')), twoCubes: dynamic(() => import('../../sample/twoCubes/main')), texturedCube: dynamic(() => import('../../sample/texturedCube/main')), @@ -27,11 +39,6 @@ export const pages: PageComponentType = { cameras: dynamic(() => import('../../sample/cameras/main')), cubemap: dynamic(() => import('../../sample/cubemap/main')), computeBoids: dynamic(() => import('../../sample/computeBoids/main')), - animometer: dynamic(() => import('../../sample/animometer/main')), - videoUploading: dynamic(() => import('../../sample/videoUploading/main')), - videoUploadingWebCodecs: dynamic( - () => import('../../sample/videoUploadingWebCodecs/main') - ), samplerParameters: dynamic( () => import('../../sample/samplerParameters/main') ), @@ -45,7 +52,6 @@ export const pages: PageComponentType = { cornell: dynamic(() => import('../../sample/cornell/main')), gameOfLife: dynamic(() => import('../../sample/gameOfLife/main')), renderBundles: dynamic(() => import('../../sample/renderBundles/main')), - worker: dynamic(() => import('../../sample/worker/main')), 'A-buffer': dynamic(() => import('../../sample/a-buffer/main')), bitonicSort: dynamic(() => import('../../sample/bitonicSort/main')), normalMap: dynamic(() => import('../../sample/normalMap/main')), From 73f26d7039ce8e1c30e41486dc0e82cc21e1c640 Mon Sep 17 00:00:00 2001 From: cmhhelgeson <62450112+cmhhelgeson@users.noreply.github.com> Date: Tue, 27 Feb 2024 17:20:21 -0800 Subject: [PATCH 02/12] Test --- src/pages/MainLayout.module.css | 5 +++++ src/pages/_app.tsx | 40 ++++++++++++++++++++------------- src/pages/samples/[slug].tsx | 30 ++++++++++++++++++++++--- 3 files changed, 57 insertions(+), 18 deletions(-) diff --git a/src/pages/MainLayout.module.css b/src/pages/MainLayout.module.css index c60673fb..14d7135c 100644 --- a/src/pages/MainLayout.module.css +++ b/src/pages/MainLayout.module.css @@ -71,6 +71,11 @@ max-height: 0px; } + .pageCategoryHeader { + color: rgb(5, 74, 111); + margin-bottom: 10px; + } + .panel[data-expanded='false'] .panelContents { max-height: 0vh; } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index a477d893..c1194430 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -7,7 +7,7 @@ import { useMemo, memo, useState } from 'react'; import './styles.css'; import styles from './MainLayout.module.css'; -import { pages } from './samples/[slug]'; +import { pageCategories, pages } from './samples/[slug]'; import { SampleLink } from '../components/SampleLink'; const title = 'WebGPU Samples'; @@ -21,7 +21,7 @@ const MainLayout: React.FunctionComponent = ({ pageProps, }) => { const router = useRouter(); - const samplesNames = Object.keys(pages); + //const samplesNames = Object.keys(pages); const [listExpanded, setListExpanded] = useState(false); const ComponentMemo = useMemo(() => { @@ -67,19 +67,29 @@ const MainLayout: React.FunctionComponent = ({ Github
    -
      - {samplesNames.map((slug) => { - return ( - setListExpanded(false)} - /> - ); - })} -
    + {pageCategories.map((category) => { + return ( +
      +

      + {category.title} +

      + {category.sampleNames.map((slug) => { + return ( + setListExpanded(false)} + /> + ); + })} +
    + ); + })}

    Other Pages