From ac2323ea0ba351f3494d775e8615bca10339e48e Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Sun, 5 Nov 2023 03:42:04 +0800
Subject: [PATCH] chore(header): beautify info card

---
 components.json                               |  2 +-
 .../style.css => assets/styles/tailwind.css}  |  0
 src/entrypoints/content/index.tsx             |  4 +--
 .../content/views/AppButton/index.tsx         |  2 +-
 .../content/views/Header/index.tsx            | 10 +++---
 src/entrypoints/content/views/Main/index.tsx  |  1 -
 src/utils/getWebsiteInfo.ts                   | 34 -------------------
 src/utils/index.ts                            | 33 ++++++++++++++++++
 8 files changed, 43 insertions(+), 43 deletions(-)
 rename src/{entrypoints/content/style.css => assets/styles/tailwind.css} (100%)
 delete mode 100644 src/utils/getWebsiteInfo.ts

diff --git a/components.json b/components.json
index 3495e20..494d736 100644
--- a/components.json
+++ b/components.json
@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "@/assets/style.css",
+    "css": "@/assets/styles.tailwind.css",
     "baseColor": "slate",
     "cssVariables": true
   },
diff --git a/src/entrypoints/content/style.css b/src/assets/styles/tailwind.css
similarity index 100%
rename from src/entrypoints/content/style.css
rename to src/assets/styles/tailwind.css
diff --git a/src/entrypoints/content/index.tsx b/src/entrypoints/content/index.tsx
index 5383141..5a7e847 100644
--- a/src/entrypoints/content/index.tsx
+++ b/src/entrypoints/content/index.tsx
@@ -6,11 +6,11 @@ import { RemeshLogger } from 'remesh-logger'
 import App from './App'
 import StorageImpl from '@/impl/Storage'
 
-import './style.css'
+import '@/assets/styles/tailwind.css'
 
 export default defineContentScript({
   cssInjectionMode: 'ui',
-  matches: ['*://*.example.com/*'],
+  matches: ['*://*.example.com/*', '*://*.google.com/*', '*://*.v2ex.com/*'],
   async main(ctx) {
     const store = Remesh.store({
       externs: [StorageImpl],
diff --git a/src/entrypoints/content/views/AppButton/index.tsx b/src/entrypoints/content/views/AppButton/index.tsx
index 0dea670..0110c07 100644
--- a/src/entrypoints/content/views/AppButton/index.tsx
+++ b/src/entrypoints/content/views/AppButton/index.tsx
@@ -7,7 +7,7 @@ export interface AppButtonProps {
 
 const AppButton: FC<AppButtonProps> = ({ children }) => {
   return (
-    <Button className="fixed bottom-5 right-5 z-top h-10 w-10 select-none rounded-full bg-yellow-400 text-xs">
+    <Button className="fixed bottom-5 right-5 z-top h-10 w-10 select-none rounded-full bg-blue-400 text-xs">
       {children}
     </Button>
   )
diff --git a/src/entrypoints/content/views/Header/index.tsx b/src/entrypoints/content/views/Header/index.tsx
index 26eede9..24aa306 100644
--- a/src/entrypoints/content/views/Header/index.tsx
+++ b/src/entrypoints/content/views/Header/index.tsx
@@ -1,7 +1,7 @@
 import { type FC } from 'react'
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/HoverCard'
 import { Button } from '@/components/ui/Button'
-import getWebSiteInfo from '@/utils/getWebsiteInfo'
+import { getWebSiteInfo } from '@/utils'
 
 const Header: FC = () => {
   const websiteInfo = getWebSiteInfo()
@@ -18,9 +18,11 @@ const Header: FC = () => {
         <HoverCardContent className="w-80">
           <div className="grid grid-cols-[auto_1fr] gap-x-4">
             <img className="h-14 w-14 overflow-hidden rounded-full" src={websiteInfo.icon} />
-            <div className="grid">
-              <h4 className="text-sm font-semibold">{websiteInfo.title}</h4>
-              <p className="text-xs text-slate-500">{websiteInfo.description}</p>
+            <div className="grid items-center">
+              <h4 className="truncate text-sm font-semibold">{websiteInfo.title}</h4>
+              {websiteInfo.description && (
+                <p className="line-clamp-2 h-8 text-xs text-slate-500">{websiteInfo.description}</p>
+              )}
             </div>
           </div>
         </HoverCardContent>
diff --git a/src/entrypoints/content/views/Main/index.tsx b/src/entrypoints/content/views/Main/index.tsx
index d6f54c0..8e11253 100644
--- a/src/entrypoints/content/views/Main/index.tsx
+++ b/src/entrypoints/content/views/Main/index.tsx
@@ -16,7 +16,6 @@ const Main: FC = () => {
     const lastMessageRef = messageListRef.current?.querySelector('[data-index]:last-child')
     const timerId = setTimeout(() => {
       requestAnimationFrame(() => {
-        console.log(isUpdate.current)
         lastMessageRef?.scrollIntoView({ behavior: isUpdate.current ? 'smooth' : 'instant', block: 'end' })
         isUpdate.current = true
       })
diff --git a/src/utils/getWebsiteInfo.ts b/src/utils/getWebsiteInfo.ts
deleted file mode 100644
index 90e4b08..0000000
--- a/src/utils/getWebsiteInfo.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export interface WebSiteInfo {
-  host: string
-  hostname: string
-  href: string
-  origin: string
-  title: string
-  icon: string
-  description: string
-}
-
-const getWebSiteInfo = (): WebSiteInfo => {
-  return {
-    host: document.location.host,
-    hostname: document.location.hostname,
-    href: document.location.href,
-    origin: document.location.origin,
-    title:
-      document.querySelector('meta[rel="og:title i"]')?.getAttribute('content') ??
-      document.querySelector('meta[rel="og:title i"]')?.getAttribute('content') ??
-      document.querySelector('meta[rel="og:site_name i"]')?.getAttribute('content') ??
-      document.title,
-    icon:
-      document.querySelector('meta[property="og:image" i]')?.getAttribute('href') ??
-      document.querySelector('link[rel="icon" i]')?.getAttribute('href') ??
-      document.querySelector('link[rel="shortcut icon" i]')?.getAttribute('href') ??
-      `${document.location.origin}/favicon.ico}`,
-    description:
-      document.querySelector('meta[property="og:description i"]')?.getAttribute('content') ??
-      document.querySelector('meta[name="description" i]')?.getAttribute('content') ??
-      ''
-  }
-}
-
-export default getWebSiteInfo
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6a39380..354b23c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,16 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+export interface WebSiteInfo {
+  host: string
+  hostname: string
+  href: string
+  origin: string
+  title: string
+  icon: string
+  description: string
+}
+
 export const cn = (...inputs: ClassValue[]) => {
   return twMerge(clsx(inputs))
 }
@@ -11,3 +21,26 @@ export const createElement = <T extends Element>(template: string) => {
 
 export const chunk = <T = any>(array: T[], size: number) =>
   Array.from({ length: Math.ceil(array.length / size) }, (_v, i) => array.slice(i * size, i * size + size))
+
+export const getWebSiteInfo = (): WebSiteInfo => {
+  return {
+    host: document.location.host,
+    hostname: document.location.hostname,
+    href: document.location.href,
+    origin: document.location.origin,
+    title:
+      document.querySelector('meta[rel="og:title i"]')?.getAttribute('content') ??
+      document.querySelector('meta[rel="og:title i"]')?.getAttribute('content') ??
+      document.querySelector('meta[rel="og:site_name i"]')?.getAttribute('content') ??
+      document.title,
+    icon:
+      document.querySelector('meta[property="og:image" i]')?.getAttribute('href') ??
+      document.querySelector('link[rel="icon" i]')?.getAttribute('href') ??
+      document.querySelector('link[rel="shortcut icon" i]')?.getAttribute('href') ??
+      `${document.location.origin}/favicon.ico`,
+    description:
+      document.querySelector('meta[property="og:description i"]')?.getAttribute('content') ??
+      document.querySelector('meta[name="description" i]')?.getAttribute('content') ??
+      ''
+  }
+}