diff --git a/members.ts b/members.ts index 878c815741..8b838fae86 100644 --- a/members.ts +++ b/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: [], }, ]; diff --git a/package.json b/package.json index 0503c96795..d40596e53b 100644 --- a/package.json +++ b/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" diff --git a/src/components/PostList.tsx b/src/components/PostList.tsx new file mode 100644 index 0000000000..d740e89af1 --- /dev/null +++ b/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 ( +
+ + + +
+
{member.name}
+ +
+ + + +

{title}

+
{getHostFromURL(link)}
+ +
+ ); +}; + +export const PostList: React.FC<{ items: PostItem[] }> = (props) => { + return ( +
+ {props.items.map((item, i) => ( + + ))} +
+ ); +}; diff --git a/src/components/ScrollableMembers.tsx b/src/components/ScrollableMembers.tsx index 09a55413e7..402cac32c0 100644 --- a/src/components/ScrollableMembers.tsx +++ b/src/components/ScrollableMembers.tsx @@ -13,7 +13,7 @@ export const ScrollableMembers: React.FC = () => { {member.name} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8ab2a5043b..58e14d3bf4 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,6 +3,7 @@ import Link from "next/link"; import Head from "next/head"; import { config } from "@site.config"; +import { PostItem } from "@src/types"; import { ContentWrapper, @@ -10,10 +11,10 @@ import { } 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) => { +const Page: NextPage = () => { return ( <> @@ -56,17 +57,13 @@ const Page: NextPage = (props) => {

Articles

-
+
+ +
); }; -export const getServerSideProps: GetServerSideProps = async () => { - return { - props: {}, - }; -}; - export default Page; diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 1b55324b9c..41c26f6414 100644 --- a/src/styles/_base.scss +++ b/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; } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index a94663a4e9..37289b4104 100644 --- a/src/styles/_variables.scss +++ b/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); diff --git a/src/styles/components/_PostList.scss b/src/styles/components/_PostList.scss new file mode 100644 index 0000000000..94825421f4 --- /dev/null +++ b/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%; + } +} diff --git a/src/styles/globals.scss b/src/styles/globals.scss index b8ddf90d0b..30bf61b801 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -5,6 +5,7 @@ @import "./components/_ContentWrapper"; @import "./components/_SiteHeader"; @import "./components/_ScrollableMembers"; +@import "./components/_PostList"; // pages @import "./pages/_index"; diff --git a/src/types.ts b/src/types.ts index ebab88fbb5..2f59b15036 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,6 +1,6 @@ export type Member = { name: string; - avatarFileName: string; + avatarSrc: string; role?: string; bio?: string; sources?: string[]; @@ -8,8 +8,8 @@ export type Member = { export type PostItem = { authorName: string; - title?: string; + title: string; + link: string; contentSnippet?: string; - link?: string; isoDate?: string; }; diff --git a/src/utils/helper.ts b/src/utils/helper.ts new file mode 100644 index 0000000000..c8dee82110 --- /dev/null +++ b/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"; +} diff --git a/yarn.lock b/yarn.lock index abbe504a99..3cd24e43b5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2333,6 +2333,11 @@ data-uri-to-buffer@3.0.0: 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"