feat: add skip tags

theodorusclarence · Dec 23, 2021 · 7373bfe · 7373bfe · vercel · Dec 23, 2021
1 parent 578f3dd
commit 7373bfe
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 21 deletions.
diff --git a/src/components/content/Tag.tsx b/src/components/content/Tag.tsx
@@ -21,3 +21,28 @@ export default function Tag({
     </button>
   );
 }
+
+export function SkipNavTag({
+  children,
+  ...rest
+}: React.ComponentPropsWithoutRef<'a'>) {
+  return (
+    <>
+      <a
+        href='#skip-tags'
+        className={clsx(
+          'inline-block px-1.5 py-0.5 font-medium rounded-md transition',
+          'text-gray-700 bg-gray-100 hover:text-black disabled:text-gray-300 disabled:bg-gray-200',
+          'dark:disabled:bg-gray-600 dark:disabled:text-gray-500 dark:hover:text-white dark:text-gray-200 dark:bg-gray-700',
+          'focus:outline-none focus-visible:ring focus-visible:ring-primary-300 disabled:cursor-not-allowed',
+          'absolute opacity-0 pointer-events-none focus:translate-y-[1.4rem] focus:inline-block focus:opacity-100'
+        )}
+        {...rest}
+      >
+        Skip tag
+      </a>
+      {children}
+      <div id='skip-tags' className='hidden' />
+    </>
+  );
+}
diff --git a/src/components/content/blog/BlogCard.tsx b/src/components/content/blog/BlogCard.tsx
@@ -54,7 +54,11 @@ export default function BlogCard({
             )}
           >
             {post.tags.split(',').map((tag) => (
-              <Tag className='bg-opacity-80 dark:!bg-opacity-60' key={tag}>
+              <Tag
+                tabIndex={-1}
+                className='bg-opacity-80 dark:!bg-opacity-60'
+                key={tag}
+              >
                 {checkTagged?.(tag) ? <Accent>{tag}</Accent> : tag}
               </Tag>
             ))}

diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
@@ -14,7 +14,7 @@ import Button from '@/components/buttons/Button';
 import BlogCard from '@/components/content/blog/BlogCard';
 import SubscribeCard from '@/components/content/blog/SubscribeCard';
 import ContentPlaceholder from '@/components/content/ContentPlaceholder';
-import Tag from '@/components/content/Tag';
+import Tag, { SkipNavTag } from '@/components/content/Tag';
 import StyledInput from '@/components/form/StyledInput';
 import Layout from '@/components/layout/Layout';
 import Seo from '@/components/Seo';
@@ -147,15 +147,17 @@ export default function IndexPage({
               data-fade='3'
             >
               <span className='font-medium'>Choose topic:</span>
-              {tags.map((tag) => (
-                <Tag
-                  key={tag}
-                  onClick={() => toggleTag(tag)}
-                  disabled={!filteredTags.includes(tag)}
-                >
-                  {checkTagged(tag) ? <Accent>{tag}</Accent> : tag}
-                </Tag>
-              ))}
+              <SkipNavTag>
+                {tags.map((tag) => (
+                  <Tag
+                    key={tag}
+                    onClick={() => toggleTag(tag)}
+                    disabled={!filteredTags.includes(tag)}
+                  >
+                    {checkTagged(tag) ? <Accent>{tag}</Accent> : tag}
+                  </Tag>
+                ))}
+              </SkipNavTag>
             </div>
             <div
               className='flex relative z-10 flex-col gap-4 items-end mt-6 text-gray-600 md:flex-row md:justify-between md:items-center dark:text-gray-300'

diff --git a/src/pages/library.tsx b/src/pages/library.tsx
@@ -12,7 +12,7 @@ import useLoaded from '@/hooks/useLoaded';
 import Accent from '@/components/Accent';
 import ContentPlaceholder from '@/components/content/ContentPlaceholder';
 import LibraryCard from '@/components/content/library/LibraryCard';
-import Tag from '@/components/content/Tag';
+import Tag, { SkipNavTag } from '@/components/content/Tag';
 import StyledInput from '@/components/form/StyledInput';
 import Layout from '@/components/layout/Layout';
 import Seo from '@/components/Seo';
@@ -128,15 +128,17 @@ export default function LibraryPage({
               data-fade='3'
             >
               <span className='font-medium'>Choose topic:</span>
-              {tags.map((tag) => (
-                <Tag
-                  key={tag}
-                  onClick={() => toggleTag(tag)}
-                  disabled={!filteredTags.includes(tag)}
-                >
-                  {checkTagged(tag) ? <Accent>{tag}</Accent> : tag}
-                </Tag>
-              ))}
+              <SkipNavTag>
+                {tags.map((tag) => (
+                  <Tag
+                    key={tag}
+                    onClick={() => toggleTag(tag)}
+                    disabled={!filteredTags.includes(tag)}
+                  >
+                    {checkTagged(tag) ? <Accent>{tag}</Accent> : tag}
+                  </Tag>
+                ))}
+              </SkipNavTag>
             </div>
             <div
               className='flex relative z-10 flex-col gap-4 items-end mt-4 text-gray-600 md:mt-8 dark:text-gray-300'