scaffold pages

components/Layout.tsx

@@ -17,12 +17,12 @@ const Layout: React.FC<Props> = (props) => (
  <div className="flex h-screen overflow-hidden">
  <Navigation />
 
- <div className="w-full overflow-scroll">
- <div className="p-4">
+ <div className="w-full overflow-scroll relative">
+ <main className="p-4" style={{ minHeight: 'calc(100vh - 4rem)'}}>
  {props.children}
+ </main>
 
- <Footer />
- </div>
+ <Footer />
  </div>
  </div>
  </>

pages/games/index.tsx

@@ -0,0 +1,15 @@
+import Layout from "../../components/Layout"
+
+interface Props { }
+
+const Games: React.FC<Props> = (props) => {
+ return (
+ <Layout>
+ <div className="h-screen text-3xl flex justify-center items-center">
+ 🚧 🚧 🚧
+ </div>
+ </Layout>
+ );
+}
+
+export default Games;

pages/index.tsx

@@ -1,10 +1,6 @@
 import React from "react"
 import { GetStaticProps } from "next"
-import dynamic from "next/dynamic";
 import Layout from "../components/Layout"
-import Post, { PostProps } from "../components/Post"
-import prisma from "../lib/prisma";
-import SpotifyIframePlaylist from "../components/SpotifyIframePlaylist";
 import { Canvas } from "@react-three/fiber";
 import WireframePlanet from "../components/hero-scenes/WireframePlanet";
 
@@ -18,54 +14,29 @@ import WireframePlanet from "../components/hero-scenes/WireframePlanet";
 // );
 
 export const getStaticProps: GetStaticProps = async () => {
- const feed = await prisma.post.findMany({
- where: { published: true },
- include: {
- author: {
- select: { name: true },
- },
- },
- });
+ // todo: determine what data to fetch in home page
 
  return {
- props: { feed },
+ props: {},
  revalidate: 10
  }
 }
 
-type Props = {
- feed: PostProps[]
-}
+interface Props {}
 
-const Blog: React.FC<Props> = (props) => {
+const Index: React.FC<Props> = (props) => {
  return (
  <Layout>
- <main>
- <Canvas
- className="w-full aspect-video"
- camera={{
- position: [0, 0, -30]
- }}
- >
- <WireframePlanet />
- </Canvas>
-
- <div className="mt-6">
- <h2 className="underline mb-2">Recent Posts</h2>
- {props.feed.map((post, i) => (
- <Post key={i} post={post} />
- ))}
- </div>
-
- {/* <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/1bUUPhe0zP9FgrsqYjxbTp?theme=0" />
- <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/1cUbQxIOFcxeL5oUheu85i?theme=0" />
- <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/3xx5COLUZ7Xwvyfg8MF4Nb?theme=0" />
- <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/4LddzZkIk08J3IwqXladlJ?theme=0" />
- <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/1aQK4Hz4Xmz3Y4NEhz9ReT?theme=0" />
- <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/26ItkYptyl56YEIYQDQs7r?theme=0" /> */}
- </main>
+ <Canvas
+ className="w-full aspect-video"
+ camera={{
+ position: [0, 0, -30]
+ }}
+ >
+ <WireframePlanet />
+ </Canvas>
  </Layout>
  )
 }
 
-export default Blog
+export default Index;

pages/now-playing/index.tsx

@@ -0,0 +1,21 @@
+import Layout from "../../components/Layout"
+import SpotifyIframePlaylist from "../../components/SpotifyIframePlaylist";
+
+interface Props { }
+
+const NowPlaying: React.FC<Props> = (props) => {
+ return (
+ <Layout>
+ <div className="grid grid-cols-3 gap-4">
+ <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/1bUUPhe0zP9FgrsqYjxbTp?theme=0" />
+ <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/1cUbQxIOFcxeL5oUheu85i?theme=0" />
+ <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/3xx5COLUZ7Xwvyfg8MF4Nb?theme=0" />
+ <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/4LddzZkIk08J3IwqXladlJ?theme=0" />
+ <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/1aQK4Hz4Xmz3Y4NEhz9ReT?theme=0" />
+ <SpotifyIframePlaylist src="https://open.spotify.com/embed/playlist/26ItkYptyl56YEIYQDQs7r?theme=0" />
+ </div>
+ </Layout>
+ );
+}
+
+export default NowPlaying;

pages/photos/index.tsx

@@ -0,0 +1,15 @@
+import Layout from "../../components/Layout"
+
+interface Props { }
+
+const Photos: React.FC<Props> = (props) => {
+ return (
+ <Layout>
+ <div className="h-screen text-3xl flex justify-center items-center">
+ 🚧 🚧 🚧
+ </div>
+ </Layout>
+ );
+}
+
+export default Photos;

pages/visualizers/index.tsx

@@ -0,0 +1,15 @@
+import Layout from "../../components/Layout"
+
+interface Props { }
+
+const Visualizers: React.FC<Props> = (props) => {
+ return (
+ <Layout>
+ <div className="h-screen text-3xl flex justify-center items-center">
+ 🚧 🚧 🚧
+ </div>
+ </Layout>
+ );
+}
+
+export default Visualizers;

pages/writing/index.tsx

@@ -0,0 +1,38 @@
+import React from "react"
+import { GetStaticProps } from "next"
+import Layout from "../../components/Layout"
+import Post, { PostProps } from "../../components/Post"
+import prisma from "../../lib/prisma";
+
+export const getStaticProps: GetStaticProps = async () => {
+ const feed = await prisma.post.findMany({
+ where: { published: true },
+ include: {
+ author: {
+ select: { name: true },
+ },
+ },
+ });
+
+ return {
+ props: { feed },
+ revalidate: 10
+ }
+}
+
+type Props = {
+ feed: PostProps[]
+}
+
+const Blog: React.FC<Props> = (props) => {
+ return (
+ <Layout>
+ <h2 className="underline mb-2">Recent Posts</h2>
+ {props.feed.map((post, i) => (
+ <Post key={i} post={post} />
+ ))}
+ </Layout>
+ );
+}
+
+export default Blog