Completely converted to next 14 and added portfolio

.vscode/settings.json

@@ -3,7 +3,7 @@
  "editor.formatOnSaveMode": "file",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
- "source.organizeImports": true
+ "source.organizeImports": "explicit"
  },
  "files.exclude": {
  "**/.git": true,
@@ -13,5 +13,8 @@
  "**/.DS_Store": true,
  "**/Thumbs.db": true,
  "**/node_modules": true
- }
+ },
+ "typescript.tsdk": "node_modules/typescript/lib",
+ "typescript.enablePromptUseWorkspaceTsdk": true,
+ "eslint.enable": true
 }

pages/blog/[post].tsx → app/blog/[slug]/page.tsx

@@ -1,24 +1,73 @@
-import { GetStaticPaths, GetStaticProps, NextPage } from "next"
-import { MDXRemote } from "next-mdx-remote"
-import { serialize } from "next-mdx-remote/serialize"
+import { MDXRemote } from "next-mdx-remote/rsc"
 import Image from "next/image"
 import Link from "next/link"
-import rehypeHighlight from "rehype-highlight"
-import BlogPost, { Post } from "../../components/BlogPost"
-import Comments from "../../components/Comments"
-import Layout from "../../components/Layout"
-import Terminology from "../../components/learn/Terminology"
-import Spoiler from "../../components/Spoiler"
-import { sanity, sanityImage } from "../../lib/sanity"
+import BlogPost, { Post } from "../../../components/BlogPost"
+import Comments from "../../../components/Comments"
+import Spoiler from "../../../components/Spoiler"
+import Terminology from "../../../components/learn/Terminology"
+import { sanity, sanityImage } from "../../../lib/sanity"
 
-type PostPageProps = {
- post: Post
+type Props = {
+ params: { slug: string }
+ searchParams: { [key: string]: string | string[] | undefined }
 }
 
-const PostPage: NextPage<PostPageProps> = ({ post }) => {
+export async function generateMetadata({ params }: Props) {
+ const query = `*[_type == "post" && "${params.slug}" match slug.current][0].title`
+
+ let title: string = await sanity.fetch(query)
+ return { title }
+}
+
+export async function generateStaticParams() {
+ const query = `*[_type == "post"].slug.current`
+ const slugs: string[] = await sanity.fetch(query)
+ return slugs.map((slug) => ({
+ params: {
+ post: slug
+ }
+ }))
+}
+
+async function getData(slug: string) {
+ const query = `
+ *[_type == "post" && "${slug}" match slug.current] {
+ title, description,
+ "imageUrl": image.asset->url,
+ author->{
+ name, description,
+ "imageUrl": image.asset->url
+ }
+ ,
+ tags, _updatedAt, content,
+ "slug": slug.current,
+ "related": related[]->{
+ title, description,
+ "imageUrl": image.asset->url,
+ author->{
+ name, description,
+ "imageUrl": image.asset->url
+ }
+ ,
+ tags, _updatedAt,
+ "slug": slug.current
+ }
+ }[0]`
+
+ let post: Post = await sanity.fetch(query)
+ // const mdxSource = await serialize(post.content, {
+ // mdxOptions: {
+ // rehypePlugins: [rehypeHighlight]
+ // }
+ // })
+ return { post }
+}
+
+export default async function PostPage({ params }: Props) {
+ const { post } = await getData(params.slug)
  const relatedPosts = post.related
  return (
- <Layout title={post.title} className="px-8 md:px-24 lg:px-32 pb-3">
+ <div className="px-8 md:px-24 lg:px-32 pb-3">
  <div className="flex flex-col lg:px-24">
  <div className="mt-12 md:mt-24">
  {post.tags.map((tag) => (
@@ -65,12 +114,17 @@ const PostPage: NextPage<PostPageProps> = ({ post }) => {
  </div>
  <div className="markup whitespace-pre-wrap break-words">
  <MDXRemote
- compiledSource={post.content}
+ source={post.content}
  components={{
  Spoiler,
  Link,
  Terminology
  }}
+ options={{
+ mdxOptions: {
+ rehypePlugins: []
+ }
+ }}
  />
  </div>
  </div>
@@ -92,57 +146,6 @@ const PostPage: NextPage<PostPageProps> = ({ post }) => {
  <div className="py-5">
  <Comments postId={post.slug} />
  </div>
- </Layout>
+ </div>
  )
 }
-
-export const getStaticPaths: GetStaticPaths = async () => {
- const query = `*[_type == "post"].slug.current`
- const slugs: string[] = await sanity.fetch(query)
- return {
- paths: slugs.map((slug) => ({
- params: {
- post: slug
- }
- })),
- fallback: "blocking"
- }
-}
-
-export const getStaticProps: GetStaticProps = async (ctx) => {
- const postSlug = ctx.params.post as string
- const query = `
- *[_type == "post" && "${postSlug}" match slug.current] {
- title, description,
- "imageUrl": image.asset->url,
- author->{
- name, description,
- "imageUrl": image.asset->url
- }
- ,
- tags, _updatedAt, content,
- "slug": slug.current,
- "related": related[]->{
- title, description,
- "imageUrl": image.asset->url,
- author->{
- name, description,
- "imageUrl": image.asset->url
- }
- ,
- tags, _updatedAt,
- "slug": slug.current
- }
- }[0]`
-
- let post = await sanity.fetch(query)
- const { compiledSource } = await serialize(post.content, {
- mdxOptions: {
- rehypePlugins: [rehypeHighlight]
- }
- })
- post.content = compiledSource
- return { props: { post }, revalidate: 300 }
-}
-
-export default PostPage

pages/blog/index.tsx → app/blog/page.tsx

@@ -1,6 +1,4 @@
-import { GetStaticProps, NextPage } from "next"
 import BlogPost, { Post } from "../../components/BlogPost"
-import Layout from "../../components/Layout"
 import { sanity } from "../../lib/sanity"
 
 const groupList = <T,>(list: T[], size: number) => {
@@ -12,14 +10,29 @@ const groupList = <T,>(list: T[], size: number) => {
  return lists
 }
 
-type BlogIndexProps = {
- posts: Post[]
+async function getData() {
+ const query = `
+ *[_type == "post"] | order(_updatedAt desc) {
+ title, description,
+ "imageUrl": image.asset->url,
+ author->{
+ name, description,
+ "imageUrl": image.asset->url
+ }
+ ,
+ tags, _updatedAt,
+ "slug": slug.current
+ }`
+ const posts: Post[] = await sanity.fetch(query)
+ return posts
 }
 
-const BlogIndex: NextPage<BlogIndexProps> = ({ posts }) => {
+export default async function BlogIndex() {
+ const posts = await getData()
  const postGroups = groupList(posts, 6)
+
  return (
- <Layout title="Blog" className="px-8 md:px-24 lg:px-32 pb-3">
+ <div className="px-8 md:px-24 lg:px-32 pb-3">
  {postGroups.map((group, index) => (
  <div key={index}>
  <div className="flex flex-col lg:flex-row">
@@ -37,25 +50,6 @@ const BlogIndex: NextPage<BlogIndexProps> = ({ posts }) => {
  </div>
  </div>
  ))}
- </Layout>
+ </div>
  )
 }
-
-export const getStaticProps: GetStaticProps = async () => {
- const query = `
- *[_type == "post"] | order(_updatedAt desc) {
- title, description,
- "imageUrl": image.asset->url,
- author->{
- name, description,
- "imageUrl": image.asset->url
- }
- ,
- tags, _updatedAt,
- "slug": slug.current
- }`
- const posts: Post[] = await sanity.fetch(query)
- return { props: { posts }, revalidate: 300 }
-}
-
-export default BlogIndex

app/layout.tsx

@@ -0,0 +1,31 @@
+import { Metadata, Viewport } from "next"
+import { ReactNode } from "react"
+import Footer from "../components/Footer"
+import Navbar from "../components/Navbar"
+import favicon from "../public/img/icon.png"
+import "../styles/global.scss"
+
+export const metadata: Metadata = {
+ title: "TKDKid1000",
+ description: "Web developer, backend developer, filmmaker, student, photographer.",
+ icons: favicon.src
+}
+
+export const viewport: Viewport = {
+ width: "device-width",
+ initialScale: 1
+}
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+ return (
+ <html lang="en">
+ <body className="bg-gray-200 dark:bg-zinc-900">
+ <Navbar />
+ <main>
+ {children}
+ <Footer />
+ </main>
+ </body>
+ </html>
+ )
+}

app/page.tsx

@@ -0,0 +1,82 @@
+import dynamic from "next/dynamic"
+import BlogPost, { Post } from "../components/BlogPost"
+import FadeIn from "../components/FadeIn"
+import Homepage from "../components/Homepage"
+import { sanity } from "../lib/sanity"
+import styles from "../styles/space.module.scss"
+
+const OuterSpace = dynamic(() => import("../components/OuterSpace"))
+const RecentActivity = dynamic(() => import("../components/RecentActivity"))
+
+async function getData() {
+ const query = `
+ *[_type == "post" && !(_id in path("drafts.**"))] | order(_updatedAt desc) {
+ title, description,
+ "imageUrl": image.asset->url,
+ author->{
+ name, description,
+ "imageUrl": image.asset->url
+ }
+ ,
+ tags, _updatedAt,
+ "slug": slug.current
+ }[0..6]`
+ const posts: Post[] = await sanity.fetch(query)
+ return posts
+}
+
+export default async function Home() {
+ const posts = await getData()
+ return (
+ <div>
+ <div className={styles.spaceBackground}>
+ <OuterSpace hiddenThreshold={500} />
+ </div>
+ <Homepage />
+ <div className="flex flex-col lg:flex-row px-6 xl:px-32 pb-3">
+ <div className="flex flex-col dark:text-white lg:w-7/12">
+ <div>
+ <h1 className="text-4xl font-bold mb-2">Hewo!</h1>
+ <p>
+ My name is TKDKid1000. Well, that&apos;s just an alias, but I go by that
+ online.
+ </p>
+ <br />
+ <p>
+ I wouldn&apos;t call myself a professional, but I&apos;m no ameteur
+ developer.
+ </p>
+ <br />
+ <p>
+ I&apos;m trained mostly on frontend web development. I primarily use
+ React for ui development, but have also dabbled in Vue and Svelte.
+ </p>
+ <br />
+ <p>
+ My other skills and hobbies include solo filmmaking, and backpacking. I
+ also enjoy distance running.
+ </p>
+ </div>
+ <div className="flex items-center py-5">
+ <div className="flex-grow border-t border-gray-400"></div>
+ </div>
+ </div>
+ <div className="flex flex-col lg:w-5/12">
+ {posts.slice(Math.max(posts.length - 3, 1)).map((p) => (
+ <FadeIn key={p.slug}>
+ <BlogPost post={p} size={"sm"} />
+ </FadeIn>
+ ))}
+ </div>
+ </div>
+ <div className="flex flex-col sm:flex-row px-8 pb-3">
+ {posts.slice(0, 2).map((p, i) => (
+ <FadeIn key={p.slug} delay={i * 100}>
+ <BlogPost post={p} size={"md"} />
+ </FadeIn>
+ ))}
+ </div>
+ <RecentActivity username="TKDKid1000" />
+ </div>
+ )
+}