init: add skip-to-main-content shortcut

apps/site/components/withLayout.tsx

@@ -10,6 +10,8 @@ import LearnLayout from '@/layouts/Learn';
 import PostLayout from '@/layouts/Post';
 import type { Layouts } from '@/types';
 
+import WithNavBar from './withNavBar';
+
 const layouts = {
   about: AboutLayout,
   home: GlowingBackdropLayout,
@@ -19,6 +21,7 @@ const layouts = {
   'blog-category': BlogLayout,
   download: DownloadLayout,
   article: ArticlePageLayout,
+  skipToContent: WithNavBar,
 } satisfies Record<Layouts, FC>;
 
 type WithLayoutProps<L = Layouts> = PropsWithChildren<{ layout: L }>;

apps/site/components/withNavBar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useLocale } from 'next-intl';
+import classNames from 'classnames';
+import { useLocale, useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import type { FC } from 'react';
 
@@ -16,13 +17,23 @@ const WithNavBar: FC = () => {
   const { replace } = useRouter();
   const pathname = usePathname();
 
+  const skipToContent = classNames(
+    'bg-[#000] text-center font-semibold inline-flex items-center justify-center gap-2 py-2.5 motion-safe:transition-colors rounded border border-green-600 bg-green-600 text-white shadow-sm',
+    'absolute left-0 top-0 m-3 -translate-y-16 bg-blue-500 p-3 text-white transition-transform focus:translate-y-0 focus:outline-none'
+  );
+
   const locale = useLocale();
+  const t = useTranslations();
 
   const toggleCurrentTheme = () =>
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
 
   return (
     <div>
+      <a className={skipToContent} href="#main">
+        {t('components.containers.navBar.links.skipToContent')}
+      </a>
+
       <WithBanner section="index" />
 
       <NavBar

apps/site/types/layouts.ts

@@ -6,4 +6,5 @@ export type Layouts =
   | 'blog-category'
   | 'blog-post'
   | 'download'
-  | 'article';
+  | 'article'
+  | 'skipToContent';

packages/i18n/locales/en.json

@@ -20,7 +20,8 @@
           "security": "Security",
           "certification": "Certification",
           "blog": "Blog",
-          "contribute": "Contribute"
+          "contribute": "Contribute",
+          "skipToContent": "Skip to content"
         }
       }
     },