add accessible skip-to-content link

components/HitCounter/HitCounter.tsx

@@ -1,7 +1,7 @@
 import useSWR from "swr";
 import commaNumber from "comma-number";
 import Loading from "../Loading";
-import { fetcher } from "../../lib/helpers/fetcher";
+import fetcher from "../../lib/helpers/fetcher";
 
 export type HitCounterProps = {
   slug: string;

components/Layout/Layout.tsx

@@ -34,6 +34,35 @@ const FlexedFooter = styled(Footer, {
   flex: 1,
 });
 
+const SkipNavLink = styled("a", {
+  // accessible invisibility stuff pulled from @reach/skip-nav:
+  // https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css
+  border: 0,
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  width: "1px",
+  margin: "-1px",
+  padding: 0,
+  overflow: "hidden",
+  position: "absolute",
+
+  "&:focus": {
+    padding: "1rem",
+    position: "fixed",
+    top: "10px",
+    left: "10px",
+    zIndex: 99999,
+    width: "auto",
+    height: "auto",
+    clip: "auto",
+    background: "$superDuperLight",
+    color: "$link",
+    border: "2px solid $kindaLight",
+    borderRadius: "$rounded",
+    textDecoration: "underline",
+  },
+});
+
 export type LayoutProps = ComponentProps<typeof Flex> & {
   container?: boolean; // pass false to disable default `<main>` container styles with padding, etc.
 };
@@ -48,16 +77,26 @@ const Layout = ({ container = true, children, ...rest }: LayoutProps) => {
         <meta name="theme-color" content={themeColors[activeTheme === "dark" ? "dark" : "light"]} />
       </Head>
 
+      <SkipNavLink href="#skip-nav" role="link" tabIndex={0}>
+        Skip to content
+      </SkipNavLink>
+
       <Flex {...rest}>
         <StickyHeader />
 
         {/* passing `container={false}` to Layout allows 100% control of the content area on a per-page basis */}
         {container ? (
           <Default>
-            <Container>{children}</Container>
+            <Container>
+              <div id="skip-nav" />
+              {children}
+            </Container>
           </Default>
         ) : (
-          <>{children}</>
+          <>
+            <div id="skip-nav" />
+            {children}
+          </>
         )}
 
         <FlexedFooter />

components/NoteMeta/NoteMeta.tsx

@@ -1,4 +1,3 @@
-import { ErrorBoundary } from "react-error-boundary";
 import NextLink from "next/link";
 import Time from "../Time";
 import HitCounter from "../HitCounter";
@@ -107,17 +106,15 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
 
         {/* only count hits on production site */}
         {process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && (
-          <ErrorBoundary fallback={null}>
-            <MetaItem
-              // fix potential layout shift when number of hits loads
-              css={{ minWidth: "7em", marginRight: 0 }}
-            >
-              <span>
-                <Icon as={ViewsIcon} />
-              </span>
-              <HitCounter slug={`notes/${slug}`} />
-            </MetaItem>
-          </ErrorBoundary>
+          <MetaItem
+            // fix potential layout shift when number of hits loads
+            css={{ minWidth: "7em", marginRight: 0 }}
+          >
+            <span>
+              <Icon as={ViewsIcon} />
+            </span>
+            <HitCounter slug={`notes/${slug}`} />
+          </MetaItem>
         )}
       </Wrapper>