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 or via NPM.
npm install shuffle-package-makerPlease follow the instructions in the README file to install and use the tool. You will also find some tips below.
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 installnode generate.mjs DIRECTORY_NAME --preset PRESET_NAMEor 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.
Here's a full example:
mkdir test/
cd test/
npm install shuffle-package-maker
npx shuffle-package-maker /var/www/tailwindui-crawler/output/html/components --preset=tailwindui-application-uiIt 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 installnode generate.mjs DIRECTORY_NAME --preset PRESET_NAMEor 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.
{
"$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"
}
]
}
]
}
{
"$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"
}
]
}
]
}
{
"$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"
}
]
}
]
}
/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
/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
/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
An online editor for busy developers.
© 2024 Shuffle. All rights reserved.