Blog

2025-01-07 20:30:40 +01:00
parent 9c82f5e5c6
commit 68b0d29b3d
15 changed files with 2884 additions and 48 deletions
@@ -0,0 +1,17 @@
+import { getBlog, getBlogs } from "@/blogApi";
+import { notion, databaseId, n2m } from "@/notion";
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  const id = url.searchParams.get("id");
+  if (id !== null) {
+    let [status, data] = await getBlog(notion, n2m, id);
+    return Response.json(data, { status });
+  } else {
+    var cursor = url.searchParams.get("cursor") || undefined;
+    if (cursor === "") cursor = undefined;
+    const size = parseInt(url.searchParams.get("size") || "5");
+    let [status, response] = await getBlogs(notion, databaseId, cursor, size);
+    return Response.json(response, { status });
+  }
+}
@@ -0,0 +1,5 @@
+export function GET(req: Request) {
+  return new Response(JSON.stringify({
+    version: "1.0.2",
+  }));
+}
@@ -0,0 +1,11 @@
+import { getBlogs, searchBlog } from "@/blogApi";
+import { notion, databaseId } from "@/notion";
+
+export async function GET(request: Request) {
+  const url = new URL(request.url);
+  let [status, response] = await searchBlog(
+    notion,
+    url.searchParams.get("query") || ""
+  );
+  return Response.json(response, { status });
+}
@@ -0,0 +1,71 @@
+"use client";
+
+import MarkdownRenderer from "@/components/MarkdownRenderer";
+import { useEffect, useState } from "react";
+import "./style.css";
+
+type Blog = {
+  title: string;
+  description: string;
+  id: string;
+  tags: { name: string; color: string }[];
+  markdown: string;
+  date: string;
+};
+
+export default function Blog({ params }: { params: Promise<{ id: string }> }) {
+  const [blog, setBlog] = useState<null | Blog>(null);
+
+  useEffect(() => {
+    params.then(({ id }) =>
+      fetch(`/api/blog/?id=${id}`)
+        .then((res) => {
+          res
+            .json()
+            .then((response) => {
+              if (res.status === 200) {
+                setBlog(response);
+              } else {
+                console.error(`'/api/blog/${id}' Error:`, response.msg);
+              }
+            })
+            .catch((e) => {
+              console.error(`'/api/blog/${id}' Unable to obtain json:`, e);
+            });
+        })
+        .catch((e) => {
+          console.error(`'/api/blog/${id}' Error:`, e);
+        })
+    );
+  }, [params]);
+
+  return (
+    <div>
+      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0 animate-fadeIn">
+        <div className="w-full max-w-screen-lg mx-auto">
+          <div className="px-6 md:px-10 lg:px-15 xl:px-2">
+            <div className="pt-8 pb-6 px-8 bg-transparent-ish rounded-xl h-screen">
+              {blog ? (
+                <div>
+                  <h1 className="text-red-400">{blog.title}</h1>
+                  <p className="text-gray-400">
+                    {new Date(blog.date).toDateString()}
+                  </p>
+                  <div className="mt-4 blog-md">
+                    <MarkdownRenderer>
+                      {blog.markdown
+                        .replaceAll(/\n!\n/g, "\n<br/>\n")
+                        .replaceAll(/\n-/g, "\n\n-")}
+                    </MarkdownRenderer>
+                  </div>
+                </div>
+              ) : (
+                ""
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,11 @@
+.blog-md h1 {
+    color: #fa5770;
+}
+
+.blog-md a {
+    color: #fa5770;
+}
+
+.blog-md code {
+    color: #fa5770;
+}
@@ -0,0 +1,95 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+type Blog = {
+  title: string;
+  description: string;
+  id: string;
+  tags: { name: string; color: string }[];
+};
+
+export default function Blog() {
+  const [blogs, setBlogs] = useState<Blog[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const fetchBlogs = (query: string) => {
+    (query === ""
+      ? fetch("/api/blog/")
+      : fetch(`/api/search/?query=${encodeURIComponent(query)}`)
+    )
+      .then((res) => {
+        res
+          .json()
+          .then((response) => {
+            if (response && response.items) {
+              setBlogs(response.items);
+            } else {
+              console.error("`/api/blog/` Response is invalid:", response);
+            }
+          })
+          .catch((e) => {
+            console.error("`/api/blog/` Unable to obtain json:", e);
+          });
+      })
+      .catch((e) => {
+        console.error("`/api/blog/` Error:", e);
+      });
+  };
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      fetchBlogs(searchQuery);
+    }, 500);
+
+    return () => clearTimeout(handler);
+  }, [searchQuery]);
+
+  return (
+    <div>
+      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0 animate-fadeIn">
+        <div className="w-full max-w-screen-lg mx-auto">
+          <div className="px-6 md:px-10 lg:px-15 xl:px-2">
+            <div className="pt-8 pb-6 px-8 bg-transparent-ish rounded-xl h-screen">
+              <h1 className="text-red-400 w-max mx-auto">Leo's blog</h1>
+              <input
+                type="search"
+                name="Blog"
+                id="blog-search"
+                className="p-3 bg-transparent border border-red rounded-xl w-72 mx-auto mt-5"
+                onChange={(event) => setSearchQuery(event.target.value)}
+                placeholder="Search"
+              />
+              <div className="mt-10 grid gap-6 w-full lg:grid-cols-2">
+                {blogs.map((blog, i) => (
+                  <div
+                    className="p-3 px-5 h-52 border border-red rounded-xl backdrop-blur-xl"
+                    key={i}
+                  >
+                    <h1 className="hover:text-red text-ellipsis overflow-hidden">
+                      <Link href={"/blog/" + blog.id}>{blog.title}</Link>
+                    </h1>
+                    <p className="pt-1 max-h-[72px] overflow-hidden">
+                      {blog.description}
+                    </p>
+                    <div className="flex gap-5 pt-3 flex-wrap overflow-hidden h-10">
+                      {blog.tags.map((tag, i) => (
+                        <span
+                          className="inline-flex items-center rounded-md border px-2.5 py-0.5 font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs bg-red-600/10 border-red-600"
+                          key={i}
+                        >
+                          {tag.name}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -1,17 +1,7 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import Navbar from "@/components/Navbar";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import Background from "@/components/Background";

 export const metadata: Metadata = {
  title: "Leo's Portfolio",
@@ -25,9 +15,8 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`antialiased`}>
+        <Background />
        <Navbar />
        {children}
      </body>
@@ -1,4 +1,3 @@
-import Background from "@/components/Background";
 import PinnedRepos from "@/components/PinnedRepos";
 import Skill from "@/components/Skill";
 import {
@@ -16,7 +15,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export default function App() {
  return (
    <div>
-      <Background />
      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0 animate-fadeIn">
        <div className="w-full max-w-screen-lg mx-auto">
          <div className="px-8 md:px-10 lg:px-15 xl:px-24">
@@ -1,15 +1,10 @@
-import Background from "@/components/Background";
-import {
-  faCheck,
-  faCode,
-  faRocket,
-} from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faCode, faRocket } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

 export default function Pricing() {
  return (
    <div>
-      <Background />
+      {/* <Background /> */}
      <div className="content-center w-full lg:mx-auto pt-16 lg:pt-0 relative z-20 pb-16 md:pb-0 animate-fadeIn">
        <div className="w-full max-w-screen-lg mx-auto px-4 md:px-10">
          <h1 className="pt-10 w-max mx-auto text-red-400">Choose a plan</h1>