jpudysz · jpudysz · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023
diff --git a/README.md b/README.md
@@ -24,10 +24,10 @@
 yarn add react-native-unistyles
 ```
 
-## [Documentation](https://unistyles-docs.vercel.app/)
-- [Start here](https://unistyles-docs.vercel.app/start/setup/)
-- [References](https://unistyles-docs.vercel.app/reference/create-style-sheet/)
-- [Examples](https://unistyles-docs.vercel.app/example/breakpoints/)
+## [Documentation](https://reactnativeunistyles.vercel.app/)
+- [Start here](https://reactnativeunistyles.vercel.app/start/setup/)
+- [References](https://reactnativeunistyles.vercel.app/reference/create-stylesheet/)
+- [Examples](https://reactnativeunistyles.vercel.app/example/breakpoints/)
 
 ## Blog post
 

diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config'
 import starlight from '@astrojs/starlight'
+import sitemap from '@astrojs/sitemap'
 
 // https://astro.build/config
 export default defineConfig({
@@ -54,5 +55,5 @@ export default defineConfig({
                 link: '/example/variants/'
             }]
         }]
-    })]
+    }), sitemap()]
 })
diff --git a/docs/package.json b/docs/package.json
@@ -9,8 +9,10 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/sitemap": "3.0.1",
     "@astrojs/starlight": "0.11.0",
     "astro": "3.2.3",
+    "astro-seo": "0.8.0",
     "sharp": "0.32.5"
   },
   "private": true

diff --git a/docs/public/opengraph-image.jpg b/docs/public/opengraph-image.jpg
diff --git a/docs/src/components/Codemask.astro b/docs/src/components/Codemask.astro
@@ -7,7 +7,7 @@
         Brought to you by Codemask
     </span>
     <a href="https://codemask.com" target="_blank">
-        <img src="../src/assets/codemask.svg" alt="codemask" />
+        <img src="../assets/codemask.svg" alt="codemask" />
     </a>
     <span class="codemask-description">
         Bridging Your Idea to the digital world

diff --git a/docs/src/components/Seo.astro b/docs/src/components/Seo.astro
@@ -0,0 +1,68 @@
+---
+import { SEO } from 'astro-seo'
+
+type Props = {
+    seo: {
+        title: string,
+        description?: string,
+        image: {
+            src: string,
+            mimeType: string,
+            alt: string
+        }
+    }
+}
+
+const { seo: { title, description, image } } = Astro.props as Props
+const DEFAULT_TITLE_PAGE = 'Unistyles'
+const DEFAULT_DESCRIPTION_PAGE = 'React Native StyleSheet 2.0'
+const DEFAULT_URL_SITE = 'https://reactnativeunistyles.vercel.app'
+const openGraph = {
+    title: title ||DEFAULT_TITLE_PAGE,
+    type: image?.mimeType || 'image/jpg',
+    image: image?.src || `${DEFAULT_URL_SITE}/opengraph-image.jpg`,
+    alt: image?.alt || 'Unistyles',
+    url: DEFAULT_URL_SITE,
+    description: description || DEFAULT_DESCRIPTION_PAGE
+}
+---
+
+<head>
+    <SEO
+        charset="UTF-8"
+        title={title || DEFAULT_TITLE_PAGE}
+        description={description || DEFAULT_DESCRIPTION_PAGE}
+        openGraph={{
+            basic: {
+                title: openGraph.title,
+                type: openGraph.type,
+                image: openGraph.image
+            },
+            image: {
+                alt: openGraph.alt
+            },
+            optional: {
+                description: openGraph.description
+            }
+        }}
+        twitter={{
+            creator: '@jpudysz'
+        }}
+        extend={{
+            link: [
+                { rel: 'icon', href: '/favicon.png' },
+                { rel: 'sitemap', href: '/sitemap-index.xml' }
+            ],
+            meta: [
+                { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+                { name: 'generator', content: Astro.generator },
+                { name: 'twitter:image', content: openGraph.image },
+                { name: 'twitter:card', content: 'summary_large_image' },
+                { name: 'twitter:title', content: openGraph.title },
+                { name: 'twitter:description', content: openGraph.description },
+                { name: 'twitter:site', content: '@jpudysz' }
+            ]
+        }}
+    />
+    <slot/>
+</head>
diff --git a/docs/src/content/docs/example/breakpoints.mdx b/docs/src/content/docs/example/breakpoints.mdx
@@ -2,51 +2,61 @@
 title: Breakpoints
 ---
 
-Any style can change based on breakpoints. To do this, change a value to an object:
+import Seo from '../../../components/Seo.astro'
 
-```ts
-const stylesheet = createStyleSheet(theme => ({
-    container: {
-       flex: 1,
-       justifyContent: 'center',
-       alignItems: 'center',
-       backgroundColor: {
-         // your breakpoints
-         xs: theme.colors.background,
-         sm: theme.colors.barbie
-       }
-    },
-    text: {
-       color: theme.colors.typography
-    }
-}))
-```
+<Seo
+    seo={{
+        title: 'Breakpoints',
+        description: 'How to use breakpoints with react-native-unistyles'
+    }}
+>
+    Any style can change based on breakpoints. To do this, change a value to an object:
 
-You can even use it with nested objects like `transform` or `shadowOffset`:
+    ```ts
+    const stylesheet = createStyleSheet(theme => ({
+        container: {
+           flex: 1,
+           justifyContent: 'center',
+           alignItems: 'center',
+           backgroundColor: {
+             // your breakpoints
+             xs: theme.colors.background,
+             sm: theme.colors.barbie
+           }
+        },
+        text: {
+           color: theme.colors.typography
+        }
+    }))
+    ```
+
+    You can even use it with nested objects like `transform` or `shadowOffset`:
 
-```ts
-const stylesheet = createStyleSheet(theme => ({
-    container: {
-       flex: 1,
-       justifyContent: 'center',
-       alignItems: 'center',
-       backgroundColor: {
-         xs: theme.colors.background,
-         sm: theme.colors.barbie
-       },
-       transform: [
-           {
-               translateX: 100
+    ```ts
+    const stylesheet = createStyleSheet(theme => ({
+        container: {
+           flex: 1,
+           justifyContent: 'center',
+           alignItems: 'center',
+           backgroundColor: {
+             xs: theme.colors.background,
+             sm: theme.colors.barbie
            },
-           {
-               scale: {
-                   xs: 1.5,
-                   ':w[500]': 1
+           transform: [
+               {
+                   translateX: 100
+               },
+               {
+                   scale: {
+                       xs: 1.5,
+                       ':w[500]': 1
+                   }
                }
-           }
-       ]
-    }
-}))
-```
+           ]
+        }
+    }))
+    ```
+
+    Library will choose the correct value (based on screen width) in the runtime.
 
-Library will choose the correct value (based on screen width) in the runtime.
+</Seo>
diff --git a/docs/src/content/docs/example/dynamic-functions.mdx b/docs/src/content/docs/example/dynamic-functions.mdx
@@ -2,58 +2,68 @@
 title: Dynamic functions
 ---
 
-Every style can be transformed to dynamic function to take additional parameters from JSX:
+import Seo from '../../../components/Seo.astro'
 
-```tsx
-export const ExampleUnistyles = () => {
-    const { styles } = useStyles(stylesheet)
+<Seo
+    seo={{
+        title: 'Dynamic functions',
+        description: 'How to use dynamic functions with react-native-unistyles'
+    }}
+>
+    Every style can be transformed to dynamic function to take additional parameters from JSX:
 
-    return (
-        <ScrollView contentContainerStyle={styles.scrollContainer}>
-            {posts.map((post, index) => (
-                <View
-                    key={post.key}
-                    // call it as regular function
-                    style={styles.post(index)}
-                >
-                    <Text>
-                        {post.title}
-                    </Text>
-                </View>
-            ))}
-        </ScrollView>
-    )
-}
+    ```tsx
+    export const ExampleUnistyles = () => {
+        const { styles } = useStyles(stylesheet)
 
-const stylesheet = createStyleSheet({
-    scrollContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    // dynamic function
-    post: (index: number) => ({
-        backgroundColor: index % 2 === 0 ? 'gold' : 'silver',
-    })
-})
-```
-If you use a dynamic function, library will wrap it in a `Proxy` to make sure the correct values of breakpoints will be used:
+        return (
+            <ScrollView contentContainerStyle={styles.scrollContainer}>
+                {posts.map((post, index) => (
+                    <View
+                        key={post.key}
+                        // call it as regular function
+                        style={styles.post(index)}
+                    >
+                        <Text>
+                            {post.title}
+                        </Text>
+                    </View>
+                ))}
+            </ScrollView>
+        )
+    }
 
-```ts
-const stylesheet = createStyleSheet(theme => ({
-    scrollContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    post: (index: number) => ({
-        // breakpoints and media queries works with dynamic function
-        backgroundColor: {
-            xs: index % 2 === 0
-                ? theme.colors.gold
-                : theme.colors.silver,
-            sm: theme.colors.red
-        }
+    const stylesheet = createStyleSheet({
+        scrollContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        // dynamic function
+        post: (index: number) => ({
+            backgroundColor: index % 2 === 0 ? 'gold' : 'silver',
+        })
     })
-}))
+    ```
+    If you use a dynamic function, library will wrap it in a `Proxy` to make sure the correct values of breakpoints will be used:
+
+    ```ts
+    const stylesheet = createStyleSheet(theme => ({
+        scrollContainer: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        post: (index: number) => ({
+            // breakpoints and media queries works with dynamic function
+            backgroundColor: {
+                xs: index % 2 === 0
+                    ? theme.colors.gold
+                    : theme.colors.silver,
+                sm: theme.colors.red
+            }
+        })
+    }))
 ```
+
+</Seo>
diff --git a/docs/src/content/docs/example/dynamic-themes.mdx b/docs/src/content/docs/example/dynamic-themes.mdx
@@ -2,6 +2,15 @@
 title: Dynamic themes
 ---
 
+import Seo from '../../../components/Seo.astro'
+
+<Seo
+    seo={{
+        title: 'Theming',
+        description: 'How to use themes with react-native-unistyles'
+    }}
+>
+
 You can incorporate as many themes as you desire in your application. While there's flexibility in how you structure your theme, it's essential to maintain consistency with the TypeScript type:
 
 To promote reusability and maintainability, it's a good practice to share as many values between themes as possible:
@@ -63,3 +72,5 @@ export const App: React.FunctionComponent = () => {
     )
 }
 ```
+
+</Seo>
diff --git a/docs/src/content/docs/example/media-queries.mdx b/docs/src/content/docs/example/media-queries.mdx
@@ -1,6 +1,14 @@
 ---
 title: Media queries
 ---
+import Seo from '../../../components/Seo.astro'
+
+<Seo
+    seo={{
+        title: 'Media queries',
+        description: 'How to use media queries with react-native-unistyles'
+    }}
+>
 
 For more advanced usage and pixel perfect designs you can also use a custom media queries. Library supports 4 types of media queries (w-width, h-height):
 
@@ -33,3 +41,5 @@ const stylesheet = createStyleSheet(theme => ({
     }
 }))
 ```
+
+</Seo>