From 3af3a4b6ff3e7f1617fb681d00285f085921b73d Mon Sep 17 00:00:00 2001 From: Shrey A Date: Sat, 18 Jul 2020 22:16:30 -0700 Subject: [PATCH 1/6] started styling pages [skip ci] need to figure out markdown styling persisting darkmode across links/pageloads potentially use localstorage --- src/components/DarkContext.js | 0 src/components/header.js | 7 +++- src/components/layout.css | 7 +++- src/components/layout.js | 68 +++++++++++++++++++++++++++-------- src/pages/classes/cs61a | 2 +- src/pages/index.js | 57 ++++++++++++++--------------- src/templates/blog-post.js | 35 ++++++++++++++---- 7 files changed, 123 insertions(+), 53 deletions(-) create mode 100644 src/components/DarkContext.js diff --git a/src/components/DarkContext.js b/src/components/DarkContext.js new file mode 100644 index 0000000..e69de29 diff --git a/src/components/header.js b/src/components/header.js index 527c5fd..e23d2b9 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -17,6 +17,7 @@ import { Divider, ListItemText, Collapse, + Switch, } from "@material-ui/core" import { ExpandLess, ExpandMore } from "@material-ui/icons" import MenuIcon from "@material-ui/icons/Menu" @@ -92,7 +93,7 @@ const NotesList = () => { } const [expand, setExpand] = React.useState({}) return ( -
+
{Object.keys(assortedPosts).map(key => ( <> @@ -193,6 +194,10 @@ function Header(props) { {props.siteTitle} + props.themeChange()} + /> ({ + bg: { + backgroundColor: theme.palette.background.default, + }, +})) const Layout = ({ children }) => { const data = useStaticQuery(graphql` @@ -22,26 +33,53 @@ const Layout = ({ children }) => { } } `) + const [darkState, setDarkState] = React.useState(false) + const palletType = darkState ? "dark" : "light" + // const mainPrimaryColor = darkState ? orange[500] : lightBlue[500] + // const mainSecondaryColor = darkState ? deepOrange[900] : deepPurple[500] + const darkTheme = createMuiTheme({ + palette: { + type: palletType, + }, + }) + const handleThemeChange = async () => { + console.log("hello") + setDarkState(!darkState) + } + const classes = useStyles() return ( -
-
-
-
{children}
- {/*
+ + +
+
+
+
{children}
+ {/*
© {new Date().getFullYear()}, Built with {` `} Gatsby
*/} -
-
+
+
+ + ) } diff --git a/src/pages/classes/cs61a b/src/pages/classes/cs61a index 92f26c9..a3942e0 160000 --- a/src/pages/classes/cs61a +++ b/src/pages/classes/cs61a @@ -1 +1 @@ -Subproject commit 92f26c9481ddda8479b8db722ef6aa0d095b6077 +Subproject commit a3942e03cef718fa22948148b5dd139d66225f87 diff --git a/src/pages/index.js b/src/pages/index.js index a7996b6..4775790 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -20,7 +20,7 @@ const style = { minWidth: 300, maxHeight: 375, borderRadius: 8, - backgroundColor: "#F3F3F7", + // backgroundColor: "#F3F3F7", }, gridRoot: { justifyContent: "center", @@ -29,7 +29,20 @@ const style = { }, } -const useStyles = makeStyles(theme => style) +const useStyles = makeStyles(theme => ({ + card: { + maxWidth: 350, + minWidth: 300, + maxHeight: 375, + borderRadius: 8, + // backgroundColor: "#F3F3F7", + }, + gridRoot: { + justifyContent: "center", + alignItems: "center", + // textAlign: "center", + }, +})) export default function Index({ data }) { const classes = useStyles() @@ -66,6 +79,7 @@ export default function Index({ data }) { <> {outerKey.toUpperCase()} @@ -81,14 +95,7 @@ export default function Index({ data }) { padding: 0, }} > - + {key.charAt(0).toUpperCase() + key.substring(1)} ( - + - - {post.frontmatter.title} - + {post.frontmatter.title} {post.frontmatter.date} - - - Section {post.frontmatter.path} - - + + Section {post.frontmatter.path} + diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index 0837591..9207c1a 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -1,8 +1,18 @@ import React from "react" import Helmet from "react-helmet" import Layout from "../components/layout" +import { makeStyles, Typography } from "@material-ui/core" +import CssBaseline from "@material-ui/core/CssBaseline" +// import MDXRenderer from "gatsby-mdx" +const useStyles = makeStyles(theme => ({ + text: { + color: theme.palette.text.primary, + }, +})) + export default function Template({ data }) { const post = data.markdownRemark + const classes = useStyles() return (
@@ -11,13 +21,24 @@ export default function Template({ data }) { style={{ maxWidth: 1000, margin: "auto" }} > -
-
Current section: {post.frontmatter.path}
-

{post.frontmatter.title}

-
+
+ + Current section: {post.frontmatter.path} + + + {post.frontmatter.title} + + + +
From 89635c5219018a1d6443f6b049b21f90c101b494 Mon Sep 17 00:00:00 2001 From: Shrey A Date: Fri, 9 Oct 2020 11:25:57 -0700 Subject: [PATCH 2/6] format file to fix merge conflict --- src/components/header.js | 452 +++++++++++++++++++-------------------- 1 file changed, 226 insertions(+), 226 deletions(-) diff --git a/src/components/header.js b/src/components/header.js index e23d2b9..0d3c355 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,242 +1,242 @@ -import { Link } from "gatsby" -import PropTypes from "prop-types" -import React from "react" -import { useStaticQuery, graphql } from "gatsby" +import { Link } from "gatsby"; +import PropTypes from "prop-types"; +import React from "react"; +import { useStaticQuery, graphql } from "gatsby"; import { - AppBar, - Toolbar, - IconButton, - Typography, - Button, - makeStyles, - useScrollTrigger, - Slide, - List, - ListItem, - SwipeableDrawer, - Divider, - ListItemText, - Collapse, - Switch, -} from "@material-ui/core" -import { ExpandLess, ExpandMore } from "@material-ui/icons" -import MenuIcon from "@material-ui/icons/Menu" + AppBar, + Toolbar, + IconButton, + Typography, + Button, + makeStyles, + useScrollTrigger, + Slide, + List, + ListItem, + SwipeableDrawer, + Divider, + ListItemText, + Collapse, + Switch, +} from "@material-ui/core"; +import { ExpandLess, ExpandMore } from "@material-ui/icons"; +import MenuIcon from "@material-ui/icons/Menu"; -const useStyles = makeStyles(theme => ({ - menuButton: { - marginRight: theme.spacing(2), - }, - title: { - flexGrow: 1, - }, - nested1: { - paddingLeft: theme.spacing(4), - }, - nested2: { - paddingLeft: theme.spacing(6), - }, -})) +const useStyles = makeStyles((theme) => ({ + menuButton: { + marginRight: theme.spacing(2), + }, + title: { + flexGrow: 1, + }, + nested1: { + paddingLeft: theme.spacing(4), + }, + nested2: { + paddingLeft: theme.spacing(6), + }, +})); function SlideHeader(props) { - const { window, children } = props - const trigger = useScrollTrigger() - return ( - - {children} - - ) + const { window, children } = props; + const trigger = useScrollTrigger(); + return ( + + {children} + + ); } const NotesList = () => { - const classes = useStyles() - const data = useStaticQuery(pageQuery) - const [assortedPosts, setPosts] = React.useState({}) - const { edges: posts } = data.allMarkdownRemark - React.useEffect(() => { - var data = {} - const temp = posts.filter( - post => - post.node.frontmatter.path != null && - post.node.frontmatter.date != null && - post.node.frontmatter.title != null && - post.node.frontmatter.path.length > 0 - ) - temp.map(({ node: post }) => { - var cut = post.frontmatter.path.split("/") - cut = cut.slice(1) - if (cut.length >= 2) { - if (!data.hasOwnProperty(cut[0])) { - data[cut[0]] = {} - } - if (!data[cut[0]].hasOwnProperty(cut[1])) { - data[cut[0]][cut[1]] = [] - } - data[cut[0]][cut[1]].push(post) - } - }) - setPosts(data) - var expand = {} - for (var x in data) { - expand[x] = false - for (var y in data[x]) { - expand[`${x}_${y}`] = false - } - } - setExpand(expand) - }, []) - const handleClick = input => { - console.log(input, expand[input]) - if (!expand.hasOwnProperty(input)) { - setExpand({ ...expand, [input]: true }) - } else { - setExpand({ ...expand, [input]: !expand[input] }) - } - } - const [expand, setExpand] = React.useState({}) - return ( -
- - {Object.keys(assortedPosts).map(key => ( - <> - handleClick(key)}> - {key.toUpperCase()} - {expand[key] ? : } - - - - {Object.keys(assortedPosts[key]).map(typeKey => ( - <> - handleClick(`${key}_${typeKey}`)} - > - - {typeKey.charAt(0).toUpperCase() + typeKey.substring(1)} - - {expand[`${key}_${typeKey}`] ? ( - - ) : ( - - )} - - - - {assortedPosts[key][typeKey].map(post => ( - - - {post.frontmatter.title} - - - ))} - - - - ))} - - - - ))} - -
- ) -} + const classes = useStyles(); + const data = useStaticQuery(pageQuery); + const [assortedPosts, setPosts] = React.useState({}); + const { edges: posts } = data.allMarkdownRemark; + React.useEffect(() => { + var data = {}; + const temp = posts.filter( + (post) => + post.node.frontmatter.path != null && + post.node.frontmatter.date != null && + post.node.frontmatter.title != null && + post.node.frontmatter.path.length > 0 + ); + temp.map(({ node: post }) => { + var cut = post.frontmatter.path.split("/"); + cut = cut.slice(1); + if (cut.length >= 2) { + if (!data.hasOwnProperty(cut[0])) { + data[cut[0]] = {}; + } + if (!data[cut[0]].hasOwnProperty(cut[1])) { + data[cut[0]][cut[1]] = []; + } + data[cut[0]][cut[1]].push(post); + } + }); + setPosts(data); + var expand = {}; + for (var x in data) { + expand[x] = false; + for (var y in data[x]) { + expand[`${x}_${y}`] = false; + } + } + setExpand(expand); + }, []); + const handleClick = (input) => { + console.log(input, expand[input]); + if (!expand.hasOwnProperty(input)) { + setExpand({ ...expand, [input]: true }); + } else { + setExpand({ ...expand, [input]: !expand[input] }); + } + }; + const [expand, setExpand] = React.useState({}); + return ( +
+ + {Object.keys(assortedPosts).map((key) => ( + <> + handleClick(key)}> + {key.toUpperCase()} + {expand[key] ? : } + + + + {Object.keys(assortedPosts[key]).map((typeKey) => ( + <> + handleClick(`${key}_${typeKey}`)} + > + + {typeKey.charAt(0).toUpperCase() + typeKey.substring(1)} + + {expand[`${key}_${typeKey}`] ? ( + + ) : ( + + )} + + + + {assortedPosts[key][typeKey].map((post) => ( + + + {post.frontmatter.title} + + + ))} + + + + ))} + + + + ))} + +
+ ); +}; function Header(props) { - const classes = useStyles() - const [open, setOpen] = React.useState(false) - const toggleDrawer = open => event => { - if ( - event && - event.type === "keydown" && - (event.key === "Tab" || event.key === "Shift") - ) { - return - } - setOpen(open) - } + const classes = useStyles(); + const [open, setOpen] = React.useState(false); + const toggleDrawer = (open) => (event) => { + if ( + event && + event.type === "keydown" && + (event.key === "Tab" || event.key === "Shift") + ) { + return; + } + setOpen(open); + }; - return ( - - - - - - - - - {props.siteTitle} - - - props.themeChange()} - /> - - - - - - - ) + return ( + + + + + + + + + {props.siteTitle} + + + props.themeChange()} + /> + + + + + + + ); } Header.propTypes = { - siteTitle: PropTypes.string, -} + siteTitle: PropTypes.string, +}; Header.defaultProps = { - siteTitle: ``, -} + siteTitle: ``, +}; -export default Header +export default Header; export const pageQuery = graphql` - query drawerQuery { - allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) { - edges { - node { - excerpt(pruneLength: 100) - html - id - frontmatter { - date(formatString: "MMMM DD, YYYY") - path - title - } - } - } - } - } -` + query drawerQuery { + allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) { + edges { + node { + excerpt(pruneLength: 100) + html + id + frontmatter { + date(formatString: "MMMM DD, YYYY") + path + title + } + } + } + } + } +`; From 70b8d9471606efd1078e0f3be9450ce3cffdaf7e Mon Sep 17 00:00:00 2001 From: Shrey A Date: Fri, 9 Oct 2020 13:39:55 -0700 Subject: [PATCH 3/6] remove small debug statements --- gatsby-node.js | 1 - 1 file changed, 1 deletion(-) diff --git a/gatsby-node.js b/gatsby-node.js index 9b50a31..6aa3e00 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -45,7 +45,6 @@ exports.createPages = ({ boundActionCreators, graphql }) => { if (result.errors) { return Promise.reject(result.errors); } - console.log(result); var ret = { data: { allMarkdownRemark: { edges: [] } } }; result.data.allMarkdownRemark.edges.forEach(({ node }) => { if ( From ec026f36ea81ba0fb8016904552a36501c7ff622 Mon Sep 17 00:00:00 2001 From: Shrey A Date: Fri, 9 Oct 2020 13:41:43 -0700 Subject: [PATCH 4/6] finish dark mode with caching --- src/components/header.js | 14 ++-- src/components/layout.js | 162 ++++++++++++++++++++----------------- src/components/scroll.css | 12 +++ src/templates/blog-post.js | 10 +-- 4 files changed, 111 insertions(+), 87 deletions(-) create mode 100644 src/components/scroll.css diff --git a/src/components/header.js b/src/components/header.js index 7ce6ad3..9e62dca 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,20 +1,19 @@ import { Link } from "gatsby"; import PropTypes from "prop-types"; import React from "react"; +import "./scroll.css"; import { useStaticQuery, graphql } from "gatsby"; import { AppBar, Toolbar, IconButton, Typography, - Button, makeStyles, useScrollTrigger, Slide, List, ListItem, SwipeableDrawer, - Divider, ListItemText, Collapse, Switch, @@ -35,10 +34,14 @@ const useStyles = makeStyles((theme) => ({ nested2: { paddingLeft: theme.spacing(6), }, + bg: { + backgroundColor: theme.palette.background.paper, + overflowX: "hidden", + }, })); function SlideHeader(props) { - const { window, children } = props; + const { children } = props; const trigger = useScrollTrigger(); return ( @@ -97,10 +100,11 @@ const NotesList = () => { width: 250, minHeight: "100vh", height: "100%", - backgroundColor: "#F3F3F7", + // backgroundColor: "#F3F3F7",0 }} + className={classes.bg} > - + {Object.keys(assortedPosts).map((key) => ( <> handleClick(key)}> diff --git a/src/components/layout.js b/src/components/layout.js index 224da66..d897608 100644 --- a/src/components/layout.js +++ b/src/components/layout.js @@ -5,86 +5,102 @@ * See: https://www.gatsbyjs.org/docs/use-static-query/ */ -import React from "react" -import PropTypes from "prop-types" -import { useStaticQuery, graphql } from "gatsby" -import CssBaseline from "@material-ui/core/CssBaseline" -import Header from "./header" -import "./layout.css" -import { - createMuiTheme, - ThemeProvider, - makeStyles, -} from "@material-ui/core/styles" -import { dark } from "@material-ui/core/styles/createPalette" -const useStyles = makeStyles(theme => ({ - bg: { - backgroundColor: theme.palette.background.default, - }, -})) +import React from "react"; +import PropTypes from "prop-types"; +import { useStaticQuery, graphql } from "gatsby"; +import CssBaseline from "@material-ui/core/CssBaseline"; +import Header from "./header"; +import "./layout.css"; +import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles"; +import { useMediaQuery } from "@material-ui/core"; + +console.warn = console.error = () => {}; const Layout = ({ children }) => { - const data = useStaticQuery(graphql` - query SiteTitleQuery { - site { - siteMetadata { - title - } - } - } - `) - const [darkState, setDarkState] = React.useState(false) - const palletType = darkState ? "dark" : "light" - // const mainPrimaryColor = darkState ? orange[500] : lightBlue[500] - // const mainSecondaryColor = darkState ? deepOrange[900] : deepPurple[500] - const darkTheme = createMuiTheme({ - palette: { - type: palletType, - }, - }) + const data = useStaticQuery(graphql` + query SiteTitleQuery { + site { + siteMetadata { + title + } + } + } + `); + + const systemDark = useMediaQuery("(prefers-color-scheme: dark)"); + React.useEffect(() => { + var theme = window.localStorage.getItem("theme"); + if (theme === null) { + setDarkState(systemDark); + } else { + theme = theme === "true"; + setDarkState(theme); + } + }, []); + + const [darkState, setDarkState] = React.useState(false); + // const palletType = darkState ? "dark" : "light"; + // const mainPrimaryColor = darkState ? orange[500] : lightBlue[500] + // const mainSecondaryColor = darkState ? deepOrange[900] : deepPurple[500] + const getTheme = (state) => { + return createMuiTheme({ + palette: { + type: state ? "dark" : "light", + // background: { paper: "#F3F3F7" }, + }, + }); + }; + const darkTheme = getTheme(darkState); + // createMuiTheme({ + // palette: { + + // type: darkState ? "dark" : "light", + + // }, + // }); + + const handleThemeChange = async () => { + window.localStorage.setItem("theme", !darkState); + setDarkState(!darkState); + }; + return ( + + +
+
- const handleThemeChange = async () => { - console.log("hello") - setDarkState(!darkState) - } - const classes = useStyles() - return ( - - -
-
-
-
{children}
- {/*
+
+
{children}
+ {/*
© {new Date().getFullYear()}, Built with {` `} Gatsby
*/} -
-
- - - ) -} +
+
+ + + ); +}; Layout.propTypes = { - children: PropTypes.node.isRequired, -} + children: PropTypes.node.isRequired, +}; -export default Layout +export default Layout; diff --git a/src/components/scroll.css b/src/components/scroll.css new file mode 100644 index 0000000..a47c92c --- /dev/null +++ b/src/components/scroll.css @@ -0,0 +1,12 @@ +::-webkit-scrollbar { + /* width: 5px; */ + /* background: grey; */ + /* scrollbar-color: red; */ + width: 0; + height: 0; +} + +html { + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* Internet Explorer 10+ */ +} diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index d008881..ec5c465 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -1,19 +1,11 @@ import React from "react"; import Helmet from "react-helmet"; import Layout from "../components/layout"; -import CssBaseline from "@material-ui/core/CssBaseline"; -import { makeStyles, Typography } from "@material-ui/core"; +import { makeStyles } from "@material-ui/core"; require(`katex/dist/katex.min.css`); -const useStyles = makeStyles((theme) => ({ - text: { - color: theme.palette.text.primary, - }, -})); - export default function Template({ data }) { const post = data.markdownRemark; - const classes = useStyles(); return (
From 83a4d6db8817eb935043ed5f200c7678ecaf69e8 Mon Sep 17 00:00:00 2001 From: Shrey A Date: Fri, 9 Oct 2020 13:41:54 -0700 Subject: [PATCH 5/6] reformat file and add keys --- src/templates/home.js | 336 +++++++++++++++++++++--------------------- 1 file changed, 164 insertions(+), 172 deletions(-) diff --git a/src/templates/home.js b/src/templates/home.js index f6b1fc2..6db1363 100644 --- a/src/templates/home.js +++ b/src/templates/home.js @@ -1,180 +1,172 @@ -import React from "react" -import { Link } from "gatsby" -import PropTypes from "prop-types" -import Helmet from "react-helmet" -import moment from "moment" +import React from "react"; +import { Link } from "gatsby"; +import moment from "moment"; import { - Typography, - Grid, - Link as MaterialLink, - makeStyles, - Card, - CardContent, - Paper, -} from "@material-ui/core" -import SEO from "../components/seo" -import Layout from "../components/layout" - -const style = { - card: { - maxWidth: 350, - minWidth: 300, - maxHeight: 375, - borderRadius: 8, - // backgroundColor: "#F3F3F7", - }, - gridRoot: { - justifyContent: "center", - alignItems: "center", - // textAlign: "center", - }, -} - -const useStyles = makeStyles(theme => ({ - card: { - maxWidth: 350, - minWidth: 300, - maxHeight: 375, - borderRadius: 8, - // backgroundColor: "#F3F3F7", - }, - gridRoot: { - justifyContent: "center", - alignItems: "center", - // textAlign: "center", - }, -})) + Typography, + Grid, + // Link as MaterialLink, + makeStyles, + Card, + CardContent, + // Paper, +} from "@material-ui/core"; +import SEO from "../components/seo"; +import Layout from "../components/layout"; +const useStyles = makeStyles((theme) => ({ + card: { + maxWidth: 350, + minWidth: 300, + maxHeight: 375, + borderRadius: 8, + }, + // backgroundColor: + // theme.palette.type === "light" + // ? "#F3F3F7" + // : "#FF0000", + // }, + gridRoot: { + justifyContent: "center", + alignItems: "center", + // textAlign: "center", + }, +})); export default function Index(props) { - const classes = useStyles() - const [assortedPosts, setPosts] = React.useState({}) - const { pageContext } = props - const { data } = pageContext - const { edges: posts } = data.allMarkdownRemark - React.useEffect(() => { - var vals = {} - // const temp = posts.filter( - // post => - // post.node.frontmatter.path != null && - // post.node.frontmatter.date != null && - // post.node.frontmatter.title != null && - // post.node.frontmatter.path.length > 0 - // ) - posts.map(post => { - var cut = post.frontmatter.path.split("/") - cut = cut.slice(1) - if (cut.length >= 2) { - if (!vals.hasOwnProperty(cut[0])) { - vals[cut[0]] = {} - } - if (!vals[cut[0]].hasOwnProperty(cut[1])) { - vals[cut[0]][cut[1]] = [] - } - vals[cut[0]][cut[1]].push(post) - } - }) - setPosts(vals) - }, []) + const classes = useStyles(); + const [assortedPosts, setPosts] = React.useState({}); + const { pageContext } = props; + const { data } = pageContext; + const { edges: posts } = data.allMarkdownRemark; + React.useEffect(() => { + var vals = {}; + // const temp = posts.filter( + // post => + // post.node.frontmatter.path != null && + // post.node.frontmatter.date != null && + // post.node.frontmatter.title != null && + // post.node.frontmatter.path.length > 0 + // ) + posts.map((post) => { + var cut = post.frontmatter.path.split("/"); + cut = cut.slice(1); + if (cut.length >= 2) { + if (!vals.hasOwnProperty(cut[0])) { + vals[cut[0]] = {}; + } + if (!vals[cut[0]].hasOwnProperty(cut[1])) { + vals[cut[0]][cut[1]] = []; + } + vals[cut[0]][cut[1]].push(post); + } + }); + setPosts(vals); + }, []); + + const generatePostsBox = (outerKey, postList) => { + const data = postList[outerKey]; - const generatePostsBox = (outerKey, postList) => { - const data = postList[outerKey] - return ( - <> - - {outerKey.toUpperCase()} - - {Object.keys(data).map(key => ( - - - {key.charAt(0).toUpperCase() + key.substring(1)} - - - {data[key].map(post => ( - - - - - - - {post.frontmatter.title} - - - {moment(post.frontmatter.date).format( - "MMMM DD, YYYY" - )} - - - - - Section {post.frontmatter.path} - - - - - {post.excerpt} - - - - - - - ))} - - - ))} - - ) - } + return ( + <> + + {outerKey.toUpperCase()} + + {Object.keys(data).map((key) => ( + + + {key.charAt(0).toUpperCase() + key.substring(1)} + + + {data[key].map((post) => ( + + + + + + + {post.frontmatter.title} + + + {moment(post.frontmatter.date).format( + "MMMM DD, YYYY" + )} + + + + + Section {post.frontmatter.path} + + + + + {post.excerpt} + + + + + + + ))} + + + ))} + + ); + }; - return ( - -
- -
- - {Object.keys(assortedPosts).map(key => { - return generatePostsBox(key, assortedPosts) - })} - -
-
- - ) + return ( + +
+ +
+ + {Object.keys(assortedPosts).map((key) => { + return generatePostsBox(key, assortedPosts); + })} + +
+
+ + ); } // export const pageQuery = graphql` From f4943b5e194d5ef4684fb67d16aa28dce0a38b8a Mon Sep 17 00:00:00 2001 From: Shrey A Date: Sat, 10 Oct 2020 13:49:09 -0700 Subject: [PATCH 6/6] fix scroll bar missing --- src/components/header.js | 1 - src/components/scroll.css | 12 ------------ src/templates/blog-post.js | 2 +- 3 files changed, 1 insertion(+), 14 deletions(-) delete mode 100644 src/components/scroll.css diff --git a/src/components/header.js b/src/components/header.js index 9e62dca..154ce82 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,7 +1,6 @@ import { Link } from "gatsby"; import PropTypes from "prop-types"; import React from "react"; -import "./scroll.css"; import { useStaticQuery, graphql } from "gatsby"; import { AppBar, diff --git a/src/components/scroll.css b/src/components/scroll.css deleted file mode 100644 index a47c92c..0000000 --- a/src/components/scroll.css +++ /dev/null @@ -1,12 +0,0 @@ -::-webkit-scrollbar { - /* width: 5px; */ - /* background: grey; */ - /* scrollbar-color: red; */ - width: 0; - height: 0; -} - -html { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer 10+ */ -} diff --git a/src/templates/blog-post.js b/src/templates/blog-post.js index ec5c465..01f9b5d 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -1,7 +1,7 @@ import React from "react"; import Helmet from "react-helmet"; import Layout from "../components/layout"; -import { makeStyles } from "@material-ui/core"; +import { graphql } from "gatsby"; require(`katex/dist/katex.min.css`); export default function Template({ data }) {