diff --git a/README.md b/README.md index 7afb48f..df547c9 100644 --- a/README.md +++ b/README.md @@ -1,139 +1,610 @@ # Tailwind Components -Collection of components found on the internet - ## Table of Contents -- [Alerts](#alerts) -- [Avatars](#avatars) -- [Buttons](#buttons) -- [Badges](#badges) -- [Cards](#cards) -- [Dropdowns](#dropdowns) -- [Forms](#forms) -- [Layouts](#layouts) -- [Modals](#modals) -- [Navigations](#navigations) -- [Pagination](#pagination) -- [Steps](#steps) -- [Sections](#sections) -- [Switches/Toggles](#switchestoggles) -- [Side Panels](#side-panels) -- [Toasts](#toasts) -- [Tabs](#tabs) -- [Tables](#tables) - -## Alerts - -- https://github.com/merakiui/merakiui/tree/master/src/components/ui/Alerts -- https://www.gustui.com/docs/application/components/alerts -- https://tailwindtemplates.io/alerts/ -- https://sailui.github.io/ - -## Avatars - -- https://www.gustui.com/docs/application/components/avatars -- https://tailwindui.com/components#product-application-ui-elements - -## Buttons - -- https://tailwindcomponents.com/components/Buttons -- https://www.gustui.com/docs/application/components/buttons -- https://tailwindtemplates.io/buttons/ -- https://sailui.github.io/ - -## Badges - -- https://www.gustui.com/docs/application/components/badges -- https://sailui.github.io/ - -## Cards - -- https://tailwindcomponents.com/components/Cards -- https://www.gustui.com/docs/application/components/cards -- https://tailwindui.com/components#product-application-ui-data-display -- https://tailwindtemplates.io/cards/ -- https://sailui.github.io/ - -## Dropdowns - -- https://www.gustui.com/docs/application/components/dropdowns -- https://tailwindui.com/components#product-application-ui-elements - -## Forms - -- https://tailwindcomponents.com/components/Forms -- https://www.gustui.com/docs/application/components/forms -- https://tailwindui.com/components#product-application-ui-forms -- https://tailwindtemplates.io/forms/ -- https://sailui.github.io/ - -## Layouts - -- https://tailwindcomponents.com/components/Layouts - -## Modals - -- https://www.gustui.com/docs/application/components/modals -- https://tailwindtemplates.io/modals/ - -## Navigations - -- https://tailwindcomponents.com/components/Navigations -- https://www.gustui.com/docs/application/elements/navs -- https://tailwindui.com/components/marketing/elements/headers -- https://tailwindui.com/components#product-application-ui-navigation - -## Pagination - -- https://www.gustui.com/docs/application/elements/pagination - -## Steps - -- https://www.gustui.com/docs/application/components/steps - -## Sections - -- https://merakiui.com/ -- https://www.gustui.com/docs/application/elements/lists -- https://tailwindui.com/components#product-marketing-sections -- https://tailwindui.com/components#product-application-ui-application-shells - -## Switches/Toggles - -- https://www.gustui.com/docs/application/components/toggles - -## Side Panels - -- https://www.gustui.com/docs/application/elements/slide-panels -- https://tailwindui.com/components#product-application-ui-overlays - -## Toasts - -- https://www.gustui.com/docs/application/components/toasts - -## Tabs - -- https://www.gustui.com/docs/application/components/tabs - -## Tables - -- https://tailwindcomponents.com/components/Tables -- https://www.gustui.com/docs/application/elements/tables -- https://tailwindui.com/components#product-application-ui-lists +* [Alert](#alert) +* [Avatar](#avatar) +* [Badge](#badge) +* [Breadcrumb](#breadcrumb) +* [Button](#button) +* [Card](#card) +* [Dropdown](#dropdown) +* [Form](#form) +* [Hero](#hero) +* [Layout](#layout) +* [Modal](#modal) +* [Navigation](#navigation) +* [Other](#other) +* [Pagination](#pagination) +* [Section](#section) +* [Sidebar](#sidebar) +* [Step](#step) +* [Switch](#switch) +* [Tab](#tab) +* [Table](#table) + +## Alert + +* Alerts components with Tailwindcss - https://tailwindcomponents.com/component/alerts-components-with-tailwindcss +* Alert component - https://tailwindcomponents.com/component/alert-component +* Alerts components - https://tailwindcomponents.com/component/alerts-components +* Simple Alerts - https://tailwindcomponents.com/component/simple-alerts +* Alerts with icons - https://tailwindcomponents.com/component/alerts-with-icons +* Dismissible Alert - https://tailwindcomponents.com/component/dismissible-alert +* Alert messages - https://tailwindcomponents.com/component/alert-messages +* Alert Cards - https://tailwindcomponents.com/component/alerts +* Tagged alert - https://tailwindcomponents.com/component/tagged-alert +* Top accent alert - https://tailwindcomponents.com/component/top-accent-alert +* Solid alert - https://tailwindcomponents.com/component/solid-alert +* Traditional alert - https://tailwindcomponents.com/component/traditional-alert + +## Avatar + +* Avatars - https://tailwindcomponents.com/component/avatars +* Avatar Upload - https://tailwindcomponents.com/component/codeosemeke +* Avatar with username - https://tailwindcomponents.com/component/avatar-with-username +* Rounded inner box shadow avatar - https://tailwindcomponents.com/component/rounded-inner-box-shadow-avatar +* Simple Avatar (and initials) - https://tailwindcomponents.com/component/simple-avatar-and-initials + +## Badge + +* Simple Badges - https://tailwindcomponents.com/component/simple-badges +* Badge notification - https://tailwindcomponents.com/component/badge-notification +* Badges with icons - https://tailwindcomponents.com/component/badges-with-icons +* Badge - https://tailwindcomponents.com/component/badge + +## Breadcrumb + +* Tailwind CSS Breadcrumb - https://tailwindcomponents.com/component/tailwind-css-breadcrumb +* Breadcrumbs - https://tailwindcomponents.com/component/breadcrumbs-1 +* Breadcrumbs - https://tailwindcomponents.com/component/breadcrumbs + +## Button + +* Button - https://tailwindcomponents.com/component/button-2 +* Button with menu - https://tailwindcomponents.com/component/button-with-menu +* Base Github buttons - https://tailwindcomponents.com/component/base-github-buttons +* Custom Radio Buttons - https://tailwindcomponents.com/component/custom-radio-buttons +* Outline Button - https://tailwindcomponents.com/component/outline-button-1 +* outline button with hover offset - https://tailwindcomponents.com/component/outline-button-with-hover-offset +* Curvy buttons - https://tailwindcomponents.com/component/curvy-buttons +* Radio buttons - https://tailwindcomponents.com/component/radio-buttons +* Tailwind CSS Profile Card with Overlap Button - https://tailwindcomponents.com/component/profile-card-with-overlap-button +* Tailwind CSS FAB buttons - https://tailwindcomponents.com/component/tailwind-css-fab-buttons +* Tailwind CSS Buttons - https://tailwindcomponents.com/component/tailwind-css-buttons +* Button group - https://tailwindcomponents.com/component/button-group +* Toggle button - https://tailwindcomponents.com/component/toggle-button +* Search Input with integrated Icon and Button - https://tailwindcomponents.com/component/search-input-with-integrated-icon-and-button +* Minecraft button - https://tailwindcomponents.com/component/minecraft-button +* Fortnite button - https://tailwindcomponents.com/component/fortnite-button +* Buttons - https://tailwindcomponents.com/component/buttons-3 +* Counter Buttons with an Input - https://tailwindcomponents.com/component/counter-buttons-with-an-input +* Scrollable button lists - https://tailwindcomponents.com/component/scrollable-button-lists +* Premium banner around button - https://tailwindcomponents.com/component/premium-banner-around-button +* Button with counter - https://tailwindcomponents.com/component/button-with-counter +* Nice looking button - https://tailwindcomponents.com/component/nice-looking-button +* Simple rounded button - https://tailwindcomponents.com/component/simple-rounded-button +* iOs buttons group - https://tailwindcomponents.com/component/ios-buttons-group +* Pagination buttons - https://tailwindcomponents.com/component/pagination-buttons +* Indigo button - https://tailwindcomponents.com/component/indigo-button-with-an-arrow +* Buttons with icons - https://tailwindcomponents.com/component/buttons-with-icons +* Dashboard Card with Buttons - https://tailwindcomponents.com/component/dashboard-card-with-buttons +* Button Dropdown - https://tailwindcomponents.com/component/button-dropdown +* File Upload button - https://tailwindcomponents.com/component/file-upload-button +* Buttons Pills - https://tailwindcomponents.com/component/buttons-pills +* Buttons with SVG Icons - https://tailwindcomponents.com/component/buttons-with-svg-icons +* 3D button with push state - https://tailwindcomponents.com/component/3d-button-with-push-state +* Outlined buttons - https://tailwindcomponents.com/component/outlined-buttons +* Button with icon - https://tailwindcomponents.com/component/button-with-icon +* 3D button - https://tailwindcomponents.com/component/3d-button +* Outline button - https://tailwindcomponents.com/component/outline-button +* Simple button - https://tailwindcomponents.com/component/simple-button + +## Card + +* Trello card clone - https://tailwindcomponents.com/component/trello-card-clone +* Twitter Card - https://tailwindcomponents.com/component/twitter-card +* Card component - https://tailwindcomponents.com/component/card-component +* Blog Post Card Grid Layout - https://tailwindcomponents.com/component/blog-post-card-grid-layout +* Statistic cards - https://tailwindcomponents.com/component/statistic-cards +* Dev.to Card List Search Result - https://tailwindcomponents.com/component/devto-card-list-search-result +* Card - https://tailwindcomponents.com/component/card-2 +* dashboard and cards - https://tailwindcomponents.com/component/food-card +* Analytics Card with AlpineJS - https://tailwindcomponents.com/component/analytics-card-with-alpinejs +* Simple Welcome Card with AlpineJS action - https://tailwindcomponents.com/component/simple-welcome-card-with-alpinejs-action +* Banner with offset cards - https://tailwindcomponents.com/component/banner-with-offset-cards +* Article card - https://tailwindcomponents.com/component/article-card +* Team cards - https://tailwindcomponents.com/component/team-cards +* TailwindCSS & VUE.js Github Profile Card - https://tailwindcomponents.com/component/tailwindcss-vuejs-github-profile-card +* Card with Icon logo - https://tailwindcomponents.com/component/card-with-icon-logo +* curvy card - https://tailwindcomponents.com/component/curvy-card +* Dashboard info card - https://tailwindcomponents.com/component/dashboard-info-card +* Subscribe card - https://tailwindcomponents.com/component/subscribe-card +* Post / Card - https://tailwindcomponents.com/component/post-card +* Post/Article Card - https://tailwindcomponents.com/component/postarticle-card +* Tailwind CSS Profile Card Angled - https://tailwindcomponents.com/component/profile-card-angled +* Overlapping Product Card - https://tailwindcomponents.com/component/overlapping-product-card +* Card - https://tailwindcomponents.com/component/card-1 +* Tailwind CSS Card with Add to Cart - https://tailwindcomponents.com/component/card-with-add-to-cart +* unordered list of card items with elevation on hover - https://tailwindcomponents.com/component/unordered-list-of-card-items-with-elevation-on-hover +* Tailwindcss card component - https://tailwindcomponents.com/component/tailwindcss-card-component-1 +* Hero with card - https://tailwindcomponents.com/component/hero-with-card +* degraded card - https://tailwindcomponents.com/component/degraded-card +* card with hover effect - https://tailwindcomponents.com/component/card-with-hover-effect +* Profile card - https://tailwindcomponents.com/component/profile-card-1 +* Product card with evaluation - https://tailwindcomponents.com/component/product-card-with-evaluation +* Product card - https://tailwindcomponents.com/component/product-card +* testimonial card - https://tailwindcomponents.com/component/testimonial-card +* user card - https://tailwindcomponents.com/component/user-card +* Top Cards - https://tailwindcomponents.com/component/cards-2 +* Dashboard Cards - https://tailwindcomponents.com/component/dashboard-cards +* Cards with Tags - https://tailwindcomponents.com/component/cards-with-tags +* Dropdown card on hover with skew animation (Stripe menu) - https://tailwindcomponents.com/component/dropdown-card-below-button-with-skew-animation +* Profile Card With Image Background - https://tailwindcomponents.com/component/profile-card-with-image-background +* Rounded Cards - https://tailwindcomponents.com/component/rounded-cards +* Simple Card Component - https://tailwindcomponents.com/component/simple-card-component +* Blob Footer Card - https://tailwindcomponents.com/component/blob-footer-card +* Event Card - https://tailwindcomponents.com/component/event-card +* dev.to post card - https://tailwindcomponents.com/component/devto-post-card +* News Card - https://tailwindcomponents.com/component/news-card +* Subscription Card - https://tailwindcomponents.com/component/subscription-card +* Card for Listing - https://tailwindcomponents.com/component/card-for-listing +* CARDS - https://tailwindcomponents.com/component/cards-1 +* Subscribe Card - https://tailwindcomponents.com/component/subscription-call-to-action +* Event Cards - https://tailwindcomponents.com/component/event-cards +* Cards - https://tailwindcomponents.com/component/cards +* Quote card - https://tailwindcomponents.com/component/quote-card +* Bootstrap Card - https://tailwindcomponents.com/component/bootstrap-card +* Responsive Card - https://tailwindcomponents.com/component/responsive-card-design +* property card - https://tailwindcomponents.com/component/property-card +* Commerce App Card - https://tailwindcomponents.com/component/commerce-app-card +* Material Design - Card - https://tailwindcomponents.com/component/material-design-card +* Card with sidebar - https://tailwindcomponents.com/component/list-with-sidebar +* Dashboard cards with Tailwindcss v1.0.3 - https://tailwindcomponents.com/component/dashboard-cards-with-tailwindcss-v103 +* Item card - https://tailwindcomponents.com/component/item-card +* Article cards - https://tailwindcomponents.com/component/article-cards +* Stripe Credit Card - https://tailwindcomponents.com/component/stripe-credit-card +* Weather Card - https://tailwindcomponents.com/component/weather-card +* Card Sidebar Navigation - https://tailwindcomponents.com/component/card-sidebar-navigation +* Profile Card - https://tailwindcomponents.com/component/profile-card +* Simple card - https://tailwindcomponents.com/component/simple-card +* Horizontal card - https://tailwindcomponents.com/component/horizontal-card + +## Dropdown + +* Simple dropdown - https://tailwindcomponents.com/component/simple-dropdown +* Notifications dropdown - https://tailwindcomponents.com/component/notifications-dropdown +* Multi Level Dropdown Menu - https://tailwindcomponents.com/component/multi-level-dropdown-menu +* User dropdown menu - https://tailwindcomponents.com/component/user-dropdown-menu +* Sticky Responsive Navbar With Dropdown and Icon - https://tailwindcomponents.com/component/sticky-navbar-responsive +* Dropdown shopping cart - https://tailwindcomponents.com/component/dropdown-shopping-cart +* Responsive Navbar with Grid Dropdown - https://tailwindcomponents.com/component/responsive-navbar-with-grid-dropdown +* Multi Level Dropdown Menu with Animation - https://tailwindcomponents.com/component/nestable-dropdown-menu +* Responsive Sidebar With Dropdown - https://tailwindcomponents.com/component/responsive-sidebar-with-dropdown +* Responsive Navbar With Dropdown - https://tailwindcomponents.com/component/responsive-navbar-with-dropdown +* Dropdown - https://tailwindcomponents.com/component/dropdown-1 +* Multi-Level Dropdown - https://tailwindcomponents.com/component/multi-level-dropdown +* Dropdown menu without JS - https://tailwindcomponents.com/component/dropdown-menu-without-js +* Dropdown with search box - https://tailwindcomponents.com/component/dropdown-with-search-box +* Dropdown - https://tailwindcomponents.com/component/dropdown + +## Form + +* Stripe Partner Form - https://tailwindcomponents.com/component/stripe-partner-form +* Contact Form - https://tailwindcomponents.com/component/contact-form-1 +* login form - https://tailwindcomponents.com/component/login-form-5 +* Login Form - https://tailwindcomponents.com/component/login-form-4 +* Search form - https://tailwindcomponents.com/component/search-form +* Header with Sign in form - https://tailwindcomponents.com/component/header-with-sign-in-form +* Comment form - https://tailwindcomponents.com/component/comment-form +* Login form - https://tailwindcomponents.com/component/login-form-3 +* Form Login with Icon in Right and Left Input - https://tailwindcomponents.com/component/form-login-with-icon-in-right-and-left-input +* Login Form - https://tailwindcomponents.com/component/login-form-2 +* form - https://tailwindcomponents.com/component/form +* easy form - https://tailwindcomponents.com/component/easy-form +* Contact form - https://tailwindcomponents.com/component/contact-form +* Contact Form - https://tailwindcomponents.com/component/form-1 +* Form Sidebar - https://tailwindcomponents.com/component/chart-filter-1 +* Hero with form - https://tailwindcomponents.com/component/hero-with-form +* Form stepper - https://tailwindcomponents.com/component/form-stepper +* Horizontal form - https://tailwindcomponents.com/component/horizontal-form +* simple form field - https://tailwindcomponents.com/component/simple-form-field +* Multistep Form with TailwindCSS and AlpineJS - https://tailwindcomponents.com/component/multistep-form-with-tailwindcss-and-alpinejs +* Footer with subscribe form - https://tailwindcomponents.com/component/footer-with-subscribe-form +* subscribe form - https://tailwindcomponents.com/component/subscribe-form-1 +* Register form with password validator - Tailwind CSS & Alpine JS - https://tailwindcomponents.com/component/register-form-with-password-validator-tailwind-css-alpine-js +* Login Form - https://tailwindcomponents.com/component/login-form-1 +* Basic Contact Form - Nickname - https://tailwindcomponents.com/component/basic-contact-form-nickname +* Basic Contact Form - https://tailwindcomponents.com/component/basic-contact-form +* RSVP Form - https://tailwindcomponents.com/component/rsvp-form +* Native and social login form - https://tailwindcomponents.com/component/native-and-social-login-form +* Sign in form - https://tailwindcomponents.com/component/sign-in-form +* Simple rounded text form - https://tailwindcomponents.com/component/simple-rounded-text-form +* Checkout Form - https://tailwindcomponents.com/component/checkout-form +* Simple login form - https://tailwindcomponents.com/component/simple-login-form +* Sign Up Form - https://tailwindcomponents.com/component/sign-up-form +* Beautiful form signup - https://tailwindcomponents.com/component/beautiful-form-signup +* Subscribe form - https://tailwindcomponents.com/component/subscribe-form +* Login form - https://tailwindcomponents.com/component/login-form +* Form grid - https://tailwindcomponents.com/component/form-grid + +## Hero + +* Centered Hero Header - https://tailwindcomponents.com/component/centered-hero-header +* Traveler Hero concept design - https://tailwindcomponents.com/component/traveler-hero-concept-design +* Hero message - https://tailwindcomponents.com/component/hero-message + +## Layout + +* Politico Clone Layout - https://tailwindcomponents.com/component/politico-clone +* Basic App layout - https://tailwindcomponents.com/component/basic-app-layout +* Grid Post Layout - https://tailwindcomponents.com/component/grid-post-layout + +## Modal + +* Modal - https://tailwindcomponents.com/component/modal-1 +* Alpine.js + TailwindCSS Lightbox Modal - https://tailwindcomponents.com/component/alpinejs-tailwindcss-lightbox-modal +* Awesome Modal - https://tailwindcomponents.com/component/awesome-modal +* Simple Modern Modals - https://tailwindcomponents.com/component/simple-modern-modals-1 +* Modal with JavaScript - https://tailwindcomponents.com/component/modal-with-javascript +* modal with vue - https://tailwindcomponents.com/component/modal-with-vue +* A minimal simple modal that still looks good - https://tailwindcomponents.com/component/a-minimal-simple-modal-that-still-looks-good +* Modal - https://tailwindcomponents.com/component/modal +* Simple Modal - https://tailwindcomponents.com/component/simple-modal +* Login Modal - https://tailwindcomponents.com/component/login-modal + +## Navigation + +* Responsive fixed top navigation - https://tailwindcomponents.com/component/responsive-fixed-top-navigation +* Vscode Navigation Menu - https://tailwindcomponents.com/component/vscode-navigation-menu +* Dark Navigation component - https://tailwindcomponents.com/component/dark-navigation-component +* Navigation component - https://tailwindcomponents.com/component/navigation-component +* Navigation Side Bar - https://tailwindcomponents.com/component/navigation-side-bar +* Top Navigation Bar - https://tailwindcomponents.com/component/top-navigation-bar +* Curvy Bottom Icon Navigation Menu - https://tailwindcomponents.com/component/curvy-bottom-icon-navigation-menu +* Bottom Icon Navigation Menu - https://tailwindcomponents.com/component/bottom-icon-navigation-menu +* Simple Responsive Navigation Bar - https://tailwindcomponents.com/component/simple-responsive-navigation-bar-1 +* Simple Responsive Navigation Bar - https://tailwindcomponents.com/component/simple-responsive-navigation-bar +* Steps navigation - https://tailwindcomponents.com/component/steps-navigation +* Dark Mode vs Light Mode Navigation - https://tailwindcomponents.com/component/dark-mode-vs-light-mode-navigation +* Responsive Bottom Navigation - https://tailwindcomponents.com/component/responsive-bottom-navigation +* Tab navigation - https://tailwindcomponents.com/component/tab-navigation ## Other -- https://tailwindtemplates.io/search/ +* List - https://tailwindcomponents.com/component/list-1 +* Start Jumbotron - https://tailwindcomponents.com/component/start-jumbotron +* Left Accent Border - https://tailwindcomponents.com/component/left-accent-border +* Quote Box - https://tailwindcomponents.com/component/quote-box +* Tailwindcss background color example - https://tailwindcomponents.com/component/tailwind-css-background-color-example +* Animated dynamic progress bar - https://tailwindcomponents.com/component/animated-dynamic-progress-bar +* Netflix clone - https://tailwindcomponents.com/component/netflix-clone +* Game Lobby - https://tailwindcomponents.com/component/game-lobby +* Event Ticket with QR Code - https://tailwindcomponents.com/component/event-ticket-with-qr-code +* alphine js , toast notification - https://tailwindcomponents.com/component/alphine-js-toast-notification +* Instagram clone - https://tailwindcomponents.com/component/instagram-clone-1 +* Timeline dialog - https://tailwindcomponents.com/component/timeline-dialog +* Progress Bar - https://tailwindcomponents.com/component/progress-bar-1 +* Frequently Asked Question - FAQ - https://tailwindcomponents.com/component/frequently-asked-question-faq +* Multi Range Slider with Alpine.js - https://tailwindcomponents.com/component/multi-range-slider +* Browser Frame Mockup - https://tailwindcomponents.com/component/browser-frame-mockup +* clean spinner - https://tailwindcomponents.com/component/clean-spinner +* Navabr with categories - https://tailwindcomponents.com/component/navabr-with-categories +* 404 Not Found Page - https://tailwindcomponents.com/component/404-not-found-page +* Chat Support - https://tailwindcomponents.com/component/chat-services +* Landing Page by Wicked Templates - https://tailwindcomponents.com/component/wicked-template-seychelles +* Header with background image - https://tailwindcomponents.com/component/header-with-background-image +* ECommerce navbar - https://tailwindcomponents.com/component/ecommerce-navbar +* Toast Notification - https://tailwindcomponents.com/component/toast-notification +* Dashboard Statistic Widgets - https://tailwindcomponents.com/component/dashboard-statistic-widgets +* Not Found Page - https://tailwindcomponents.com/component/not-found-page +* hero-component - https://tailwindcomponents.com/component/hero-component +* Recent article - https://tailwindcomponents.com/component/recent-article-1 +* Click through Image Gallery - https://tailwindcomponents.com/component/click-through-image-gallery +* Login page - https://tailwindcomponents.com/component/login-page-3 +* iOS Keyboard Clone (Light Mode) - https://tailwindcomponents.com/component/ios-keyboard-clone-light-mode +* iOS Keyboard Clone (Dark Mode) - https://tailwindcomponents.com/component/ios-keyboard-clone-dark-mode +* Simple Shopping Callout with CTA - https://tailwindcomponents.com/component/simple-shopping-callout-with-cta +* Parking App Design - https://tailwindcomponents.com/component/tailwind-parking-app +* Stock Chart with AlpineJS and ChartsJS - https://tailwindcomponents.com/component/stock-chart-with-alpinejs-and-chartsjs +* Mobile App Design - https://tailwindcomponents.com/component/mobile-app-design +* Events list - custom scrollbar - https://tailwindcomponents.com/component/events-list-custom-scrollbar +* E-commerce product listing page - https://tailwindcomponents.com/component/e-commerce-product-listing-page +* Pure CSS Accordion - https://tailwindcomponents.com/component/pure-css-accordion +* E-commerce product page - https://tailwindcomponents.com/component/e-commerce-product-page +* E-commerce checkout page - https://tailwindcomponents.com/component/e-commerce-checkout-page +* E-commerce home page - https://tailwindcomponents.com/component/e-commerce-home-page +* Jira Software - https://tailwindcomponents.com/component/jira-software +* Tailwind Teacher Dashboard - https://tailwindcomponents.com/component/tailwind-teacher-dashboard +* Tailwind Users Dashboard - https://tailwindcomponents.com/component/tailwind-users-dashboard +* Expenses Dashboard - https://tailwindcomponents.com/component/expenses-dashboard +* Messenger clone - https://tailwindcomponents.com/component/messanger-clone +* Hideable notes (bottom right fixed button) - https://tailwindcomponents.com/component/hideable-notes +* Multiple Views With Collapsing - https://tailwindcomponents.com/component/multiple-views-with-collapsing +* Facebook Notification - https://tailwindcomponents.com/component/facebook-notification +* Dark header component - https://tailwindcomponents.com/component/dark-header-component +* Subscribe - https://tailwindcomponents.com/component/pazlydev +* Blog Homepage - https://tailwindcomponents.com/component/blog-homepage-1 +* Laravel preset - https://tailwindcomponents.com/component/laravel-preset +* Blog post - https://tailwindcomponents.com/component/blog-post-1 +* Blog post - https://tailwindcomponents.com/component/blog-post +* Blog Homepage - https://tailwindcomponents.com/component/blog-homepage +* Dashboard Template - https://tailwindcomponents.com/component/dashboard-template +* Calculator in TailwindCSS - https://tailwindcomponents.com/component/calculator-in-tailwindcss +* Clone WhatsApp Android UI - https://tailwindcomponents.com/component/clone-whatsapp-android-ui +* Clone github new design - https://tailwindcomponents.com/component/clone-github-new-design +* Wireframe - https://tailwindcomponents.com/component/wireframe +* spinner - https://tailwindcomponents.com/component/spinner-1 +* Battery with Tailwind CSS - https://tailwindcomponents.com/component/battery-with-tailwind-css +* Account Setting - https://tailwindcomponents.com/component/account-setting-2 +* Stars review - https://tailwindcomponents.com/component/stars-review +* Checkbox - https://tailwindcomponents.com/component/customized-checkbox +* Input with icon and validation error - https://tailwindcomponents.com/component/input-with-icon-and-validation-error +* Report a bug - https://tailwindcomponents.com/component/report-a-bug +* Todo Application - https://tailwindcomponents.com/component/todo-application +* Product Preview - https://tailwindcomponents.com/component/product-preview +* Footer with Newsletter - https://tailwindcomponents.com/component/footer-with-newsletter +* Help Center crad - https://tailwindcomponents.com/component/help-center-crad +* New Telegram Web Clone - https://tailwindcomponents.com/component/new-telegram-web-clone +* Facebook clone - https://tailwindcomponents.com/component/facebook-navbar-clone +* Twitter Timeline - https://tailwindcomponents.com/component/twitter-timeline +* Developer portfolio - https://tailwindcomponents.com/component/developer-portfolio +* Item Review - https://tailwindcomponents.com/component/item-review +* Shopping Cart with coupon - https://tailwindcomponents.com/component/shopping-cart +* User Timeline - https://tailwindcomponents.com/component/user-timeline +* Messenger Clone - TailwindCSS - https://tailwindcomponents.com/component/tailwindcss-messenger-clone +* responsive navbar - https://tailwindcomponents.com/component/responsive-navbar-4 +* Sticky Bottom Mobile Navbar - https://tailwindcomponents.com/component/sticky-bottom-mobile-navbar +* Testimonial UI with TailwindCSS and AlpineJS - https://tailwindcomponents.com/component/testimonial-ui-with-tailwindcss-and-alpinejs +* TailwindCSS Flow chart - https://tailwindcomponents.com/component/tailwindcss-flow-chart +* Animated ellipsis - https://tailwindcomponents.com/component/animated-ellipsis +* Instagram Clone - https://tailwindcomponents.com/component/instagram-clone +* Product Detail - https://tailwindcomponents.com/component/product-detail +* Twitter Clone - https://tailwindcomponents.com/component/twitter-clone +* Bar Chart with TailwindCSS and AlpineJS - https://tailwindcomponents.com/component/bar-chart-with-tailwindcss-and-alpinejs +* Search Image gallery - https://tailwindcomponents.com/component/search-image-gallery +* List - https://tailwindcomponents.com/component/list +* Simple Terminal - https://tailwindcomponents.com/component/terminal +* Color Picker with TailwindCSS and AlpineJS - https://tailwindcomponents.com/component/color-picker-with-tailwindcss-and-alpinejs +* Single pricing - https://tailwindcomponents.com/component/single-pricing +* Special promo - https://tailwindcomponents.com/component/special-promo +* Running - https://tailwindcomponents.com/component/running +* Teamwork page - https://tailwindcomponents.com/component/teamwork-page +* Recruiting strategy - https://tailwindcomponents.com/component/recruiting-strategy +* School themed landing page - https://tailwindcomponents.com/component/school-themed-landing-page +* Business page - https://tailwindcomponents.com/component/business-page +* Nature landing page - https://tailwindcomponents.com/component/nature-landing-page +* Macbook Pro Keyboard - https://tailwindcomponents.com/component/macbook-keyboard +* To do checklist - https://tailwindcomponents.com/component/to-do-checklist +* Multi select alpine js - https://tailwindcomponents.com/component/multi-select-alpine-js +* labeled tag - https://tailwindcomponents.com/component/github-style-tag +* Simple Time Picker - https://tailwindcomponents.com/component/simple-time-picker +* Chart Filter - https://tailwindcomponents.com/component/chart-filter +* Responsive footer - https://tailwindcomponents.com/component/responsive-footer-1 +* Info shopping - https://tailwindcomponents.com/component/info-shopping +* Case study - https://tailwindcomponents.com/component/case-study +* FAQ - https://tailwindcomponents.com/component/faq +* Bubbles - https://tailwindcomponents.com/component/bubbles +* Select with custom list - https://tailwindcomponents.com/component/select-with-custom-list +* Chips - https://tailwindcomponents.com/component/chips +* Multi select - https://tailwindcomponents.com/component/multi-select +* Basic select - https://tailwindcomponents.com/component/basic-select +* Range slider - https://tailwindcomponents.com/component/range-slider +* Search input - https://tailwindcomponents.com/component/search-input-1 +* User account menu with icons - https://tailwindcomponents.com/component/user-account-menu-with-icons +* Fly-out Menu (Vue.js) - https://tailwindcomponents.com/component/fly-out-menu-vuejs +* Responsive Multi File Upload with drop-on and preview - https://tailwindcomponents.com/component/file-upload-with-drop-on-and-preview +* Toggle - https://tailwindcomponents.com/component/toggle-1 +* Search - https://tailwindcomponents.com/component/search +* Zen Desk Clone - https://tailwindcomponents.com/component/zen-desk-clone +* Modern Login Template - https://tailwindcomponents.com/component/modern-login-register-pages +* Feed Grid - https://tailwindcomponents.com/component/feed-grid +* Grid/List Toggle - https://tailwindcomponents.com/component/gridlist-toggle +* Timeline - https://tailwindcomponents.com/component/timeline-2 +* Mini Schedule - https://tailwindcomponents.com/component/mini-schedule +* Calendar UI with TailwindCSS and AlpineJS - https://tailwindcomponents.com/component/calendar-ui-with-tailwindcss-and-alpinejs +* Item List & Search - https://tailwindcomponents.com/component/item-list-search +* antd notification - https://tailwindcomponents.com/component/antd-notification +* Tags - https://tailwindcomponents.com/component/tags +* Course Panel - https://tailwindcomponents.com/component/course-panel +* Datepicker with TailwindCSS and AlpineJS - https://tailwindcomponents.com/component/datepicker-with-tailwindcss-and-alpinejs +* Folder Options - https://tailwindcomponents.com/component/folder-options +* Responsive Navbar with search bar - https://tailwindcomponents.com/component/responsive-navbar-2 +* Responsive Footer - https://tailwindcomponents.com/component/responsive-footer +* Notifications - https://tailwindcomponents.com/component/notifications +* Banner - https://tailwindcomponents.com/component/information-presenting-card-3 +* Carousel Slider with TailwindCSS and jQuery - https://tailwindcomponents.com/component/carousel-slider-with-tailwindcss-and-jquery +* Notification - https://tailwindcomponents.com/component/notification-3 +* Invoice Generator build with TailwindCSS and AlpineJS. - https://tailwindcomponents.com/component/invoice-generator-build-with-tailwindcss-and-alpinejs +* Login Page - https://tailwindcomponents.com/component/login-page-1 +* Recent article - https://tailwindcomponents.com/component/recent-article +* Navbar with search icon - https://tailwindcomponents.com/component/navbar-with-search-icon +* Login and registration with image - https://tailwindcomponents.com/component/login-and-registration-with-image +* Paragraph with image - https://tailwindcomponents.com/component/paragraph-with-image +* Application header with clip path - https://tailwindcomponents.com/component/application-header-with-clip-path +* DigitalOcean Tutorials Page - https://tailwindcomponents.com/component/digitalocean-tutorials-page +* Notification pop - https://tailwindcomponents.com/component/notification-pop +* Stat Component - https://tailwindcomponents.com/component/stat-component +* Stat Grid - https://tailwindcomponents.com/component/stat-grid +* three skills or focus - https://tailwindcomponents.com/component/three-skills-or-focus +* author signature - https://tailwindcomponents.com/component/author-signature +* Login Show/Hide Password - https://tailwindcomponents.com/component/login-showhide-password +* header for blog - https://tailwindcomponents.com/component/header-for-blog +* navbar - https://tailwindcomponents.com/component/navbar-1 +* Tag Line - https://tailwindcomponents.com/component/tag-line +* Input field with label - https://tailwindcomponents.com/component/input-field-with-label +* CSS only slider - https://tailwindcomponents.com/component/css-only-slide +* Spinner - https://tailwindcomponents.com/component/spinner +* Instagram Post Component - https://tailwindcomponents.com/component/instagram-post-component +* Slider only CSS - https://tailwindcomponents.com/component/slider-only-css +* Fully CSS responsive Outlook clone - https://tailwindcomponents.com/component/fully-css-responsive-outlook-clone +* Landing Page with twinkling stars ๐ŸŒŸ - https://tailwindcomponents.com/component/landing-page-with-twinkling-stars +* Toggle - https://tailwindcomponents.com/component/toggle +* Post Article - https://tailwindcomponents.com/component/post-artical +* Sign up / Login boxes - https://tailwindcomponents.com/component/sign-up-login-boxes +* Error 404 - https://tailwindcomponents.com/component/error-404 +* Custom checkbox - https://tailwindcomponents.com/component/custom-checkbox +* Tooltip - https://tailwindcomponents.com/component/tooltip +* FAQs - https://tailwindcomponents.com/component/faqs +* Range - https://tailwindcomponents.com/component/range +* Custom input range - https://tailwindcomponents.com/component/custom-input-range +* Project timers - https://tailwindcomponents.com/component/project-timers +* Landing Page with Tailwind CSS - https://tailwindcomponents.com/component/landing-page-with-tailwind-css +* Landing Page with Tailwind CSS 2 - https://tailwindcomponents.com/component/landing-page-with-tailwind-css-2 +* Username Checker - https://tailwindcomponents.com/component/username-checker +* Google Chrome clone - https://tailwindcomponents.com/component/google-chrome-clone +* Borderless list - https://tailwindcomponents.com/component/borderless-list +* Google Styled Account Menu - https://tailwindcomponents.com/component/google-styled-account-menu +* Windows 10 - Command Prompt / Terminal - https://tailwindcomponents.com/component/windows-10-command-prompt +* Windows 10 - Fluent Design - Progress Bar - https://tailwindcomponents.com/component/windows-10-fluent-design-progress-bar +* Digital Marketing Landing - https://tailwindcomponents.com/component/digital-marketing-landing +* SB Admin 2: Register Page - https://tailwindcomponents.com/component/sb-admin-2-forgot-password-page +* SB Admin 2: Login Page - https://tailwindcomponents.com/component/sb-admin-2-login-page +* SB Admin 2: Forgot Password Page - https://tailwindcomponents.com/component/sb-admin-2-forgot-password-page-1 +* Label-Tag - https://tailwindcomponents.com/component/label-tag +* File Upload DropZone - https://tailwindcomponents.com/component/file-upload-drop-zone +* WebPage Example With Pure Tailwind Responsive Nav - https://tailwindcomponents.com/component/webpage-example-with-pure-tailwind-responsive-nav +* Responsive Nav - https://tailwindcomponents.com/component/navigation-4 +* Social Media Template - https://tailwindcomponents.com/component/social-media-template +* Open/Close Multiple Model on same page - https://tailwindcomponents.com/component/openclose-multiple-model-on-same-page +* Input Number / Counter - https://tailwindcomponents.com/component/number-input-counter +* Bottom and Header Nav responsive. - https://tailwindcomponents.com/component/bottom-and-header-nav-responsive +* Empty state: Add photo - https://tailwindcomponents.com/component/empty-state-add-photo +* Input number custom style - https://tailwindcomponents.com/component/input-number-custom-style +* A Popup Box! - https://tailwindcomponents.com/component/a-popup-box +* Responsive Navbar - https://tailwindcomponents.com/component/responsive-navbar-1 +* Image Grid - https://tailwindcomponents.com/component/image-grid +* Mac Terminal - https://tailwindcomponents.com/component/mac-terminal +* checkbox - https://tailwindcomponents.com/component/checkbox-1 +* Pricing panel responsive - https://tailwindcomponents.com/component/pricing-panel-responsive +* Parsinta Login Page - https://tailwindcomponents.com/component/parsinta-login-page +* Display child element on hover - https://tailwindcomponents.com/component/display-child-element-on-hover +* Login with Image - https://tailwindcomponents.com/component/login-with-image +* Follow Me - https://tailwindcomponents.com/component/follow-me +* Material UI Textfield - https://tailwindcomponents.com/component/material-ui-textfield-1 +* Stripe carousel clone - https://tailwindcomponents.com/component/stripe-carousel-clone +* Stripe pricing panel clone - https://tailwindcomponents.com/component/stripe-pricing-panel-clone +* User review with ratings - https://tailwindcomponents.com/component/user-review-with-ratings +* Tiles - https://tailwindcomponents.com/component/tiles +* search bar - https://tailwindcomponents.com/component/search-bar +* white bottom with underline - https://tailwindcomponents.com/component/gender-bottom-white-with-bottom-line +* Notifications popup - https://tailwindcomponents.com/component/notifications-popup +* Simple weather box desing - https://tailwindcomponents.com/component/simple-weather-box-desing +* Cool Text Inputs and Login - https://tailwindcomponents.com/component/cool-text-inputs-and-login +* Full page overlay loading screen - https://tailwindcomponents.com/component/full-page-overlay-loading-screen +* Simple template - https://tailwindcomponents.com/component/simple-template +* Weather Widget - https://tailwindcomponents.com/component/weather-widget +* App landing page - https://tailwindcomponents.com/component/app-landing-page +* Checkbox - https://tailwindcomponents.com/component/checkbox +* Search input full rounded - https://tailwindcomponents.com/component/search-input-full-rounded +* Telegram Desktop using Tailwindcss - https://tailwindcomponents.com/component/telegram-desktop-using-tailwindcss +* Reddit Clone - https://tailwindcomponents.com/component/reddit-clone +* NavBar - https://tailwindcomponents.com/component/navbar +* Tailwind Css box shadow scale - https://tailwindcomponents.com/component/tailwind-css-box-shadow-scale +* Comment - https://tailwindcomponents.com/component/comment +* Input with static text - https://tailwindcomponents.com/component/input-with-static-text +* Contact List - https://tailwindcomponents.com/component/contact-list +* Simple Calendar Day "icon" - https://tailwindcomponents.com/component/simple-calendar-day-icon +* Collapsible / Accordion - https://tailwindcomponents.com/component/collapsible-accordion +* Input price - https://tailwindcomponents.com/component/input-price +* Tailegram: Telegram Desktop App with Tailwind CSS - https://tailwindcomponents.com/component/tailegram-telegram-desktop-app-with-tailwind-css +* Navbar with Tagline and Logo - https://tailwindcomponents.com/component/navbar-with-tagline-and-logo +* vacation calendar - https://tailwindcomponents.com/component/vacation-calendar +* Navbar with Tagline - https://tailwindcomponents.com/component/navbar-with-tagline +* Tailwind File Upload - https://tailwindcomponents.com/component/tailwind-file-upload +* search box - https://tailwindcomponents.com/component/search-box +* Tailwind Css Audio Player - https://tailwindcomponents.com/component/tailwind-css-audio-player +* Sticky Footer and responsive menu - https://tailwindcomponents.com/component/sticky-footer-and-responsive-menu +* Input Group Add Ons - https://tailwindcomponents.com/component/input-group-add-ons +* Bootstrap 4 List Group Clone - https://tailwindcomponents.com/component/bootstrap-4-list-group-clone +* Slackish homepage - https://tailwindcomponents.com/component/slackish-homepage +* Calendar Date - https://tailwindcomponents.com/component/calendar-date +* Facebook Clone - https://tailwindcomponents.com/component/facebook-clone +* WhatsApp Web Clone - https://tailwindcomponents.com/component/whatsapp-web-clone +* Github profile clone - https://tailwindcomponents.com/component/github-profile-clone +* Youtube Clone - https://tailwindcomponents.com/component/youtube-clone +* Style your file input using Tailwindcss - https://tailwindcomponents.com/component/style-your-file-input-using-tailwindcss +* Stripe Pricing - https://tailwindcomponents.com/component/stripe-pricing +* Timeline - https://tailwindcomponents.com/component/timeline +* Four column footer - https://tailwindcomponents.com/component/four-column-footer +* kissTheme - https://tailwindcomponents.com/component/kisstheme +* Coinbase Clone - https://tailwindcomponents.com/component/coinbase-clone +* Trello panel clone - https://tailwindcomponents.com/component/trello-panel-clone +* Responsive Navbar - https://tailwindcomponents.com/component/responsive-navbar +* Simple responsive footer links - https://tailwindcomponents.com/component/simple-responsive-footer-links +* Bootstrap style panel - https://tailwindcomponents.com/component/bootstrap-style-panel +* List Group - https://tailwindcomponents.com/component/list-group +* Todo List App - https://tailwindcomponents.com/component/todo-list-app +* Embedded Tweet - https://tailwindcomponents.com/component/embedded-tweet +* Slack clone - https://tailwindcomponents.com/component/slack-clone +* Slack Clone - https://tailwindcomponents.com/component/slack-clone-1 +* Site Header - https://tailwindcomponents.com/component/site-header +* Progress bar - https://tailwindcomponents.com/component/progress-bar +* Simple Navbar - https://tailwindcomponents.com/component/simple-navbar +* Article - https://tailwindcomponents.com/component/article +* Dropzone - https://tailwindcomponents.com/component/dropzone +* Airbnb-like Navbar - https://tailwindcomponents.com/component/airbnb-like-navbar +* Sidenav - https://tailwindcomponents.com/component/sidenav +* Search input - https://tailwindcomponents.com/component/search-input +* Bootstrap like input - https://tailwindcomponents.com/component/bootstrap-like-input +* Pills - https://tailwindcomponents.com/component/pills +* Responsive Header - https://tailwindcomponents.com/component/responsive-header - +* Pagination example - https://tailwindcomponents.com/component/pagination-example +* Simple Pagination - https://tailwindcomponents.com/component/simple-pagination +* Bootstrap style pagination - https://tailwindcomponents.com/component/bootstrap-style-pagination +* Bootstrap Like Pagination - https://tailwindcomponents.com/component/bootstrap-like-pagination + +## Section + +* Footer with collapsing sections - https://tailwindcomponents.com/component/footer-with-collapsing-sections +* Skills sections - https://tailwindcomponents.com/component/skills-sections +* Feedback fixed section - https://tailwindcomponents.com/component/feedback-fixed-section + +## Sidebar + +* Sidebar for dashboards - https://tailwindcomponents.com/component/sidebar-for-dashboards +* App Sidebar with sub-navigation - https://tailwindcomponents.com/component/app-sidebar-with-sub-navigation +* App Sidebar - https://tailwindcomponents.com/component/app-sidebar + +## Step + +* Progress steps - https://tailwindcomponents.com/component/progress-steps +* Steps with directions - https://tailwindcomponents.com/component/steps-with-directions +* Steps with colors - https://tailwindcomponents.com/component/steps-with-colors +* Wizard Steps Bar with Tailwind CSS - https://tailwindcomponents.com/component/steps-bar +* Progress steps bar UX - https://tailwindcomponents.com/component/progress-steps-bar-ux + +## Switch + +* switch boton - https://tailwindcomponents.com/component/switch-boton +* Toggle switch without JS - https://tailwindcomponents.com/component/toggle-switch +* iOS switches - https://tailwindcomponents.com/component/ios-switches + +## Tab + +* Clone WhatsApp Android UI - status Tab - https://tailwindcomponents.com/component/clone-whatsapp-android-ui-status-tab +* Clone WhatsApp Android UI - Calls Tab - https://tailwindcomponents.com/component/clone-whatsapp-android-ui-calls-tab +* simple tab - https://tailwindcomponents.com/component/simple-tab +* Tabs - https://tailwindcomponents.com/component/tabs + +## Table + +* Sticky Table Header - https://tailwindcomponents.com/component/sticky-table-header +* Table - https://tailwindcomponents.com/component/table-1 +* Calendar Table Template - https://tailwindcomponents.com/component/calendar-table +* Pricing Table with JS Toggle - https://tailwindcomponents.com/component/pricing-table-with-js-toggle +* Plan pricing table - https://tailwindcomponents.com/component/plan-pricing-table +* Responsive Table - https://tailwindcomponents.com/component/responsive-table-1 +* Table UI with TailwindCSS and AlpineJS - https://tailwindcomponents.com/component/table-ui-with-tailwindcss-and-alpinejs +* Striped Table - https://tailwindcomponents.com/component/striped-table +* Table Responsive with Filters - https://tailwindcomponents.com/component/table-responsive-with-filters +* Responsive Table - https://tailwindcomponents.com/component/responsive-table +* Responsive Tailwind table - https://tailwindcomponents.com/component/responsive-tailwind-table +* mobile responsive table - https://tailwindcomponents.com/component/mobile-responsive-table +* user table - https://tailwindcomponents.com/component/user-table +* Table - https://tailwindcomponents.com/component/table +* Fixed Height Scrollable Table - https://tailwindcomponents.com/component/fixed-height-scrollable-table +* Pricing table - https://tailwindcomponents.com/component/pricing-table diff --git a/Taskfile b/Taskfile index bfac5dc..ad03365 100644 --- a/Taskfile +++ b/Taskfile @@ -3,11 +3,7 @@ PATH="$PWD/node_modules/.bin":$PATH set -e remark_run() { - node -r ts-node/register/transpile-only node_modules/remark-cli/cli.js readme.md "$@" -} - -remark_output() { - remark_run --output + node -r ts-node/register/transpile-only node_modules/remark-cli/cli.js README.md "$@" } "$@" diff --git a/package.json b/package.json index 3f911ef..a1be6c4 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,14 @@ { "name": "tailwind-components", "scripts": { - "test:r": "mocha -r ts-node/register/transpile-only src/**/*.spec.ts", + "test:r": "mocha -r ts-node/register/transpile-only --no-timeouts src/**/*.spec.ts", "test:w": "mocha -r ts-node/register/transpile-only --no-timeouts --watch-files src/**/*.ts --watch src/**/*.spec.ts", "test:d": "node --inspect -r ts-node/register/transpile-only node_modules/mocha/bin/_mocha --no-timeouts --watch-files src/**/*.ts --watch src/**/*.spec.ts", "test:brk": "node --inspect-brk -r ts-node/register/transpile-only node_modules/mocha/bin/_mocha --no-timeouts src/**/*.spec.ts", "remark": "sh Taskfile remark_run", - "remark:update": "sh Taskfile remark_run --output" + "remark:update": "sh Taskfile remark_run --output", + "program:run": "ts-node src/main.ts", + "generate": "npm run program:run && npm run remark:update" }, "config": { "commitizen": { @@ -19,14 +21,22 @@ } }, "devDependencies": { + "@types/lodash": "^4.14.162", "@types/mocha": "^8.0.3", "@types/node": "^14.11.10", - "graphql-scraper": "^1.2.1", + "@types/pluralize": "^0.0.29", + "@types/puppeteer": "^3.0.2", + "@types/string-similarity": "^3.0.0", + "earljs": "^0.0.13", + "lodash": "^4.17.20", "mocha": "^8.1.3", + "pluralize": "^8.0.0", "prettier": "^2.1.2", + "puppeteer": "^5.3.1", "remark": "^13.0.0", "remark-cli": "^9.0.0", "remark-toc": "^7.0.0", + "string-similarity": "^4.0.2", "ts-node": "^9.0.0", "typescript": "^4.0.3" } diff --git a/src/example.spec.ts b/src/example.spec.ts deleted file mode 100644 index d536fa8..0000000 --- a/src/example.spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -import assert from 'assert'; -import { graphql } from 'graphql'; -import schema from 'graphql-scraper'; - -it('example', async () => { - const query = /* GraphQL */ ` - { - page(url: "http://news.ycombinator.com") { - items: queryAll(selector: "tr.athing") { - rank: text(selector: "td span.rank") - title: text(selector: "td.title a") - sitebit: text(selector: "span.comhead a") - url: attr(selector: "td.title a", name: "href") - # attrs: next { - # score: text(selector: "span.score") - # user: text(selector: "a:first-of-type") - # comments: text(selector: "a:nth-of-type(3)") - # } - } - } - } - `; - const result = await graphql(schema, query); - // console.log('result', JSON.stringify(result, null, 2)); - console.log('result', result.data.page); -}); - -it.skip('gustui', async () => { - const query = /* GraphQL */ ` - { - page(url: "https://www.gustui.com/docs") { - items: queryAll(selector: "tr.athing") { - rank: text(selector: "td span.rank") - title: text(selector: "td.title a") - sitebit: text(selector: "span.comhead a") - url: attr(selector: "td.title a", name: "href") - attrs: next { - score: text(selector: "span.score") - user: text(selector: "a:first-of-type") - comments: text(selector: "a:nth-of-type(3)") - } - } - } - } - `; - const result = await graphql(schema, query); - // console.log('result', JSON.stringify(result, null, 2)); - console.log('result', result.data.page); -}); diff --git a/src/generate.spec.ts b/src/generate.spec.ts new file mode 100644 index 0000000..17569d6 --- /dev/null +++ b/src/generate.spec.ts @@ -0,0 +1,56 @@ +import { generate } from './generate'; +import { expect } from 'earljs'; + +it('get category exact match', async () => { + const items = [ + { + name: 'Card', + link: 'https://tailwindcomponents.com/component/card-1', + }, + ]; + const result = await generate({ items }); + expect(result).toEqual( + expect.stringMatching('\\* Card - https://tailwindcomponents.com/component/card-1'), + ); +}); + +it('get category from word', async () => { + const items = [ + { + name: 'curvy card', + link: 'https://example.com', + }, + ]; + const result = await generate({ items }); + expect(result).toEqual(expect.stringMatching('\\* curvy card - https://example.com')); +}); + +it('get category exact pluralize', async () => { + const items = [ + { + name: 'Cards', + link: 'https://example.com', + }, + ]; + const result = await generate({ items }); + expect(result).toEqual(expect.stringMatching('## Card\n\\* Cards - https://example.com')); +}); + +it('sorted alphabetically', async () => { + const items = [ + { + name: 'Cards', + link: 'https://example.com', + }, + { + name: 'Button', + link: 'https://example.com', + }, + ]; + const result = await generate({ items }); + expect(result).toEqual( + expect.stringMatching( + '## Button\n\\* Button - https://example.com\n## Card\n\\* Cards - https://example.com', + ), + ); +}); diff --git a/src/generate.ts b/src/generate.ts new file mode 100644 index 0000000..fb03125 --- /dev/null +++ b/src/generate.ts @@ -0,0 +1,70 @@ +import { CompomentLink } from './types'; +import stringSimilarity from 'string-similarity'; +import _ from 'lodash'; +import { plural } from 'pluralize'; + +const categoryList = new Map([ + ['Alert', ['toast']], + ['Avatar', []], + ['Breadcrumb', []], + ['Button', []], + ['Badge', []], + ['Card', []], + ['Dropdown', []], + ['Form', []], + ['Hero', []], + ['Layout', []], + ['Modal', []], + ['Navigation', ['navbar']], + ['Pagination', []], + ['Sidebar', ['side panel']], + ['Step', []], + ['Section', []], + ['Switch', ['toggle']], + ['Table', []], + ['Tab', []], + ['Other', []], +]); + +type GenerateArgs = { + items: CompomentLink[]; +}; + +export async function generate({ items }: GenerateArgs) { + const byCategory = _(items) + .groupBy((item) => getCategory(item.category || item.name)) + .toPairs() + .sortBy(0) + .fromPairs() + .value(); + const content: string[] = []; + for (const [category, items] of Object.entries(byCategory)) { + content.push(`## ${category}`); + content.push(items.map(createLink).join('\n')); + } + return `# Tailwind Components\n## Table of Contents\n${content.join('\n')}`; +} + +function getCategory(name: string) { + for (const [category, keywords] of categoryList.entries()) { + const categoryLower = category.toLowerCase(); + const categoryPlural = plural(categoryLower); + if (categoryLower === name.toLowerCase()) { + return category; + } + const words = name.split(/\s+/); + if ( + words.find((word) => { + const wordLower = word.toLowerCase(); + return wordLower === categoryLower || categoryPlural === plural(wordLower); + }) + ) { + return category; + } + } + return 'Other'; +} + +function createLink(item: CompomentLink) { + return `* ${item.name} - ${item.link}`; +} diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..eeccd72 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,20 @@ +import puppeteer from 'puppeteer'; +import { getScrapers } from './scrapers'; +import { CompomentLink } from './types'; +import { generate } from './generate'; +import { promises as fs } from 'fs'; + +async function main() { + const browser = await puppeteer.launch({ headless: false, slowMo: 0 }); + const [page] = await browser.pages(); + const scrapers = await getScrapers(); + const items: CompomentLink[] = []; + for await (const scraper of scrapers) { + items.push(...(await scraper({ page }))); + } + await browser.close(); + const content = await generate({ items }); + await fs.writeFile('README.md', content); +} + +main(); diff --git a/src/scrapers/index.ts b/src/scrapers/index.ts new file mode 100644 index 0000000..481a058 --- /dev/null +++ b/src/scrapers/index.ts @@ -0,0 +1,4 @@ +export async function getScrapers() { + const result = Promise.all([import('./tailwindcomponents').then((m) => m.default)]); + return result; +} diff --git a/src/scrapers/tailwindcomponents.ts b/src/scrapers/tailwindcomponents.ts new file mode 100644 index 0000000..dc6055f --- /dev/null +++ b/src/scrapers/tailwindcomponents.ts @@ -0,0 +1,31 @@ +import { CompomentLink, ScraperArgs } from '../types'; + +export default async function tailwindcomponents({ page }: ScraperArgs) { + await page.goto('https://tailwindcomponents.com/components'); + const itemSelector = '#app > .min-h-screen > main > div a.flex.flex-col'; + const nextPageSelector = 'a[title="Next ยป"]'; + const items: CompomentLink[] = await page.$$eval(itemSelector, (elements) => { + return elements.map((a) => ({ + name: a.querySelector('h4')!.textContent as string, + link: `https://tailwindcomponents.com${a.getAttribute('href')}`, + })); + }); + let nextPage: string | null = ''; + + do { + if (!(await page.$(nextPageSelector))) { + break; + } + nextPage = await page.$eval(nextPageSelector, (a) => a.getAttribute('href')); + await page.goto(nextPage!); + const nextItems = await page.$$eval(itemSelector, (elements) => { + return elements.map((a) => ({ + name: a.querySelector('h4')!.textContent as string, + link: `https://tailwindcomponents.com${a.getAttribute('href')}`, + })); + }); + items.push(...nextItems); + } while (nextPage); + + return items; +} diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..d8df28d --- /dev/null +++ b/src/types.ts @@ -0,0 +1,11 @@ +import { Page } from 'puppeteer'; + +export type ScraperArgs = { + page: Page; +}; + +export type CompomentLink = { + category?: string; + name: string; + link: string; +}; diff --git a/tsconfig.json b/tsconfig.json index 96776c1..cbf4c42 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,7 @@ "declaration": false, "declarationMap": false, "skipLibCheck": true, - "lib": ["esnext"] + "lib": ["dom", "esnext"] }, "include": ["src/**/*.ts"] }