more

pinterest · Oct 16, 2024 · 4319dd4 · 4319dd4
1 parent f799110
commit 4319dd4
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 134 deletions.
diff --git a/docs/docs-components/MarkdownPage.tsx b/docs/docs-components/MarkdownPage.tsx
@@ -108,11 +108,11 @@ const components = {
       <Box as="figure" width={400}>
         <Image
           alt="image"
-          height="100%"
+          height="100"
           layout="responsive"
           objectFit="contain"
           src={src}
-          width="100%"
+          width="100"
         />
         <Text align="center" size="100">
           <Box as="figcaption" marginTop={3}>
@@ -214,11 +214,11 @@ const components = {
   img: (props: { src: string }) => (
     <Image
       alt="image"
-      height="100%"
+      height="100"
       layout="responsive"
       objectFit="contain"
       src={props.src}
-      width="100%"
+      width="100"
     />
   ),
   IllustrationCard,
@@ -262,9 +262,7 @@ const components = {
     height: number;
     alt: string;
   }) => (
-    // @ts-expect-error - TS2322 - Type '{ children: Element; style: { aspectRatio: `${number}/${number}`; }; width: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
-    <div style={{ aspectRatio: `${width}/${height}` }} width="100%">
-      {/* @ts-expect-error - TS2322 - Type '{ alt: string; fill: true; height: number; src: string; width: number; }' is not assignable to type 'IntrinsicAttributes & Omit<DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | ... 4 more ... | "loading"> & { ...; }'. */}
+    <div style={{ aspectRatio: `${width}/${height}`, width: '100%' }}>
       <Image alt={alt} fill height={height} src={src} width={width} />
     </div>
   ),
@@ -279,8 +277,8 @@ const components = {
   }: {
     src: string;
     caption?: string;
-    alt?: string;
-    width?: number;
+    alt: string;
+    width?: number | `${number}` | undefined;
     height?: number;
     padding?: 'standard' | 'none';
     shaded?: boolean;
@@ -316,11 +314,11 @@ const components = {
           >
             <Image
               alt={alt}
-              height={layout === 'fill' ? undefined : height || '100%'}
+              height={layout === 'fill' ? undefined : height}
               layout={layout}
               objectFit="contain"
               src={src}
-              width={layout === 'fill' ? undefined : width || '100%'}
+              width={layout === 'fill' ? undefined : width}
             />
           </Box>
         </Box>

diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/docs/package.json b/docs/package.json
@@ -23,7 +23,7 @@
     "history": "^5.0.0",
     "lz-string": "^1.4.5",
     "marked": "^4.0.10",
-    "next": "^12.3.0",
+    "next": "^14.2.10",
     "next-mdx-remote": "^4.0.2",
     "react": "^18.1.0",
     "react-cookie": "^4.1.1",