Examples and Shuffle Package Maker

Here you can find useful examples and information about Shuffle Package Maker, which will help you upload your first library to Shuffle!


Shuffle Package Maker

The Shuffle Package Maker is a tool that helps you create a ZIP file with a library package structure from Tailwind UI and Flowbite. You can download it from GitHub.

Please follow the instructions in the README file to install and use the tool. You will also find some tips below.


Uploading Tailwind UI

It is recommended to use the Shuffle Package Maker to prepare the library package.

First, you should download the HTML components from Tailwind UI website.
You can use Tailwind UI Crawler with our config file to automate this process.

Downloaded output directory should contain html/components directory with HTML files grouped by categories.

Use the Shuffle Package Maker to create a ZIP file with the library package structure. It is simple as running two commands in the terminal:

npm install
node generate.mjs DIRECTORY_NAME --preset PRESET_NAME

or just run the following command:

npx shuffle-package-maker DIRECTORY_NAME --preset PRESET_NAME

The DIRECTORY_NAME should be the full path to html/components directory.
The PRESET_NAME should be one of the available presets: tailwindui (all categories), tailwindui-marketing, tailwindui-application-ui, tailwindui-ecommerce.

Then, the directory with the Shuffle Package Maker should contain a new ZIP file in output directory with parsed html files and shuffle.config.json file.
You should modify the shuffle.config.json file to adjust the library configuration, such as adding Tailwind config, changing the library name, description, or adding icons.


Uploading Flowbite

It is recommended to use the Shuffle Package Maker to prepare the library package.

First, you should download the HTML + JS ZIP package from the Flowbite website. For now there are three packages available: Marketing UI Blocks, Admin Dashboard, and Publisher UI Blocks.
Then, unpack downloaded ZIP file.

Unpacked directory should contain: tailwind configuration file and src directory with HTML files.

Use the Shuffle Package Maker to create a ZIP file with the library package structure. It is simple as running two commands in the terminal:

npm install
node generate.mjs DIRECTORY_NAME --preset PRESET_NAME

or just run the following command:

npx shuffle-package-maker DIRECTORY_NAME --preset PRESET_NAME

The DIRECTORY_NAME should be the name of the directory with unpacked files from the Flowbite package.
The PRESET_NAME should be one of the available presets: flowbite-marketing-ui, flowbite-publisher-ui, flowbite-admin-dashboard.

Then, the directory with the Shuffle Package Maker should contain a new ZIP file in output directory with parsed html files and shuffle.config.json file with Tailwind config included.
If needed, you can modify the shuffle.config.json file to adjust the library configuration, such as changing the library name, description, or adding icons.


Example config file

Tailwind CSS

{
    "$schema": "https://shuffle.dev/user-library/schema.json",
    "name": "tailwind-library",
    "description": "A simple library management system",
    "icon": "icon.svg",
    "iconDarkMode": "icon_dark_mode.svg",
    "framework": "tailwind",
    "bodyClasses": [
        "body-one",
        "body-two"
    ],
    "tailwindPlugins": [
        "@tailwindcss/typography",
    ],
    "tailwindConfig": {
        "content": [
            "./src/**/*.{html,js}",
        ],
        "theme": {
            "extend": {
                "colors": {
                    "primary": {
                        "50": "#f9fafb",
                        "100": "#f3f4f6",
                        "200": "#e5e7eb",
                        "300": "#d1d5db",
                        "400": "#9ca3af",
                        "500": "#6b7280",
                        "600": "#4b5563",
                        "700": "#374151",
                        "800": "#1f2937",
                        "900": "#111827"
                    }
                }
            }
        }
    },
    "assetsConfiguration": {
        "css": {
            "files": [
                "css/styles.css"
            ]
        },
        "js": {
            "files": [
                "js/main.js"
            ],
            "cdn": [
                "https://code.jquery.com/jquery-3.7.1.min.js"
            ]
        },
        "assetsPath": "library-assets"
    },
    "categories": [
        {
            "id": "features",
            "name": "Features",
            "components": [
                {
                    "id": "01_awz",
                    "name": "01_awz",
                    "html_file": "components/features/01_awz.html"
                },
                {
                    "id": "09_awz",
                    "name": "09_awz",
                    "html_file": "components/features/09_awz.html"
                },
                {
                    "id": "10_awz",
                    "name": "10_awz",
                    "html_file": "components/features/10_awz.html"
                }
            ]
        },
        {
            "id": "footers",
            "name": "Footers",
            "components": [
                {
                    "id": "01_awz",
                    "name": "01_awz",
                    "html_file": "components/footers/01_awz.html"
                },
                {
                    "id": "05_awz",
                    "name": "05_awz",
                    "html_file": "components/footers/05_awz.html"
                }
            ]
        }
    ]
}

Bootstrap

{
    "$schema": "https://shuffle.dev/user-library/schema.json",
    "name": "Bootstrap library",
    "description": "A simple library management system",
    "icon": "icon.svg",
    "iconDarkMode": "icon_dark_mode.svg",
    "framework": "bootstrap",
    "sassVariablesFile": "variables.scss",
    "assetsConfiguration": {
        "css": {
            "files": [
                "css/styles.css"
            ]
        },
        "js": {
            "files": [
                "js/main.js"
            ],
            "cdn": [
                "https://code.jquery.com/jquery-3.7.1.min.js"
            ]
        },
        "assetsPath": "library-assets"
    },
    "categories": [
        {
            "id": "about",
            "name": "About",
            "components": [
                {
                    "id": "01_awz",
                    "name": "01_awz",
                    "html_file": "components/about/01_awz.html"
                },
                {
                    "id": "02_awz",
                    "name": "02_awz",
                    "html_file": "components/about/02_awz.html"
                },
                {
                    "id": "05_awz",
                    "name": "05_awz",
                    "html_file": "components/about/05_awz.html"
                }
            ]
        },
        {
            "id": "faq",
            "name": "FAQ",
            "components": [
                {
                    "id": "01_awz",
                    "name": "01_awz",
                    "html_file": "components/faq/01_awz.html"
                },
                {
                    "id": "05_awz",
                    "name": "05_awz",
                    "html_file": "components/faq/05_awz.html"
                }
            ]
        }
    ]
}

Bulma

{
    "$schema": "https://shuffle.dev/user-library/schema.json",
    "name": "Bulma library",
    "description": "A simple library management system",
    "icon": "icon.svg",
    "iconDarkMode": "icon_dark_mode.svg",
    "framework": "bulma",
    "sassVariablesFile": "variables.scss",
    "assetsConfiguration": {
        "css": {
            "files": [
                "css/styles.css"
            ],
            "cdn": [
                "https://cdn.jsdelivr.net/npm/bulma@1.0.1/css/bulma.min.css"
            ]
        },
        "js": {
            "files": [
                "js/main.js"
            ],
            "cdn": [
                "https://code.jquery.com/jquery-3.7.1.min.js"
            ]
        },
        "assetsPath": "library-assets"
    },
    "categories": [
        {
            "id": "career",
            "name": "Career",
            "components": [
                {
                    "id": "01_awz",
                    "name": "01_awz",
                    "html_file": "components/career/01_awz.html"
                },
                {
                    "id": "05_awz",
                    "name": "05_awz",
                    "html_file": "components/career/05_awz.html"
                }
            ]
        },
        {
            "id": "features",
            "name": "Features",
            "components": [
                {
                    "id": "01_awz",
                    "name": "01_awz",
                    "html_file": "components/features/01_awz.html"
                },
                {
                    "id": "08_awz",
                    "name": "08_awz",
                    "html_file": "components/features/08_awz.html"
                }
            ]
        }
    ]
}

Example directory structure

Tailwind CSS (example package)

/components/
/components/features/
/components/features/features1.html
/components/features/features2.html
/components/newsletter/
/components/newsletter/newsletter1.html
/components/newsletter/newsletter2.html
/components/newsletter/newsletter3.html
/css/
/css/styles.css
/js/
/js/main.js
/library-assets/
/library-assets/features/
/library-assets/features/chart.png
/library-assets/newsletter/
/library-assets/newsletter/send.png
/shuffle.config.json
/tailwind.config.json

Bootstrap (example package)

/components/
/components/about/
/components/about/about1.html
/components/about/about2.html
/components/faq/
/components/faq/faq1.html
/components/faq/faq2.html
/components/faq/faq3.html
/css/
/css/styles.css
/js/
/js/main.js
/library-assets/
/library-assets/about/
/library-assets/about/picture1.png
/library-assets/faq/
/library-assets/faq/question.png
/shuffle.config.json
/variables.scss

Bulma (example package)

/components/
/components/career/
/components/career/career1.html
/components/career/career2.html
/components/features/
/components/features/features1.html
/components/features/features2.html
/css/
/css/styles.css
/js/
/js/main.js
/library-assets/
/library-assets/career/
/library-assets/career/person.png
/shuffle.config.json
/icon.svg
/icon_dark.svg
/variables.scss

© 2024 Shuffle. All rights reserved.