Fix the anchor links in changelog (Hacker0x01#174)

saida · Saida Wijpkema · web-flow · commit bb599b15d19d · 2020-04-19T17:00:47.000-07:00
Co-authored-by: Saida Wijpkema &lt;stemirkhodjaeva@hackerone.com&gt;
diff --git a/src/components/article/article.js b/src/components/article/article.js
@@ -1,6 +1,6 @@
 import React from "react";
 import Helmet from "react-helmet";
-import { Link, withPrefix } from "gatsby-link";
+import { withPrefix } from "gatsby-link";
 import GatsbyConfig from "../../../gatsby-config";
 
 import Sidebar from "../../components/sidebar/sidebar";
@@ -13,7 +13,7 @@ const findActiveSectionByPath = (pathname, sections) => {
   let activeSection;
 
   sections.forEach(section => {
-    const match = section.items.some(
+    match = section.items.some(
       item =>
         pathname === withPrefix(item.path) ||
         (item.items &&
diff --git a/src/pages/changelog/changelog.scss b/src/pages/changelog/changelog.scss
@@ -9,12 +9,11 @@
 .changelog__wrapper {
   border-top: 1px solid $daisy-whisper;
   padding-top: 24px;
-  position: relative;
 }
 
 .changelog__anchor {
-  position: absolute;
-  top: -60px;
+  position: relative;
+  top: -18px;
   left: 0;
   height: 1px;
   width: 1px;
diff --git a/src/pages/changelog/index.js b/src/pages/changelog/index.js
@@ -1,6 +1,5 @@
 import React from "react";
 import Helmet from "react-helmet";
-import Link from "gatsby-link";
 import slugify from "slugify";
 import GatsbyConfig from "../../../gatsby-config";
 import { graphql } from "gatsby";
@@ -20,7 +19,7 @@ class IndexRoute extends React.Component {
               <ul className="sidebar__items sidebar__items--active">
                 {edges.map((item, index) => {
                   return (
-                    <li className="sidebar__item">
+                    <li className="sidebar__item" key={index}>
                       <a href={`#${slugify(item.node.frontmatter.path)}`}>
                         {item.node.frontmatter.title}
                       </a>
@@ -37,7 +36,7 @@ class IndexRoute extends React.Component {
           <p>See what's changed or new in HackerOne.</p>
           {edges.map((item, index) => {
             return (
-              <div className="changelog__wrapper">
+              <div className="changelog__wrapper" key={index}>
                 <div
                   className="changelog__anchor"
                   id={slugify(item.node.frontmatter.path)}
diff --git a/src/pages/programs/index.js b/src/pages/programs/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import Link from "gatsby-link";
 import { graphql } from "gatsby";
 import Article from "../../components/article/article";
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,4 @@`
`1`	`1`	`import React from "react";`
`2`		`-import Link from "gatsby-link";`
`3`	`2`	`import { graphql } from "gatsby";`
`4`	`3`	`import Article from "../../components/article/article";`
`5`	`4`