diff --git a/package.json b/package.json index d40596e53b..6ee2ebf29c 100644 --- a/package.json +++ b/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" }, diff --git a/src/rss-builder/build.ts b/src/builder/posts.ts similarity index 100% rename from src/rss-builder/build.ts rename to src/builder/posts.ts diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx index d740e89af1..383c97ba10 100644 --- a/src/components/PostList.tsx +++ b/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 (
@@ -30,9 +36,19 @@ const PostLink: React.FC<{ item: PostItem }> = (props) => { - +

{title}

-
{getHostFromURL(link)}
+ {hostname && ( +
+ + {hostname} +
+ )}
); diff --git a/src/styles/components/_ContentWrapper.scss b/src/styles/components/_ContentWrapper.scss index 64f35da28c..6268e29c87 100644 --- a/src/styles/components/_ContentWrapper.scss +++ b/src/styles/components/_ContentWrapper.scss @@ -1,5 +1,5 @@ .content-wrapper { - max-width: 880px; + max-width: 850px; margin: 0 auto; padding: 0 1.2rem; } diff --git a/src/styles/components/_PostList.scss b/src/styles/components/_PostList.scss index 94825421f4..a335e63c08 100644 --- a/src/styles/components/_PostList.scss +++ b/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,14 +26,20 @@ 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 { @@ -32,7 +47,7 @@ justify-content: space-between; flex-wrap: wrap; .post-link { - margin-top: 4%; - width: 31%; + margin-top: 5%; + width: 47.5%; } } diff --git a/src/utils/helper.ts b/src/utils/helper.ts index c8dee82110..7f688c2225 100644 --- a/src/utils/helper.ts +++ b/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}`; +} diff --git a/tsconfig.rss.json b/tsconfig.builder.json similarity index 81% rename from tsconfig.rss.json rename to tsconfig.builder.json index c98f148e99..75867ce20c 100644 --- a/tsconfig.rss.json +++ b/tsconfig.builder.json @@ -6,5 +6,5 @@ "noEmit": false }, "exclude": ["node_modules"], - "include": ["src/rss-builder/*.ts"] + "include": ["src/builder/*.ts"] }