Add meta tags and prettier

layouts/default.vue

@@ -1,5 +1,3 @@
 <template>
-  <div>
-    <Nuxt />
-  </div>
+  <Nuxt />
 </template>

nuxt.config.js

@@ -7,14 +7,31 @@ export default {
 
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
-    title: 'merakiui',
+    title: 'Meraki UI Tailwindcss Components',
     htmlAttrs: {
       lang: 'en'
     },
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: '' }
+      { hid: 'description', name: 'description', content: 'Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.' },
+      { name: "twitter:card", content: "summary_large_image" },
+      { name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
+      {
+        name: "twitter:description",
+        content:
+          "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
+      },
+      { name: "twitter:image", content: '~/assets/merakiui-og.png' },
+      { property: "og:title", content: "Meraki UI Tailwindcss Components" },
+      { property: "og:site_name", content: "Meraki UI" },
+      { property: "og:type", content: "website" },
+      { property: "og:image", content: '~/assets/merakiui-og.png' },
+      {
+        property: "og:description",
+        content:
+          "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
+      },
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }

package.json

@@ -17,9 +17,22 @@
     "@tailwindcss/postcss7-compat": "^2.0.3",
     "autoprefixer": "^9",
     "highlight.js": "^10.6.0",
+    "husky": "^5.0.9",
+    "lint-staged": "^10.5.4",
     "postcss": "^7",
+    "prettier": "^2.2.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "vue-backtotop": "^1.6.1",
     "vue-clipboard2": "^0.3.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,css,md}": [
+      "prettier --tab-width 4 --jsx-bracket-same-line true --write"
+    ]
   }
 }

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="{ 'dark' : darkMode }">
-        <div class="bg-white dark:bg-gray-900 font-roboto" id="app">
+        <div class="bg-white dark:bg-gray-900 font-roboto">
             <header-component></header-component>
             <main-component></main-component>