Merge Develop

.github/workflows/static.yml

@@ -4,7 +4,7 @@ name: Deploy static content to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ['master']
+    branches: ['master', 'main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

src/components/HelpTextBlock.tsx

@@ -6,7 +6,7 @@ const HelpTextBlock = () => {
     return (
         <div className="block-bg-gradient secondary-block help-text-block">
             <BlockTitle title="Help" />
-            <p className="help-text">{focusedMenuItem ? focusedMenuItem?.description : "Hover over or focus on a link to see more information here."}
+            <p className="help-text">{focusedMenuItem?.description ?? "Hover over or focus on a link to see more information here."}
             </p>
         </div>
     );

src/components/PortfolioNavigation.tsx

@@ -13,14 +13,10 @@ const PortfolioNavigation = () => {
                         target="_blank"
                         rel="noopener noreferrer"
                         onFocus={() => {
-                            if (setFocusedMenuItem) {
-                                setFocusedMenuItem(link);
-                            }
+                            setFocusedMenuItem?.({ id: link.name, label: link.name, description: link.description });
                         }}
                         onMouseOver={() => {
-                            if (setFocusedMenuItem) {
-                                setFocusedMenuItem(link);
-                            }
+                            setFocusedMenuItem?.({ id: link.name, label: link.name, description: link.description });
                         }}
                     >
                         <div className="selection-cursor"></div>

src/context/AppContext.tsx

@@ -5,6 +5,14 @@ export type Theme = 'ff7-theme' | 'ff8-theme' | 'default-theme';
 
 export type Layout = 'wide' | 'boxed';
 
+export type MenuItem = {
+	id?: string;
+	label?: string;
+	description?: string;
+	// allow extra metadata when needed
+	[key: string]: unknown;
+};
+
 export type AppContextType = {
 	theme: Theme;
 	toggleTheme: () => void;
@@ -13,10 +21,10 @@ export type AppContextType = {
 	layout: Layout;
 	setLayout: (l: Layout) => void;
 	siteName: string;
-	profileLinks: { name: string; url: string }[];
-	portfolioLinks: { name: string; url: string }[];
-	setFocusedMenuItem: (item: object | undefined) => void;
-	focusedMenuItem: object | undefined;
+	profileLinks: { name: string; url: string, description: string }[];
+	portfolioLinks: { name: string; url: string, description: string }[];
+	setFocusedMenuItem: (item: MenuItem | undefined) => void;
+	focusedMenuItem: MenuItem | undefined;
 };
 
 const AppContext = createContext<AppContextType | undefined>(undefined);
@@ -63,9 +71,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
 		else body.classList.remove('ff8-theme');
 	}, [theme]);
 
-	const [focusedMenuItem, setFocusedMenuItemState] = useState<object | undefined>(undefined);
+	const [focusedMenuItem, setFocusedMenuItemState] = useState<MenuItem | undefined>(undefined);
 
-	const setFocusedMenuItem = useCallback((item: object | undefined) => {
+	const setFocusedMenuItem = useCallback((item: MenuItem | undefined) => {
 		// store the focused menu item in state so consumers can read it
 		setFocusedMenuItemState(item);
 	}, []);