Merge pull request #36 from eyalroth/dev

Merge dev to master

Author: eyalroth

gatsby-browser.js

@@ -5,6 +5,9 @@ import littlefoot from 'littlefoot'
 import 'littlefoot/dist/littlefoot.css'
 import './src/assets/scss/_progress.scss'
 
+var sidebarState = "main"
+var lastUnderlineLink = null
+
 export const onServiceWorkerUpdateReady = () => {
     const answer = window.confirm(
       `This application has been updated. ` +
@@ -16,7 +19,12 @@ export const onServiceWorkerUpdateReady = () => {
     }
 }
 
-export function onRouteUpdate() {
+export function onRouteUpdate({ location }) {
+  addLittlefoot()
+  addSidebarCollapse(location)
+}
+
+function addLittlefoot() {
   const bt = `
     <button
         aria-controls="fncontent:<%= id %>"
@@ -31,4 +39,144 @@ export function onRouteUpdate() {
     </button>
   `
   littlefoot({buttonTemplate: bt})
+}
+
+function addSidebarCollapse(location) {
+
+  if (location.pathname == "/") {
+    sidebarState = "main"
+    lastUnderlineLink = null
+  }
+
+  if (document.getElementById("sidebar")) {
+    const menu = document.getElementById("sidebar__menu")
+    const menuButton = document.getElementById("sidebar__menu-button")
+    const menuLinks = document.getElementsByClassName("sidebar__menu-list-item-link")
+    const menuUnderline = document.getElementById("sidebar__menu-underline")
+
+    const contact = document.getElementById("sidebar__contact")
+    const contactButton = document.getElementById("sidebar__contact-button")
+
+    const profileImage = document.getElementById("sidebar__author-img")
+    const authorTitle = document.getElementById("sidebar__author-title")
+
+    setSidebarState(sidebarState)
+    setupUnderline(location)
+
+    menuButton.addEventListener("click", () => toggle("menu-button"))
+    contactButton.addEventListener("click", () => toggle("contact-button"))
+
+    function toggle(buttonClicked) {
+      if (buttonClicked == "menu-button") {
+        if (sidebarState == "menu") {
+          setSidebarState("main")
+        } else {
+          setSidebarState("menu")
+        }
+      } else if (buttonClicked == "contact-button") {
+          if (sidebarState == "contact") {
+            setSidebarState("main")
+          } else {
+            setSidebarState("contact")
+          }
+      }
+    }
+
+    function setSidebarState(state) {
+
+      sidebarState = state
+    
+      if (state == "main") {
+        enable(profileImage)
+        enable(authorTitle)
+        disable(menu)
+        disable(menuButton)
+        disable(contact)
+        disable(contactButton)
+      } else if (state == "menu") {
+        disable(profileImage)
+        disable(authorTitle)
+        enable(menu)
+        enable(menuButton)
+        disable(contact)
+        disable(contactButton)
+      } else if (state == "contact") {
+        enable(profileImage)
+        disable(authorTitle)
+        disable(menu)
+        disable(menuButton)
+        enable(contact)
+        enable(contactButton)
+      }
+    }
+
+    function setupUnderline(location) {
+
+      const lastLink = findMatchingLink(lastUnderlineLink)
+      const currentLink = findMatchingLink(location)
+
+      if (currentLink) {
+        if (lastLink) {
+          setUnderline(lastLink)
+          shiftUnderline({from: lastLink, to: currentLink})
+        } else {
+          if (menu.getBoundingClientRect().width > 0) {
+            setUnderline(currentLink)
+          } else {
+            menuButton.addEventListener('click', () => {
+              menu.addEventListener('transitionend', () => {
+                setUnderline(currentLink)
+              }, {once: true})
+            }, {once: true})
+          }
+        }
+        lastUnderlineLink = currentLink
+      } else {
+        lastUnderlineLink = null
+      }
+
+      function setUnderline(link) {
+        const { left, width } = link.getBoundingClientRect()
+        menuUnderline.style.left = `${left}px`
+        menuUnderline.style.width = `${width}px`
+      }
+      
+      function shiftUnderline({from, to}) {
+        const { left: fromX  } = from.getBoundingClientRect()
+        const { left: toX, width } = to.getBoundingClientRect()
+        menuUnderline.style.transform = `translateX(${toX - fromX}px)`
+        menuUnderline.style.width = `${width}px`
+      }
+    }
+    
+    function enable(item) {
+      item.classList.add(`${item.id}-enabled`)
+      item.classList.remove(`${item.id}-disabled`)
+    }
+
+    function disable(item) {
+      item.classList.add(`${item.id}-disabled`)
+      item.classList.remove(`${item.id}-enabled`)
+    }
+    
+    function findMatchingLink(location) {
+      
+      if (location == null) {
+        return null
+      }
+
+      for (let i = 0; i < menuLinks.length; i++) {
+        let link = menuLinks[i]
+        if (noTrailingSlash(link.pathname) == noTrailingSlash(location.pathname)) {
+          return link    
+        }
+      }
+
+      return null
+
+      function noTrailingSlash(pathname) {     
+        return pathname.replace(/\/$/, "")
+      }
+    }
+  }
 }

gatsby-config.js

@@ -21,9 +21,9 @@ module.exports = {
     utterances: 'eyalroth/blog-gatsby-comments',
     author: {
       name: 'Eyal Roth',
-      linkedin: "#",
-      github: '#',
-      email: '#',
+      linkedin: "https://linkedin.com/in/eyal-roth",
+      github: 'https://github.com/eyalroth',
+      email: 'eyalroth1@gmail.com',
     },
   },
   plugins: [
@@ -34,6 +34,13 @@ module.exports = {
         path: path.join(__dirname, `src`, `pages`),
       },
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'pages',
+        path: path.join(__dirname, `src`, `posts`),
+      },
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
@@ -123,12 +130,12 @@ module.exports = {
       resolve: `gatsby-plugin-manifest`,
       options: {
         name: `Eyal Roth`,
-        short_name: `EyalRoth`,
+        short_name: `Eyal Roth`,
         start_url: `/`,
         background_color: `#f7f0eb`,
         theme_color: `#a2466c`,
         display: `standalone`,
-        icon: `src/images/icon.png`
+        icon: `src/images/icon2.png`
       },
     },
     `gatsby-plugin-offline`,

gatsby-node.js

@@ -62,7 +62,7 @@ exports.createPages = ({ graphql, actions }) => {
 
           tags = _.uniq(tags)
           _.each(tags, tag => {
-            const tagPath = `/tags/${_.kebabCase(tag)}/`
+            const tagPath = `/blog/tags/${_.kebabCase(tag)}/`
             createPage({
               path: tagPath,
               component: tagTemplate,
@@ -77,7 +77,7 @@ exports.createPages = ({ graphql, actions }) => {
 
           categories = _.uniq(categories)
           _.each(categories, category => {
-            const categoryPath = `/categories/${_.kebabCase(category)}/`
+            const categoryPath = `/blog/categories/${_.kebabCase(category)}/`
             createPage({
               path: categoryPath,
               component: categoryTemplate,
@@ -123,13 +123,13 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
 
     if (node.frontmatter.tags) {
       const tagSlugs = node.frontmatter.tags.map(
-        tag => `/tags/${_.kebabCase(tag)}/`
+        tag => `/blog/tags/${_.kebabCase(tag)}/`
       )
       createNodeField({ node, name: 'tagSlugs', value: tagSlugs })
     }
 
     if (typeof node.frontmatter.category !== 'undefined') {
-      const categorySlug = `/categories/${_.kebabCase(
+      const categorySlug = `/blog/categories/${_.kebabCase(
         node.frontmatter.category
       )}/`
       createNodeField({ node, name: 'categorySlug', value: categorySlug })

src/assets/fonts/fontello-1c73886c/css/fontello-embedded.css

@@ -89,6 +89,18 @@
       "css": "stackoverflow",
       "code": 61804,
       "src": "fontawesome"
+    },
+    {
+      "uid": "559647a6f430b3aeadbecd67194451dd",
+      "css": "menu",
+      "code": 61641,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9f7e588c66cfd6891f6f507cf6f6596b",
+      "css": "phone",
+      "code": 59393,
+      "src": "fontawesome"
     }
   ]
 }

src/assets/fonts/fontello-1c73886c/font/fontello.woff

@@ -1,8 +1,10 @@
 
 .icon-mail:before { content: '\e800'; } /* '' */
+.icon-phone:before { content: '\e801'; } /* '' */
 .icon-twitter:before { content: '\f099'; } /* '' */
 .icon-github-circled:before { content: '\f09b'; } /* '' */
 .icon-rss:before { content: '\f09e'; } /* '' */
+.icon-menu:before { content: '\f0c9'; } /* '' */
 .icon-mail-alt:before { content: '\f0e0'; } /* '' */
 .icon-linkedin:before { content: '\f0e1'; } /* '' */
 .icon-rss-squared:before { content: '\f143'; } /* '' */

src/assets/fonts/fontello-1c73886c/font/fontello.woff2

@@ -1,8 +1,10 @@
 
 .icon-mail { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-phone { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-rss { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-mail-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-linkedin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-rss-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/assets/fonts/fontello-1c73886c/LICENSE.txt src/assets/fonts/fontello-41f8de9d/LICENSE.txt

@@ -11,9 +11,11 @@
 }
 
 .icon-mail { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-phone { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-twitter { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-github-circled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-rss { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-mail-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-linkedin { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-rss-squared { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/assets/fonts/fontello-1c73886c/README.txt src/assets/fonts/fontello-41f8de9d/README.txt

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?80908021');
-  src: url('../font/fontello.eot?80908021#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?80908021') format('woff2'),
-       url('../font/fontello.woff?80908021') format('woff'),
-       url('../font/fontello.ttf?80908021') format('truetype'),
-       url('../font/fontello.svg?80908021#fontello') format('svg');
+  src: url('../font/fontello.eot?8909629');
+  src: url('../font/fontello.eot?8909629#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?8909629') format('woff2'),
+       url('../font/fontello.woff?8909629') format('woff'),
+       url('../font/fontello.ttf?8909629') format('truetype'),
+       url('../font/fontello.svg?8909629#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?80908021#fontello') format('svg');
+    src: url('../font/fontello.svg?8909629#fontello') format('svg');
   }
 }
 */
@@ -56,9 +56,11 @@
 }
 
 .icon-mail:before { content: '\e800'; } /* '' */
+.icon-phone:before { content: '\e801'; } /* '' */
 .icon-twitter:before { content: '\f099'; } /* '' */
 .icon-github-circled:before { content: '\f09b'; } /* '' */
 .icon-rss:before { content: '\f09e'; } /* '' */
+.icon-menu:before { content: '\f0c9'; } /* '' */
 .icon-mail-alt:before { content: '\f0e0'; } /* '' */
 .icon-linkedin:before { content: '\f0e1'; } /* '' */
 .icon-rss-squared:before { content: '\f143'; } /* '' */

src/assets/fonts/fontello-1c73886c/config.json src/assets/fonts/fontello-41f8de9d/config.json

@@ -229,11 +229,11 @@
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?91976658');
-      src: url('./font/fontello.eot?91976658#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?91976658') format('woff'),
-           url('./font/fontello.ttf?91976658') format('truetype'),
-           url('./font/fontello.svg?91976658#fontello') format('svg');
+      src: url('./font/fontello.eot?31976447');
+      src: url('./font/fontello.eot?31976447#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?31976447') format('woff'),
+           url('./font/fontello.ttf?31976447') format('truetype'),
+           url('./font/fontello.svg?31976447#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -299,23 +299,25 @@ <h1>fontello <small>font demo</small></h1>
     <div class="container" id="icons">
       <div class="row">
         <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-mail">&#xe800;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe800</span></div>
+        <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-phone">&#xe801;</i> <span class="i-name">icon-phone</span><span class="i-code">0xe801</span></div>
         <div class="the-icons span3" title="Code: 0xf099"><i class="demo-icon icon-twitter">&#xf099;</i> <span class="i-name">icon-twitter</span><span class="i-code">0xf099</span></div>
         <div class="the-icons span3" title="Code: 0xf09b"><i class="demo-icon icon-github-circled">&#xf09b;</i> <span class="i-name">icon-github-circled</span><span class="i-code">0xf09b</span></div>
-        <div class="the-icons span3" title="Code: 0xf09e"><i class="demo-icon icon-rss">&#xf09e;</i> <span class="i-name">icon-rss</span><span class="i-code">0xf09e</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf09e"><i class="demo-icon icon-rss">&#xf09e;</i> <span class="i-name">icon-rss</span><span class="i-code">0xf09e</span></div>
+        <div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
         <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
         <div class="the-icons span3" title="Code: 0xf0e1"><i class="demo-icon icon-linkedin">&#xf0e1;</i> <span class="i-name">icon-linkedin</span><span class="i-code">0xf0e1</span></div>
-        <div class="the-icons span3" title="Code: 0xf143"><i class="demo-icon icon-rss-squared">&#xf143;</i> <span class="i-name">icon-rss-squared</span><span class="i-code">0xf143</span></div>
-        <div class="the-icons span3" title="Code: 0xf16c"><i class="demo-icon icon-stackoverflow">&#xf16c;</i> <span class="i-name">icon-stackoverflow</span><span class="i-code">0xf16c</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf143"><i class="demo-icon icon-rss-squared">&#xf143;</i> <span class="i-name">icon-rss-squared</span><span class="i-code">0xf143</span></div>
+        <div class="the-icons span3" title="Code: 0xf16c"><i class="demo-icon icon-stackoverflow">&#xf16c;</i> <span class="i-name">icon-stackoverflow</span><span class="i-code">0xf16c</span></div>
         <div class="the-icons span3" title="Code: 0xf16d"><i class="demo-icon icon-instagram">&#xf16d;</i> <span class="i-name">icon-instagram</span><span class="i-code">0xf16d</span></div>
         <div class="the-icons span3" title="Code: 0xf230"><i class="demo-icon icon-facebook-official">&#xf230;</i> <span class="i-name">icon-facebook-official</span><span class="i-code">0xf230</span></div>
-        <div class="the-icons span3" title="Code: 0xf232"><i class="demo-icon icon-whatsapp">&#xf232;</i> <span class="i-name">icon-whatsapp</span><span class="i-code">0xf232</span></div>
-        <div class="the-icons span3" title="Code: 0xf23a"><i class="demo-icon icon-medium">&#xf23a;</i> <span class="i-name">icon-medium</span><span class="i-code">0xf23a</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf232"><i class="demo-icon icon-whatsapp">&#xf232;</i> <span class="i-name">icon-whatsapp</span><span class="i-code">0xf232</span></div>
+        <div class="the-icons span3" title="Code: 0xf23a"><i class="demo-icon icon-medium">&#xf23a;</i> <span class="i-name">icon-medium</span><span class="i-code">0xf23a</span></div>
         <div class="the-icons span3" title="Code: 0xf308"><i class="demo-icon icon-facebook-squared">&#xf308;</i> <span class="i-name">icon-facebook-squared</span><span class="i-code">0xf308</span></div>
         <div class="the-icons span3" title="Code: 0xf30c"><i class="demo-icon icon-linkedin-squared">&#xf30c;</i> <span class="i-name">icon-linkedin-squared</span><span class="i-code">0xf30c</span></div>
       </div>