Saiy2k Nostr Components vs TailPress – Tailwind for WordPress

Nostr Components brings the power of Nostr (Notes and Other Stuff Transmitted by Relays) to your WordPress site through modern web components. This plugin provides Gutenberg blocks and shortcodes that allow you to seamlessly integrate Nostr content into your posts and pages. Key Features Gutenberg Blocks: Modern block editor integration for Nostr Zap button, Post, Profile, Profile Badge, Follow Button, Like Button, and Livestream Shortcodes: Classic editor support with simple shortcode syntax Selective Loading: Enable only the components you need for optimal performance Customizable: Configure relays, themes, and component settings Security: Built-in security with custom element allowlist via KSES Performance: Conditional asset loading based on enabled components Available Components Nostr Zap button: Allows your readers to zap to your posts and pages Nostr Follow Button: Interactive follow/unfollow buttons for Nostr users Nostr Post: Display Nostr notes/posts with full content and metadata Nostr Profile: Show complete Nostr user profiles with bio, stats, and social links Nostr Profile Badge: Compact profile display perfect for sidebars and footers Nostr Like Button: Like URLs using Nostr reactions (NIP-25) Nostr Livestream: Display Nostr livestreams (NIP-53) with video playback and participant information How It Works Install and activate the plugin Go to Settings → Saiy2k Nostr Components to configure Enable only the components you need Add blocks in the Gutenberg editor or use shortcodes Configure relays and theme settings as needed Example Usage Gutenberg Blocks: Simply add the Nostr blocks from the block inserter and configure them in the block settings. Shortcodes: [nostr_zap_button pubkey=”npub1abc…” url=””] [nostr_post eventid=”note1abc…”] [nostr_profile pubkey=”npub1abc…”] [nostr_profile_badge pubkey=”npub1abc…”] [nostr_follow_button pubkey=”npub1abc…”] [nostr_like_button] [nostr_livestream naddr=”naddr1abc…”] Adding Like and Zap Buttons to All Posts/Pages To automatically add Like and Zap buttons to the end of every post and page: Go to Appearance → Theme Editor (or use a child theme for safer customization) Select your active theme (or child theme) Open functions.php Add the following code at the end of the file: // Add shortcode to the end of every post and page function add_shortcode_to_content($content) { // Only add in single posts and pages (not homepage or archives) if (is_singular(['post', 'page']) && in_the_loop() && is_main_query()) { $shortcode_1 = do_shortcode('[nostr_like_button]'); $current_url = esc_url(get_permalink()); $shortcode_2 = do_shortcode('[nostr_zap_button npub="[YOUR-NPUB-GOES-HERE]" url="' . $current_url . '"]'); $content .= ' ' . $shortcode_1 . ' ' . $shortcode_2 . ' '; } return $content; } add_filter('the_content', 'add_shortcode_to_content'); Important Notes: * Replace [YOUR-NPUB-GOES-HERE] with your actual Nostr public key (npub format) * Always use a child theme when modifying theme files to preserve changes during theme updates * The buttons will only appear on single post and page views, not on archive pages or the homepage Development This plugin is developed as part of the Nostr Components project. For development, bug reports, and feature requests, please visit the GitHub repository. Support For support, please visit the GitHub repository or create an issue. Privacy Policy This plugin does not collect, store, or transmit any personal data. All Nostr data is fetched directly from public relays and displayed locally on your site. If components fetch data client‑side, visitors’ browsers may directly connect to configured relays (exposing their IP and user agent to those relays). Configure trusted relays accordingly.

Tailwind CSS is a great companion to building block based sites in WordPress. Unfortunately, it’s been pretty complicated to add Tailwind CSS to WordPress since it needs to be compiled with Node.js in order to be production ready. This plugin takes care of that by adding Tailwind CSS to WordPress in one easy step (activate the plugin) and at the same time takes care of performance and caching so your site remains fast and production ready! Who It’s For This is primarily for developers and users that are familiar with Tailwind CSS and comfortable styling their site using their utility class framework. It’s also for those who have struggled to add Tailwind to their workflow without having to constantly compile their CSS every time the classes in their page content changes. How it Works Extracts classes from pages and compiles them server-side into Tailwind CSS Caches the dynamically generated CSS to avoid performance issues on the frontend of your production site. Are you affiliated with tailpress.io the theme? No, we are not! Unfortunately the same name was used for both out of coincidence, but we are not affiliated and are two different solutions. Tailpress.io is a great starting point for developing custom themes with deep integration of Tailwind. I would recommend it for any developer that wants to build a custom theme that depends heavily on Tailwind. Tailpress, this plugin, adds Tailwind support to any project as an add-on. It can be used as much or as little as you need, added to custom themes or pre-existing ones. Can this be used in production? Yes! Although the styles in the backend get generated on the fly, the CSS on the frontend gets cached for every page. Changing any classes on the page will bust the cache automatically so it’ll still stay up to date with any changes. Can this be used outside the block editor? Yes! This will work anywhere on the backend or front end of your site that uses classes to style things. Known Issues Device Preview Mode in Block Editor The non-desktop preview modes in the block editor utilize an iframe and don’t load assets properly. Therefore your Tailwind styles won’t be visible here. Page Caching If you have any page caching on your site, you’ll have to clear your cache for the best experience.