diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml index d3dd401..e4ba4e0 100644 --- a/.github/workflows/static.yml +++ b/.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: diff --git a/src/components/HelpTextBlock.tsx b/src/components/HelpTextBlock.tsx index b06c75d..e710203 100644 --- a/src/components/HelpTextBlock.tsx +++ b/src/components/HelpTextBlock.tsx @@ -6,7 +6,7 @@ const HelpTextBlock = () => { return (
-

{focusedMenuItem ? focusedMenuItem?.description : "Hover over or focus on a link to see more information here."} +

{focusedMenuItem?.description ?? "Hover over or focus on a link to see more information here."}

); diff --git a/src/components/PortfolioNavigation.tsx b/src/components/PortfolioNavigation.tsx index 5634896..7423b68 100644 --- a/src/components/PortfolioNavigation.tsx +++ b/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 }); }} >
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx index 6662a57..e64cbd6 100644 --- a/src/context/AppContext.tsx +++ b/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(undefined); @@ -63,9 +71,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => { else body.classList.remove('ff8-theme'); }, [theme]); - const [focusedMenuItem, setFocusedMenuItemState] = useState(undefined); + const [focusedMenuItem, setFocusedMenuItemState] = useState(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); }, []);