feat: show favicon on card

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "run-s build:rss build:next",
-    "build:rss": "ts-node --project tsconfig.rss.json ./src/rss-builder/build.ts",
+    "build": "run-s build:posts build:next",
+    "build:posts": "ts-node --project tsconfig.builder.json ./src/builder/build.ts",
     "build:next": "next build",
     "start": "next start"
   },

src/components/PostList.tsx

@@ -3,7 +3,11 @@ import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 import { PostItem } from "@src/types";
-import { getMemberByName, getHostFromURL } from "@src/utils/helper";
+import {
+  getMemberByName,
+  getHostFromURL,
+  getFaviconSrcFromHostname,
+} from "@src/utils/helper";
 
 dayjs.extend(relativeTime);
 
@@ -12,6 +16,8 @@ const PostLink: React.FC<{ item: PostItem }> = (props) => {
   const member = getMemberByName(authorName);
   if (!member) return null;
 
+  const hostname = getHostFromURL(link);
+
   return (
     <article className="post-link">
       <Link href={`/members/${member.name}`} passHref>
@@ -30,9 +36,19 @@ const PostLink: React.FC<{ item: PostItem }> = (props) => {
           </div>
         </a>
       </Link>
-      <a href={link}>
+      <a href={link} className="post-link__main-link">
         <h2 className="post-link__title">{title}</h2>
-        <div className="post-link__host">{getHostFromURL(link)}</div>
+        {hostname && (
+          <div className="post-link__site">
+            <img
+              src={getFaviconSrcFromHostname(hostname)}
+              width={14}
+              height={14}
+              className="post-link__site-favicon"
+            />
+            {hostname}
+          </div>
+        )}
       </a>
     </article>
   );

src/styles/components/_ContentWrapper.scss

@@ -1,5 +1,5 @@
 .content-wrapper {
-  max-width: 880px;
+  max-width: 850px;
   margin: 0 auto;
   padding: 0 1.2rem;
 }

src/styles/components/_PostList.scss

@@ -1,13 +1,22 @@
+$side-padding: 1.7rem;
 .post-link {
-  padding: 1.9rem 1.3rem;
+  display: flex;
+  flex-flow: column;
   background: var(--color-base-background-lighter);
 }
 .post-link__author {
+  padding: 1.6rem $side-padding 0.6rem;
   display: flex;
   align-items: center;
   font-size: 13px;
   line-height: 1.4;
 }
+.post-link__main-link {
+  padding: 0.6rem $side-padding 1.5rem;
+  flex: 1;
+  display: flex;
+  flex-flow: column;
+}
 .post-link__date {
   color: var(--color-base-text-lighter);
   font-size: 12px;
@@ -17,22 +26,28 @@
   margin-right: 0.7rem;
 }
 .post-link__title {
-  margin-top: 1.2rem;
   font-size: 1.1rem;
+  flex: 1;
 }
 
-.post-link__host {
-  margin-top: 0.5em;
+.post-link__site {
+  margin-top: 0.9rem;
   color: var(--color-base-text-lighter);
-  font-size: 0.85rem;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+.post-link__site-favicon {
+  border-radius: 3px;
+  margin-right: 6px;
 }
 
 .post-list {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   .post-link {
-    margin-top: 4%;
-    width: 31%;
+    margin-top: 5%;
+    width: 47.5%;
   }
 }

src/utils/helper.ts

@@ -6,3 +6,6 @@ export function getHostFromURL(str: string) {
   const url = new URL(str);
   return url?.hostname || "blog";
 }
+export function getFaviconSrcFromHostname(hostname: string) {
+  return `http://www.google.com/s2/favicons?domain=${hostname}`;
+}

tsconfig.rss.json → tsconfig.builder.json

@@ -6,5 +6,5 @@
     "noEmit": false
   },
   "exclude": ["node_modules"],
-  "include": ["src/rss-builder/*.ts"]
+  "include": ["src/builder/*.ts"]
 }