From 9d53e4061243fbb9dcb892b4d559b4d1798b551f Mon Sep 17 00:00:00 2001
From: Kevin Heis <heiskr@users.noreply.github.com>
Date: Tue, 2 Nov 2021 14:32:04 -0700
Subject: [PATCH] Make individual learning paths linkable (#22545)

* Make individual learning paths linkable

* Update learning-tracks.js

* Update LearningTrack.module.scss
---
 components/sublanding/LearningTrack.module.scss | 7 +++++++
 components/sublanding/LearningTrack.tsx         | 8 +++++++-
 tests/rendering/learning-tracks.js              | 2 +-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/sublanding/LearningTrack.module.scss b/components/sublanding/LearningTrack.module.scss
index 46c8116e0f22..006c85fee9ae 100644
--- a/components/sublanding/LearningTrack.module.scss
+++ b/components/sublanding/LearningTrack.module.scss
@@ -1,3 +1,10 @@
 .fadeBottom {
   background: linear-gradient(to top, var(--color-canvas-default), transparent);
 }
+
+/* Because of the sticky header */
+.hashAnchor {
+  &:target {
+    scroll-margin-top: 75px;
+  }
+}
diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
index 403fcab9643d..2ac409e0cd68 100644
--- a/components/sublanding/LearningTrack.tsx
+++ b/components/sublanding/LearningTrack.tsx
@@ -4,6 +4,7 @@ import { ArrowRightIcon } from '@primer/octicons-react'
 import { useState } from 'react'
 import { FeaturedTrack } from 'components/context/ProductSubLandingContext'
 import { TruncateLines } from 'components/ui/TruncateLines'
+import slugger from 'github-slugger'
 import styles from './LearningTrack.module.scss'
 
 type Props = {
@@ -17,6 +18,7 @@ export const LearningTrack = ({ track }: Props) => {
     setNumVisible(track?.guides?.length || 0)
   }
   const { t } = useTranslation('product_sublanding')
+  const slug = track?.title ? slugger.slug(track?.title) : ''
 
   return (
     <div data-testid="learning-track" className="my-3 px-4 col-12 col-md-6">
@@ -24,7 +26,11 @@ export const LearningTrack = ({ track }: Props) => {
         <div className="Box-header color-bg-subtle p-4 d-flex flex-1 flex-items-start flex-wrap">
           <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
             <div className="my-xl-0 mr-xl-3">
-              <h5 className="mb-3 color-text f3 text-semibold">{track?.title}</h5>
+              <h5 id={slug} className={cx('mb-3 color-text f3 text-semibold', styles.hashAnchor)}>
+                <a className="color-unset" href={`#${slug}`}>
+                  {track?.title}
+                </a>
+              </h5>
               <TruncateLines as="p" maxLines={3} className="color-text">
                 {track?.description}
               </TruncateLines>
diff --git a/tests/rendering/learning-tracks.js b/tests/rendering/learning-tracks.js
index 986c0c0f8a36..abe0edea64ae 100644
--- a/tests/rendering/learning-tracks.js
+++ b/tests/rendering/learning-tracks.js
@@ -22,7 +22,7 @@ describe('learning tracks', () => {
     const $ = await getDOM('/en/code-security/guides')
     expect($('[data-testid=learning-track]').length).toBeGreaterThanOrEqual(4)
     $('[data-testid=learning-track]').each((i, trackElem) => {
-      const href = $(trackElem).find('.Box-header a').first().attr('href')
+      const href = $(trackElem).find('.Box-header a:nth-child(2)').first().attr('href')
       const found = href.match(/.*\?learn=(.*)/i)
       expect(found).not.toBeNull()
       const trackName = found[1]