fix: better font formats

src/components/custom-blocks/page-reference.tsx

@@ -15,8 +15,9 @@ const Image = ({
   src,
   isHovered,
   size,
+  alt,
   ...rest
-}: BoxProps & { src?: string; isHovered?: boolean }) => (
+}: BoxProps & { src?: string; isHovered?: boolean; alt?: string }) => (
   <Box
     flexShrink={0}
     style={{
@@ -33,6 +34,7 @@ const Image = ({
       width="100%"
       minWidth={size}
       size={size}
+      alt={alt}
       mx="0 !important"
       my="0 !important"
     />
@@ -63,9 +65,22 @@ const Description = ({ children, ...props }) => (
   </Text>
 );
 
-const FloatingLink = ({ href, ...props }: any) => (
+const FloatingLink = ({ href, contents, ...props }: any) => (
   <Link href={href} passHref>
-    <Box as="a" position="absolute" size="100%" left={0} top={0} />
+    <Box
+      as="a"
+      position="absolute"
+      size="100%"
+      opacity={0}
+      color="transparent"
+      style={{
+        userSelect: 'none',
+      }}
+      left={0}
+      top={0}
+    >
+      {contents}
+    </Box>
   </Link>
 );
 const InlineCard = ({ page }) => {
@@ -91,6 +106,7 @@ const InlineCard = ({ page }) => {
           style={{ willChange: 'transform' }}
           size="64px"
           src={page?.images?.sm}
+          alt={`Page image for: ${page.title || page.headings[0]}`}
         />
       </Box>
       <Flex
@@ -177,7 +193,7 @@ const GridItemDetails: React.FC<BoxProps & { isHovered?: boolean; page: any }> =
         </Title>
         <Description>{page.description}</Description>
       </Flex>
-      <FloatingLink href={`${page.path}`} />
+      <FloatingLink href={`${page.path}`} contents={page.title || page.headings[0]} />
     </>
   )
 );

src/components/header.tsx

@@ -101,7 +101,12 @@ const NavItem: React.FC<FlexProps & { item: any }> = ({ item, ...props }) => {
   });
   return (
     <Flex justifyContent="center" position="relative" {...props} {...bind}>
-      <HeaderTextItem as={item.href ? 'a' : 'span'} href={item.href}>
+      <HeaderTextItem
+        as={item.href ? 'a' : 'span'}
+        href={item.href}
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+      >
         {item.label}
       </HeaderTextItem>
 

src/components/mdx/overrides.tsx

@@ -8,7 +8,7 @@ const GlobalStyles = createGlobalStyle`
 }
 
 * {
-  font-feature-settings: 'ss01' on;
+  font-feature-settings: "onum" 1, "pnum" 1, "kern" 1, "ss01" 1;
 }
 html, body {
   font-family: 'Soehne', Inter, sans-serif;

src/components/toc.tsx

@@ -28,7 +28,7 @@ const Item = ({
   slug: string;
   label: string;
   level: number;
-  limit?: number;
+  limit?: boolean;
 }) => {
   const { isActive: _isActive, slugInView } = useActiveHeading(slug);
   const isOnScreen = slugInView === slug;
@@ -73,7 +73,7 @@ export const TableOfContents = ({
   }[];
   noLabel?: boolean;
   label?: string;
-  limit?: number;
+  limit?: boolean;
   columns?: number | number[];
 } & BoxProps) => {
   return (

src/pages/_document.tsx

@@ -46,28 +46,32 @@ export default class MyDocument extends Document<DocumentProps> {
               __html: `
 @font-face {
   font-family: 'Soehne Mono';
-  src: url('/static/fonts/soehne-mono-web-buch.otf') format('opentype');
+  src: url('/static/fonts/soehne-mono-web-buch.woff2') format('woff2'),
+       url('/static/fonts/soehne-mono-web-buch.woff') format('woff');
   font-weight: 400;
   font-display: swap;
   font-style: normal;
 }
 @font-face {
   font-family: 'Soehne';
-  src: url('/static/fonts/soehne-web-buch.otf') format('opentype');
+  src: url('/static/fonts/soehne-web-buch.woff2') format('woff2'),
+       url('/static/fonts/soehne-web-buch.woff') format('woff');
   font-weight: 400;
   font-display: swap;
   font-style: normal;
 }
 @font-face {
     font-family: 'Soehne';
-  src: url('/static/fonts/soehne-web-kraftig_1.otf') format('opentype');
+  src: url('/static/fonts/soehne-web-kraftig_1.woff2') format('woff2'),
+       url('/static/fonts/soehne-web-kraftig_1.woff') format('woff');
   font-weight: 500;
   font-display: swap;
   font-style: normal;
 }
 @font-face {
     font-family: 'Soehne';
-  src: url('/static/fonts/soehne-web-halbfett_1.otf') format('opentype');
+  src: url('/static/fonts/soehne-web-halbfett_1.woff2') format('woff2'),
+       url('/static/fonts/soehne-web-halbfett_1.woff') format('woff');
   font-weight: 600;
   font-display: swap;
   font-style: normal;