add question section

app/nav.tsx

@@ -1,22 +1,25 @@
-"use client"
-import { motion } from "framer-motion"
-import Link from "next/link"
-import { FaTwitter } from "react-icons/fa"
+"use client";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { FaTwitter } from "react-icons/fa";
 
 interface NavProps {
-  fixed?: boolean
-  className?: string
-  nameClassName?: string
-  linksClassName?: string
+  fixed?: boolean;
+  className?: string;
+  nameClassName?: string;
+  linksClassName?: string;
 }
 
-export default function Nav({ fixed, className, nameClassName, linksClassName }: NavProps) {
+export default function Nav(
+  { fixed, className, nameClassName, linksClassName }: NavProps,
+) {
   const pages = [
     ["philosophy", "/philosophy"],
     ["projects", "/projects"],
+    ["questions", "/questions"],
     // ["writings", "./on"],
     // ["reading list", "./"],
-  ]
+  ];
   return (
     <motion.nav
       className={`${
@@ -37,7 +40,9 @@ export default function Nav({ fixed, className, nameClassName, linksClassName }:
         Joshua Heiland
       </Link>
       <div className="w-7/12 flex display">
-        <div className={`w-full flex items-center space-x-10 pl-0 -ml-5 tracking-wide text-md `}>
+        <div
+          className={`w-full flex items-center space-x-10 pl-0 -ml-5 tracking-wide text-md `}
+        >
           {pages.map(([name, url]) => (
             <Link
               key={name}
@@ -62,5 +67,5 @@ export default function Nav({ fixed, className, nameClassName, linksClassName }:
         </div>
       </div>
     </motion.nav>
-  )
+  );
 }

app/philosophy/page.tsx

@@ -1,11 +1,7 @@
 import Nav from "../nav";
-import Event from "./event";
-// import { readings } from "../readings";
 import { fetchGitMdFile } from "@/lib/getWritings";
 import { Quote } from "./Quote";
 import { parseMarkdown } from "@/lib/mdTools";
-import { Reading } from "./Reading";
-import { AnimatePresence } from "framer-motion";
 import { Readings } from "./Readings";
 
 async function Philosophy() {
@@ -45,7 +41,8 @@ async function Philosophy() {
             <Readings readings={readings} />
           </div>
           {/* Nav cover */}
-          <div className="fixed bottom-0 w-full h-[110px] bg-white/30 border-t border-t-gray-300 md:border-0"></div>
+          <div className="fixed bottom-0 w-full h-[110px] bg-white/30 border-t border-t-gray-300 md:border-0">
+          </div>
         </div>
       </div>
       <Nav

app/questions/[slug]/page.tsx

@@ -0,0 +1,100 @@
+import Nav from "@/app/nav";
+import { ReadingTime } from "@/components/ReadingTime/ReadingTime";
+import { SideContent } from "@/components/SideContent";
+import { getQuestion } from "@/lib/getWritings";
+import { revalidateTag } from "next/cache";
+import Link from "next/link";
+import "./question.css";
+
+type QuestionPageProps = {
+  params: { slug: string };
+};
+
+export default async function QuestionPage({ params }: QuestionPageProps) {
+  const { slug } = params;
+  const {
+    question,
+    url,
+    elaboration,
+    position,
+    content,
+    createdAt,
+    lastUpdatedAt,
+  } = await getQuestion(
+    slug,
+  );
+  // revalidateTag(slug);
+
+  return (
+    <main
+      key="questions"
+      className="min-h-[100dvh] w-full flex justify-between"
+    >
+      <div className="h-full w-full flex flex-col md:flex-row justify-end">
+        <SideContent className="bg-white">
+          <p className="text-3xl md:text-xl lg:text-4xl font-thin lg:leading-relaxed text-neutral-500">
+            {question}
+          </p>
+        </SideContent>
+        <div className="h-full w-full md:w-7/12 min-h-[200px] flex justify-start ">
+          <div className="pt-0 pb-0 w-full max-w-2xl">
+            <div className="sticky top-0 bg-white/90 ">
+              <div className="flex flex-row justify-between w-4/5 mt-5 mb-2 py-5 border- border-b border-neutral-200">
+                <ReadingTime content={content} />
+                <div className="ml-10 flex flex-col gap-0 text-xs">
+                  <div className="font-bol hidden">updated:</div>
+                  <div className="font-bol">{lastUpdatedAt}</div>
+                </div>
+              </div>
+            </div>
+            <div className="mt0 my-28">
+              <div className="text-xs text-black font-thin mb-2">
+                elaboration
+              </div>
+              <div className="text-xl text-neutral-700 leading-10 font-base italic">
+                {elaboration}
+              </div>
+              <div className="mt-8 text-xs text-black font-thin mb-2">
+                my position
+              </div>
+              <div className="">{position}</div>
+            </div>
+            <div
+              dangerouslySetInnerHTML={{ __html: content }}
+              className="question font-light"
+            />
+            <div className="h-10" />
+            <div className="flex flex-row justify-between w-4/5 mb-12 py-5 border-t border-b border-neutral-200">
+              <div className="ml-0 flex flex-col gap-0 text-xs">
+                <div className="font-bold">created</div>
+                <div className="font-bol">{createdAt}</div>
+              </div>
+              <div className="ml-0 flex flex-col gap-0 text-xs">
+                <div className="font-bold">updated</div>
+                <div className="font-bol">{lastUpdatedAt}</div>
+              </div>
+              <div className="ml-0 flex flex-col gap-0 text-xs">
+                <div className="font-bold">source</div>
+                <Link
+                  href={url}
+                  className="text-xs hover:text-sky-800 transition-all duration-300"
+                >
+                  Github
+                </Link>
+              </div>
+            </div>
+            <div className="h-36" />
+          </div>
+          {/* Nav cover */}
+          <div className="fixed bottom-0 w-full h-[110px] bg-white/70 backdrop-blur-md border-t border-t-gray-300 md:border-0">
+          </div>
+        </div>
+      </div>
+      <Nav
+        fixed={true}
+        nameClassName=""
+        className="md:bg-transparent"
+      />
+    </main>
+  );
+}

app/questions/[slug]/question.css

@@ -0,0 +1,3 @@
+.question p {
+  @apply my-6 leading-8 text-lg text-neutral-500;
+}

app/questions/page.tsx

@@ -0,0 +1,64 @@
+import Nav from "../nav";
+import { SideContent } from "@/components/SideContent";
+import Link from "next/link";
+import { getAllQuestions } from "@/lib/getWritings";
+
+export default async function QuestionsPage() {
+  const questions = await getAllQuestions();
+
+  return (
+    <main
+      key="questions"
+      className="min-h-[100dvh] w-full flex justify-between"
+    >
+      <div className="h-full w-full flex flex-col md:flex-row justify-end">
+        <SideContent>
+          <h1 className="mb-5 text-3xl leading-normal md:text-4xl md:leading-normal font-thin text-sky-400">
+            Questions
+          </h1>
+          <p className="text-2xl md:text-xl lg:text-2xl font-thin lg:leading-relaxed text-white">
+            I've never enjoyed writing essays, but I love engaging with
+            questions.
+          </p>
+        </SideContent>
+        <div className="h-full w-full md:w-7/12 min-h-[200px] mr-10 flex justify-start">
+          <div className="flex flex-row flex-wrap w-full h-full">
+            {questions.map(({ slug, question }, index) => (
+              <QuestionBox
+                key={index}
+                slug={slug}
+                question={question}
+              />
+            ))}
+          </div>
+          {/* Nav cover */}
+          <div className="fixed bottom-0 w-full h-[110px] bg-white/30 border-t border-t-gray-300 md:border-0">
+          </div>
+        </div>
+      </div>
+      <Nav
+        fixed={true}
+        nameClassName="md:text-white "
+        className="md:bg-transparent"
+      />
+    </main>
+  );
+}
+
+type QuestionBoxProps = {
+  slug: string;
+  question: string;
+};
+
+export function QuestionBox({ slug, question }: QuestionBoxProps) {
+  return (
+    <div className="group bg-white hover:bg-sky-600 transition-all duration-300 flex justify-center content-center">
+      <Link
+        href={`/questions/${slug}`}
+        className="group-hover:text-white transition-all duration-300 p-20"
+      >
+        {question}
+      </Link>
+    </div>
+  );
+}

app/template.tsx

@@ -1,24 +1,24 @@
-"use client"
-import { AnimatePresence, motion } from "framer-motion"
-import { usePathname } from "next/navigation"
+"use client";
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
 
 function PageWrapper({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname()
+  const pathname = usePathname();
 
   return (
     <AnimatePresence mode="wait">
       <motion.div
         key={pathname}
-        initial={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0, y: 0 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 10 }}
         transition={{ duration: 0.3 }}
-        className='w-screen min-h-[100dvh]'
+        className="w-screen min-h-[100dvh]"
       >
         {children}
       </motion.div>
     </AnimatePresence>
-  )
+  );
 }
 
-export default PageWrapper
+export default PageWrapper;

components/ReadingTime/ReadingTime.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { twMerge } from "tailwind-merge";
+import useReadingTime from "use-reading-duration";
+
+type ReadingTimeProps = {
+  content: string;
+  wordsPerMinute?: number;
+  className?: string;
+};
+
+export function ReadingTime(
+  { content, wordsPerMinute, className }: ReadingTimeProps,
+) {
+  wordsPerMinute = wordsPerMinute ?? 240;
+  const readingTime = useReadingTime(content, wordsPerMinute);
+
+  return (
+    <div className={twMerge("text-xs text-neutral-950", className)}>
+      About a <span className="font-bold">{readingTime} minute</span> read
+    </div>
+  );
+}

components/SideContent/SideContent.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { PropsWithChildren } from "react";
+import { twMerge } from "tailwind-merge";
+
+type SideContentProps = PropsWithChildren & {
+  className?: string;
+};
+
+export function SideContent({ children, className }: SideContentProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      className={twMerge(
+        `static md:fixed md:top-0 md:left-0 md:h-screen w-full md:w-5/12 md:-ml-10 bg-sky-700 flex align-center items-center justify-center`,
+        className,
+      )}
+    >
+      <motion.div
+        initial={{ y: 20, opacity: 0 }}
+        animate={{ y: 0, opacity: 1 }}
+        transition={{
+          y: { duration: 2 },
+          opacity: { delay: 0.3, duration: 0.3 },
+        }}
+        className="max-w-screen-md text-center flex flex-col justify-end p-10 pb-5 md:p-20"
+      >
+        {children}
+      </motion.div>
+    </motion.div>
+  );
+}

components/SideContent/index.ts

@@ -0,0 +1 @@
+export * from "./SideContent";

lib/frontMatter.ts

@@ -0,0 +1,12 @@
+import matter from "gray-matter";
+import { remark } from "remark";
+import html from "remark-html";
+
+export function getFrontMatter(fileContents: string) {
+  return matter(fileContents);
+}
+
+export async function markdownToHtml(markdown: string) {
+  const result = await remark().use(html).process(markdown);
+  return result.toString();
+}