feat: docs

.gitignore

@@ -77,3 +77,6 @@ android/keystores/debug.keystore
 # generated by bob
 lib/
 example/.yarn
+
+#docs
+docs/.yarn

README.md

@@ -29,14 +29,9 @@ yarn add react-native-unistyles
 - [References](https://unistyles-docs.vercel.app/reference/create-style-sheet/)
 - [Examples](https://unistyles-docs.vercel.app/example/breakpoints/)
 
-## Example
-
-In order to check out working example go to [example/](./example).
-
 ## Blog post
 
-For more detailed explanation please refer to my blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
-
+Read about what drove me to create this library in this blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
 
 ## Sponsor my work
 

docs/.astro/types.d.ts

@@ -227,9 +227,9 @@ declare module 'astro:content' {
   collection: "docs";
   data: InferEntrySchema<"docs">
 } & { render(): Render[".mdx"] };
-"reference/create-style-sheet.mdx": {
-	id: "reference/create-style-sheet.mdx";
-  slug: "reference/create-style-sheet";
+"reference/create-stylesheet.mdx": {
+	id: "reference/create-stylesheet.mdx";
+  slug: "reference/create-stylesheet";
   body: string;
   collection: "docs";
   data: InferEntrySchema<"docs">
@@ -248,9 +248,9 @@ declare module 'astro:content' {
   collection: "docs";
   data: InferEntrySchema<"docs">
 } & { render(): Render[".mdx"] };
-"start/migration-from-style-sheet.mdx": {
-	id: "start/migration-from-style-sheet.mdx";
-  slug: "start/migration-from-style-sheet";
+"start/migration-from-stylesheet.mdx": {
+	id: "start/migration-from-stylesheet.mdx";
+  slug: "start/migration-from-stylesheet";
   body: string;
   collection: "docs";
   data: InferEntrySchema<"docs">

docs/astro.config.mjs

@@ -5,12 +5,14 @@ import starlight from '@astrojs/starlight'
 export default defineConfig({
     integrations: [starlight({
         title: 'Unistyles',
+        description: "React Native StyleSheet 2.0",
         customCss: ['./src/styles/custom.css'],
         logo: {
             src: './src/assets/logo.svg'
         },
         social: {
-            github: '/~https://github.com/jpudysz/react-native-unistyles'
+            github: '/~https://github.com/jpudysz/react-native-unistyles',
+            'x.com': 'https://x.com/jpudysz'
         },
         sidebar: [{
             label: 'Start here',
@@ -22,13 +24,13 @@ export default defineConfig({
                 link: '/start/basic-usage/'
             }, {
                 label: 'Migration from StyleSheet',
-                link: '/start/migration-from-style-sheet/'
+                link: '/start/migration-from-stylesheet/'
             }]
         }, {
             label: 'Reference',
             items: [{
                 label: 'createStyleSheet',
-                link: '/reference/create-style-sheet/'
+                link: '/reference/create-stylesheet/'
             }, {
                 label: 'useStyles',
                 link: '/reference/use-styles/'

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles-docs",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

docs/src/components/Codemask.astro

@@ -0,0 +1,17 @@
+---
+---
+
+
+<div class="codemask">
+    <span class="brought">
+        Brought to you by Codemask
+    </span>
+    <a href="https://codemask.com" target="_blank">
+        <img src="../src/assets/codemask.svg" alt="codemask" />
+    </a>
+    <span class="codemask-description">
+        Bridging Your Idea to the digital world
+        <br />
+        Your experts in mobile and web development
+    </span>
+</div>

docs/src/content/docs/index.mdx

@@ -15,9 +15,8 @@ hero:
       icon: external
 ---
 
-import { Card, CardGrid } from '@astrojs/starlight/components';
-
-[<p class="center-image"><img alt="react-native-unistyles" src="https://raw.githubusercontent.com/jpudysz/react-native-unistyles/main/assets/banner.png" /></p>](https://codemask.com)
+import { Card, CardGrid } from '@astrojs/starlight/components'
+import Codemask from '../../components/Codemask.astro'
 
 <Card
     title="Features"
@@ -33,8 +32,13 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
     - ⚔️ No 3rd party dependencies
 
     *-based on this [benchmark](/~https://github.com/efstathiosntonas/react-native-style-libraries-benchmark)
+</Card>
 
-    For more detailed explanation please refer to my blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
+<Card
+    title="Blog"
+    icon="pencil"
+>
+    Read about what drove me to create this library in this blog post [here](https://www.reactnativecrossroads.com/posts/level-up-react-native-styles).
 </Card>
 
 <Card
@@ -50,5 +54,4 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
   Your support is greatly appreciated and helps me dedicate more time and resources to creating quality libraries. Thank you for all the support!
 </Card>
 
-#### License
-  MIT
+<Codemask />

docs/src/content/docs/start/setup.mdx

@@ -5,10 +5,10 @@ title: Setup
 import { Card } from '@astrojs/starlight/components'
 
 <Card
-    title="Beta"
+    title="RC"
     icon="warning"
 >
-    This project is currently in its beta phase. While it hasn't reached version 1.0.0 yet, it's been tested and proven in a large-scale application, performing flawlessly across hundreds screens and components.
+    This project is currently in its Release Candidate phase. While it hasn't reached version 1.0.0 yet, it's been tested and proven in a large-scale application, performing flawlessly across hundreds screens and components.
 
     I'm looking for testers to check the typings, scalability and overall usability for your monorepo projects.
 

docs/src/styles/custom.css

@@ -1,12 +1,52 @@
 :root {
     --sl-color-text-accent: #ee42b2;
+    --sl-logo-brightness: brightness(100%)
 }
 
 :root[data-theme='light'] {
     --sl-color-text-accent: #db33a0;
+    --sl-logo-brightness: brightness(0%)
+}
+
+select {
+    outline: none;
 }
 
 .center-image {
     display: flex;
     justify-content: center;
 }
+
+.codemask {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    margin-top: 3rem !important;
+}
+
+.codemask .brought {
+    font-size: 12px;
+    color: var(--sl-color-gray-3);
+}
+
+.codemask a {
+    margin: 15px 0;
+    display: block;
+}
+
+.codemask > img {
+    filter: var(--sl-logo-brightness);
+}
+
+
+.codemask .codemask-description {
+    font-size: 14px;
+    line-height: 24px;
+    color: var(--sl-color-gray-2);
+}
+
+main .hero {
+    padding-bottom: 0;
+    padding-top: 20px;
+}