show more images in images.mdx

Author: nemanjam

docs/working-notes/todo3.md

@@ -428,15 +428,19 @@ write typography.mdx
 ------
 // for release
     fix button and tags sizes
+smaller mobile buttons
 define color themes
 improve lighthouse, accessibility, aria attrs
-write readme and credits, roadmap
+write readme and credits, features, roadmap
 write home and about pages, one article
 open images in new tab and check all sizes
 links in md colors
 fix table of contents styling
 retest vertical spacing, font-size and content width
 // maybe
 astro transitions 
-```
+--------
 
+ask about optimal max-width image width
+fix .mdx live reload
+```

src/constants/image.ts

@@ -64,7 +64,7 @@ export const IMAGE_SIZES = {
     },
     // doesn't work
     MDX_EXPAND_LG: {
-      widths: [TW_SCREENS.XXS, TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.LG],
+      widths: [TW_SCREENS.XXS, TW_SCREENS.SM, TW_SCREENS.MD, TW_SCREENS.LG, TW_SCREENS.XL],
       sizes: `(max-width: ${TW_SCREENS.XS}px) ${TW_SCREENS.XXS}px, (max-width: ${TW_SCREENS.MD}px) ${TW_SCREENS.SM}px, (max-width: ${TW_SCREENS.LG}px) ${TW_SCREENS.LG}px, ${TW_SCREENS.XL}px`,
     },
   },

src/pages/design/images.mdx

@@ -11,10 +11,12 @@ import { IMAGE_SIZES } from '../../constants/image';
 import Amfi1Image from '../../assets/images/all-images/amfi1.jpg';
 import Bridge1Image from '../../assets/images/all-images/bridge1.jpg';
 import Lure2Image from '../../assets/images/all-images/lure2.jpg';
+import Lure3Image from '../../assets/images/all-images/lure3.jpg';
 import Nis1Image from '../../assets/images/all-images/nis1.jpg';
 import Riverside1Image from '../../assets/images/all-images/riverside1.jpg';
-import Riverside2Image from '../../assets/images/all-images/riverside2.jpg';
+import Raft1Image from '../../assets/images/all-images/raft1.jpg';
 import Square1Image from '../../assets/images/all-images/square1.jpg';
+import Meadow1Image from '../../assets/images/all-images/meadow1.jpg';
 
 back to [Index](/design)
 
@@ -28,9 +30,17 @@ back to [Index](/design)
 
 ## Image
 
+### Image width=IMAGE_SIZES.FIXED.MDX_XS.width
+
+<Image {...IMAGE_SIZES.FIXED.MDX_XS} src={Nis1Image} alt="This is city" />
+
 ### Image width=MDX_SM
 
-<Image {...IMAGE_SIZES.FIXED.MDX_SM} src={Nis1Image} alt="This is city" />
+<Image {...IMAGE_SIZES.FIXED.MDX_SM} src={Lure3Image} alt="This is lure" />
+
+### Image width=MDX_MD
+
+<Image {...IMAGE_SIZES.FIXED.MDX_MD} src={Meadow1Image} alt="This is meadow" />
 
 Dolor aliquip Lorem eiusmod reprehenderit sit. Quis eu ea quis pariatur labore consectetur culpa ex
 qui eu qui. Aliqua culpa consectetur sit ut. Quis Lorem do tempor cillum esse sit enim culpa
@@ -63,8 +73,8 @@ Adipisicing exercitation enim nostrud aliquip incididunt. Non commodo ad exercit
 <div class="expand-lg">
   <Image
     {...IMAGE_SIZES.RESPONSIVE.MDX_EXPAND_LG}
-    src={Riverside2Image}
-    alt="This is lure"
+    src={Raft1Image}
+    alt="This is raft"
   />
 </div>