Flowbite CLI

README.md

@@ -51,31 +51,33 @@ Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow" >Node.js
 npm install flowbite
 ```
 
-2. Require Flowbite as a plugin inside the `tailwind.config.js` file:
+2. Use the Flowbite CLI and run the following command to set up Flowbite in the `tailwind.config.js` file:
 
-```javascript
-module.exports = {
-
-    plugins: [
-        require('flowbite/plugin')
-    ]
-
-}
+```bash
+npx flowbite init
 ```
 
-3. Make sure that you add the template path to the `tailwind.config.js` file:
+This will either generate a new default Tailwnd configuration file with Flowbite installed or set up Flowbite inside an existing Tailwind CSS project:
 
 ```javascript
 module.exports = {
 
-    content: [
-        "./node_modules/flowbite/**/*.js"
-    ]
+  // other options ...
+
+  content: [
+    // other templates paths...
+    "./node_modules/flowbite/**/*.js"
+  ]
+
+  plugins: [
+    // other plugins...
+    require('flowbite/plugin')
+  ],
 
 }
 ```
 
-4. Include the main JavaScript file to make interactive elements work:
+3. Include the main JavaScript file to make interactive elements work:
 
 ```html
 <script src="../path/to/flowbite/dist/flowbite.js"></script>

cli.js

@@ -0,0 +1,210 @@
+#! /usr/bin/env node
+/* eslint-disable @typescript-eslint/no-var-requires */
+// Check if --debug is passed
+const debug = process.argv.includes('--debug');
+const fs = require('fs');
+
+if (
+    process.argv.includes('-h') ||
+    process.argv.includes('--help') ||
+    process.argv.length == 2
+) {
+    if (process.argv.includes('init')) {
+        console.log(
+            '\x1b[0;34mFlowbite CLI \x1b[0m\n\nUsage:\nflowbite init [options]\n\nOptions:\n  -h, --help\t\tShow this help\n  -d, --default\t\tCreates a default tailwind.config.js without Flowbite installed\n  -p --postcss\t\tInitialize a postcss.config.js file\n  --debug\t\tShow debug messages'
+        );
+        process.exit(1);
+    } else {
+        console.log(
+            '\x1b[0;34mFlowbite CLI \x1b[0m\n\nUsage:\nflowbite init [options]\n\nOptions:\n  -h, --help\t\tShow this help\n  -d, --default\t\tCreates a default tailwind.config.js without Flowbite installed\n  -p --postcss\t\tInitialize a postcss.config.js file\n  --debug\t\tShow debug messages'
+        );
+        process.exit(1);
+    }
+}
+
+if (process.argv.includes('-v') || process.argv.includes('--version')) {
+    console.log(
+        '\x1b[0;34mFlowbite v' + require('./package.json').version + '\x1b[0m'
+    );
+    process.exit(1);
+}
+
+if (process.argv.includes('init')) {
+    init();
+} else {
+    console.log(
+        '\x1b[0;34m Flowbite CLI \x1b[0m\n\nUsage:\n\n flowbite init [options]\n\nOptions:\n  -h, --help\t\tShow this help\n  -v, --version\t\tShow the version\n  --debug\t\tShow debug messages'
+    );
+    process.exit(1);
+}
+
+async function createTailwindConfig() {
+    if (fs.existsSync('tailwind.config.js')) {
+        log('tailwind.config.js already exists.');
+        return;
+    }
+    const data = `module.exports = {
+    content: [],
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};
+`;
+
+    // Write the file
+    fs.writeFileSync('tailwind.config.js', data, 'utf8');
+    log('tailwind.config.js created.');
+}
+
+async function updateTailwindConfig() {
+    // Read the file and replace plugins:[ with plugins: [require("flowbite")
+    var data = fs.readFileSync('tailwind.config.js', 'utf8');
+    var config;
+    try {
+        // Try to read the config file
+        config = await require('./tailwind.config.js');
+    } catch (e) {
+        log('Error: Invalid tailwind.config.js file.', true);
+        process.exit(1);
+    }
+    // Check if the plugin is already added
+    if (
+        data.includes("require('flowbite/plugin')") &&
+        data.includes('./node_modules/flowbite/**/*.js')
+    ) {
+        log('Flowbite has already been installed in tailwind.config.js.', true);
+        process.exit(1);
+    }
+
+    // Check if flowbite is installed
+    if (!fs.existsSync('node_modules/flowbite')) {
+        log(
+            'Flowbite is not installed.\nInstall it with \x1b[1m\x1b[4mnpm install flowbite\x1b[0m.',
+            true
+        );
+    }
+    // Use regular expressions to find the line where the plugins are defined
+    const pluginLine = data.match(/plugins: \[[\s\S]*\]/)[0];
+
+    // Use regular expressions to find the current plugins
+    var currentPlugins = pluginLine?.match(/require\('.*'\)/g);
+
+    // Checks if the plugin is already added
+    if (pluginLine) {
+        if (!currentPlugins) currentPlugins = [];
+        if (currentPlugins.includes("require('flowbite/plugin')"))
+            return log(
+                'Flowbite has already been installed in tailwind.config.js.'
+            );
+        // Add the new plugin to the current plugins
+        currentPlugins.push("require('flowbite/plugin')");
+
+        log('Flowbite plugin added to tailwind.config.js.');
+    }
+
+    // Check if the content is already added
+    if (!config.content.includes('./node_modules/flowbite/**/*.js')) {
+        config.content.push('./node_modules/flowbite/**/*.js');
+        log('Flowbite node_modules added to tailwind.config.js.');
+    }
+
+    // Updates the file
+    var result = data.replace(
+        /plugins\s*:\s*\[(.*)]/gs,
+        'plugins: [' + currentPlugins.join(', ') + ']'
+    );
+
+    // Add " to all the content paths
+    var content = config.content.map((path, index) => {
+        // Check if index is the last one
+        if (index === config.content.length - 1)
+            return "\n        '" + path + "'\n    ";
+        return "\n        '" + path + "'";
+    });
+    result = result.replace(
+        /content\s*:\s*\[(.*?)]/gs,
+        'content: [' + content.join(',') + ']'
+    );
+
+    // Write the file
+    fs.writeFileSync('tailwind.config.js', result, 'utf8');
+    log('tailwind.config.js updated.');
+}
+
+async function postCss() {
+    // Check if postcss.config.js exists
+    if (!fs.existsSync('postcss.config.js')) {
+        if (
+            !fs.existsSync('node_modules/postcss') &&
+            !fs.existsSync('node_modules/tailwindcss') &&
+            !fs.existsSync('node_modules/autoprefixer')
+        ) {
+            log(
+                "PostCSS and AutoPrefixer aren't installed.\nInstall them with \x1b[1m\x1b[4mnpm install -D tailwindcss postcss autoprefixer\x1b[0m.",
+                true
+            );
+        }
+        // Create postcss.config.js
+        const data = `module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+};
+`;
+        fs.writeFileSync('postcss.config.js', data, 'utf8');
+        log('postcss.config.js created.');
+    } else {
+        return;
+    }
+}
+
+/**
+ *
+ * @param {string} msg
+ * @param {boolean} important
+ * @returns
+ */
+function log(msg, important = false) {
+    if (important == true) {
+        console.log(msg + '\x1b[0m');
+    } else if (debug == true) {
+        console.log(msg + '\x1b[0m');
+    }
+}
+
+/**
+ * Init the tailwind config
+ * @returns
+ */
+async function init() {
+    if (process.argv.includes('-d') || process.argv.includes('--default')) {
+        if (fs.existsSync('tailwind.config.js')) {
+            log('tailwind.config.js already exists.', true);
+            process.exit(1);
+        }
+        await createTailwindConfig();
+        log('Tailwind config created without Flowbite', true);
+        if (process.argv.includes('-p') || process.argv.includes('--postcss')) {
+            await postCss();
+        }
+        process.exit(1);
+    }
+    if (fs.existsSync('tailwind.config.js')) {
+        await updateTailwindConfig();
+        log('Flowbite has been installed in tailwind.config.js.', true);
+    } else {
+        await createTailwindConfig();
+        await updateTailwindConfig();
+        log(
+            'Created new tailwind.config.js file with Flowbite installed.',
+            true
+        );
+    }
+    if (process.argv.includes('-p') || process.argv.includes('--postcss')) {
+        await postCss();
+        log('Created postcss.config.js file.', true);
+    }
+    process.exit(1);
+}

content/getting-started/introduction.md

@@ -61,34 +61,36 @@ Flowbite is technically a plugin that can be included into any existing Tailwind
 npm install flowbite
 ```
 
-2. Include Flowbite as a plugin inside the `tailwind.config.js` file:
+2. Use the Flowbite CLI and run the following command to set up Flowbite in the `tailwind.config.js` file:
 
-```javascript
-module.exports = {
-
-    plugins: [
-        require('flowbite/plugin')
-    ]
-
-}
+```bash
+npx flowbite init
 ```
 
-3. Additionally to your own `content` data you should add `flowbite` to apply the classes from the interactive elements in the `tailwind.config.js` file:
+This will either generate a new default Tailwnd configuration file with Flowbite installed or set up Flowbite inside an existing Tailwind CSS project:
 
 ```javascript
 module.exports = {
 
-    content: [
-        "./node_modules/flowbite/**/*.js"
-    ]
+  // other options ...
+
+  content: [
+    // other templates paths...
+    "./node_modules/flowbite/**/*.js"
+  ]
+
+  plugins: [
+    // other plugins...
+    require('flowbite/plugin')
+  ],
 
 }
 ```
 
-4. Require the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
+3. Include the main JavaScript file to make interactive elements work:
 
 ```html
-<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
+<script src="../path/to/flowbite/dist/flowbite.js"></script>
 ```
 
 ### Include via CDN

content/getting-started/quickstart.md

@@ -27,34 +27,36 @@ Make sure that you have <a href="https://nodejs.org/en/" rel="nofollow">Node.js<
 npm install flowbite
 ```
 
-2. Require Flowbite as a plugin inside the `tailwind.config.js` file:
+2. Use the Flowbite CLI and run the following command to set up Flowbite in the `tailwind.config.js` file:
 
-```javascript
-module.exports = {
-
-    plugins: [
-        require('flowbite/plugin')
-    ]
-
-}
+```bash
+npx flowbite init
 ```
 
-3. Additionally to your own `content` data you should add `flowbite` to apply the classes from the interactive elements in the `tailwind.config.js` file:
+This will either generate a new default Tailwnd configuration file with Flowbite installed or set up Flowbite inside an existing Tailwind CSS project:
 
 ```javascript
 module.exports = {
 
-    content: [
-        "./node_modules/flowbite/**/*.js"
-    ]
+  // other options ...
+
+  content: [
+    // other templates paths...
+    "./node_modules/flowbite/**/*.js"
+  ]
+
+  plugins: [
+    // other plugins...
+    require('flowbite/plugin')
+  ],
 
 }
 ```
 
-4. Require the JavaScript code that powers the interactive elements before the end of your `<body>` tag:
+3. Include the main JavaScript file to make interactive elements work:
 
 ```html
-<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
+<script src="../path/to/flowbite/dist/flowbite.js"></script>
 ```
 
 ### Include via CDN