feature: feeds language filter

feeds/components/FeedLink.tsx

@@ -7,14 +7,16 @@ import CardContent from "@material-ui/core/CardContent";
 import CardMedia from "@material-ui/core/CardMedia";
 import Hidden from "@material-ui/core/Hidden";
 import { useEffect, useState } from "react";
+import { FeedInfo } from "../constants/types";
+import { Lang, LangMap } from "../constants/langs";
 
 const useStyles = makeStyles({
   card: {
     display: "flex",
-    padding: '0px 10px !important'
+    padding: 0
   },
   cardContent: {
-    padding: '0px !important'
+    padding: 20
   },
   cardDetails: {
     flex: 1,
@@ -25,6 +27,7 @@ const useStyles = makeStyles({
     width: 200,
   },
   title: {
+    fontSize: 20,
     fontFamily: "Lato, Yu Gothic Medium, Segoe UI"
   },
   text: {
@@ -40,29 +43,16 @@ const useStyles = makeStyles({
   }
 });
 
-const LangMap : {
-  [key: string]: string;
-} = {
-  EN: 'English',
-  JA: '日本語',
-  zhCN: '简中',
-  zhTW: '繁中'
+type Props = {
+  name: string;
+  feed: FeedInfo;
+  locale: string;
 }
 
-type LangMap = typeof LangMap[keyof typeof LangMap];
-
-const FeedLink = ({ name, locale }: { name: string; locale: string; }) => {
+const FeedLink = ({ name, feed, locale }: Props) => {
   const classes = useStyles();
   const [cover, setCover] = useState('');
 
-  const feedInfo = {
-    date: name.split('-')[0].replace(/_/g, '-'),
-    partner: name.split('-')[1].replace(/_/g, '-'),
-    title: name.split('-')[2].replace(/_/g, ' ').replace(/\[/g, '【').replace(/\]/g, '】').replace(/\</g, '(').replace(/\>/g, ')'),
-    lang: name.split('-')[3],
-    authors: name.split('-').slice(4).map(author => author.replace(/_/g, ' ').replace(/\</g, '(').replace(/\>/g, ')'))
-  };
-
   useEffect(() => {
     var coverImg;
     try {
@@ -93,14 +83,15 @@ const FeedLink = ({ name, locale }: { name: string; locale: string; }) => {
             <div className={classes.cardDetails}>
               <CardContent className={classes.cardContent}>
                 <h3 className={classes.title}>
-                  {feedInfo.title}
+                  {feed.title}
                 </h3>
+                <br />
                 <p className={classes.text}>
-                  <b>{feedInfo.partner}</b> {feedInfo.authors.map((author, i) => i === 0 ? author :  ' & ' + author)}
+                  <b>{feed.partner}</b> {feed.authors.map((author, i) => i === 0 ? author :  ' & ' + author)}
                 </p>
                 <p className={classes.text}>
-                  {feedInfo.date}
-                  <span className={classes.lang}>{LangMap[feedInfo.lang]}</span>
+                  {feed.date}
+                  <span className={classes.lang}>{LangMap[feed.lang as Lang]}</span>
                 </p>
               </CardContent>
             </div>

feeds/constants/langs.ts

@@ -0,0 +1,17 @@
+export enum Lang {
+  EN = "EN",
+  JA = "JA",
+  zhCN = "zhCN",
+  zhTW = "zhTW",
+  KR = "KR"
+};
+
+export const LangMap : {
+  [key in Lang]: string;
+} = {
+  EN: 'English',
+  JA: '日本語',
+  zhCN: '简中',
+  zhTW: '繁中',
+  KR: '한국어'
+};

feeds/constants/types.ts

@@ -0,0 +1,7 @@
+export type FeedInfo = {
+  date: string;
+  partner: string;
+  title: string;
+  lang: string;
+  authors: string[];
+};

feeds/pages/[lang]/[feed].tsx

@@ -67,13 +67,17 @@ const Feed = ({ feed, lang, filename, updatedAt }: Props) => {
         </div>
       }
 
+      <div className="mx-4 md:mx-20 my-4">      
+        <button className="w-[32px] h-[32px] rounded-full text-bold text-light-main border-2 border-light-main hover:text-white hover:bg-light-main" onClick={() => router.back()}>←</button>
+      </div>
+
       <div className="feedWrapper">
-        <h1 className='title'>{feedInfo.title}</h1>
+        <h1 className='text-3xl mb-8 title'>{feedInfo.title}</h1>
         <p className='info'>
           <b>{feedInfo.partner}</b> {feedInfo.authors.map((author, i) => i === 0 ? author :  ' & ' + author)}
         </p>
         <p className='info'>{feedInfo.date} (Last updated: {updatedAt})</p>
-        <hr />
+        <hr className="mb-8" />
         <div className='markdownWrapper'>
           <ReactMarkdown components={{ img: Img }} children={feed} />
         </div>

feeds/pages/[lang]/index.tsx

@@ -1,12 +1,14 @@
+import { useState } from 'react';
 import type { NextPage } from 'next'
 import Head from 'next/head'
-import styles from '../../styles/Home.module.css'
 import fs from "fs";
 import path from "path";
 import FeedLink from '../../components/FeedLink';
 import Grid from "@material-ui/core/Grid";
 import { useLocale } from '../../hooks/useLocale';
 import { languages } from '../../i18n.config';
+import { FeedInfo } from '../../constants/types';
+import { Lang, LangMap } from '../../constants/langs';
 
 interface StaticProps {
   params: { lang: string; }
@@ -19,29 +21,65 @@ interface HomeProps {
 
 const Home: NextPage<HomeProps> = ({ feedNames, lang }) => {
   const { locale, t } = useLocale(lang);
+  const [ filteredLang, setFilteredLang ] = useState("");
+
+  const feeds: FeedInfo[] = feedNames.map(name => ({
+    date: name.split('-')[0].replace(/_/g, '-'),
+    partner: name.split('-')[1].replace(/_/g, '-'),
+    title: name.split('-')[2].replace(/_/g, ' ').replace(/\[/g, '【').replace(/\]/g, '】').replace(/\</g, '(').replace(/\>/g, ')'),
+    lang: name.split('-')[3],
+    authors: name.split('-').slice(4).map(author => author.replace(/_/g, ' ').replace(/\</g, '(').replace(/\>/g, ')'))
+  }));
 
   return (
-    <div className={styles.container}>
+    <div className="px-4 sm:px-8 md:px-20 py-1">
       <Head>
         <title>WasedaTime - Feeds</title>
         <meta name="description" content="Welcome to WasedaTime Feeds! Here we offer you articles that may be helpful for your student life & future career." />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main className={styles.main}>
-        <h2 style={{ color: "#555" }}>{t.index.welcome}</h2>
-        <hr style={{ width: "50%", color: "#555" }} />
-        <div className={styles.description}>
-          <p>{t.index['top message']}</p>
-          <p>
-            {t.index['looking for more blogs']}
-            <a href="mailto:[email protected]" style={{ color: '#3366ff' }}>[email protected]</a>
-          </p>
+      <main className="flex flex-1 flex-col">
+        <div className="flex flex-col my-8 text-center">
+          <h2 className="text-3xl text-gray-600">{t.index.welcome}</h2>
+          <hr className="w-1/2 text-gray-600 my-4 mx-auto" />
+          <div className="text-center">
+            <p>{t.index['top message']}</p>
+            <p>
+              {t.index['looking for more blogs']}
+              <a href="mailto:[email protected]" style={{ color: '#3366ff' }}>[email protected]</a>
+            </p>
+          </div>
+        </div>
+
+        <div id="filterButtonGroup" className="mb-8 inline-flex rounded-md" role="group">
+          <button
+            type="button"
+            className={"py-2 px-2 md:px-4 text-sm font-medium border border-x-0 border-y-2 border-light-main border-l-2 rounded-l-lg " + (filteredLang === "" ? "bg-light-main text-white" : "text-light-main hover:bg-light-main hover:text-white")}
+            style={{ borderLeftWidth: 2 }}
+            onClick={() => setFilteredLang("")}
+          >
+            All
+          </button>
+          {
+            Object.values(Lang).map((lang, i) => (
+              <button
+                type="button"
+                className={"py-2 px-2 md:px-4 text-sm font-medium border border-x-0 border-y-2 border-light-main " + (i === Object.values(Lang).length - 1 ? "rounded-r-lg " : " ") + (lang.toString() === filteredLang ? "bg-light-main text-white dark:text-white dark:bg-dark-main" : "text-light-main hover:bg-light-main hover:text-white")}
+                style={i === Object.values(Lang).length - 1 ? { borderRightWidth: 2 } : {}}
+                onClick={() => setFilteredLang(lang)}
+              >
+                {LangMap[lang]}
+              </button>
+            ))
+          }
         </div>
 
         <Grid container spacing={4}>
           {
-            feedNames.map((name, i) => <FeedLink key={'feed_link' + i} name={name} locale={locale || 'en'} />)
+            feeds.filter(feed => !filteredLang || feed.lang === filteredLang).map((feed, i) => (
+              <FeedLink key={'feed_link' + i} name={feedNames[i]} feed={feed} locale={locale || 'en'} />
+            ))
           }
         </Grid>
       </main>

feeds/styles/feed.css

@@ -30,7 +30,7 @@
 
 .feedWrapper {
   padding: 0px 20vw;
-  padding-top: 70px;
+  padding-top: 0px;
 }
 
 .feedWrapper .title {
@@ -114,7 +114,7 @@
 @media (max-width: 768px) {
   .feedWrapper {
     padding: 0px 5vw;
-    padding-top: 70px;
+    padding-top: 0px;
   }
 
   .feedWrapper .markdownWrapper p {

feeds/styles/globals.css

@@ -1,6 +1,6 @@
-/* @tailwind base;
+@tailwind base;
 @tailwind components;
-@tailwind utilities; */
+@tailwind utilities;
 
 @font-face {
   font-family: "Segoe UI";
@@ -38,3 +38,7 @@ a {
 * {
   box-sizing: border-box;
 }
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: Lato, Yu Gothic Medium, Segoe UI;
+}