From fc06da579d111d1aa31293ad157254a281eab9da Mon Sep 17 00:00:00 2001 From: John Goodliff Date: Tue, 18 Jun 2024 19:42:40 -0600 Subject: [PATCH 1/3] Add ARIA labels to buttons --- src/components/input/base-button.tsx | 9 +++++---- src/components/project-card.tsx | 1 + src/components/seo/page-head.tsx | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/input/base-button.tsx b/src/components/input/base-button.tsx index 3f078515..a3bc31c4 100644 --- a/src/components/input/base-button.tsx +++ b/src/components/input/base-button.tsx @@ -42,8 +42,11 @@ export function BaseButton({ textClassName, ); + const computedButtonLabel = tooltipText ?? text; + const buttonElement = ( @@ -70,11 +73,9 @@ export function BaseButton({ ); - const computedTooltipText = tooltipText ?? text; - - return computedTooltipText ? ( + return !disabled && computedButtonLabel ? ( diff --git a/src/components/project-card.tsx b/src/components/project-card.tsx index 8d3367d5..087df91c 100644 --- a/src/components/project-card.tsx +++ b/src/components/project-card.tsx @@ -44,6 +44,7 @@ export function ProjectCard({ repo }: Props) { diff --git a/src/components/seo/page-head.tsx b/src/components/seo/page-head.tsx index 223fcea0..bb08592d 100644 --- a/src/components/seo/page-head.tsx +++ b/src/components/seo/page-head.tsx @@ -71,7 +71,7 @@ export function PageHead({ - + From 3f778a337267360bad67f3318abfc5cb2a6caafc Mon Sep 17 00:00:00 2001 From: John Goodliff Date: Tue, 18 Jun 2024 20:32:47 -0600 Subject: [PATCH 2/3] Replace project type colors with darker values for better contrast --- src/config/color-mappings.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/config/color-mappings.tsx b/src/config/color-mappings.tsx index 75faf774..5d918c74 100644 --- a/src/config/color-mappings.tsx +++ b/src/config/color-mappings.tsx @@ -7,16 +7,16 @@ import type { ColorMappingsConfig } from '../common/types'; export const colorMappingsConfig: ColorMappingsConfig = { projectType: { - 'android app': 'bg-lime-500', - extension: 'bg-amber-500', - 'cli app': 'bg-red-500', - 'js library': 'bg-green-500', - 'node.js module': 'bg-green-500', - markdown: 'bg-purple-500', - website: 'bg-orange-500', - 'web app': 'bg-orange-500', - other: 'bg-blue-500', - 'gimp plugin': 'bg-blue-500', + 'android app': 'bg-lime-600', + extension: 'bg-amber-600', + 'cli app': 'bg-red-600', + 'js library': 'bg-green-600', + 'node.js module': 'bg-green-600', + markdown: 'bg-purple-600', + website: 'bg-orange-600', + 'web app': 'bg-orange-600', + other: 'bg-blue-600', + 'gimp plugin': 'bg-blue-600', }, roleType: { internship: 'bg-secondary', From 58f9d2fcdadebe7f67e69fc793b8e329fbe1f780 Mon Sep 17 00:00:00 2001 From: John Goodliff Date: Tue, 18 Jun 2024 20:36:49 -0600 Subject: [PATCH 3/3] Replace CJS export with ES6 export in tailwind.config.ts --- gatsby-config.ts | 3 +-- tailwind.config.ts | 7 ++++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/gatsby-config.ts b/gatsby-config.ts index 487b7fbd..1adfd75d 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -12,8 +12,7 @@ import { } from './src/common/config-manager'; import { SOCIAL_IMAGES_DIR } from './src/common/constants'; import { getAbsoluteUrl } from './src/common/utilities'; -// biome-ignore lint/style/noNamespaceImport: We need to import the entire Tailwind CSS configuration file -import * as tailwindConfig from './tailwind.config'; +import tailwindConfig from './tailwind.config'; const SITE_METADATA = getSiteMetadata(); const DARK_THEME = getTheme('dark'); diff --git a/tailwind.config.ts b/tailwind.config.ts index 1e82e1fd..12f3f137 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -3,11 +3,12 @@ ------------------------------- */ +import type { Config } from 'tailwindcss'; import plugin from 'tailwindcss/plugin'; import { getTheme } from './src/common/config-manager'; -module.exports = { - content: ['./src/**/*.{js,jsx,ts,tsx}'], +export default { + content: ['src/**/*.{js,jsx,ts,tsx}'], theme: { fontFamily: { sans: [ @@ -69,4 +70,4 @@ module.exports = { themes: [{ dark: getTheme('dark') }, { light: getTheme('light') }], darkTheme: 'dark', }, -}; +} satisfies Config;