From 191a9e9960af8c2f4022df3ed9844929e81aadfc Mon Sep 17 00:00:00 2001
From: JimmyLv <jimmy.jinglv@gmail.com>
Date: Sun, 26 Feb 2023 22:46:57 +0800
Subject: [PATCH] feat: finished the styling

---
 README.md                    |  6 +++---
 components/Footer.tsx        |  8 ++++----
 components/Header.tsx        |  6 +++---
 components/SquigglyLines.tsx |  2 +-
 package-lock.json            |  2 +-
 pages/[...slug].tsx          | 27 +++++++++++++++++----------
 pages/_document.tsx          |  8 ++++----
 styles/globals.css           |  2 +-
 8 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index aa99fd71..67c3e4c0 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
-# [TechCrunchSummary.com](https://www.techcrunchsummary.com/)
+# [b.jimmylv.cn](https://b.jimmylv.cn/)
 
-This project summarizes TechCrunch articles for you using AI.
+This project summarizes 哔哩哔哩 videos for you using AI.
 
-[![TechCrunch Summary Tool](./public/screenshot.png)](https://www.techcrunchsummary.com)
+[![哔哩哔哩视频总结工具](./public/screenshot.png)](https://b.jimmylv.cn)
 
 ## How it works
 
diff --git a/components/Footer.tsx b/components/Footer.tsx
index dd96bc7c..57220ff7 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -9,7 +9,7 @@ export default function Footer() {
           href="https://openai.com/"
           target="_blank"
           rel="noreferrer"
-          className="font-bold underline-offset-2 transition hover:text-slate-100 hover:underline"
+          className="font-bold underline-offset-2 transition hover:text-pink-400 hover:underline"
         >
           OpenAI{" "}
         </a>
@@ -18,7 +18,7 @@ export default function Footer() {
           href="https://vercel.com/"
           target="_blank"
           rel="noreferrer"
-          className="font-bold underline-offset-2 transition hover:text-slate-100 hover:underline"
+          className="font-bold underline-offset-2 transition hover:text-pink-400 hover:underline"
         >
           Vercel Edge Functions.
         </a>
@@ -31,7 +31,7 @@ export default function Footer() {
         >
           <svg
             aria-hidden="true"
-            className="h-6 w-6 fill-slate-400 transition group-hover:fill-slate-100"
+            className="h-6 w-6 fill-slate-400 transition group-hover:fill-pink-400"
           >
             <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
           </svg>
@@ -43,7 +43,7 @@ export default function Footer() {
         >
           <svg
             aria-hidden="true"
-            className="h-6 w-6 fill-slate-400 transition group-hover:fill-slate-100"
+            className="h-6 w-6 fill-slate-400 transition group-hover:fill-pink-400"
           >
             <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
           </svg>
diff --git a/components/Header.tsx b/components/Header.tsx
index 9d6836d9..1def27f7 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -10,15 +10,15 @@ export default function Header() {
     <div className="flex items-center justify-between px-3 sm:px-3">
       <a
         className="flex items-center space-x-3"
-        href="https://www.techcrunchsummary.com"
+        href="https://b.jimmylv.cn"
       >
         <Image src="/edit.png" alt="logo" width={34} height={34} />
         <h2 className={clsx("text-lg sm:text-3xl", poppins.className)}>
-          <span className="text-green-500">TechCrunch</span> summarizer
+          <span className="text-pink-400	">哔哩哔哩</span> 视频总结器
         </h2>
       </a>
       <a
-        href="https://github.com/Nutlope/news-summarizer"
+        href="https://github.com/JimmyLv/chat-bilibili-video"
         rel="noreferrer noopener"
         target="_blank"
         className=""
diff --git a/components/SquigglyLines.tsx b/components/SquigglyLines.tsx
index a5e02e23..cdef8cf6 100644
--- a/components/SquigglyLines.tsx
+++ b/components/SquigglyLines.tsx
@@ -3,7 +3,7 @@ export default function SquigglyLines() {
     <svg
       aria-hidden="true"
       viewBox="0 0 401 42"
-      className="absolute top-2/3 left-0 h-[0.48em] w-full fill-green-300/70"
+      className="absolute top-2/3 left-0 h-[0.48em] w-full fill-pink-400/70"
       preserveAspectRatio="none"
     >
       <path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z" />
diff --git a/package-lock.json b/package-lock.json
index 57e8cb86..4b6c3cf2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "summarize-news-article",
+  "name": "news-summarizer",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index 288870ac..3af3d3a5 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -35,13 +35,13 @@ export const Home: NextPage = () => {
     setSummary("");
     if (url) {
       if (!url.includes("techcrunch.com")) {
-        toast.error("Please enter a valid TechCrunch article");
+        toast.error("Please enter a valid 哔哩哔哩 article");
         return;
       }
       setCurArticle(url);
     } else {
       if (!curArticle.includes("techcrunch.com")) {
-        toast.error("Please enter a valid TechCrunch article");
+        toast.error("Please enter a valid 哔哩哔哩 article");
         return;
       }
       router.replace(curUrl);
@@ -81,7 +81,7 @@ export const Home: NextPage = () => {
   return (
     <div className="mx-auto flex min-h-screen max-w-5xl flex-col pt-8 sm:pt-12">
       <Head>
-        <title>TechCrunch Summarizer</title>
+        <title>哔哩哔哩视频一键总结</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <Header />
@@ -92,30 +92,37 @@ export const Home: NextPage = () => {
           className="mx-auto mb-5 hidden max-w-fit rounded-full border border-gray-800 px-4 py-1 text-gray-500 transition duration-300 ease-in-out hover:scale-105 hover:border-gray-700 md:block"
           href="https://twitter.com/nutlope/status/1622988173155368960"
         >
-          You can also go to a Techcrunch article and add "summary" after
-          "techcrunch" in the URL
+          You can also go to a Bilibili video and change the suffix "
+          <span className="text-pink-400">.com</span>" into "
+          <span className="text-sky-400">jimmylv.cn</span>" in the URL.
+          <br />
+          e.g. www.bilibili.
+          <span className="text-pink-400 line-through">com</span>
+          /video/BV1k84y1e7fW 👉 www.bilibili.
+          <span className="text-sky-400 underline">jimmylv.cn</span>
+          /video/BV1k84y1e7fW
         </a>
         <h1 className="max-w-5xl text-center text-4xl font-bold sm:text-7xl">
           Summarize any{" "}
           <span className="relative whitespace-nowrap text-[#3290EE]">
             <SquigglyLines />
-            <span className="relative text-green-500">TechCrunch</span>
+            <span className="relative text-pink-400	">哔哩哔哩</span>
           </span>{" "}
           article with AI
         </h1>
         <p className="mt-10 text-center text-lg text-gray-500 sm:text-2xl">
-          Copy and paste any <span className="text-green-500">TechCrunch </span>
+          Copy and paste any <span className="text-pink-400	">哔哩哔哩 </span>
           article link below.
         </p>
         <input
           type="text"
           value={curArticle}
           onChange={(e) => setCurArticle(e.target.value)}
-          className="mx-auto mt-10 w-full rounded-lg border border-gray-500 bg-black p-3 outline-1 outline-white sm:mt-7 sm:w-3/4"
+          className="mx-auto mt-10 w-full appearance-none rounded-lg rounded-md border bg-transparent py-2 pl-2 text-sm leading-6 text-slate-900 shadow-sm ring-1 ring-slate-200 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:text-slate-100 dark:ring-0 dark:placeholder:text-slate-500 dark:focus:ring-2"
         />
         {!loading && (
           <button
-            className="z-10 mx-auto mt-7 w-3/4 rounded-2xl border-gray-500 bg-green-500 p-3 text-lg font-medium transition hover:bg-green-400 sm:mt-10 sm:w-1/3"
+            className="z-10 mx-auto mt-7 w-3/4 rounded-2xl border-gray-500 bg-sky-400 p-3 text-lg font-medium text-white transition hover:bg-sky-500 sm:mt-10 sm:w-1/3"
             onClick={() => generateSummary()}
           >
             Summarize
@@ -123,7 +130,7 @@ export const Home: NextPage = () => {
         )}
         {loading && (
           <button
-            className="z-10 mx-auto mt-7 w-3/4 cursor-not-allowed rounded-2xl border-gray-500 bg-green-500 p-3 text-lg font-medium transition hover:bg-green-400 sm:mt-10 sm:w-1/3"
+            className="z-10 mx-auto mt-7 w-3/4 cursor-not-allowed rounded-2xl border-gray-500 bg-sky-400 p-3 text-lg font-medium transition hover:bg-sky-500 sm:mt-10 sm:w-1/3"
             disabled
           >
             <div className="flex items-center justify-center text-white">
diff --git a/pages/_document.tsx b/pages/_document.tsx
index a7595454..7f28480b 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -2,10 +2,10 @@ import Document, { Head, Html, Main, NextScript } from "next/document";
 
 class MyDocument extends Document {
   render() {
-    let description = "Summarize TechCrunch articles in seconds.";
-    let ogimage = "https://www.techcrunchsummary.com/og-image.png";
+    let description = "Summarize 哔哩哔哩 articles in seconds.";
+    let ogimage = "https://b.jimmylv.cn/og-image.png";
     let sitename = "techcrunchsummary.com";
-    let title = "TechCrunch Summarizer";
+    let title = "哔哩哔哩 Summarizer";
 
     return (
       <Html lang="en">
@@ -21,7 +21,7 @@ class MyDocument extends Document {
           <meta property="og:image" content={ogimage} />
           <meta name="twitter:image" content={ogimage} />
         </Head>
-        <body className="bg-black text-white">
+        <body className="bg-white text-gray-700">
           <Main />
           <NextScript />
         </body>
diff --git a/styles/globals.css b/styles/globals.css
index 8072cd69..5788d75f 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 ::selection {
-  background: #22c55a;
+  background: #fc8bab;
 }