24 docs improvements (#30)

* Update readme.md and introduction

* vuelace-logo in introduction

* Video link in introduction

---------

Co-authored-by: Antonio Vivone <ndonio96@gmail.com>
Co-authored-by: Pierantonio Zocchi <pierantonio.zocchi@gmail.com>

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api'
+import vuelaceTheme from './vuelace'
+
+addons.setConfig({
+  theme: vuelaceTheme
+})

.storybook/vuelace.ts

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming/create'
+
+export default create({
+  base: 'dark',
+  brandTitle: 'Vuelace',
+  brandUrl: 'https://skillbill.github.io/vuelace-3/',
+  brandTarget: '_self'
+})

README.md

@@ -1,6 +1,9 @@
-# Vuelace 3 🎨✨
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/@skillbill%2Fvuelace-3.svg)](https://badge.fury.io/js/@skillbill%2Fvuelace-3)
 
-Vuelace is a powerful UI component library built on top of Shoelace, designed to streamline the process of creating beautiful and responsive user interfaces for Vue.js applications leveraging the reliability of web components
+# Vuelace-3 🎨✨
+
+Vuelace-3 is a powerful UI component library built on top of Shoelace, designed to streamline the process of creating beautiful and responsive user interfaces for Vue.js applications leveraging the reliability of web components
 
 ## Recommended IDE Setup
 
@@ -51,7 +54,7 @@ npm run lint
 
 ### Using npm
 
-To install the library inside your project run:
+Vuelace-3 is available at [npm](https://www.npmjs.com/package/@skillbill/vuelace-3). To install the library inside your project run:
 
 ```sh
 npm i @skillbill/vuelace-3
@@ -85,9 +88,13 @@ import '@skillbill/vuelace-3/styles/vuelace.css'
 import '@skillbill/vuelace-3/styles/theme_primevue.css'
 import { installVuelace } from '@skillbill/vuelace-3'
 
+import App from './App.vue'
+
 const app = createApp(App)
 
 installVuelace(app)
+
+app.mount('#app')
 ```
 
 ### Add icons

src/stories/docs/Introduction.mdx

@@ -28,6 +28,9 @@
       backgroundColor: 'white'
     }}
   >
+    <a href="https://www.npmjs.com/package/@skillbill/vuelace-3">
+      <img style={{ height: '36px' }} src="assets/vuelace-logo.svg" alt="GitHub" />
+    </a>
     <a href="https://www.github.com/Skillbill/vuelace-3">
       <img style={{ height: '36px' }} src="assets/github-mark.svg" alt="GitHub" />
     </a>
@@ -41,21 +44,24 @@
 [Vuelace-3](https://www.github.com/Skillbill/vuelace-3) is a UI component library for Vue,
 built on top of [Shoelace](https://shoelace.style/) and [PrimeVue](https://primevue.org/).
 
-The scope was to have a friendly components wrapper for the Shoelace web components ready to use in Vue.
+The scope is to have a friendly components wrapper for the Shoelace web components ready to use in Vue.
 We also included some utilities to use icons comfortably and fulfill missing components with PrimeVue's ones.
 
 ## Details
 
-We don't describe components in detail here because there is the storybook components list on the left panel.
+If you want to take a look at the components, you can find them on the left panel.
 
 If you need to build a site using Vue and you are looking for a ready-to-use components for crud,
 forms, and so on, you are in the right place.
 
 ## Quick start
 
+Vuelace-3 is available at [npm](https://www.npmjs.com/package/@skillbill/vuelace-3).
 It is an easy-to-use vue3 library,
 you can find every updated detail in the [README](https://github.com/Skillbill/vuelace-3/blob/main/README.md)
 
+You can also find a video tutorial [here](https://youtu.be/uYN2l9t50bc)
+
 ## Support
 
 Do you have questions, suggestions or do you need help?