Merge pull request #964 from tailwarden/feature/953-card-video-frame-…

…and-image-styling

added rounded images and videos also added GA tracker

docs/community-support/contributing.mdx

@@ -29,21 +29,16 @@ Once you’ve received review and approval, your commits are squashed, and your
     height:0,
     overflow:'hidden',
   }}>
-  <iframe
+  <iframe className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl"
     src='https://www.youtube.com/embed/Vn5uc2elcVg'
     allowFullScreen
     webkitallowfullscreen="true"
     frameBorder="0"
-    style={{
-      position: 'absolute',
-      top:0,
-      left:0,
-      width:'100%',
-      height:'100%',
-    }}
   >
   </iframe>
 </div>
 
 ---
-If you're in need of any assistance at any stage of your contributing journey please don't hesitate to reach out to anybody in the `#general` or `#feedback` discord channels, also let us know if you want to be added to the private `#contributors` channel too. Or directly to `@mlabouardy` or `@JakePage` who will always be happy to help. 
+If you're in need of any assistance at any stage of your contributing journey please don't hesitate to reach out to anybody in the `#general` or `#feedback` discord channels, also let us know if you want to be added to the private `#contributors` channel too. Or directly to `@mlabouardy` or `@JakePage` who will always be happy to help. 
+
+

docs/community-support/events.mdx

@@ -10,7 +10,7 @@ Whether you're keen on getting started as a contributor, seeking to understand m
 
 <Info> The event timings mentioned in the calendar are according to the **(GMT+01:00) Western European Time** timezone. Be sure to change it according to your **local timezone** while adding the event to the calendar! </Info>
 
-<iframe src="https://calendar.google.com/calendar/embed?src=d7546d80fed8e35d769785a3cbe8849ef8fded7ccbebd170eadb474c99a950fb%40group.calendar.google.com&ctz=Europe%2FParis" width="800" height="600" frameborder="0" scrolling="no"/>
+<iframe className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl" src="https://calendar.google.com/calendar/embed?src=d7546d80fed8e35d769785a3cbe8849ef8fded7ccbebd170eadb474c99a950fb%40group.calendar.google.com&ctz=Europe%2FParis" width="800" height="600" frameborder="0" scrolling="no"/>
 
 ---
 

docs/community-support/faqs.mdx

@@ -47,7 +47,9 @@ If you have resources tagged already in your cloud provider you will shortly to
 
 On Komiser you can add in the Inventory section. Select the resources you would like to add and hit the `tag resources` button. 
 
-![add-tags](images/adding-tags.png)
+<Frame className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl">
+  <img src="images/adding-tags.png" />
+</Frame>
 
 ## How can I request a new feature?
 

docs/configuration/cloud-providers/aws.mdx

@@ -330,20 +330,13 @@ The above command deploys Komiser on the Kubernetes cluster in the default confi
     height:0,
     overflow:'hidden',
   }}>
-  <iframe
-    src='https://www.youtube.com/embed/4veDmJpui44'
-    allowFullScreen
-    webkitallowfullscreen="true"
-    frameBorder="0"
-    style={{
-      position: 'absolute',
-      top:0,
-      left:0,
-      width:'100%',
-      height:'100%',
-    }}
-  >
-  </iframe>
+<iframe className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl"
+  src='https://www.youtube.com/embed/4veDmJpui44'
+  allowFullScreen
+  webkitallowfullscreen="true"
+  frameBorder="0"
+>
+</iframe>
 </div>
 
 ## Multiple account EKS (Helm chart) installation
@@ -354,10 +347,9 @@ Steps for a container to access the resources in multiple AWS accounts.
 We are working with two example clusters, ADMIN and DEV cluster.
 
 Solution diagram:
-<img
-  src="/images/multi-account-graph.png"
-  alt="multi-account-graph"
-/>
+<Frame className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl">
+  <img src="/images/multi-account-graph.png" />
+</Frame>
 
 ### Create and IAM OIDC provider for your cluster
 

docs/configuration/cloud-providers/civo.mdx

@@ -91,18 +91,12 @@ file="komiser.db
     height:0,
     overflow:'hidden',
   }}>
-  <iframe
+  <iframe className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl"
     src='https://www.youtube.com/embed/NBbEpoW-kVs'
     allowFullScreen
     webkitallowfullscreen="true"
     frameBorder="0"
-    style={{
-      position: 'absolute',
-      top:0,
-      left:0,
-      width:'100%',
-      height:'100%',
-    }}
   >
   </iframe>
-</div>
+</div>
+

docs/configuration/cloud-providers/k8s.mdx

@@ -73,7 +73,9 @@ Point your browser to `http://localhost:3000`
 ### You should see something like this!
 > In komiser v3.0.1 only `pods` and `services` are supported. More Kubernetes resources will be added shortly. 
 
-![Kubernetes-dashboard](/images/k8s-view.png)
+<Frame className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl">
+  <img src="/images/k8s-view.png" />
+</Frame>
 
 ### Here's a video tutorial on how to integrate your Kubernetes cluster with Komiser:
 
@@ -84,18 +86,12 @@ Point your browser to `http://localhost:3000`
     height:0,
     overflow:'hidden',
   }}>
-  <iframe
+  <iframe className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl"
     src='https://www.youtube.com/embed/hSiVFjD0u3I'
     allowFullScreen
     webkitallowfullscreen="true"
     frameBorder="0"
-    style={{
-      position: 'absolute',
-      top:0,
-      left:0,
-      width:'100%',
-      height:'100%',
-    }}
   >
   </iframe>
-</div>
+</div>
+

docs/getting-started/installation.mdx

@@ -58,18 +58,12 @@ brew reinstall komiser
     height:0,
     overflow:'hidden',
   }}>
-  <iframe
-    src='https://www.youtube.com/embed/csWeTzfPCEo?si=BvD7oF1ARz4ZAWCk'
-    allowFullScreen
-    webkitallowfullscreen="true"
-    frameBorder="0"
-    style={{
-      position: 'absolute',
-      top:0,
-      left:0,
-      width:'100%',
-      height:'100%',
-    }}
-  >
-  </iframe>
-</div>
+<iframe className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl"
+  src='https://www.youtube.com/embed/csWeTzfPCEo?si=BvD7oF1ARz4ZAWCk'
+  allowFullScreen
+  webkitallowfullscreen="true"
+  frameBorder="0"
+>
+</iframe>
+</div>
+

docs/getting-started/introduction.mdx

@@ -8,52 +8,67 @@ This section is a high-level overview of how the Komiser Documentation is struct
 
 The Komiser Documentation covers everything you need to know about Komiser. It made up of five main sections which are:
 
-- [Introduction](/docs/Introduction/installation.md)
-- [Cloud Providers](/docs/cloud-providers/aws)
-- [Contributing](/docs/Contributing/contribute.md)
-- [Guides](/docs/guides/overview)
-- [FAQs](/docs/FAQ/faq.md)
+[Introduction](/docs/Introduction/installation.md)
+
+[Cloud Providers](/docs/cloud-providers/aws)
+
+[Contributing](/docs/Contributing/contribute.md)
+
+[Guides](/docs/guides/overview)
+
+[FAQs](/docs/FAQ/faq.md)
 
 ## Introduction
 
 In the `introduction` section you will find the three pages below. Since Komiser is an open-source project, we are fully aware that any OSS project is only as valuable as the community that surrounds it, that's why we want to make it as easy as possible for everyone to participate, you should be able to learn how to do that in the `Community` section.
 Head over to the `Installation` page to get the download the Komiser CLI for your OS and architecture.
 The `What is Komiser?` page summarizes the goals and features of the Komiser project.
 
-- [Community](/docs/Introduction/community.md)
-- [Installation](/docs/Introduction/installation.md)
-- [What is Komiser?](/docs/Introduction/what-is-komiser.md)
+[Community](/docs/Introduction/community.md)
+
+[Installation](/docs/Introduction/installation.md)
+
+[What is Komiser?](/docs/Introduction/what-is-komiser.md)
 
 ## Cloud Providers
 
 Komiser supports multiple cloud providers and form of deployment.
 Follow the links below to get the installation steps for the each cloud provider:
 
-- [AWS](/docs/cloud-providers/aws)
-- [Azure](/docs/cloud-providers/azure)
-- [Civo](/docs/cloud-providers/civo)
-- [DigitalOcean](/docs/cloud-providers/digital-ocean)
-- [Kubernetes](/docs/cloud-providers/kubernetes)
-- [Linode](/docs/cloud-providers/linode)
-- [MongoDB Atlas](/docs/cloud-providers/mongodb-atlas)
-- [OCI](/docs/cloud-providers/oci)
-- [Scaleway](/docs/cloud-providers/scaleway)
-- [Tencent](/docs/cloud-providers/tencent)
+[AWS](/docs/cloud-providers/aws)
+
+[Azure](/docs/cloud-providers/azure)
+
+[Civo](/docs/cloud-providers/civo)
+
+[DigitalOcean](/docs/cloud-providers/digital-ocean)
+
+[Kubernetes](/docs/cloud-providers/kubernetes)
+
+[Linode](/docs/cloud-providers/linode)
+
+[MongoDB Atlas](/docs/cloud-providers/mongodb-atlas)
+
+[OCI](/docs/cloud-providers/oci)
+
+[Scaleway](/docs/cloud-providers/scaleway)
+
+[Tencent](/docs/cloud-providers/tencent)
 
 ## Contributing
 
 Komiser is written in `Golang` and is `Elv2 licensed` - contributions are always welcome whether that means providing feedback, be it through GitHub, through the `#feedback` channel on our [Discord server](https://discord.tailwarden.com) or testing existing and new features. All of the relevant information below:
 
-- [Contribute](/docs/Contributing/contribute.md)
+[Contribute](/docs/Contributing/contribute.md)
 
 ## Guides
 
 We want to be able to give Komiser users the tips and guidance neccessary to be able to get the most value from the tool as quickly as possible. That's why we will be continously adding and updating informative guides and series in which try to relay valuable and actionable advice.
 
-- [How to Komiser](/docs/guides/overview)
+[How to Komiser](/docs/guides/overview)
 
 ## FAQs
 
 Find all the answers to all the Komiser related questions you might have. Feel free to reach out via the `#feedback` channel on [Discord](https://discord.tailwarden.com) to request the inclusion of additional questions.
 
-- [FAQs](/docs/FAQ/faq.md)
+[FAQs](/docs/FAQ/faq.md)

docs/getting-started/quickstart.mdx

@@ -47,7 +47,9 @@ uri="postgres://postgres:komiser@localhost:5432/komiser?sslmode=disable"
   file = "komiser.db"
 ```
 
-<Note> The reason for this external data persistence is to improve the filtering, sorting and tagging management experience making it faster and smoother. It also serves as a standalone DB which you are free to query and visualize as you see fit. </Note>
+<Note className="tailwarden style bg-black-50"> 
+The reason for this external data persistence is to improve the filtering, sorting and tagging management experience making it faster and smoother. It also serves as a standalone DB which you are free to query and visualize as you see fit. 
+</Note>
 
 ### Example config.toml
 ```
@@ -121,20 +123,13 @@ docker run -v /local/path/to/config.toml:/etc/config/config.toml  -v /local/path
     height:0,
     overflow:'hidden',
   }}>
-  <iframe
-    src='https://www.youtube.com/embed/8IJMoH4PKe8'
-    allowFullScreen
-    webkitallowfullscreen="true"
-    frameBorder="0"
-    style={{
-      position: 'absolute',
-      top:0,
-      left:0,
-      width:'100%',
-      height:'100%',
-    }}
-  >
-  </iframe>
+<iframe className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl"
+  src='https://www.youtube.com/embed/8IJMoH4PKe8'
+  allowFullScreen
+  webkitallowfullscreen="true"
+  frameBorder="0"
+>
+</iframe>
 </div>
 
 ## Self-hosted
@@ -151,4 +146,5 @@ Head over to your cloud provider of choice to learn how to connect your Komiser
 * [MongoDB](/configuration/cloud-providers/mongodb-atlas)
 * [OCI](/configuration/cloud-providers/oci)
 * [Scaleway](/configuration/cloud-providers/scaleway)
-* [Tencent](/configuration/cloud-providers/tencent)
+* [Tencent](/configuration/cloud-providers/tencent)
+

docs/guides/dashboard.mdx

@@ -13,7 +13,9 @@ To the left of the cloud map, you will find the `Resource manager`, where you ca
 
 Below, you will find the `Cost explorer`, which allows you to sort resources and compare costs on a monthly to yearly basis. You can also exclude resources from the cost comparison.
 
-![Dashboard gif](/images/dashboard.png)
+<Frame className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl">
+  <img src="/images/dashboard.png" />
+</Frame>
 
 ### Check out the `dashboard` in the first part of the Komiser v3.0.3 video:
 
@@ -24,18 +26,11 @@ Below, you will find the `Cost explorer`, which allows you to sort resources and
     height:0,
     overflow:'hidden',
   }}>
-  <iframe
+  <iframe className="tailwind styles absolute top-0 left-0 w-full h-full rounded-2xl"
     src='https://www.youtube.com/embed/fBo_vVXu6qQ'
     allowFullScreen
     webkitallowfullscreen="true"
     frameBorder="0"
-    style={{
-      position: 'absolute',
-      top:0,
-      left:0,
-      width:'100%',
-      height:'100%',
-    }}
   >
   </iframe>
 </div>

docs/mint.json

@@ -7,15 +7,15 @@
   },
   "favicon": "/favicon.png",
   "colors": {
-    "primary": "#697372",
-    "light": "#FFFFFF",
+    "primary": "#008484",
+    "light": "#33CCCC",
     "dark": "#33CCCC",
     "background": {
       "dark": "#090F19"
     },
     "anchors": {
-      "from": "#FF7F57",
-      "to": "#9563FF"
+      "from": "#008484",
+      "to": "#33CCCC"
     }
   },
   "topbarCtaButton": {
@@ -84,5 +84,12 @@
     "linkedin": "https://www.linkedin.com/company/tailwarden",
     "youtube": "https://www.youtube.com/@tailwarden"
   },
-  "backgroundImage": "/images/background-image.png"
-}
+
+  "backgroundImage": "/images/background-image.png",
+
+  "analytics": {
+    "ga4": {
+        "measurementId": "G-PVLRSMWSFG"
+    }
+  }
+}