refactored

README.md

@@ -3,14 +3,16 @@
 - [x] Make it work with edge functions and streaming instead of just serverless
 - [x] Add loading logic and make summary look nicer by splitting into more paragraphs
 - [x] Add a footer
-- [ ] Maybe summarize with bullet points? Maybe I should have a toggle that toggles between this
-- [ ] Parse URL to make sure it includes techcrunch.com. new URL(string) - make sure it's valid and host name is techcrunch
-- [ ] Make it work for featured articles – why isn't it?
+- [x] Maybe summarize with bullet points? Maybe I should have a toggle that toggles between this
+- [ ] Fix mobile styles
+- [ ] Fix SEO and OG image
+- [ ] techcrunch.com, make it work with a dynamic slug can use [[...slug]].tsx
 
 # Todos v2
 
+- [ ] Parse URL to make sure it includes techcrunch.com. new URL(string) - make sure it's valid and host name is techcrunch
+- [ ] Make it work for featured articles – why isn't it?
 - [ ] Add a "try one of these options": Add a try one of our links below (put 3 cards here)
-- [ ] Maybe a slider for how long to make the summary
 - [ ] Make sure to have clean URLs, remove query params
+- [ ] Maybe a slider for how long to make the summary
 - [ ] Make them sharable links and cache with upstash redis
-- [ ] TechCrunch-summarized.com, techcrunchTLDR, change one thing on techcrunch articles to get it summarized, can use [[...slug]].tsx

components/Header.tsx

@@ -0,0 +1,27 @@
+import { Poppins } from "@next/font/google";
+import clsx from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+import Github from "../components/GitHub";
+
+const poppins = Poppins({ weight: "800", subsets: ["latin"] });
+
+export default function Header() {
+  return (
+    <div className="flex justify-between">
+      <Link className="flex items-center space-x-3" href="/">
+        <Image src="/edit.png" alt="logo" width={34} height={34} />
+        <h2 className={clsx("text-3xl", poppins.className)}>
+          <span className="text-green-500">TechCrunch</span> summarizer.
+        </h2>
+      </Link>
+      <a
+        href="https://github.com/Nutlope?tab=repositories"
+        rel="noreferrer noopener"
+        target="_blank"
+      >
+        <Github />
+      </a>
+    </div>
+  );
+}

pages/api/summarize.ts

@@ -22,7 +22,6 @@ export default async function handler(req: NextRequest) {
   const data = await response.text();
   const root = parse(data);
   const body = root.querySelector(".article-content");
-  console.log({ body });
   const text = body!.innerText
     .replace(/(\r\n|\n|\r)/gm, "")
     .replace(/(\r\t|\t|\r)/gm, "");

pages/index.tsx

@@ -1,14 +1,8 @@
-import { Poppins } from "@next/font/google";
-import clsx from "clsx";
 import type { NextPage } from "next";
 import Head from "next/head";
-import Image from "next/image";
-import Link from "next/link";
 import { useState } from "react";
 import Footer from "../components/Footer";
-import Github from "../components/GitHub";
-
-const poppins = Poppins({ weight: "800", subsets: ["latin"] });
+import Header from "../components/Header";
 
 const Home: NextPage = () => {
   const [article, setArticle] = useState<string>("");
@@ -31,7 +25,6 @@ const Home: NextPage = () => {
       throw new Error(response.statusText);
     }
 
-    // This data is a ReadableStream
     const data = response.body;
     if (!data) {
       return;
@@ -56,21 +49,7 @@ const Home: NextPage = () => {
         <title>TechCrunch summarizer</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="flex justify-between">
-        <Link className="flex items-center space-x-3" href="/">
-          <Image src="/edit.png" alt="logo" width={34} height={34} />
-          <h2 className={clsx("text-3xl", poppins.className)}>
-            <span className="text-green-500">TechCrunch</span> summarizer.
-          </h2>
-        </Link>
-        <a
-          href="https://github.com/Nutlope?tab=repositories"
-          rel="noreferrer noopener"
-          target="_blank"
-        >
-          <Github />
-        </a>
-      </div>
+      <Header />
       <main className="flex flex-col max-w-5xl mx-auto justify-center content-center mt-20 flex-1">
         <h1 className="max-w-5xl text-3xl sm:text-7xl font-bold text-center">
           Summarize any <span className="text-green-500">TechCrunch</span>{" "}