gatsby-plugin-svgr implemented

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react", "stage-0"]
+}

content/meta/config.js

@@ -9,7 +9,6 @@ module.exports = {
   siteImage: "preview.jpg",
   siteLanguage: "en",
   siteDescription: "PersonalBlog is a GatsbyJs starter.",
-  contactEmail: "hello@example.com",
   // author
   authorName: "greg lobinski",
   // manifest.json
@@ -18,9 +17,11 @@ module.exports = {
   manifestStartUrl: "/",
   manifestBackgroundColor: colors.bg,
   manifestThemeColor: colors.bg,
-  manifestDisplay: "standalone"
-  // algoliaAppID: process.env.ALGOLIA_APP_ID,
-  // algoliaAdminApiKey: process.env.ALGOLIA_SEARCH_ONLY_API_KEY,
-  // algoliaSearchOnlyApiKey: process.env.ALGOLIA_ADMIN_API_KEY,
-  // algoliaIndexName: process.env.ALGOLIA_INDEX_NAME
+  manifestDisplay: "standalone",
+  // social
+  authorSocialLinks: [
+    { name: "github", url: "https://github.com/greglobinski" },
+    { name: "twitter", url: "https://twitter.com/greglobinski" },
+    { name: "facebook", url: "http://facebook.com/greglobinski" }
+  ]
 };

content/parts/info.md

@@ -6,5 +6,4 @@ boxTitle: "greg lobinski"
 boxTitleNote: "personal blog"
 ---
 
-a wealthy man and the owner of a luxurious mansion where extravagant parties are often hosted
-
+I am a front-end web developer. I used to be a web designer also, but now I concentrate on the code.

gatsby-config.js

@@ -206,6 +206,12 @@ module.exports = {
     },
     {
       resolve: `gatsby-plugin-sitemap`
+    },
+    {
+      resolve: "gatsby-plugin-svgr",
+      options: {
+        dir: `${__dirname}/src/images/svg/`
+      }
     }
   ]
 };

gatsby-node.js

@@ -84,7 +84,7 @@ exports.modifyWebpackConfig = ({ config, stage }) => {
             name: `commons`,
             chunks: [`app`, ...components],
             minChunks: (module, count) => {
-              const vendorModuleList = [`material-ui`, `lodash`];
+              const vendorModuleList = []; //[`material-ui`, `lodash`];
               const isFramework = _.some(
                 vendorModuleList.map(vendor => {
                   const regex = new RegExp(`[\\\\/]node_modules[\\\\/]${vendor}[\\\\/].*`, `i`);

package.json

@@ -37,7 +37,6 @@
     "babel-eslint": "^8.2.1",
     "babel-plugin-dynamic-import-webpack": "^1.0.2",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
-    "desvg-loader": "^0.1.0",
     "dotenv": "^5.0.0",
     "eslint": "^4.17.0",
     "eslint-config-google": "^0.9.1",
@@ -47,9 +46,9 @@
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-prettier": "^2.5.0",
     "eslint-plugin-react": "^7.6.1",
+    "gatsby-plugin-svgr": "^0.2.1",
     "prettier": "^1.10.2",
     "sharp-cli": "^1.6.0",
-    "svg-loader": "^0.0.2",
     "webpack-bundle-analyzer": "^2.10.0"
   },
   "dependencies": {

src/components/Navigator/BottomBar.js → src/components/BottomBar/BottomBar.js

@@ -7,10 +7,22 @@ const styles = theme => ({
     position: "absolute",
     left: 0,
     height: "60px",
-    borderTop: "1px solid #666",
     bottom: 0,
     width: "100%",
-    background: "#fff"
+    background: "#fff",
+    zIndex: 10,
+    "&::before": {
+      content: `""`,
+      position: "absolute",
+      top: 0,
+      left: "20px",
+      right: "20px",
+      height: "1px",
+      borderTop: `1px solid ${theme.main.colors.lines}`
+    },
+    [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+      width: `${theme.info.sizes.width}px`
+    }
   }
 });
 

src/components/BottomBar/index.js

@@ -0,0 +1 @@
+export { default } from "./BottomBar";

src/components/Info/DesktopMenu.js

@@ -0,0 +1,84 @@
+import React from "react";
+import PropTypes from "prop-types";
+import injectSheet from "react-jss";
+import Link from "gatsby-link";
+
+const styles = theme => ({
+  desktopMenu: {
+    display: "none",
+    [`@media (min-width: ${theme.mediaQueryTresholds.L}px)`]: {
+      willChange: "opacity",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      listStyle: "none",
+      margin: 0,
+      width: "100%",
+      transition: "opacity .5s",
+      transitionDelay: ".7s",
+      opacity: 1,
+      position: "relative",
+      transitionTimingFunction: "ease",
+      ".navigatorInTransitionFrom &": {
+        opacity: 1
+      },
+      ".navigatorInTransitionTo &, .navigatorIsAside &": {
+        transitionDelay: "0s",
+        transition: "opacity .3s",
+        opacity: 0
+      }
+    }
+  },
+  link: {
+    padding: ".5em",
+    fontWeight: 300,
+    color: theme.info.colors.menuLink,
+    "&:hover": {
+      color: theme.info.colors.menuLinkHover
+    }
+  }
+});
+
+const DesktopMenu = props => {
+  const { classes, pages, linkOnClick } = props;
+
+  return (
+    <nav className={classes.desktopMenu}>
+      {pages.map((page, i) => {
+        const { fields, frontmatter } = page.node;
+        return (
+          <Link key={fields.slug} to={fields.slug} onClick={linkOnClick} className={classes.link}>
+            {frontmatter.menuTitle ? frontmatter.menuTitle : frontmatter.title}
+          </Link>
+        );
+      })}
+      <Link to="/search/" onClick={linkOnClick} className={classes.link}>
+        Search
+      </Link>
+      <Link to="/contact/" onClick={linkOnClick} className={classes.link}>
+        Contact
+      </Link>
+    </nav>
+  );
+};
+
+DesktopMenu.propTypes = {
+  pages: PropTypes.array.isRequired,
+  classes: PropTypes.object.isRequired,
+  linkOnClick: PropTypes.func.isRequired
+};
+
+export default injectSheet(styles)(DesktopMenu);
+
+// {pages.map((page, i) => (
+
+//   onClick={this.linkOnClick}
+//   href={page.node.fields.slug}
+//   classes={{
+//     root: classes.buttonRoot,
+//     label: classes.buttonLabel
+//   }}
+// >
+//   {page.node.frontmatter.title}
+
+// ))}