Add JS to alerts.

content/components/alerts.md

@@ -155,7 +155,7 @@ Use the following alert components with a border accent as an alternative style.
     <p class="ml-3 text-sm font-medium text-gray-700">
       A simple dark alert with an <a href="#" class="font-semibold hover:text-gray-800 underline">example link</a>. Give it a click if you like.
     </p>
-    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex"  data-collapse-toggle="alert-border-5">
+    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex" data-collapse-toggle="alert-border-5">
       <span class="sr-only">Dismiss</span>
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
     </button>
@@ -257,4 +257,21 @@ The following alert components can be used if you wish to disclose more informat
     </button>
   </div>
 </div>
+{{< /example >}}
+
+## JavaScript
+
+Dismissing the alerts can be done by using the `data-collapse-toggle="alertId"` data attribute where `alertId` is the id of the whole alert component.
+
+{{< example >}}
+<div class="flex bg-blue-100 rounded-lg p-4" id="alertId">
+  <svg class="w-5 h-5 text-blue-700 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
+  <p class="ml-3 text-sm font-medium text-blue-700">
+    A simple info alert with an <a href="#" class="font-semibold hover:text-blue-800 underline">example link</a>. Give it a click if you like.
+  </p>
+  <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex" data-collapse-toggle="alertId">
+    <span class="sr-only">Dismiss</span>
+    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+  </button>
+</div>
 {{< /example >}}

content/getting-started/changelog.md

@@ -15,8 +15,17 @@ nextLink: customize/configuration
 
 We strive to keep a good accountability of all of the version changes that we make for the FlowBite library.
 
-### v1.0.0-alpha1
+### v1.0.1
 
-Released on the 10th of September, 2021.
+Released on 10th of September 2021.
 
-- initial release files
+- updated JavaScript code to use data attributes instead of inline event listeners
+- fixed some of the purged CSS classes for the alerts components
+- clicking outside the dropdown component will now also close the dropdown menu
+- add previous and next links for the docs page
+
+### v1.0.0
+
+Released on 9th of September 2021.
+
+- initial release files

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@themesberg/flowbite-test-2",
-  "version": "1.0.0",
+  "name": "@themesberg/flowbite",
+  "version": "1.0.1",
   "description": "Open-source library of Tailwind CSS components and elements.",
   "keywords": [
     "tailwind",

tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   purge: {
     // enabled: process.env.NODE_ENV === "production" ? true : false,
-    // enabled: true,
+    enabled: true,
     content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
   },
   darkMode: false, // or 'media' or 'class'