Merge changes from onnimonni#5

Author: onnimonni

components/Footer.tsx

@@ -39,22 +39,20 @@ export function FooterImpl() {
 
         <div className={cs(styles.settings,styles.toggleDarkModeContainer)}>
           {hasMounted && (
-            <a
-              className={styles.toggleDarkMode}
-              href='#'
-              role='button'
-              onClick={onToggleDarkMode}
-              title='Toggle dark mode'
-            >
-              {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-            </a>
+            <button
+            type="button"
+            className={styles.toggleDarkMode}
+            onClick={onToggleDarkMode}
+            title='Toggle dark mode'
+          >
+            {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
+          </button>
           )}
         </div>
         <div className={styles.social}>
           <PageSocialButtons iconSize={32} />
         </div>
       </div>
-
       <div className="SiteInfo">
         <div className={styles.siteInfoLinks}>
             {footerLinks

components/NotionPageHeader.tsx

@@ -23,12 +23,13 @@ function ToggleThemeButton() {
   }, [toggleDarkMode])
 
   return (
-    <div
+    <button
+      type="button"
       className={cs('breadcrumb', 'button', !hasMounted && styles.hidden)}
       onClick={onToggleTheme}
     >
       {hasMounted && isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-    </div>
+    </button>
   )
 }
 
@@ -60,23 +61,22 @@ export function NotionPageHeader({
                 return (
                   <components.PageLink
                     href={mapPageUrl(link.pageId)}
-                    key={index}
+                    key={`nav-${link.pageId}-${link.title}`}
                     className={cs(styles.navLink, 'breadcrumb', 'button')}
                   >
                     {link.title}
                   </components.PageLink>
                 )
-              } else {
-                return (
-                  <components.Link
-                    href={link.url}
-                    key={index}
-                    className={cs(styles.navLink, 'breadcrumb', 'button')}
-                  >
-                    {link.title}
-                  </components.Link>
-                )
               }
+              return (
+                <components.Link
+                  href={link.url}
+                  key={`nav-${link.url}-${link.title}`}
+                  className={cs(styles.navLink, 'breadcrumb', 'button')}
+                >
+                  {link.title}
+                </components.Link>
+              )
             })
             .filter(Boolean)}
 

components/PageSocial.tsx

@@ -7,6 +7,7 @@ import styles from './PageSocial.module.css'
 import { FaGithub, FaInstagram, FaLinkedin, FaMastodon, FaReddit, FaTwitter, FaYoutube } from 'react-icons/fa'
 import { FaXTwitter, FaGitlab, FaEnvelopeOpenText } from 'react-icons/fa6'
 import { IoIosBug } from 'react-icons/io'
+import { getLinkedInURLFromInput } from '@/lib/social-helpers'
 
 interface SocialLink {
   name: string
@@ -65,7 +66,7 @@ export const socialLinks: SocialLink[] = [
 
   config.linkedin && {
     name: 'linkedin',
-    href: `https://www.linkedin.com/in/${config.linkedin}`,
+    href: getLinkedInURLFromInput(config.linkedin),
     title: `LinkedIn ${config.author}`,
     color: "#ffffff",
     background: "#0077b5",

components/styles.module.css

@@ -81,7 +81,7 @@
   user-select: none;
 }
 
-.settings a,
+.settings button,
 .social a {
   cursor: pointer;
   font-size: 2em;
@@ -91,18 +91,20 @@
   transition: color 250ms ease-out;
 }
 
-.settings a:last-of-type,
+.settings button:last-of-type,
 .social a:last-of-type {
   margin-right: 0;
 }
 
-.settings a:hover,
+.settings button:hover,
 .social a:hover {
   transition: color 50ms ease-out;
 }
 
-.toggleDarkMode:hover {
-  color: #2795e9;
+.settings button {
+  /* Reset default button styles */
+  background: none;
+  border: none;
 }
 
 .comments {

lib/preview-images.ts

@@ -1,9 +1,9 @@
 import ky from 'ky'
 import lqip from 'lqip-modern'
-import {
-  type ExtendedRecordMap,
-  type PreviewImage,
-  type PreviewImageMap
+import type {
+  ExtendedRecordMap,
+  PreviewImage,
+  PreviewImageMap
 } from 'notion-types'
 import { getPageImageUrls, normalizeUrl } from 'notion-utils'
 import pMap from 'p-map'

lib/social-helpers.ts

@@ -0,0 +1,7 @@
+export function getLinkedInURLFromInput(userOrCompany: string): string {
+  if (userOrCompany.startsWith('company/')) {
+    return `https://www.linkedin.com/${userOrCompany}`
+  }
+
+  return `https://www.linkedin.com/in/${userOrCompany}`
+}

package.json

@@ -27,7 +27,9 @@
     "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
     "test": "run-p test:*",
     "test:lint": "eslint .",
-    "test:prettier": "prettier '**/*.{js,jsx,ts,tsx}' --check"
+    "test:prettier": "prettier '**/*.{js,jsx,ts,tsx}' --check",
+    "prepare": "husky install",
+    "pre-commit": "lint-staged"
   },
   "dependencies": {
     "@fisch0920/use-dark-mode": "^2.4.0",
@@ -66,7 +68,15 @@
     "eslint": "^8.57.1",
     "npm-run-all2": "^7.0.1",
     "prettier": "^3.3.3",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "husky": "^8.0.1",
+    "lint-staged": "^12.3.6"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
   },
   "overrides": {
     "cacheable-request": {