Skip to content

Commit

Permalink
feat: add og tags for main page, fix seo component
Browse files Browse the repository at this point in the history
  • Loading branch information
jpudysz committed Nov 29, 2024
1 parent 6c94040 commit 247791d
Show file tree
Hide file tree
Showing 35 changed files with 135 additions and 36 deletions.
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/examples/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import Seo from '../../../../components/Seo.astro'
title: 'Examples',
description: 'Browse examples using react-native-unistyles'
}}
/>
>

🚧 Work is progress. Examples will be released soon.

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/guides/avoiding-keyboard.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Keyboard insets (IME)',
description: 'Learn how to avoid keyboard with Unistyles'
}}
/>
>

Unistyles 3.0 introduces a new `inset` called `ime`, which is automatically animated when the keyboard appears or disappears.
Using this inset in your style will automatically register it for future updates.
Expand Down Expand Up @@ -54,3 +54,5 @@ const styles = StyleSheet.create(theme => ({

In this example, the `container` will automatically adjust to avoid the keyboard, ensuring the `input` remains visible at all times.


</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/guides/custom-web.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ import Seo from '../../../../components/Seo.astro'
title: 'Custom Web integration',
description: 'Learn how to use Unistyles 3.0 without React Native Web'
}}
/>
>


🚧 Work is progress. Guide will be released soon.

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/guides/expo-router.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Expo Router integration',
description: 'Integrate Expo Router with Unistyles'
}}
/>
>


[Expo Router](https://docs.expo.dev/router/introduction/) is a popular routing library from Expo that is built on top of React Navigation. When using Unistyles with Expo Router, it's necessary to configure it properly.
Expand Down Expand Up @@ -51,3 +51,5 @@ export default function Root({ children }: PropsWithChildren) {}
```

It ensures that initialization of Unistyles is called whenever Expo Router tries to render next static page.

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/guides/server-side-rendering.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import Seo from '../../../../components/Seo.astro'
title: 'SSR using Unistyles 3.0',
description: 'Learn about SSR with Unistyles 3.0'
}}
/>
>

🚧 Work is progress. Guide will be released soon.

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/guides/theming.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Theming guide',
description: 'Best practices for theming in Unistyles'
}}
/>
>

Theming in `Unistyles` differs from other libraries as it doesn't impose any specific syntax.

Expand Down Expand Up @@ -301,3 +301,5 @@ Changing rootView background color is useful when your app supports different or
<Aside>
Unistyles supports all colors that React Native supports eg. #FFFFFF, rgba(255, 255, 255, 0.5), red etc.
</Aside>

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/other/babel-plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Unistyles Babel plugin',
description: 'Learn how Unistyles babel plugin works'
}}
/>
>


Unistyles 3.0 relies heavily on the Babel plugin, which helps convert your code in a way that allows binding the `ShadowNode` with `Unistyle`. Before reading this guide, make sure to check the [Look under the hood](/v3/start/how-unistyles-works) guide.
Expand Down Expand Up @@ -225,3 +225,5 @@ const styles = StyleSheet.create({
### Summary
That's it! We hope you enjoy the DX of Unistyles 3.0 with the help of the Babel plugin. If you encounter any Babel issues, we're ready to tackle them and resolve them with priority!
</Seo>
5 changes: 3 additions & 2 deletions docs/src/content/docs/v3/other/dependencies.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Unistyles dependencies',
description: 'Learn about Unistyles dependencies'
}}
/>
>

Unistyles 3.0 minimizes dependencies to keep your app as lightweight as possible.
In the latest version, we’ve opted to include only two essential dependencies that are shaping the future of the React Native ecosystem.
Expand All @@ -27,7 +27,7 @@ Developed by: [Marc Rousavy](/~https://github.com/mrousavy)
- The ability to convert repository from Objective-C to Swift
- Support for calling Swift code directly, without routing it through Objective-C++

We highly encourage you to give Nitro a start ⭐ or support Marc through sponsorship.
We highly encourage you to give Nitro a star ⭐ or support Marc through sponsorship.

### React Native Edge to Edge

Expand All @@ -41,3 +41,4 @@ Additionally, Mathieu's initiative is supported by [Expo](https://docs.expo.dev/

If you use any of Mathieu's libraries, such as `react-native-permissions` or `react-native-bootsplash`, we encourage you to give them a star ⭐ and support him through sponsorship.

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/other/for-library-authors.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Build your own UI kit with Unistyles',
description: 'How to use Unistyles 3.0 in your library'
}}
/>
>

Unistyles is highly extensible and can be used to build UI kits and various other projects. We maintain the core, so you can create any abstraction on top of it.

Expand Down Expand Up @@ -62,3 +62,5 @@ I'm happy to help you with your use case!
:::

Do you have any questions? Feel free to ask in our [Discord](https://discord.gg/akGHf27P4C).

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/other/for-sponsors.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Sponsor Unistyles 3.0',
description: 'Sponsor Unistyles 3.0 development'
}}
/>
>

<Card>
Thank you for all the sponsorships!
Expand Down Expand Up @@ -49,3 +49,5 @@ Do you need help building a custom native library, or a private project? I'm her

[Contact me on X](https://x.com/jpudysz) or [Contact me with email](mailto:jacekpudysz@gmail.com)
</Aside>

</Seo>
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'FAQ',
description: 'Frequently asked questions about Unistyles 3.0'
}}
/>
>

### Can I run Unistyles on Expo Go?

Expand Down Expand Up @@ -45,3 +45,5 @@ If your app still doesn’t automatically switch themes, ensure that:
- `Appearance` from `react-native` is set to null
- You have phone with iOS 15+ or Android 10+
- Your device supports dark mode

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/other/how-to-report-bug.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'How to report a bug',
description: 'Learn how to report a bug in Unistyles 3.0'
}}
/>
>

While developing with Unistyles, you might encounter one of several bug types. Before submitting a bug report, please ensure that you include the required information listed below.

Expand Down Expand Up @@ -67,3 +67,5 @@ We highly encourage you to create a small reproduction of the bug. Without it, w
The web uses a custom parser that may produce different results compared to iOS and Android. We're exploring the use of `WebAssembly` to share C++ parser across platforms.

</Steps>

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/breakpoints.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Breakpoints',
description: 'Learn about breakpoints in Unistyles 3.0'
}}
/>
>

Breakpoints are user-defined key/value pairs that describe the boundaries of screen sizes.
There's no limit to the number of breakpoints; you can define as many as you want.
Expand Down Expand Up @@ -182,3 +182,5 @@ export const RegisteredBreakpoints = () => (
</Text>
)
```

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/compound-variants.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Compound Variants',
description: 'Learn about compound variants in Unistyles 3.0'
}}
/>
>

You can extend your `StyleSheets` even more by using `compound variants`.

Expand Down Expand Up @@ -122,3 +122,5 @@ const styles = StyleSheet.create(theme => ({
Styles from the `compoundVariants` array will take precedence over the styles defined in the `variants` object.
You can define multiple `compoundVariants` in the array to handle different combinations of style properties. This allows for more granular control and customization of your component's appearance.
</Seo>
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Content size category',
description: 'Learn about content size category in Unistyles 3.0'
}}
/>
>

Content size category is a user preference used to adjust text size and control content magnification in your app. This feature is especially useful for users with visual impairments or limited vision.

Expand Down Expand Up @@ -76,3 +76,5 @@ import { AndroidContentSizeCategory, IOSContentSizeCategory } from 'react-native

// compare the current content size category based on platform
```

</Seo>
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'createUnistylesComponent',
description: 'Learn about how it integrate 3rd party libraries with Unistyles engine'
}}
/>
>


Before reading this guide, make sure that you understand [How Unistyles works](/v3/start/how-unistyles-works) and how [Babel plugin](/v3/other/babel-plugin)
Expand Down Expand Up @@ -109,3 +109,5 @@ const MyComponent = () => {
```

TypeScript will autocomplete all your props, so there is no need to specify type manually.

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/dimensions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Dimensions',
description: 'Learn about Dimensions in Unistyles 3.0'
}}
/>
>


Unistyles provides rich metadata about your device dimensions. This is useful for creating responsive designs as well as avoiding installing third-part libraries.
Expand Down Expand Up @@ -118,3 +118,5 @@ Font scale is a ratio between the font size of the device and the default font s
```tsx /fontScale/
UnistylesRuntime.fontScale // eg. 1.0
```

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/display-hide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Display and Hide components',
description: 'Learn about Display and Hide components'
}}
/>
>

In Unistyles 2.0, developers could retrieve the `breakpoint` value from the `useStyles` hook.
This was helpful for hiding certain JSX components based on specific screen sizes.
Expand Down Expand Up @@ -94,3 +94,5 @@ Well, no! These components are simple if-else statements used to conditionally r

We believe this saves you a lot of time and effort, eliminating the need to implement the logic yourself or causing re-renders by listening to any hooks.
</Aside>

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/dynamic-functions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Dynamic Functions',
description: 'Learn about dynamic functions in Unistyles 3.0'
}}
/>
>

If you need to pass a value from JSX to your `stylesheet` you can do so using a concept called `dynamic function`.

Expand Down Expand Up @@ -54,3 +54,5 @@ const styles = StyleSheet.create(theme => ({
})
}))
```

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/edge-to-edge.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Edge to edge layout with Unistyles',
description: 'Learn how Unistyles leverages edge to edge layout'
}}
/>
>

Unistyles uses `WindowsInsetsCompat` API to handle insets on Android. This API requires your app to have edge to edge layout enabled.
In other words, it means that your `StatusBar` is always `translucent` and the app can draw below the `NavigationBar`. A translucent status bar is also the default when you build your app with Expo. To leverage `WindowInsetsCompat`, Unistyles enables `edgeToEdge` layout by default.
Expand Down Expand Up @@ -53,3 +53,5 @@ Apps are edge-to-edge by default on devices running Android 15 if the app is tar
Unistyles enables `edgeToEdge` by default, but sometimes other libraries might interfere with it.
We decided to depend on `react-native-edge-to-edge` package, to help reduce these issues. Learn more [here](/v3/other/dependencies#react-native-edge-to-edge).
</Aside>
</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/media-queries.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Media Queries',
description: 'Learn about media queries in Unistyles 3.0'
}}
/>
>

Media queries provide more power and allow you to style cross-platform apps with pixel-perfect accuracy.

Expand Down Expand Up @@ -149,3 +149,5 @@ const styles = Stylesheet.create(theme => ({
### CSS Media Queries

`Breakpoints` and `Media Queries` will be auto converted to Web CSS media queries. Learn more about [Web Media Queries](/v3/references/web-styles#how-it-works).

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/mini-runtime.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'MiniRuntime',
description: 'Learn about mini runtime in Unistyles 3.0'
}}
/>
>

Mini runtime was introduced in Unistyles `2.8.0` as a subset of `UnistylesRuntime` containing only the properties that are useful in your `StyleSheet`.

Expand Down Expand Up @@ -40,3 +40,5 @@ type MiniRuntime = {
Mini runtime is automatically injected when Unistyles resolves a `StyleSheet` that depends on it.
</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/scoped-theme.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import Seo from '../../../../components/Seo.astro'
title: 'Scoped Theme',
description: 'Learn about scoped theme in Unistyles 3.0'
}}
/>
>

🚧 Work is progress. This feature will be released soon.

</Seo>
5 changes: 4 additions & 1 deletion docs/src/content/docs/v3/references/stylesheet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'StyleSheet',
description: 'Learn about StyleSheet with superpowers'
}}
/>
>

`StyleSheet` replaces the old `createStyleSheet` function and aims for 1:1 parity with the React Native API.
When we say that Unistyles is a superset of StyleSheet, we mean it! That's why we are taking it one step further!
Expand Down Expand Up @@ -194,3 +194,6 @@ Returns following object:
right: 0,
bottom: 0
}
```

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/unistyles-runtime.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'UnistylesRuntime',
description: 'Learn about Unistyles Runtime in Unistyles 3.0'
}}
/>
>

Unistyles Runtime is a powerful feature that allows you to access platform specific values directly from `JavaScript`.
It allows you to skip many dependencies and keep a lot of functionality under one object.
Expand Down Expand Up @@ -86,3 +86,5 @@ const style = StyleSheet.create((theme, rt) => ({
```

Learn more on how Unistyles [re-calculates your styles](/v3/start/how-unistyles-works).

</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/variants.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Variants',
description: 'Learn about variants in Unistyles 3.0'
}}
/>
>

Variants helps you to create a more flexible and reusable stylesheet eg. for your base components.
You can mix them with other Unistyles features like [media queries](/v3/references/media-queries/) and [breakpoints](/v3/references/breakpoints/).
Expand Down Expand Up @@ -410,3 +410,5 @@ The generated TypeScript type will then be:
```
size: ('small' | 'medium' | 'large')
```
</Seo>
4 changes: 3 additions & 1 deletion docs/src/content/docs/v3/references/web-only.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import Seo from '../../../../components/Seo.astro'
title: 'Web only features',
description: 'Learn about web only features in Unistyles 3.0'
}}
/>
>

Unistyles comes with some web-only features that are not available on the React Native side.

Expand Down Expand Up @@ -149,3 +149,5 @@ const styles = StyleSheet.create({
})
})
```

</Seo>
Loading

0 comments on commit 247791d

Please sign in to comment.