feat: Add MarkdownImage component

Author: codinsonn

features/app-core/mdx/MarkdownImage.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useEffect } from 'react'
+import { StyleSheet, View, Dimensions, Image as RNImage, LayoutChangeEvent } from 'react-native'
+import { Image } from '../components/Image'
+import './markdown.theme.css' // Duplicate of the React-Native styles from this file
+import { UniversalImageProps } from '../components/Image.types'
+
+/* --- <MarkdownImage/> --------------------------------------------------------------------------- */
+
+export const MarkdownImage = (props: UniversalImageProps) => {
+    // Props
+    const { src, alt } = props
+
+    // State
+    const [imgDimensions, setImgDimensions] = useState({ width: 0, height: 0 })
+    const [wrapperWidth, setWrapperWidth] = useState(0)
+
+    // Flags
+    const hasWrapperWidth = !!wrapperWidth
+
+    // Vars
+    const imgRatio = imgDimensions.height / imgDimensions.width
+    const maxWindowWidth = Dimensions.get('window').width
+    const widthToUse = Math.min(...[imgDimensions.width, wrapperWidth, maxWindowWidth].filter(Boolean))
+    const heightToUse = widthToUse * imgRatio
+    const finalDimensions = imgRatio ? { width: widthToUse, height: heightToUse } : imgDimensions
+
+    // -- Handlers --
+
+    const handleWrapperLayout = (event: LayoutChangeEvent) => {
+        if (wrapperWidth < 5) setWrapperWidth(event.nativeEvent.layout.width)
+    }
+
+    // -- Effects --
+
+    useEffect(() => {
+        const checkImageDimensions = async () => {
+            RNImage.getSize(src as string, (width, height) => {
+                setImgDimensions({ width, height })
+            })
+        }
+        if (typeof src === 'string') checkImageDimensions()
+    }, [])
+
+    // -- Render --
+
+    return (
+        <View
+            style={{
+                ...styles.imgWrapper,
+                ...(!hasWrapperWidth ? { minWidth: '100%' } : finalDimensions)
+            }}
+            onLayout={!hasWrapperWidth ? handleWrapperLayout : undefined}
+        >
+            <Image
+                alt={alt}
+                src={src}
+                style={finalDimensions}
+                contentFit="contain"
+            />
+        </View>
+    )
+}
+
+/* --- Styles ---------------------------------------------------------------------------------- */
+// -i- These styles won't work in Next.js for some reason, duplicate them in markdown.theme.css
+
+const styles = StyleSheet.create({
+    imgWrapper: {
+        display: 'flex',
+        position: 'relative',
+        flexDirection: 'column',
+        marginTop: 16,
+    }
+})

features/app-core/mdx/MarkdownTheme.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { StyleSheet, View, Text } from 'react-native'
+import { MarkdownImage } from './MarkdownImage'
 import { MDXStyles, MDXComponents } from '@bacons/mdx'
 import { Link } from '../navigation/Link'
 import './markdown.theme.css' // Duplicate of the React-Native styles from this file
@@ -14,7 +15,7 @@ type MarkdownScreenProps = {
 
 const MarkdownTheme = ({ children }: MarkdownScreenProps) => {
   return (
-        <View nativeID="markdown-theme">
+        <View id="markdown-theme">
             <MDXStyles
                 h1={styles.h1}
                 h2={styles.h2}
@@ -23,6 +24,7 @@ const MarkdownTheme = ({ children }: MarkdownScreenProps) => {
                 li={styles.li}
                 blockquote={styles.blockquote}
                 a={styles.link}
+                img={styles.img}
             >
                 <MDXComponents
                     h1={(props) => <Text {...props} style={{ ...styles.h1 }} />}
@@ -32,6 +34,7 @@ const MarkdownTheme = ({ children }: MarkdownScreenProps) => {
                     li={(props) => <Text {...props} style={{ ...styles.li }} />}
                     blockquote={(props) => <View {...props} style={{ ...styles.blockquote }} />} // prettier-ignore
                     a={(props) => <Link {...props} style={{ ...styles.link }} />}
+                    img={(props) => <MarkdownImage {...props} />}
                 >
                     {children}
                 </MDXComponents>
@@ -83,6 +86,10 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         textDecorationLine: 'underline',
     },
+    img: {
+        maxWidth: '100%',
+        marginTop: 16,
+    }
 })
 
 /* --- Exports --------------------------------------------------------------------------------- */

features/app-core/mdx/markdown.theme.css

@@ -60,3 +60,7 @@ blockquote {
     text-align: center;
     text-decoration: underline;
 }
+
+#markdown-theme img {
+    max-width: 100%;
+}

features/app-core/mdx/readme.mdx

@@ -1,3 +1,4 @@
+import View from 'react-native'
 import { Image } from '../components/Image'
 
 <Image
@@ -18,3 +19,5 @@ It's a good starting point if you want to:
 - ✅ leave *all other tech choices* for e.g. styling, dbs, component libs, etc. *up to you*
 
 > Need a more robust, Fully-Stacked, Full-Product, Universal App Setup? Check out **[FullProduct.dev](https://fullproduct.dev) ⚡️**
+
+[![Screenshot of FullProduct.dev](https://github.com/user-attachments/assets/a2eecfd2-7889-4079-944b-1b5af6cf5ddf)](https://fullproduct.dev)

features/app-core/screens/MarkdownScreen.tsx

@@ -1,42 +1,46 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, ScrollView, Dimensions } from 'react-native'
 import { Link } from '../navigation/Link' // @ts-ignore
 import ReadMe from '../mdx/readme.mdx'
 import MarkdownTheme from '../mdx/MarkdownTheme'
 
 /* --- <MarkdownScreen/> --------------------------------------------------------------------------- */
 
-const MarkdownScreen = () => {
-  return (
-    <View style={styles.container}>
-        <Link
-            href="/"
-            style={{ ...styles.backButton, ...styles.link, textDecorationLine: 'none' }}
-        >
-            {`< Back`}
-        </Link>
-        <View style={styles.markdownWrapper}>
-            <MarkdownTheme>
-                <ReadMe />
-            </MarkdownTheme>
+const MarkdownScreen = () => (
+    <ScrollView contentContainerStyle={styles.container}>
+        <View style={styles.mainPage}>
+            <Link
+                href="/"
+                style={{ ...styles.backButton, ...styles.link, textDecorationLine: 'none' }}
+            >
+                {`< Back`}
+            </Link>
+            <View style={styles.markdownWrapper}>
+                <MarkdownTheme>
+                    <ReadMe />
+                </MarkdownTheme>
+            </View>
         </View>
-    </View>
-  )
-}
+    </ScrollView>
+)
 
 /* --- Styles ---------------------------------------------------------------------------------- */
 
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        justifyContent: 'center',
+    },
+    mainPage: {
+        flex: 1,
         alignItems: 'center',
         padding: 24,
+        minWidth: Math.min(600, Dimensions.get('window').width)
     },
     markdownWrapper: {
         width: '100%',
         position: 'relative',
         alignItems: 'flex-start',
+        paddingTop: 50,
         maxWidth: 600,
     },
     backButton: {