Update README.md

Update thumbnail & description
Add dark mode to component view & update container padding
2025-12-08 14:43:23 +00:00 · 2021-05-31 23:00:17 +02:00 · 2021-05-31 22:30:34 +02:00 · 2021-05-31 22:06:52 +02:00 · 2021-05-31 21:58:05 +02:00
7 changed files with 50 additions and 39 deletions
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="assets/merakiui-og.png" alt="Ibis logo" width="480">
+    <img src="assets/merakiui-thumbnail.png" alt="Meraki UI logo">

 ## Meraki UI

@@ -11,7 +11,7 @@
 -   [Unsplash](https://unsplash.com)
 -   [Freepik Stories](https://stories.freepik.com)
 -   [Heroicons](https://heroicons.dev)
-   [CSS Icons](https://css.gg)
+-   [Coolicons](https://coolicons.cool)

 ### Project setup

@@ -22,13 +22,13 @@ npm install
 ### Compiles and hot-reloads for development

 ```
-npm run serve
+npm run dev
 ```

 ### Compiles and minifies for production

 ```
-npm run build
+npm run generate
 ```

 ### Credits
--- a/assets/merakiui-og.png
+++ b/assets/merakiui-og.png
--- a/assets/merakiui-thumbnail.png
+++ b/assets/merakiui-thumbnail.png
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,14 +1,14 @@
 <template>
    <header class="bg-gray-900 border-b-4 border-blue-500 pattern">
        <nav>
-            <div class="container px-6 py-4 mx-auto">
+            <div class="container p-4 mx-auto">
                <div class="flex items-center justify-between">
                    <a href="/" class="inline-flex items-center text-xl font-bold text-white md:text-2xl hover:text-blue-400">
                        <img class="w-10 h-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> <span class="hidden sm:inline">Meraki <span class="text-blue-400">UI</span></span>
                    </a>

                    <div class="flex items-center space-x-4 sm:space-x-6">
-                        <a :href="SHARE_LINK" class="flex items-center space-x-3 font-medium text-white hover:text-blue-400 hover:underline">
+                        <a target="_blank" :href="SHARE_LINK" class="flex items-center space-x-3 font-medium text-white hover:text-blue-400 hover:underline">
                            <svg class="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78739 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z" fill="currentColor"></path>
                            </svg>
@@ -28,19 +28,18 @@
            </div>
        </nav>

-        <div class="container px-6 py-8 mx-auto md:py-0">
+        <div class="container px-4 py-8 mx-auto md:py-0">
            <div class="md:flex">
                <div class="flex items-center w-full md:w-1/2 md:h-128">
-                    <div class="max-w-lg text-white">
+                    <div class="max-w-xl text-white">
                        <div class="text-xs font-light">Simple UI Starter</div>

                        <h1 class="mt-3 text-2xl font-semibold text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
                        
-                        <p class="mt-3 text-gray-300">
-                            Beautiful <a href="https://tailwindcss.com" class="font-normal text-blue-400 hover:underline">Tailwindcss</a> 
-                            components that support RTL languages & fully responsive based on Flexbox & CSS Grid. Built by 
-                            <a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
-                            <a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
+                        <p class="mt-3 text-gray-300 md:text-lg">
+                            Beautiful <a href="https://tailwindcss.com" class="font-normal text-blue-400 hover:underline">Tailwind CSS</a> 
+                            components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant
+                            <a href="https://tailwindcss.com/docs/dark-mode" class="font-normal text-blue-400 hover:underline">Dark Mode</a>.
                        </p>

                        <div class="flex flex-wrap items-center mt-4">
@@ -83,7 +82,7 @@ export default {
        return {
            components_count: 58,
            SHARE_LINK: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
-            'Check out Meraki UI Awesome @tailwindcss Components that support RTL and fully responsive by @khatabwedaa and @miaababikir 🔥.'
+            'Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode 🔥. \n #tailwindcss #100DaysOfCode \n'
            )}&url=${encodeURIComponent('https://merakiui.com')}`
        }
    },
--- a/components/Main.vue
+++ b/components/Main.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="container px-6 mx-auto">
+    <div class="container px-4 mx-auto">
        <div class="py-16 text-center">
            <h1
                class="text-xl font-medium text-gray-800 md:text-3xl dark:text-white"
@@ -19,10 +19,10 @@
                                :class="
                                    category.name === searchText
                                        ? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200'
-                                        : 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'
-                                "
-                                >{{ category.name }}</app-button
-                            >
+                                        : 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'"
+                                >
+                                {{ category.name }}
+                            </app-button>
                        </span>
                    </div>
                </div>
--- a/components/utilities/ViewComponent.vue
+++ b/components/utilities/ViewComponent.vue
@@ -5,7 +5,7 @@
                <h3 class="text-gray-700 capitalize dark:text-gray-200 md:text-lg">{{ name }}</h3>
            </div>

-            <div class="mt-4 md:mt-0">
+            <div class="mt-4 space-x-4 md:mt-0">
                <app-button @click="rtl =! rtl" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="rtl? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="Rtl">
                    <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none">
                        <path d="M16 13V11.5H10V9.5H16V8L19 10.5L16 13Z" fill="currentColor" />
@@ -13,7 +13,16 @@
                    </svg>
                </app-button>

-                <app-button @click="viewCode =! viewCode" class="p-1 mx-4 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="View code snippet">
+                <app-button @click="dark =! dark" class="p-1 text-gray-600 bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200 hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" aria-label="dark mode button">
+                    <svg v-if="dark" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                    </svg>
+                    <svg v-if="!dark" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                    </svg>
+                </app-button>
+
+                <app-button @click="viewCode =! viewCode" class="p-1 rounded-md hover:text-gray-700 hover:bg-gray-400 dark:hover:bg-gray-500 dark:hover:text-gray-200 focus:outline-none" :class="viewCode? 'bg-gray-400 text-gray-700 dark:bg-gray-500 dark:text-gray-200' : 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-200'" aria-label="View code snippet">
                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                    </svg>
@@ -27,19 +36,21 @@
            </div>
        </div>

-        <div class="flex items-center justify-center mt-4 overflow-hidden bg-gray-300 border rounded-lg dark:border-gray-600 dark:bg-gray-600">
-            <div class="relative w-full" :dir="rtl? 'rtl' : 'ltr'">
-                <slot class="absolute top-0 left-0 w-full h-full" name="component"></slot>
+        <div :class="{ 'dark': dark }">
+            <div class="flex items-center justify-center mt-4 overflow-hidden bg-gray-300 border rounded-lg dark:border-gray-600 dark:bg-gray-600">
+                <div class="relative w-full" :dir="rtl? 'rtl' : 'ltr'">
+                    <slot class="absolute top-0 left-0 w-full h-full" name="component"></slot>

-                <transition name="fade">
-                    <div v-if="copied">
-                        <div class="absolute top-0 left-0 z-50 w-full h-full">
-                            <div class="flex items-center justify-center h-full bg-gray-300 dark:bg-gray-700">
-                                <p class="text-2xl text-gray-700 dark:text-gray-200">Copied!</p>
+                    <transition name="fade">
+                        <div v-if="copied">
+                            <div class="absolute top-0 left-0 z-50 w-full h-full">
+                                <div class="flex items-center justify-center h-full bg-gray-300 dark:bg-gray-700">
+                                    <p class="text-2xl text-gray-700 dark:text-gray-200">Copied!</p>
+                                </div>
                            </div>
                        </div>
-                    </div>
-                </transition>
+                    </transition>
+                </div>
            </div>
        </div>

@@ -64,6 +75,7 @@ export default {
    data() {
        return {
            viewCode: false,
+            dark: false,
            rtl: false,
            copied: false,
        }
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -11,32 +11,32 @@ export default {

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
-    title: 'Meraki UI Tailwindcss Components',
+    title: 'Meraki UI Tailwind CSS Components',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: 'Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.' },
+      { hid: 'description', name: 'description', content: 'Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.' },
      { name: "twitter:card", content: "summary_large_image" },
-      { hid: "twitter:title", name: "twitter:title", content: "Meraki UI Tailwindcss Components" },
+      { hid: "twitter:title", name: "twitter:title", content: "Meraki UI Tailwind CSS Components" },
      {
        hid: "twitter:description",
        name: "twitter:description",
        content:
-          "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
+          "Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
      },
-      { hid: "twitter:image", name: "twitter:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/merakiui-og.png' },
-      { hid: "og:title", property: "og:title", content: "Meraki UI Tailwindcss Components" },
+      { hid: "twitter:image", name: "twitter:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/merakiui-thumbnail.png' },
+      { hid: "og:title", property: "og:title", content: "Meraki UI Tailwind CSS Components" },
      { property: "og:site_name", content: "Meraki UI" },
      { hid: "og:type", property: "og:type", content: "website" },
-      { hid: "og:image", property: "og:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/merakiui-og.png' },
+      { hid: "og:image", property: "og:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/merakiui-thumbnail.png' },
      {
        hid: "og:description",
        property: "og:description",
        content:
-          "Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid.",
+          "Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
      },
    ],
    link: [
Author	SHA1	Message	Date
khatab Wedaa	21e8aced43	Update README.md	2021-05-31 23:00:17 +02:00
khatabwedaa	7cae0e7a5d	Update thumbnail & description	2021-05-31 22:30:34 +02:00
khatabwedaa	70c59a6e9d	Add dark mode to component view & update container padding	2021-05-31 22:06:52 +02:00
khatabwedaa	8556d23e64	Update header	2021-05-31 21:58:05 +02:00