feat: cocktail

Author: YuyingWu

content/posts/chess-and-healthy-pot.md

@@ -1,8 +1,9 @@
 ---
 title: 象棋和养生锅更配噢 - 19.10.13
-categories: [life]
+categories: [life, foodie]
 tags: [life]
 date: 2019-12-21 22:50:27
+cover: https://static.wuyuying.com/5F783151-ED9D-483C-B2E2-80653034631E.jpeg
 ---
 
 下午和小青、小十一下象棋，我和十一水平相当，对决了很久。小青比较犀利，在我没察觉的情况下，直接将军，太难了 😭

content/posts/meal-20191013.md

@@ -1,8 +1,9 @@
 ---
 title: 蘑菇肉酱 - 19.10.13
-categories: [life]
+categories: [life,foodie]
 tags: [cooking]
 date: 2019-10-13 18:32:27
+cover: https://static.wuyuying.com/mushroom-source-1.jpg
 ---
 
 我的第一道蘑菇肉酱，拌面超好吃~

content/posts/meal-20191122.md

@@ -1,8 +1,9 @@
 ---
 title: 家常烤五花肉 - 19.11.22
-categories: [life]
+categories: [life,foodie]
 tags: [cooking]
 date: 2019-11-22 22:32:27
+cover: https://static.wuyuying.com/884D7280-B547-4BEC-B1C8-724DE1CA7315.jpeg
 ---
 
 在家烤肉幸福感特强，就是在客厅搞，油烟比较大。

content/posts/meal-20191124.md

@@ -1,8 +1,9 @@
 ---
 title: 冬日烤盘 - 19.11.24
-categories: [life]
+categories: [life, foodie]
 tags: [cooking]
 date: 2019-11-24 13:32:27
+cover: https://static.wuyuying.com/life/IMG_20191123_134411-01.jpg
 ---
 
 上周末做了个冬日烤盘，超好吃～

content/posts/meal-20191201.md

@@ -1,8 +1,9 @@
 ---
 title: 十二月的冬日火锅 - 19.12.01
-categories: [life]
+categories: [life, foodie]
 tags: [cooking]
 date: 2019-12-01 13:32:27
+cover: https://static.wuyuying.com/wucanrou.jpeg
 ---
 
 饿不饿呀，煮个餐蛋面给你吃～

content/posts/meal-20191208.md

@@ -1,8 +1,9 @@
 ---
 title: 十二月的冬日烤盘 - 大虾、茄子
-categories: [life]
+categories: [life, foodie]
 tags: [cooking]
 date: 2019-12-08 22:39:27
+cover: https://static.wuyuying.com/10491B2F-5839-47F2-B3EA-0897871039E0.jpeg
 ---
 
 浮夸的蔬菜+大虾烤盘～ 这次的酱料很棒，可能是柠檬汁多了一些，大虾外壳的酱料的一点柠檬酸，简直完美 👍

content/posts/meals-2020.md

@@ -1,9 +1,10 @@
 ---
 title: 2020年做的那些菜
-categories: [life]
+categories: [life, foodie]
 tags: [cooking]
 date: 2020-09-20 12:46:27
 createDate: 2020-07-18 11:17:27
+cover: https://static.wuyuying.com/meal-2020/0918.jpg
 ---
 
 下半年开始过上了要和室友一起做早餐、做正餐的生活……WHAT!? 以前都是不用做饭的么？真的，我以前都可以抱大厨大腿，要么点外卖，要么出去吃，不……用……做 Orz

src/components/cocktail-card/index.jsx

@@ -5,15 +5,17 @@ import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader';
 import CardMedia from '@material-ui/core/CardMedia';
 import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import Collapse from '@material-ui/core/Collapse';
-// import Avatar from '@material-ui/core/Avatar';
-import IconButton from '@material-ui/core/IconButton';
+// import CardActions from '@material-ui/core/CardActions';
+// import Collapse from '@material-ui/core/Collapse';
+import Avatar from '@material-ui/core/Avatar';
+// import IconButton from '@material-ui/core/IconButton';
 import Typography from '@material-ui/core/Typography';
-import { red } from '@material-ui/core/colors';
-import FavoriteIcon from '@material-ui/icons/Favorite';
+// import { red } from '@material-ui/core/colors';
+// import FavoriteIcon from '@material-ui/icons/Favorite';
 // import ShareIcon from '@material-ui/icons/Share';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+// import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+// import { MDXRenderer } from "gatsby-plugin-mdx"
+import moment from 'moment'
 // import MoreVertIcon from '@material-ui/icons/MoreVert';
 
 const useStyles = makeStyles((theme) => ({
@@ -34,12 +36,24 @@ const useStyles = makeStyles((theme) => ({
   expandOpen: {
     transform: 'rotate(180deg)',
   },
-  avatar: {
-    backgroundColor: red[500],
+  excerpt: {
+    height: 140,
   },
+  title: {
+    color: '#333',
+    textDecoration: 'none',
+  }
 }));
 
-export default function RecipeReviewCard() {
+export default function RecipeReviewCard({
+  slug,
+  title,
+  body,
+  cover,
+  // tags,
+  date,
+  excerpt,
+}) {
   const classes = useStyles();
   const [expanded, setExpanded] = React.useState(false);
 
@@ -51,32 +65,30 @@ export default function RecipeReviewCard() {
     <Card className={classes.root}>
       <CardHeader
         avatar={
-          <div aria-label="recipe" className={classes.avatar}>
-            R
+          <div aria-label="recipe">
+            <Avatar alt="Yuying Wu" src="https://wuyuying.com/static/d07198b678ca849341724d014eb9a47e/eee8e/avatar.jpg" />
           </div>
         }
         action={null}
-        title="Shrimp and Chorizo Paella"
-        subheader="September 14, 2016"
+        title={<a href={`https://wuyuying.com/${slug}`} target="_blank" className={classes.title}>{title}</a>}
+        subheader={moment(date).format('YY/MM/DD')}
       />
       <CardMedia
         className={classes.media}
-        image="https://material-ui.com/static/images/cards/paella.jpg"
-        title="Paella dish"
+        image={cover || 'https://material-ui.com/static/images/cards/paella.jpg'}
+        title={title}
       />
       <CardContent>
-        <Typography variant="body2" color="textSecondary" component="p">
-          This impressive paella is a perfect party dish and a fun meal to cook together with your
-          guests. Add 1 cup of frozen peas along with the mussels, if you like.
+        <Typography variant="body2" color="textSecondary" component="p" className={classes.excerpt}>{ excerpt }
         </Typography>
       </CardContent>
-      <CardActions disableSpacing>
+      {/* <CardActions disableSpacing>
         <IconButton aria-label="add to favorites">
           <FavoriteIcon />
         </IconButton>
-        {/* <IconButton aria-label="share">
+        <IconButton aria-label="share">
           <ShareIcon />
-        </IconButton> */}
+        </IconButton>
         <IconButton
           className={classes.expand}
           onClick={handleExpandClick}
@@ -85,34 +97,14 @@ export default function RecipeReviewCard() {
         >
           <ExpandMoreIcon />
         </IconButton>
-      </CardActions>
-      <Collapse in={expanded} timeout="auto" unmountOnExit>
+      </CardActions> */}
+      {/* <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography paragraph>Method:</Typography>
-          <Typography paragraph>
-            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
-            minutes.
-          </Typography>
-          <Typography paragraph>
-            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
-            heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
-            browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
-            and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
-            pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
-            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
-          </Typography>
-          <Typography paragraph>
-            Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
-            without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
-            medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
-            again without stirring, until mussels have opened and rice is just tender, 5 to 7
-            minutes more. (Discard any mussels that don’t open.)
-          </Typography>
-          <Typography>
-            Set aside off of the heat to let rest for 10 minutes, and then serve.
+          <Typography variant="caption" color="textSecondary" component="p">
+            <MDXRenderer>{body}</MDXRenderer>
           </Typography>
         </CardContent>
-      </Collapse>
+      </Collapse> */}
     </Card>
   );
 }

src/pages/cocktail.js

@@ -4,9 +4,11 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
 import Hidden from '@material-ui/core/Hidden';
+import { graphql } from "gatsby";
+import Typography from '@material-ui/core/Typography';
 import CocktailCard from '../components/cocktail-card';
 
-const HEADER_HEIGHT = '40vh';
+const HEADER_HEIGHT = '20vh';
 const styles = {
   root: {
     backgroundColor: '#E2DDCC',
@@ -19,7 +21,7 @@ const styles = {
   headerContainer: {
     height: HEADER_HEIGHT,
     backgroundColor: '#000',
-    // fontSize: 30,
+    marginBottom: 16,
   },
   header: {
     display: 'flex',
@@ -33,50 +35,96 @@ const styles = {
     width: 120,
     height: 120,
   },
+  logoSmall: {
+    display: 'inline-block',
+    width: 100,
+    height: 100,
+  },
   headerTitle: {
     textAlign: 'left',
     color: '#C93801',
     // lineHeight: HEADER_HEIGHT,
     margin: 0,
+    fontSize: 60,
+  },
+  headerTitleSmall: {
+    color: '#C93801',
+    lineHeight: 1,
+    fontSize: 24,
+  },
+  footer: {
+    backgroundColor: '#000',
+    padding: '20px 0',
+    textAlign: 'center',
+    color: '#fff',
+    marginTop: '16px',
   }
 };
 
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+  }
+
   render() {
-    const { classes } = this.props;
+    const { classes, data } = this.props;
+    const { allMdx: { edges: list = [] } = {} } = data;
 
     return (
       <div className={classes.root}>
         <CssBaseline />
         <header className={classes.headerContainer}>
           <Container maxWidth="md" className={classes.header}>
-            <img className={classes.logo} src="https://static.wuyuying.com/cocktail-logo.png" />
-            <Hidden xsUp>
+            <Hidden only={['sm', 'xs']}>
+              <img className={classes.logo} src="https://static.wuyuying.com/cocktail-logo.png" />
               <h1 className={classes.headerTitle}>Home Bar Cocktail</h1>
             </Hidden>
+            <Hidden only={['md', 'lg', 'xl']}>
+              <img className={classes.logoSmall} src="https://static.wuyuying.com/cocktail-logo.png" />
+              <h1 className={classes.headerTitleSmall}>Home Bar Cocktail</h1>
+            </Hidden>
           </Container>
         </header>
 
         <Container maxWidth="lg">
           <Grid container spacing={2}>
-            <Grid item lg={3} md={4} sm={6} xs={12}>
-              <CocktailCard />
-            </Grid>
-            <Grid item lg={3} md={4} sm={6} xs={12}>
-              <CocktailCard />
-            </Grid>
-            <Grid item lg={3} md={4} sm={6} xs={12}>
-              <CocktailCard />
-            </Grid>
-            <Grid item lg={3} md={4} sm={6} xs={12}>
-              <CocktailCard />
-            </Grid>
+            { list.map(card => (
+              <Grid item lg={3} md={4} sm={6} xs={12} key={card.node.slug}>
+                <CocktailCard body={card.node.body} excerpt={card.node.excerpt} slug={card.node.slug} {...card.node.frontmatter} />
+              </Grid>
+            ))}
           </Grid>
         </Container>
+
+        <footer>
+          <Typography variant="body2" color="textSecondary" component="p" className={classes.footer}>Power by <a href="https://wuyuying.com/" target="_blank" style={{ color: '#fff' }}>wuyuying.com.</a>
+        </Typography>
+        </footer>
       </div>
     )
   }
 }
 
-export default withStyles(styles)(App);
+export default withStyles(styles)(App);
+
+export const pageQuery = graphql`
+  {
+    allMdx(filter: {frontmatter: {categories: {in: "foodie"}}}) {
+      edges {
+        node {
+          frontmatter {
+            title
+            categories
+            cover
+            tags
+            date
+          }
+          excerpt(truncate: true)
+          slug
+          body
+        }
+      }
+    }
+  }
+`;