Write on Hive, Read Everywhere!

# Write on Hive, Read Everywhere! Hello, dear Hive community! ꙮ Even though it's only been about a week since [my last post](https://blog.dev.openhive.network/hive-139531/@mtyszczak/hi-ve-everyone), I've missed you all so much! 🤗 Recently, our dev team had a productive chat with @crimsonclad and @gtg about Hive components that users can embed on their websites. So, I got busy trying to bring these ideas to life as quickly as I could! 🏃  ## 📖 User Stories We began by asking simple questions 🤔 about which components are essential and how they should be used, and we got immediate answers! - I want to **embed Hive posts** 🧩 on my website - I want my visitors to **view comments** 🗪 - I want my visitors to be able to **❤️ like & 💬 comment** on the content I create - I want to display a paginated list of the **latest posts by tag** 📚 - I want to show details of my **Hive account** 👦 - I want to display my **witness details** 👀  ## 📊 Check Out the Components! ### Witness ```html ```  ### Post ```html ```  ### Comments ```html ```  ### Posts by Tag ```html ```  ## 💻 Sample Website Thanks to @gtg, you can see these components [in action](https://gtg.openhive.network/5bb236) 💥 Feel free to explore the source code of the website (visit: `view-source:https://gtg.openhive.network/5bb236`). It's impressively simple! ♻️ ## 📱 Mobile Users Welcome! No worries! The components are fully responsive! ⚡  No need to adjust settings. They automatically adapt to the viewport! 😊 ## 🔍 How to Use Them? I created a [quick start guide](https://github.com/mtyszczak/hive-components?tab=readme-ov-file#-quick-start) 🧠 in my repository. TL;DR: ```html ``` ## 🧛🏻‍♀️ For Night Owls Introducing the ✨ **dark theme** ✨:  Just set the `theme="dark"` attribute on any component and you're good to go! 💪 ## 🎨 Want More Colors? Customize your communities and websites with just a few lines of CSS! 🤩 ```css hive-comments { --hive-on-surface: blue; } ``` And here are the results: 👇  ## 📈 Need More Components? Great! I love your spirit! 👻 You can request a new component by [creating an issue](https://github.com/mtyszczak/hive-components/issues/new) 💡 or suggest edits by [opening a pull request](https://github.com/mtyszczak/hive-components/pulls) 🛠️ ## 💾 Component Sizes I understand not everyone has super-fast internet 📟 So, I worked to make the components as compact as possible! ⬇️ | Name | Size | |------|------| | Lit core | 7 kB | | Hive Witness | 19 kB | | Hive Post | 29.3 kB | | Hive Comments | 46.9 kB | | Hive Tag | 50.2 kB | | Hive internals | 640 kB | And remember, these script sizes are not gzipped yet! They are cached by browsers and executed only once per page load, on demand! 🤯 ## 💲 Pricing Just kidding 🤣 It's completely 🆓 🗽 Feel free to visit [the repository](https://github.com/mtyszczak/hive-components) to contribute or use the components via CDN, thanks to @gtg 🧙‍♂️ ## 🌟 Future Plans I have a [few ideas](https://github.com/mtyszczak/hive-components/issues) in mind, and there are areas I can improve, but we did it! 📣 MVP is on board! 💎 I strongly encourage you to use the Hive components! 🖼️ --- Images from private archive & chatgpt.com