use browse list as homepage

move the links that were on the homepage into a footer
compute-toys · Dec 9, 2023 · a4fa878 · a4fa878
1 parent de44ea9
commit a4fa878
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 225 deletions.
diff --git a/components/banner.tsx b/components/banner.tsx
@@ -0,0 +1,28 @@
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Typography from '@mui/material/Typography';
+import Logo from 'components/global/logo';
+import { theme } from 'theme/theme';
+
+export default function Banner() {
+    return (
+        <Alert variant={'outlined'} severity="info">
+            <Typography variant={'subtitle1'} color={theme.palette.neutral.contrastText}>
+                <AlertTitle>
+                    <Logo /> is an experimental editor for{' '}
+                    <a href="https://developer.chrome.com/articles/gpu-compute/">
+                        WebGPU compute shaders
+                    </a>
+                    .
+                </AlertTitle>
+                At this time, only <a href={'https://www.google.com/chrome/'}>Chrome</a> (
+                <a href="https://developer.chrome.com/blog/webgpu-release/">v113+</a>) is supported,
+                as{' '}
+                <a href="https://github.com/gpuweb/gpuweb/wiki/Implementation-Status">
+                    WebGPU is not yet fully supported by other browsers
+                </a>
+                .
+            </Typography>
+        </Alert>
+    );
+}
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -0,0 +1,24 @@
+import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Link from 'next/link';
+
+export default function Footer() {
+    return (
+        <Container maxWidth={false} sx={{ py: 3 }}>
+            <Grid container spacing={4} justifyContent="center">
+                <Grid item>
+                    <Link href="https://discord.gg/pNzH6gFQ2T">
+                        <FontAwesomeIcon icon={faDiscord} /> Join us on Discord
+                    </Link>
+                </Grid>
+                <Grid item>
+                    <Link href="https://github.com/compute-toys">
+                        <FontAwesomeIcon icon={faGithub} /> Code on GitHub
+                    </Link>
+                </Grid>
+            </Grid>
+        </Container>
+    );
+}
diff --git a/next.config.js b/next.config.js
@@ -31,6 +31,14 @@ const nextConfig = {
             }
         ];
     },
+    async rewrites() {
+        return [
+            {
+                source: '/',
+                destination: '/list/1'
+            }
+        ];
+    },
     webpack(config, { isServer, dev }) {
         config.experiments = {
             syncWebAssembly: true,

diff --git a/package.json b/package.json
@@ -16,6 +16,10 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/lobster": "^4.5.8",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.4.5",
     "@mui/icons-material": "^5.14.14",
     "@mui/lab": "^5.0.0-alpha.149",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,11 +1,12 @@
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
+import Footer from 'components/footer';
+import FavIconHead from 'components/global/faviconhead';
+import LoginModal from 'components/global/loginmodal';
 import { ShadowCanvas } from 'components/global/shadowcanvas';
 import { AuthProvider } from 'lib/db/authcontext';
 import type { AppProps } from 'next/app';
 import { theme } from 'theme/theme';
-import FavIconHead from '../components/global/faviconhead';
-import LoginModal from '../components/global/loginmodal';
 
 export default function App({ Component, pageProps }: AppProps) {
     return (
@@ -16,6 +17,7 @@ export default function App({ Component, pageProps }: AppProps) {
                 <CssBaseline />
                 <LoginModal />
                 <Component {...pageProps} />
+                <Footer />
             </ThemeProvider>
         </AuthProvider>
     );

diff --git a/pages/index.tsx b/pages/index.tsx
diff --git a/pages/list/[page].tsx b/pages/list/[page].tsx
@@ -1,8 +1,10 @@
 import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
 import ImageListItem, { imageListItemClasses } from '@mui/material/ImageListItem';
 import ImageListItemBar from '@mui/material/ImageListItemBar';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
+import Banner from 'components/banner';
 import Avatar from 'components/global/avatar';
 import { supabase, SUPABASE_SHADERTHUMB_BUCKET_NAME } from 'lib/db/supabaseclient';
 import { getFullyQualifiedSupabaseBucketURL } from 'lib/util/urlutils';
@@ -176,7 +178,9 @@ export default function ShaderList(props) {
                     width: '100%'
                 }}
             >
-                <div style={{ display: 'flex', justifyContent: 'center' }}>
+                <Banner />
+                <ShaderPicker page={props.page} shaders={props.shaders} />
+                <Container sx={{ display: 'flex', justifyContent: 'center', py: 3 }}>
                     <Pagination
                         count={props.numPages}
                         page={props.page}
@@ -189,8 +193,7 @@ export default function ShaderList(props) {
                             />
                         )}
                     />
-                </div>
-                <ShaderPicker page={props.page} shaders={props.shaders} />
+                </Container>
             </Box>
         </Fragment>
     );

diff --git a/yarn.lock b/yarn.lock
@@ -285,6 +285,39 @@
   resolved "https://registry.yarnpkg.com/@fontsource/lobster/-/lobster-4.5.11.tgz#f2d9f3583cd6c249d1b31efc059cb0d0eebc3a7f"
   integrity sha512-763GTn/QS42WI8LSZcmrLITvCzs8vHfTQhbltPQ8NWGYRJV9L+C8HIUm7qqL1R8+tyxkmruKlHDqdlpT+dPFXQ==
 
+"@fortawesome/[email protected]":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz#fdb1ec4952b689f5f7aa0bffe46180bb35490032"
+  integrity sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==
+
+"@fortawesome/fontawesome-svg-core@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz#9d56d46bddad78a7ebb2043a97957039fcebcf0a"
+  integrity sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.1"
+
+"@fortawesome/free-brands-svg-icons@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.1.tgz#e948cc02404277cb8ad40fe3573ca75f2830e876"
+  integrity sha512-093l7DAkx0aEtBq66Sf19MgoZewv1zeY9/4C7vSKPO4qMwEsW/2VYTUTpBtLwfb9T2R73tXaRDPmE4UqLCYHfg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.1"
+
+"@fortawesome/free-solid-svg-icons@^6.5.1":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz#737b8d787debe88b400ab7528f47be333031274a"
+  integrity sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.1"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"