Merge pull request #11 from iswilljr/website-improvements

iswilljr · web-flow · commit 67c78d3b0782 · 2023-08-11T22:52:14.000-05:00
fix: improve design, accessibility and SEO
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
@@ -21,7 +21,7 @@ export default function Login({ searchParams }: DefaultPageProps) {
           <IconLogo className='h-10 w-10' />
         </Link>
         <h3 className='text-xl font-bold'>Sign in to Xlug</h3>
-        <p className='text-sm text-neutral-500'>Start shorting and managing long URLs.</p>
+        <p className='text-sm text-neutral-500 dark:text-neutral-400'>Start shorting and managing long URLs.</p>
       </div>
       <LoginButtons redirectTo={redirectTo ?? '/dashboard'} />
     </section>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -10,7 +10,10 @@ export const metadata = generateBaseMetadata()
 
 export default function Layout({ children }: React.PropsWithChildren) {
   return (
-    <html lang='en'>
+    <html
+      lang='en'
+      suppressHydrationWarning // next-themes package adds extra attributes to the html element in dark mode
+    >
       <body className={cn(inter.className, 'bg-white dark:bg-neutral-950')}>
         <SessionProvider>
           <ThemeProvider>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link'
 import { buttonVariants } from '@/ui/button'
 import { Error } from '@/components/error'
 import { siteConfig } from '@/config/site'
+import { cn } from '@/utils/cn'
 
 export default function NotFound() {
   return (
@@ -18,7 +19,13 @@ export default function NotFound() {
         </span>
       }
     >
-      <Link className={buttonVariants({ variant: 'outline', size: 'sm', className: 'text-black' })} href='/'>
+      <Link
+        className={cn(
+          buttonVariants({ variant: 'outline', size: 'sm' }),
+          'text-black dark:bg-neutral-700 dark:text-white'
+        )}
+        href='/'
+      >
         Go Home
       </Link>
     </Error>
diff --git a/src/components/forms/create-public-link.tsx b/src/components/forms/create-public-link.tsx
@@ -70,6 +70,7 @@ export function CreatePublicLinkForm() {
             disabled={hasReachedMaxPublicLinks}
             size='icon'
             variant='outline'
+            aria-label='Create public link'
             className='h-7 w-7 dark:bg-neutral-800 dark:hover:bg-neutral-700/90'
             icon={<Send className='h-4 w-4' />}
           />
diff --git a/src/components/links/link-filters.tsx b/src/components/links/link-filters.tsx
@@ -37,7 +37,7 @@ export function LinkFilters() {
       />
       <CreateLinkDialog
         trigger={
-          <Button className='h-9 w-9 px-2 sm:min-w-[7rem]'>
+          <Button aria-label='Create Link' className='h-9 w-9 px-2 sm:min-w-[7rem]'>
             <Plus className='sm:hidden' />
             <span className='hidden sm:inline-block'>Create Link</span>
           </Button>
diff --git a/src/components/theme-switcher.tsx b/src/components/theme-switcher.tsx
@@ -12,7 +12,7 @@ export function ThemeSwitcher() {
     <DropdownMenu
       align='end'
       trigger={
-        <Button size='icon' variant='ghost' className='h-8 w-8'>
+        <Button aria-label='Switch between dark and light theme' size='icon' variant='ghost' className='h-8 w-8'>
           <Sparks className='h-5 w-5 stroke-2' />
         </Button>
       }
diff --git a/src/layout/dashboard/header.tsx b/src/layout/dashboard/header.tsx
@@ -6,7 +6,7 @@ export function DashboardHeader() {
   return (
     <header className='flex h-14 w-full items-center justify-between px-6'>
       <DashboardHomeLink />
-      <div className='flex gap-2'>
+      <div className='flex items-center gap-2'>
         <ThemeSwitcher />
         <AvatarMenu />
       </div>
diff --git a/src/layout/home/footer.tsx b/src/layout/home/footer.tsx
@@ -12,7 +12,6 @@ export function HomeFooter() {
             href={siteConfig.links.profile}
             target='_blank'
             rel='noreferrer'
-            aria-label='My github profile'
           >
             Will
           </a>
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -15,5 +15,5 @@ export function middleware(req: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/((?!api|_next/static|_next/image|assets|icons|favicon).*)'],
+  matcher: ['/((?!api|_next/static|_next/image|assets|icons|favicon|robots.txt).*)'],
 }

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ export function ThemeSwitcher() {`
`12`	`12`	`<DropdownMenu`
`13`	`13`	`align='end'`
`14`	`14`	`trigger={`
`15`		`- <Button size='icon' variant='ghost' className='h-8 w-8'>`
	`15`	`+ <Button aria-label='Switch between dark and light theme' size='icon' variant='ghost' className='h-8 w-8'>`
`16`	`16`	`<Sparks className='h-5 w-5 stroke-2' />`
`17`	`17`	`</Button>`
`18`	`18`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,6 @@ export function HomeFooter() {`
`12`	`12`	`href={siteConfig.links.profile}`
`13`	`13`	`target='_blank'`
`14`	`14`	`rel='noreferrer'`
`15`		`- aria-label='My github profile'`
`16`	`15`	`>`
`17`	`16`	`Will`
`18`	`17`	`</a>`
Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,5 @@ export function middleware(req: NextRequest) {`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`export const config = {`
`18`		`- matcher: ['/((?!api\|_next/static\|_next/image\|assets\|icons\|favicon).*)'],`
	`18`	`+ matcher: ['/((?!api\|_next/static\|_next/image\|assets\|icons\|favicon\|robots.txt).*)'],`
`19`	`19`	`}`