COVID19 Lockdown Dev Log – Day 9

What I Worked On

Navigation and smooth-scrolling. Also looking into how Netlify CMS can be integrated into my portfolio.

What I Learned

When you want to link to an external page using Gatsby, you must use “https://” or “http://” in your anchor tag’s ‘href’.

<a href="https://google.com"> This works </a>

<a href="www.google.com"> This doesn't work </a>

Let’s say your website is “www.mywebsite.com”. Using “www” will produce a URL like this:

www.mywebsite.com/www.google.com

Furthermore, linking to a CSS id using an anchor tag has proved a bit difficult in early versions of Gatsby, like v1. I thought I was having this issue, even though I am using Gatsby v2. To keep a long story short, I ended up spending 2 hours debugging why I couldn’t make my navbar links scroll to the section of the portfolio website that they refered to. Turns out that in my early creation of the website, I had added an ‘id’ attribute to my navigation links. This id had the same value as the sections I wanted my nav links to scroll to. This basically means that when I wanted to scroll to for example “contact”, it would just scroll nowhere, because technically, it was scrolling to that id because the nav link itself had it! Too confusing? Look at this:

<!-- My navbar link -->
<a href="#contact" id="contact">
Contact
</a>


<!-- My section with the id -->
<section id="contact">
  ...code
</section>

I also learned that smooth scroll is available via CSS. Not sure how long it’s been available like that, but it’s easily implemented:

html {
    scroll-behavior: smooth;
  }

Finally, I looked more into Netlify CMS and how I could add it to my website. Hoping to have it implemented tomorrow.

What Distracted Me During The Day

• LinkedIn
• Messenger

Resources

• Navigating to a CSS ID added in Gatsby 2.0 – https://github.com/gatsbyjs/gatsby/issues/6309
• Gatsby saying how to use internal page link – https://twitter.com/gatsbyjs/status/1052251784419323905
• Old anchor links issue in Gatsby – https://github.com/gatsbyjs/gatsby/issues/386
• Gatsby’s Link API docs – https://www.gatsbyjs.org/docs/gatsby-link/#recommendations-for-programmatic-in-app-navigation
• Add Netlify to your website – https://www.netlifycms.org/docs/add-to-your-site/
• Netlify Gatsby tutorial – https://www.youtube.com/watch?v=_CNZJLYvINc