repo sync

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;
+  }
+}

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,14 +18,19 @@ 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">
       <div className="Box d-flex flex-column">
         <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>

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]