adding feature of anchor links

frontend/__tests__/e2e/pages/Home.spec.ts

@@ -37,6 +37,7 @@ test.describe('Home Page', () => {
     await page.getByRole('link', { name: 'Chapter 1' }).click()
     await expect(page).toHaveURL('chapters/chapter_1')
   })
+
   test('should have new projects', async ({ page }) => {
     await expect(page.getByRole('heading', { name: 'New Projects' })).toBeVisible()
     await expect(page.getByRole('link', { name: 'Project 1', exact: true })).toBeVisible()

frontend/__tests__/e2e/pages/RepositoryDetails.spec.ts

@@ -52,6 +52,7 @@ test.describe('Repository Details Page', () => {
     await expect(page.getByText('web', { exact: true })).toBeVisible()
     await expect(page.getByText('security', { exact: true })).toBeVisible()
   })
+
   test('should have top contributors', async ({ page }) => {
     await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
     await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()

frontend/__tests__/unit/pages/About.test.tsx

@@ -197,18 +197,15 @@ describe('About Component', () => {
       expect(screen.queryByText('Contributor 10')).not.toBeInTheDocument()
     })
 
-    const contributorsSection = screen
-      .getByRole('heading', { name: /Top Contributors/i })
-      .closest('div')
-    const showMoreButton = within(contributorsSection!).getByRole('button', { name: /Show more/i })
+    const showMoreButton = screen.getByRole('button', { name: /Show more/i })
     fireEvent.click(showMoreButton)
 
     await waitFor(() => {
       expect(screen.getByText('Contributor 7')).toBeInTheDocument()
       expect(screen.getByText('Contributor 8')).toBeInTheDocument()
     })
 
-    const showLessButton = within(contributorsSection!).getByRole('button', { name: /Show less/i })
+    const showLessButton = screen.getByRole('button', { name: /Show less/i })
     fireEvent.click(showLessButton)
 
     await waitFor(() => {

frontend/__tests__/unit/pages/ProjectDetails.test.tsx

@@ -103,18 +103,15 @@ describe('ProjectDetailsPage', () => {
       expect(screen.queryByText('Contributor 10')).not.toBeInTheDocument()
     })
 
-    const contributorsSection = screen
-      .getByRole('heading', { name: /Top Contributors/i })
-      .closest('div')
-    const showMoreButton = within(contributorsSection!).getByRole('button', { name: /Show more/i })
+    const showMoreButton = screen.getByRole('button', { name: /Show more/i })
     fireEvent.click(showMoreButton)
 
     await waitFor(() => {
       expect(screen.getByText('Contributor 7')).toBeInTheDocument()
       expect(screen.getByText('Contributor 8')).toBeInTheDocument()
     })
 
-    const showLessButton = within(contributorsSection!).getByRole('button', { name: /Show less/i })
+    const showLessButton = screen.getByRole('button', { name: /Show less/i })
     fireEvent.click(showLessButton)
 
     await waitFor(() => {

frontend/__tests__/unit/pages/RepositoryDetails.test.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/client'
 import { addToast } from '@heroui/toast'
-import { act, fireEvent, screen, waitFor, within } from '@testing-library/react'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
 import { mockRepositoryData } from '@unit/data/mockRepositoryData'
 import { render } from 'wrappers/testUtil'
 import RepositoryDetailsPage from 'app/organizations/[organizationKey]/repositories/[repositoryKey]/page'
@@ -105,18 +105,15 @@ describe('RepositoryDetailsPage', () => {
       expect(screen.queryByText('Contributor 10')).not.toBeInTheDocument()
     })
 
-    const contributorsSection = screen
-      .getByRole('heading', { name: /Top Contributors/i })
-      .closest('div')
-    const showMoreButton = within(contributorsSection!).getByRole('button', { name: /Show more/i })
+    const showMoreButton = screen.getByRole('button', { name: /Show more/i })
     fireEvent.click(showMoreButton)
 
     await waitFor(() => {
       expect(screen.getByText('Contributor 7')).toBeInTheDocument()
       expect(screen.getByText('Contributor 8')).toBeInTheDocument()
     })
 
-    const showLessButton = within(contributorsSection!).getByRole('button', { name: /Show less/i })
+    const showLessButton = screen.getByRole('button', { name: /Show less/i })
     fireEvent.click(showLessButton)
 
     await waitFor(() => {

frontend/src/app/globals.css

@@ -294,6 +294,24 @@ a {
   opacity: 0.6;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
+.inherit-color {
+  color: inherit;
+}
+
+.custom-icon {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+section {
+  scroll-margin-top: 100px;
+}
+
 /* Dropdown container */
 .dropdown {
   @apply relative;

frontend/src/app/page.tsx

@@ -27,6 +27,7 @@ import { EventType } from 'types/event'
 import { MainPageData } from 'types/home'
 import { capitalize } from 'utils/capitalize'
 import { formatDate, formatDateRange } from 'utils/dateFormatter'
+import AnchorTitle from 'components/AnchorTitle'
 import AnimatedCounter from 'components/AnimatedCounter'
 import ChapterMapWrapper from 'components/ChapterMapWrapper'
 import LeadersList from 'components/LeadersList'
@@ -147,7 +148,19 @@ export default function Home() {
             />
           </div>
         </div>
-        <SecondaryCard icon={faCalendarAlt} title="Upcoming Events" className="overflow-hidden">
+        <SecondaryCard
+          icon={faCalendarAlt}
+          title={
+            <div className="flex items-center gap-2">
+              <AnchorTitle
+                href="#upcoming-events"
+                title="Upcoming Events"
+                className="flex items-center leading-none"
+              />
+            </div>
+          }
+          className="overflow-hidden"
+        >
           <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
             {data?.upcomingEvents?.map((event: EventType, index: number) => (
               <div key={`card-${event.name}`} className="overflow-hidden">
@@ -185,7 +198,19 @@ export default function Home() {
           </div>
         </SecondaryCard>
         <div className="grid gap-4 md:grid-cols-2">
-          <SecondaryCard icon={faMapMarkerAlt} title="New Chapters" className="overflow-hidden">
+          <SecondaryCard
+            icon={faMapMarkerAlt}
+            title={
+              <div className="flex items-center gap-2">
+                <AnchorTitle
+                  href="#new-chapters"
+                  title="New Chapters"
+                  className="flex items-center leading-none"
+                />
+              </div>
+            }
+            className="overflow-hidden"
+          >
             <div className="space-y-4">
               {data?.recentChapters?.map((chapter) => (
                 <div key={chapter.key} className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
@@ -219,7 +244,19 @@ export default function Home() {
               ))}
             </div>
           </SecondaryCard>
-          <SecondaryCard icon={faFolder} title="New Projects" className="overflow-hidden">
+          <SecondaryCard
+            icon={faFolder}
+            title={
+              <div className="flex items-center gap-2">
+                <AnchorTitle
+                  href="#new-projects"
+                  title="New Projects"
+                  className="flex items-center leading-none"
+                />
+              </div>
+            }
+            className="overflow-hidden"
+          >
             <div className="space-y-4">
               {data?.recentProjects?.map((project) => (
                 <div key={project.key} className="rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
@@ -254,10 +291,18 @@ export default function Home() {
           </SecondaryCard>
         </div>
         <div className="mb-20">
-          <h2 className="mb-4 text-2xl font-semibold">
-            <FontAwesomeIcon icon={faGlobe} className="mr-2 h-5 w-5" />
-            Chapters Worldwide
-          </h2>
+          <div className="mb-4 flex items-center gap-2">
+            <FontAwesomeIcon
+              icon={faGlobe}
+              className="h-5 w-5"
+              style={{ verticalAlign: 'middle' }}
+            />
+            <AnchorTitle
+              href="#chapters-worldwide"
+              title="Chapters Worldwide"
+              className="flex items-center leading-none"
+            />
+          </div>
           <ChapterMapWrapper
             geoLocData={geoLocData}
             showLocal={false}
@@ -281,7 +326,19 @@ export default function Home() {
           <RecentPullRequests data={data?.recentPullRequests} />
         </div>
         <RecentReleases data={data?.recentReleases} />
-        <SecondaryCard icon={faNewspaper} title="News & Opinions" className="overflow-hidden">
+        <SecondaryCard
+          icon={faNewspaper}
+          title={
+            <div className="flex items-center gap-2">
+              <AnchorTitle
+                href="#news-&-opinions"
+                title="News & Opinions"
+                className="flex items-center leading-none"
+              />
+            </div>
+          }
+          className="overflow-hidden"
+        >
           <div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2">
             {data?.recentPosts.map((post) => (
               <div
@@ -314,12 +371,14 @@ export default function Home() {
         </SecondaryCard>
         <div className="grid gap-6 md:grid-cols-4">
           {counterData.map((stat, index) => (
-            <SecondaryCard key={index} className="text-center">
-              <div className="mb-2 text-3xl font-bold text-blue-400">
-                <AnimatedCounter end={parseInt(stat.value)} duration={2} />+
-              </div>
-              <div className="text-gray-600 dark:text-gray-400">{stat.label}</div>
-            </SecondaryCard>
+            <div key={index}>
+              <SecondaryCard className="text-center">
+                <div className="mb-2 text-3xl font-bold text-blue-400">
+                  <AnimatedCounter end={parseInt(stat.value)} duration={2} />+
+                </div>
+                <div className="text-gray-600 dark:text-gray-400">{stat.label}</div>
+              </SecondaryCard>
+            </div>
           ))}
         </div>
 

frontend/src/components/AnchorTitle.tsx

@@ -0,0 +1,67 @@
+import { faLink } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import React, { useEffect, useCallback } from 'react'
+
+interface AnchorTitleProps {
+  href: string
+  title: string
+  className?: string
+}
+
+const AnchorTitle: React.FC<AnchorTitleProps> = ({ href, title }) => {
+  const id = href.replace('#', '') // TODO(arkid15r): refactor get href from title automatically.
+
+  const scrollToElement = useCallback(() => {
+    const element = document.getElementById(id)
+    if (element) {
+      const headingHeight =
+        (element.querySelector('div#anchor-title') as HTMLElement)?.offsetHeight || 0
+      const yOffset = -headingHeight - 50
+      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset
+      window.scrollTo({ top: y, behavior: 'smooth' })
+    }
+  }, [id])
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    event.preventDefault()
+    scrollToElement()
+    window.history.pushState(null, '', href)
+  }
+
+  useEffect(() => {
+    const hash = window.location.hash.replace('#', '')
+    if (hash === id) {
+      requestAnimationFrame(() => scrollToElement())
+    }
+  }, [id, scrollToElement])
+
+  useEffect(() => {
+    const handlePopState = () => {
+      const hash = window.location.hash.replace('#', '')
+      if (hash === id) {
+        requestAnimationFrame(() => scrollToElement())
+      }
+    }
+    window.addEventListener('popstate', handlePopState)
+    return () => window.removeEventListener('popstate', handlePopState)
+  }, [id, scrollToElement])
+
+  return (
+    <div id={id} className="relative">
+      <div className="group relative flex items-center">
+        <div className="flex items-center text-2xl font-semibold" id="anchor-title">
+          {title}
+        </div>
+        <a
+          href={href}
+          className="inherit-color ml-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+          onClick={handleClick}
+        >
+          <FontAwesomeIcon icon={faLink} className="custom-icon h-7 w-5" />
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default AnchorTitle