Merge pull request #20 from unify-ui-dev/develop

Update and fix content

CONTRIBUTING.MD

@@ -15,13 +15,13 @@ Every contribution is welcome to this open source project. However, before submi
 ## Don't know how to contribute or new to Open Source?
 
 Take a look at :
-1. [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/){target="_blank"}
-2. [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github){target="_blank"}
+1. [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/){:target="_blank"}
+2. [How to Contribute to an Open Source Project on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github){:target="_blank"}
 
 ## Have a question?
 
-1. Check our [Github Issues](){target="_blank"} to see if someone has already answered your question.
-2. Join our community on [Discord](){target="_blank"} and feel free to ask everything you want.
+1. Check our [Github Issues](){:target="_blank"} to see if someone has already answered your question.
+2. Join our community on [Discord](){:target="_blank"} and feel free to ask everything you want.
 
 
 ### Prerequisites
@@ -31,8 +31,8 @@ Take a look at :
 
 #### VS Code Extensions
 
-1. [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss){target="_blank"}
-2. [Inline Fold](https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold){target="_blank"}
+1. [UnoCSS](https://marketplace.visualstudio.com/items?itemName=antfu.unocss){:target="_blank"}
+2. [Inline Fold](https://marketplace.visualstudio.com/items?itemName=moalamri.inline-fold){:target="_blank"}
 
 
 ## commit-convention

README.md

@@ -96,7 +96,7 @@ If you're interested in contributing to Unify-UI, please read our [contributing
 
 ## Request Component/Block
 
-Request [here](https://docs.google.com/forms/d/e/1FAIpQLSfAlmv1bocO-XGoiPfEaWp0v5UzFLbjsLQbQuhIDHhM3V4JFQ/viewform?usp=pp_url){target="_blank"}
+Request [here](https://docs.google.com/forms/d/e/1FAIpQLSfAlmv1bocO-XGoiPfEaWp0v5UzFLbjsLQbQuhIDHhM3V4JFQ/viewform?usp=pp_url){:target="_blank"}
 
 
 ## 📄 License

docs/dark-mode.mdx

@@ -0,0 +1,6 @@
+---
+title: Dark Mode
+description: Adding dark mode to your app
+---
+
+Coming soon

docs/framework-guide/astro.mdx

@@ -0,0 +1,113 @@
+---
+title: Install with AstroJS
+description: Use UnoCSS within your AstroJS project
+---
+
+This guide will help you get started with UnifyUI, how to install and integrate it in your project!
+<br/>
+UnifyUI is built on top of UnoCSS.
+
+
+## Installation
+<Steps>
+
+### Create a new Vite Project
+Install UnoCSS using `your` package manager
+
+<Tabs values={["npm","pnpm", "yarn"]}>
+  <TabPanel value="npm">
+```bash
+npm install -D unocss
+```
+  </TabPanel>
+  <TabPanel value="pnpm">
+```bash
+pnpm add -D unocss
+```
+  </TabPanel>
+  <TabPanel value="yarn">
+```bash
+yarn add -D unocss
+```
+  </TabPanel>
+</Tabs>
+
+### Install preset-icon
+Use any icon with Pure CSS for UnoCSS. UnifyUI uses carbon by default
+
+<Tabs values={["npm","pnpm", "yarn"]}>
+  <TabPanel value="npm">
+```bash
+npm install -D @unocss/preset-icons @iconify-json/carbon
+```
+  </TabPanel>
+  <TabPanel value="pnpm">
+```bash
+pnpm add -D @unocss/preset-icons @iconify-json/carbon
+```
+  </TabPanel>
+  <TabPanel value="yarn">
+```bash
+yarn add -D @unocss/preset-icons @iconify-json/carbon
+```
+  </TabPanel>
+</Tabs>
+
+
+### Install transformer-directives
+
+UnoCSS transformer for `@apply`, `@screen` and `theme()` directives: `@unocss/transformer-directives`.
+
+<Tabs values={["npm","pnpm", "yarn"]}>
+  <TabPanel value="npm">
+```bash
+npm install -D @unocss/transformer-directives
+```
+  </TabPanel>
+  <TabPanel value="pnpm">
+```bash
+pnpm add -D @unocss/transformer-directives
+```
+  </TabPanel>
+  <TabPanel value="yarn">
+```bash
+yarn add -D @unocss/transformer-directives
+```
+  </TabPanel>
+</Tabs>
+
+### Configure UnoCSS
+
+Create a file `uno.config.ts` or `uno.config.js` configuration file to the root-level of your project.
+
+```ts
+// uno.config.ts
+import {
+    defineConfig, presetAttributify, presetIcons, presetUno, presetMini, presetWebFonts
+  } from 'unocss'
+
+  import transformerDirectives from '@unocss/transformer-directives'
+
+  export default defineConfig({
+    transformers: [
+      transformerDirectives(),
+    ],
+    presets: [
+      presetUno(),
+      presetAttributify(),
+      presetMini(),
+      presetWebFonts(),
+      presetIcons(
+        {
+          collections: {
+            carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
+          }
+        }
+      ),
+    ],
+  })
+```
+### Run server
+Run your server to see magic
+
+</Steps>

docs/framework-guide/index.mdx

@@ -0,0 +1,49 @@
+---
+title: Framework Guide
+description: Use UnifyUI + UnoCSS with your favorite framework
+---
+
+## Installation
+This guide will help you how to use UnoCSS + UnifyUI, how to install and integrate it in your new or existing project!
+How to install dependencies and structure your app.
+<br/>
+
+
+<div className="grid sm:grid-cols-2 gap-4">
+  <CardTech href="https://unocss.dev/integrations/nuxt">
+    <div className="min-w-max w-9 h-9 md:w-11 md:h-11 rounded-full bg-background-alt flex items-center justify-center">
+      <img src="/techicons/NuxtJs.svg" width="50" height="50" className="w-4 md:w-5 lg:w-6 h-auto"/>
+    </div>
+    <div className="flex-1">
+      <h3 className="text-md font-semibold text-fg-title">NuxtJS</h3>
+      Intuitive Vue framework for building universal applications.
+    </div>
+  </CardTech>
+  <CardTech href="https://unocss.dev/integrations/vite">
+    <div className="min-w-max w-9 h-9 md:w-11 md:h-11 rounded-full bg-background-alt flex items-center justify-center">
+      <img src="/techicons/Vite.svg" width="50" height="50" className="w-4 md:w-5 lg:w-6 h-auto"/>
+    </div>
+    <div className="flex-1">
+      <h3 className="text-md font-semibold text-fg-title">Vite</h3>
+      Next Generation Frontend Tooling
+    </div>
+  </CardTech>
+  <CardTech href="https://unocss.dev/integrations/astro">
+    <div className="min-w-max w-9 h-9 md:w-11 md:h-11 rounded-full bg-background-alt flex items-center justify-center">
+      <img src="/techicons/Astro.svg" width="50" height="50" className="w-4 md:w-5 lg:w-6 h-auto"/>
+    </div>
+    <div className="flex-1">
+      <h3 className="text-md font-semibold text-fg-title">AstroJS</h3>
+      The web framework that scales with you
+    </div>
+  </CardTech>
+  <CardTech href="https://unocss.dev/integrations/svelte-scoped">
+    <div className="min-w-max w-9 h-9 md:w-11 md:h-11 rounded-full bg-background-alt flex items-center justify-center">
+      <img src="/techicons/Svelte.svg" width="50" height="50" className="w-4 md:w-5 lg:w-6 h-auto"/>
+    </div>
+    <div className="flex-1">
+      <h3 className="text-md font-semibold text-fg-title">Svelte Scoped</h3>
+      The fastest way to build apps of all sizes with Svelte.js.
+    </div>
+  </CardTech>
+</div>

docs/framework-guide/nuxt.mdx

@@ -0,0 +1,116 @@
+---
+title: UnifyUI - Free blocks/Components
+description: UnoCSS Blocks & Components for NuxtJs & VueJS
+---
+
+This guide will help you get started with UnifyUI, how to install and integrate it in your project!
+<br/>
+UnifyUI is built on top of UnoCSS.
+
+## What is UnoCSS?
+
+UnoCSS is the instant atomic CSS engine, that is designed to be flexible and extensible. The core is un-opinionated, and all the CSS utilities are provided via presets.
+
+## Installation
+<Steps>
+
+### Install UnoCSS
+Install UnoCSS using `your` package manager
+
+<Tabs values={["npm","pnpm", "yarn"]}>
+  <TabPanel value="npm">
+```bash
+npm install -D unocss
+```
+  </TabPanel>
+  <TabPanel value="pnpm">
+```bash
+pnpm add -D unocss
+```
+  </TabPanel>
+  <TabPanel value="yarn">
+```bash
+yarn add -D unocss
+```
+  </TabPanel>
+</Tabs>
+
+### Install preset-icon
+Use any icon with Pure CSS for UnoCSS. UnifyUI uses carbon by default
+
+<Tabs values={["npm","pnpm", "yarn"]}>
+  <TabPanel value="npm">
+```bash
+npm install -D @unocss/preset-icons @iconify-json/carbon
+```
+  </TabPanel>
+  <TabPanel value="pnpm">
+```bash
+pnpm add -D @unocss/preset-icons @iconify-json/carbon
+```
+  </TabPanel>
+  <TabPanel value="yarn">
+```bash
+yarn add -D @unocss/preset-icons @iconify-json/carbon
+```
+  </TabPanel>
+</Tabs>
+
+
+### Install transformer-directives
+
+UnoCSS transformer for `@apply`, `@screen` and `theme()` directives: `@unocss/transformer-directives`.
+
+<Tabs values={["npm","pnpm", "yarn"]}>
+  <TabPanel value="npm">
+```bash
+npm install -D @unocss/transformer-directives
+```
+  </TabPanel>
+  <TabPanel value="pnpm">
+```bash
+pnpm add -D @unocss/transformer-directives
+```
+  </TabPanel>
+  <TabPanel value="yarn">
+```bash
+yarn add -D @unocss/transformer-directives
+```
+  </TabPanel>
+</Tabs>
+
+### Configure UnoCSS
+
+Create a file `uno.config.ts` or `uno.config.js` configuration file to the root-level of your project.
+
+```ts
+// uno.config.ts
+import {
+    defineConfig, presetAttributify, presetIcons, presetUno, presetMini, presetWebFonts
+  } from 'unocss'
+
+  import transformerDirectives from '@unocss/transformer-directives'
+
+  export default defineConfig({
+    transformers: [
+      transformerDirectives(),
+    ],
+    presets: [
+      presetUno(),
+      presetAttributify(),
+      presetMini(),
+      presetWebFonts(),
+      presetIcons(
+        {
+          collections: {
+            carbon: () => import('@iconify-json/carbon/icons.json').then(i => i.default),
+          }
+        }
+      ),
+    ],
+  })
+```
+### Run server
+Run your server to see magic
+
+</Steps>