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 ( 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 1546c95..154ce82 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -7,16 +7,15 @@ import { 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"; @@ -34,10 +33,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 ( @@ -96,10 +99,11 @@ const NotesList = () => { width: 250, minHeight: "100vh", height: "100%", - backgroundColor: "#F3F3F7", + // backgroundColor: "#F3F3F7",0 }} + className={classes.bg} > - + {Object.keys(assortedPosts).map((key) => ( <> handleClick(key)}> @@ -199,6 +203,10 @@ function Header(props) { {props.siteTitle} + props.themeChange()} + /> {}; const Layout = ({ children }) => { - const data = useStaticQuery(graphql` - query SiteTitleQuery { - site { - siteMetadata { - title - } - } - } - `) - - return ( -
-
-
-
{children}
- {/*
+ 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 ( + + +
+
+ +
+
{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/templates/blog-post.js b/src/templates/blog-post.js index 4fee175..01f9b5d 100644 --- a/src/templates/blog-post.js +++ b/src/templates/blog-post.js @@ -1,6 +1,7 @@ import React from "react"; import Helmet from "react-helmet"; import Layout from "../components/layout"; +import { graphql } from "gatsby"; require(`katex/dist/katex.min.css`); export default function Template({ data }) { diff --git a/src/templates/home.js b/src/templates/home.js index 22fd13a..6db1363 100644 --- a/src/templates/home.js +++ b/src/templates/home.js @@ -1,179 +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 => style) + 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`