chore: update dependencies and improve header component

- Added "globals" package version 16.1.0 to package.json.
- Updated pnpm-lock.yaml to include the "globals" package and its version.
- Created pnpm-workspace.yaml to define ignored built dependencies.
- Enhanced Header component to include a responsive mobile dropdown menu for action buttons.
- Updated button titles and aria-labels in PDFButton, PrinterButton, and ShareButton components for better accessibility.

Author: qiangli

edit-me/config/links.ts

@@ -1,7 +1,6 @@
 import {
   SiLinuxprofessionalinstitute,
   SiGithub,
-  // SiNpm,
 } from '@icons-pack/react-simple-icons';
 import { CMSLink } from 'edit-me/types/cms-link';
 import LinkedInIcon from './LinkedInIcon';

package.json

@@ -17,6 +17,7 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "contentlayer2": "0.5.8",
+    "globals": "16.1.0",
     "next": "15.3.2",
     "next-contentlayer2": "0.5.8",
     "next-themes": "0.4.6",

pnpm-lock.yaml

@@ -0,0 +1,7 @@
+ignoredBuiltDependencies:
+  - '@tailwindcss/oxide'
+  - contentlayer2
+  - esbuild
+  - protobufjs
+  - sharp
+  - unrs-resolver

pnpm-workspace.yaml

@@ -1,8 +1,6 @@
-// import { personal } from '@content';
 import { Metadata, Viewport } from 'next';
 import { ThemeProvider } from 'next-themes';
 import { Albert_Sans, JetBrains_Mono } from 'next/font/google';
-// import { headers } from 'next/headers';
 import { PropsWithChildren, ReactNode } from 'react';
 import Footer from 'src/components/footer/footer';
 import Header from 'src/components/header/header';
@@ -25,8 +23,7 @@ const jetBrainsMono = JetBrains_Mono({
 export const dynamic = 'force-static';
 
 export function generateMetadata(): Metadata {
-  // const requestHeaders = await headers();
-  const host = `qiang.li`; //requestHeaders.get('host');
+  const host = `qiang.li`;
   const baseURL = `${protocol}://${host}`;
   const siteName = `${fullName} Professional Résumé`;
   const title = `Résumé | ${fullName}`;
@@ -40,22 +37,7 @@ export function generateMetadata(): Metadata {
     generator: 'Next.js',
     keywords: ['resume', fullName, 'next.js', 'pdf'],
     metadataBase: new URL(baseURL),
-    // openGraph: {
-    //   type: 'profile',
-    //   firstName: personal.givenName,
-    //   lastName: personal.familyName,
-    //   title,
-    //   description,
-    //   siteName,
-    //   url: baseURL,
-    // },
     title,
-    // twitter: {
-    //   site: siteName,
-    //   creator: fullName,
-    //   description,
-    //   title,
-    // },
   };
 }
 

src/app/layout.tsx

@@ -3,22 +3,11 @@ import { renderToBuffer } from '@react-pdf/renderer';
 import { NextResponse } from 'next/server';
 import PDF from 'src/components/pdf/pdf';
 
-// const privateKey = process.env.PRIVATE_KEY;
-
 export const dynamic = 'force-static';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export async function GET(request: Request): Promise<NextResponse> {
-  // const { searchParams } = new URL(request.url);
-  // const secret = searchParams.get('secret');
-
-  // let privateInformation;
-  // if (secret !== null) {
-  //   if (secret !== privateKey) {
-  //     return new NextResponse('Not authorized', { status: 401 });
-  //   }
   const privateInformation = allPrivateFields;
-  // }
 
   const pdfStream = await renderToBuffer(
     <PDF privateInformation={privateInformation} />,

src/app/print/pdf/route.tsx

@@ -5,7 +5,6 @@ import styles from '@styles/contact-card.module.css';
 
 // https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
 // https://fontawesome.com/search
-
 export default function ContactCard(): ReactNode {
   return (
     <>

src/components/articles/contact-card.tsx

@@ -4,7 +4,6 @@ import { links } from '@config/links';
 import { personal } from '@content';
 import { ReactNode } from 'react';
 import { Button } from 'src/components/button/button';
-// import { fullName } from 'src/helpers/utilities';
 import SimpleLink from '../link/simple-link';
 
 const scrollTop = (): void => {

src/components/footer/footer.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import { personal } from '@content';
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { Heading } from 'src/components/heading/heading';
 import { ThemeToggle } from 'src/components/theme-toggle/theme-toggle';
 import { fullName } from 'src/helpers/utilities';
@@ -9,8 +11,44 @@ import PDFButton from './pdf-button';
 import ShareButton from './share-button';
 
 export default function Header(): ReactNode {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   return (
-    <header className="border-neutral-6 bg-neutral-1 border-b py-12">
+    <header className="border-neutral-6 bg-neutral-1 relative border-b py-12">
+      {/* Hamburger and dropdown are now outside the container */}
+      <div className="md:hidden">
+        <button
+          className="hover:bg-neutral-3 fixed top-4 right-4 z-50 rounded p-2 focus:outline-none"
+          aria-label="Open menu"
+          onClick={() => {
+            setMenuOpen(!menuOpen);
+          }}
+        >
+          {/* Hamburger Icon */}
+          <svg width="24" height="24" fill="none">
+            <rect y="4" width="24" height="2" rx="1" fill="currentColor" />
+            <rect y="11" width="24" height="2" rx="1" fill="currentColor" />
+            <rect y="18" width="24" height="2" rx="1" fill="currentColor" />
+          </svg>
+        </button>
+        {/* Mobile Dropdown Menu fixed to top-right */}
+        {menuOpen && (
+          <div className="bg-neutral-1 border-neutral-4 fixed top-16 right-0 z-40 flex w-16 flex-col items-stretch gap-2 rounded border p-2 shadow-lg">
+            <PrinterButton />
+            <PDFButton />
+            <ShareButton />
+            <ThemeToggle
+              buttonTextVisible={false}
+              labelButton="Select theme"
+              themeNameDark="dark"
+              themeNameLight="light"
+              color={undefined}
+              variant={undefined}
+            />
+          </div>
+        )}
+      </div>
+
       <div className="container">
         <div className="flex flex-col items-center gap-6 text-center md:flex-row md:text-left">
           <div className="flex-1 space-y-2">
@@ -19,15 +57,20 @@ export default function Header(): ReactNode {
               {personal.title}
             </Heading>
           </div>
-          <PrinterButton />
-          <PDFButton />
-          <ShareButton />
-          <ThemeToggle
-            buttonTextVisible={false}
-            labelButton="Select theme"
-            themeNameDark="dark"
-            themeNameLight="light"
-          />
+          {/* Desktop Buttons */}
+          <div className="hidden items-center gap-3 md:flex">
+            <PrinterButton />
+            <PDFButton />
+            <ShareButton />
+            <ThemeToggle
+              buttonTextVisible={false}
+              labelButton="Select theme"
+              themeNameDark="dark"
+              themeNameLight="light"
+              color={undefined}
+              variant={undefined}
+            />
+          </div>
         </div>
       </div>
     </header>

src/components/header/header.tsx

@@ -11,7 +11,8 @@ export default function PDFButton(): ReactNode {
         href="https://drive.google.com/file/d/1-3bW17BzpzygVsLCdCBHoZUadYAj5l70/view?usp=sharing"
         target="_blank"
         rel="noopener noreferrer"
-        aria-label="Download PDF version from Google Drive"
+        title="One page PDF version"
+        aria-label="One page PDF version"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"