dotkom · henrygraesberg · Oct 30, 2024 · Oct 30, 2024 · Oct 31, 2024 · Oct 31, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@neondatabase/serverless": "^0.10.1",
     "next": "14.2.14",
     "react": "^18",
     "react-dom": "^18"

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,15 +1,8 @@
-import Footer from "../components/Footer";
-import Navbar from "../components/Navbar";
-
 const Page = () => {
     return (
-        <>
-        <Navbar />
         <div className="flex flex-1">
             <h1>About</h1>
         </div>
-        <Footer />
-        </>
     )
 }
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,6 @@
 import type { Metadata } from "next";
+import Navbar from "./components/Navbar";
+import Footer from "./components/Footer";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -20,7 +22,9 @@ export default function RootLayout({
           />
       </head>
       <body>
+        <Navbar />
         {children}
+        <Footer />
       </body>
     </html>
   );

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -2,12 +2,10 @@ import Image from "next/image";
 import Image404a from "@/app/assets/404-mannen-after.jpg";
 import Image404b from "@/app/assets/404-mannen-before.jpg";
 import NavButton from "./components/NavButton";
-import Navbar from "./components/Navbar";
 
 const NotFound = () => {
     return (
         <main className="grid min-w-screen min-h-screen gap-4 place-content-center">
-            <Navbar />
             <h1 className="text-5xl text-center">Ser ut som du har havnet på feil sted</h1>
             <p className="text-center">404: Page not found</p>
             <div className="flex flex-row justify-center">

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,14 +1,7 @@
-import Image from "next/image";
-import Navbar from "./components/Navbar";
-import Footer from "./components/Footer";
-import Page from "./about/page";
-
 export default function Home() {
   return (
     <div className="flex flex-col min-h-screen">
-      <Navbar />
-      <Page />
-      <Footer />
+      <p>Page</p>
     </div>
   )
 }
diff --git a/src/app/posts/[id]/page.tsx b/src/app/posts/[id]/page.tsx
@@ -0,0 +1,56 @@
+import { FC } from 'react'
+import Image from 'next/image'
+import { neon } from "@neondatabase/serverless"
+
+interface PostContent {
+  title: string
+  hook?: string
+  image?: {
+    src: string
+    alt: string
+    fill?: boolean
+  }
+  author: string
+  posting_date: Date
+  body_text: string
+}
+
+export const getContent = async (id: string) => {
+  const sql = neon(process.env.DATABASE_URL as string)
+
+  const post = await sql`SELECT * FROM posts WHERE id = ${id}`
+
+  return post[0] as PostContent
+}
+
+const page: FC<{params: Promise<{id: string}>}> = async ({ params }) => {
+  const content = await getContent((await params).id)
+
+  content.image ??= {
+    src: "https://picsum.photos/1000/500",
+    alt: "Random image from lorem picsum",
+  }
+  content.image.fill ??= true
+
+  return (
+      <main>
+        <div className="grid grid-cols-2 grid-rows-2 h-[50vh] w-[100vw] overflow-hidden relative gap-4">
+          <Image src={content.image.src} alt={content.image.alt} height={0} width={0} sizes="100vw" className={`col-start-1 col-end-3 ${content.image.fill ? "w-[100vw]" : "w-auto"} ${!content.image.fill && "justify-self-center"} h-auto`} />
+          <div className="col-start-1 row-start-2 z-10 m-6 bg-[#BE8CFF] p-4 w-fit rounded-xl flex flex-col gap-3">
+            <h1 className="text-4xl text-text_secondary font-black">{content.title}</h1>
+            {content.hook && <p>{content.hook}</p>}
+          </div>
+        </div>
+
+        <article className="p-4 flex flex-col gap-4">
+          <div>
+            <h2 className="text-lg">Skrevet av: {content.author}</h2>
+            <h2 className="text-lg">Publisert: {content.posting_date.toLocaleDateString("no")}</h2>
+          </div>
+          <p dangerouslySetInnerHTML={{__html: content.body_text}}></p>
+        </article>
+      </main>
+  )
+}
+
+export default page
diff --git a/src/app/posts/page.tsx b/src/app/posts/page.tsx
@@ -1,13 +1,38 @@
-import Footer from '../components/Footer';
-import Navbar from '../components/Navbar';
+import { neon } from "@neondatabase/serverless"
+import Link from "next/link"
+
+const getData = async () => {
+    const sql = neon(process.env.DATABASE_URL as string)
+
+    //Dataen caches, så vi får ikke up-to-date info
+    //Spør Bårnes
+    const test = await sql`
+        SELECT id, title, hook, author, posting_date FROM posts ORDER BY posting_date DESC
+    `
+
+    return test
+}
+
+const Page = async () => {
+    const data = await getData()
+
+    console.log(data)
 
-const Page = () => {
     return (
-        <>
-            <Navbar />
-            <h1>Posts</h1>
-            <Footer />
-        </>
+        <div className='flex flex-wrap gap-5'>
+            {
+                data.map((item) => (
+                    <Link href={`/posts/${item.id}`} key={item.id} className='flex flex-col gap-4 w-fit mx-10 my-3'>
+                        <div className="bg-secondary p-3 rounded-xl flex flex-col w-96">
+                            <h1 className="text-2xl">{item.title}</h1>
+                            {item.hook && <p>{item.hook}</p>}
+                        </div>
+                        <p>{item.author}</p>
+                        <p>{item.posting_date.toLocaleDateString("no")}</p>
+                    </Link>
+                ))
+            }
+        </div>
     )
 }
 

diff --git a/src/app/templates/BlogPostTemplate.tsx b/src/app/templates/BlogPostTemplate.tsx