feat: add card

members.ts

@@ -6,7 +6,7 @@ export const members: Member[] = [
     role: "CTO",
     bio:
       "デザインが好きなプログラマー。開発者向けの情報共有プラットフォームzenn.devを開発しています。",
-    avatarFileName: "catnose.jpg",
+    avatarSrc: "/avatars/catnose.jpg",
     sources: [
       "https://zenn.dev/catnose99/feed",
       "https://note.com/catnose/rss",
@@ -16,35 +16,35 @@ export const members: Member[] = [
     name: "John Doe",
     role: "SRE",
     bio: "Site Reliability Engineer.",
-    avatarFileName: "doe.jpg",
+    avatarSrc: "/avatars/doe.jpg",
     sources: ["https://zenn.dev/zenn/feed"],
   },
   {
     name: "Amanda",
     role: "Frontend dev",
     bio: "Frontend developer,",
-    avatarFileName: "amanda.jpg",
+    avatarSrc: "/avatars/amanda.jpg",
     sources: ["https://medium.com/feed/@Medium"],
   },
   {
     name: "Takada Junji",
     role: "Designer",
     bio: "Designing all of the apps in Foo company.",
-    avatarFileName: "junji.jpg",
+    avatarSrc: "/avatars/junji.jpg",
     sources: [],
   },
   {
     name: "Ota Naoko",
     role: "Researcher",
     bio: "Some texts here",
-    avatarFileName: "naoko.jpg",
+    avatarSrc: "/avatars/naoko.jpg",
     sources: [],
   },
   {
     name: "Alexandria",
     role: "Tech Lead",
     bio: "IT professional with 3 years of experience",
-    avatarFileName: "alexandria.jpg",
+    avatarSrc: "/avatars/alexandria.jpg",
     sources: [],
   },
 ];

package.json

@@ -10,10 +10,10 @@
     "start": "next start"
   },
   "dependencies": {
+    "dayjs": "^1.9.3",
     "next": "9.5.5",
     "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "rss-parser": "^3.9.0"
+    "react-dom": "16.14.0"
   },
   "devDependencies": {
     "@types/fs-extra": "^9.0.2",
@@ -28,6 +28,7 @@
     "fs-extra": "^9.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
+    "rss-parser": "^3.9.0",
     "sass": "^1.27.0",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.3"

src/components/PostList.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+import { PostItem } from "@src/types";
+import { getMemberByName, getHostFromURL } from "@src/utils/helper";
+
+dayjs.extend(relativeTime);
+
+const PostLink: React.FC<{ item: PostItem }> = (props) => {
+  const { authorName, title, isoDate, link } = props.item;
+  const member = getMemberByName(authorName);
+  if (!member) return null;
+
+  return (
+    <article className="post-link">
+      <Link href={`/members/${member.name}`} passHref>
+        <a className="post-link__author">
+          <img
+            src={member.avatarSrc}
+            className="post-link__author-img"
+            width={35}
+            height={35}
+          />
+          <div className="post-link__author-name">
+            <div className="post-link__author-name">{member.name}</div>
+            <time dateTime={isoDate} className="post-link__date">
+              {dayjs(isoDate).fromNow()}
+            </time>
+          </div>
+        </a>
+      </Link>
+      <a href={link}>
+        <h2 className="post-link__title">{title}</h2>
+        <div className="post-link__host">{getHostFromURL(link)}</div>
+      </a>
+    </article>
+  );
+};
+
+export const PostList: React.FC<{ items: PostItem[] }> = (props) => {
+  return (
+    <div className="post-list">
+      {props.items.map((item, i) => (
+        <PostLink key={`post-item-${i}`} item={item} />
+      ))}
+    </div>
+  );
+};

src/components/ScrollableMembers.tsx

@@ -13,7 +13,7 @@ export const ScrollableMembers: React.FC = () => {
           <a className="scrollable-member__link">
             <span className="scrollable-member__image">
               <img
-                src={`/avatars/${member.avatarFileName}`}
+                src={member.avatarSrc}
                 alt={member.name}
                 className="scrollable-member__img"
                 width={80}

src/pages/_app.tsx

@@ -9,7 +9,7 @@ export default function MyApp({ Component, pageProps }: AppProps) {
         <link rel="icon shortcut" href="/fixme.png" />
         <link
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
         />
       </Head>
       <Component {...pageProps} />

src/pages/index.tsx

@@ -3,17 +3,18 @@ import Link from "next/link";
 import Head from "next/head";
 
 import { config } from "@site.config";
+import { PostItem } from "@src/types";
 
 import {
   ContentWrapper,
   UndoWrapForScroll,
 } from "@src/components/ContentWrapper";
 import { SiteHeader } from "@src/components/SiteHeader";
 import { ScrollableMembers } from "@src/components/ScrollableMembers";
+import { PostList } from "@src/components/PostList";
+import posts from "@/.contents/posts.json";
 
-type Props = {};
-
-const Page: NextPage<Props> = (props) => {
+const Page: NextPage = () => {
   return (
     <>
       <Head>
@@ -56,17 +57,13 @@ const Page: NextPage<Props> = (props) => {
             <h2 className="home-section-title">Articles</h2>
           </div>
 
-          <div className="home-posts-container"></div>
+          <div className="home-posts-container">
+            <PostList items={posts as PostItem[]} />
+          </div>
         </ContentWrapper>
       </section>
     </>
   );
 };
 
-export const getServerSideProps: GetServerSideProps<Props> = async () => {
-  return {
-    props: {},
-  };
-};
-
 export default Page;

src/styles/_base.scss

@@ -17,7 +17,7 @@ body {
   background: var(--color-base-background);
   word-break: break-word;
   word-wrap: break-word;
-  font-family: "Rubik", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN",
+  font-family: "Inter", "BlinkMacSystemFont", "Hiragino Kaku Gothic ProN",
     "Hiragino Sans", Meiryo, sans-serif;
 }
 

src/styles/_variables.scss

@@ -1,6 +1,6 @@
 :root {
   --color-base-background: #111;
-  --color-base-background-lighter: #555;
+  --color-base-background-lighter: rgb(40, 40, 48);
   --color-base-text: #fff;
   --color-base-text-lighter: rgba(212, 231, 241, 0.6);
   --color-border: rgba(115, 125, 130, 0.4);

src/styles/components/_PostList.scss

@@ -0,0 +1,38 @@
+.post-link {
+  padding: 1.9rem 1.3rem;
+  background: var(--color-base-background-lighter);
+}
+.post-link__author {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  line-height: 1.4;
+}
+.post-link__date {
+  color: var(--color-base-text-lighter);
+  font-size: 12px;
+}
+.post-link__author-img {
+  border-radius: 25%;
+  margin-right: 0.7rem;
+}
+.post-link__title {
+  margin-top: 1.2rem;
+  font-size: 1.1rem;
+}
+
+.post-link__host {
+  margin-top: 0.5em;
+  color: var(--color-base-text-lighter);
+  font-size: 0.85rem;
+}
+
+.post-list {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .post-link {
+    margin-top: 4%;
+    width: 31%;
+  }
+}

src/styles/globals.scss

@@ -5,6 +5,7 @@
 @import "./components/_ContentWrapper";
 @import "./components/_SiteHeader";
 @import "./components/_ScrollableMembers";
+@import "./components/_PostList";
 
 // pages
 @import "./pages/_index";

src/types.ts

@@ -1,15 +1,15 @@
 export type Member = {
   name: string;
-  avatarFileName: string;
+  avatarSrc: string;
   role?: string;
   bio?: string;
   sources?: string[];
 };
 
 export type PostItem = {
   authorName: string;
-  title?: string;
+  title: string;
+  link: string;
   contentSnippet?: string;
-  link?: string;
   isoDate?: string;
 };

src/utils/helper.ts

@@ -0,0 +1,8 @@
+import { members } from "@members";
+export function getMemberByName(name: string) {
+  return members.find((member) => member.name === name);
+}
+export function getHostFromURL(str: string) {
+  const url = new URL(str);
+  return url?.hostname || "blog";
+}

yarn.lock

@@ -2333,6 +2333,11 @@ [email protected]:
   dependencies:
     buffer-from "^1.1.1"
 
+dayjs@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.9.3.tgz#b7f94b22ad2a136a4ca02a01ab68ae893fe1a268"
+  integrity sha512-V+1SyIvkS+HmNbN1G7A9+ERbFTV9KTXu6Oor98v2xHmzzpp52OIJhQuJSTywWuBY5pyAEmlwbCi1Me87n/SLOw==
+
 debug@4, debug@^4.1.0, debug@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.2.0.tgz#7f150f93920e94c58f5574c2fd01a3110effe7f1"