resource page links

Houston-ARTCC · Aug 9, 2024 · ab547f4 · ab547f4
1 parent 8e5488b
commit ab547f4
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "react-toastify": "10.0.5",
     "react-tooltip": "5.26.3",
     "sharp": "0.33.2",
+    "slugify": "1.6.6",
     "styled-components": "6.1.8",
     "tailwindcss": "3.4.1",
     "typescript": "5.4.2",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -14,7 +14,7 @@ export const metadata = {
 };
 
 const Root = ({ children }: PropsWithChildren) => (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" className="scroll-pt-36" suppressHydrationWarning>
         <body>
             <ThemeProvider attribute="class">
                 <NextAuthProvider>

diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { type NextPage } from 'next';
 import { getServerSession } from 'next-auth';
+import slugify from 'slugify';
+import classNames from 'classnames';
 import { PageContent } from '@/components/PageContent';
 import { Page } from '@/components/Page';
 import { Card } from '@/components/Card';
@@ -32,7 +34,18 @@ const Resources: NextPage = async () => {
                 )}
                 {Object.entries(CATEGORY_STRING).map(([category, title]) => (
                     <div key={category} className="mb-10">
-                        <h2 className="text-4xl font-medium">{title}</h2>
+                        <a className="text-inherit" href={`#${slugify(title, { lower: true })}`}>
+                            <h2
+                                className={classNames(
+                                    'after:text-md relative text-4xl font-medium duration-150',
+                                    "after:pl-3 after:text-3xl after:text-gray-400 after:content-['#']",
+                                    'after:opacity-0 hover:after:opacity-100 target:after:opacity-100',
+                                )}
+                                id={slugify(title, { lower: true })}
+                            >
+                                {title}
+                            </h2>
+                        </a>
                         <h3 className="mb-5 font-medium text-slate-400">
                             {resources[category]?.length}
                             {resources[category]?.length === 1 ? ' resource' : ' resources'}

diff --git a/yarn.lock b/yarn.lock
@@ -6853,6 +6853,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slugify@npm:1.6.6":
+  version: 1.6.6
+  resolution: "slugify@npm:1.6.6"
+  checksum: e7e63f08f389a371d6228bc19d64ec84360bf0a538333446cc49dbbf3971751a6d180d2f31551188dd007a65ca771e69f574e0283290a7825a818e90b75ef44d
+  languageName: node
+  linkType: hard
+
 "smart-buffer@npm:^4.2.0":
   version: 4.2.0
   resolution: "smart-buffer@npm:4.2.0"
@@ -7977,6 +7984,7 @@ __metadata:
     react-toastify: "npm:10.0.5"
     react-tooltip: "npm:5.26.3"
     sharp: "npm:0.33.2"
+    slugify: "npm:1.6.6"
     styled-components: "npm:6.1.8"
     tailwindcss: "npm:3.4.1"
     ts-essentials: "npm:^9.4.1"