Write on Hive, Read Everywhere!
Hello, dear Hive community! ๊ฎ
Even though it's only been about a week since my last post, 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
<hive-witness account="gtg"></hive-witness>
Post
<hive-post permlink="@gtg/hello-world"></hive-post>
Comments
<hive-comments permlink="@gtg/67juuw-skyteam-airline-alliance-official-partner-of-hivefest"></hive-comments>
Posts by Tag
<hive-tag tag="photography" url-template="/photography/{permlink}"></hive-tag>
๐ป Sample Website
Thanks to @gtg, you can see these components in action ๐ฅ
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 ๐ง in my repository.
TL;DR:
(html comment removed: Prepare imports for our components )
<script type="importmap">
{
"imports": {
"lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
"@hiveio/internal": "https://gtg.openhive.network/5bb236/hive-internal.js"
}
}
</script>
(html comment removed: Import components we want )
<script type="module" src="https://gtg.openhive.network/5bb236/hive-post.js"></script>
<script type="module" src="https://gtg.openhive.network/5bb236/hive-witness.js"></script>
<script type="module" src="https://gtg.openhive.network/5bb236/hive-comments.js"></script>
<script type="module" src="https://gtg.openhive.network/5bb236/hive-tag.js"></script>
(html comment removed: Use the components )
<hive-witness account="gtg"></hive-witness>
<hive-post permlink="@gtg/hello-world"></hive-post>
<hive-comments permlink="@gtg/hello-world"></hive-comments>
<hive-tag tag="photography" posts-per-page="4" url-template="/photography/{permlink}"></hive-tag>
๐ง๐ปโโ๏ธ 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! ๐คฉ
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 ๐ก or suggest edits by opening a pull request ๐ ๏ธ
๐พ 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 to contribute or use the components via CDN, thanks to @gtg ๐งโโ๏ธ
๐ Future Plans
I have a few ideas 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
Thank you for taking our chats and thinking about what something viable and usable for anyone, anywhere could look like. I'm stoked about it!
Thank you, @crimsonclad! ๐ Your insights and feedback were invaluable in shaping these ideas, and it means a lot to see your excitement. I'm really looking forward to making Hive even more accessible and engaging for everyone, everywhere. Let's keep building something amazing together! ๐โจ
I think the "hive account" should be the next implemented, I guess a lot of people would like that one.
Which is similar to "the badge" thing, only that badge was a simple image-indicator, while this would be a "my hive profile". Ability to follow, defined prefered front-end, idk what else?
I guess most obvious thing would be the description of themselves from their json metadata + some account statistics. But seems like a good question to ask potential users. Anyone want to suggest what they would like to see on their personal web pages about their account?
How about the using the bkg image? like it's done on PeakD (image below), I really like how it looks, even just on the defaults.
I never tailored that image for this use, and was kinda lucky it fits just OK (it even looks better than as the banner:D).
Considering a bit different 'target' or 'context', maybe it would be a better idea to add a separate metadata entry. After all, tinkering with keeping an image good for multiple purposes isn't fun at all. Users (at least those who actually care) could provide a different text/image for this purpose, and for those who don't - it could fall back to the existing field(s). Or don't fallback and let it just stay empty and ugly to emphasize the need to spend those few minutes to configure it :)
Absolutely agree with both of you! ๐
Iโll make sure to add all suggestions and details for the Account component to the issue here: https://github.com/mtyszczak/hive-components/issues/1 for everyone who doesnโt have a GitHub account, so we can keep the ideas organized and accessible. ๐โจ
Iโll aim to work on this component and hopefully have it ready next week โ really excited to see how it turns out! ๐
Also, we could reuse this for Hive Bridge Account details! We can definitely make it modular enough so it fits both places nicely. Thanks for the brainstorming, and keep the ideas coming, everyone! ๐
Visit Hive Bridge
That's amazing. I am quite old backend (C++) guy, which lately is trying to touch frontend development and definitely understand the flow and code. The ideas that motivated this work (which are nothing groundbreaking) were presented > 2 years ago, but it was mtyszczak who brought them to success. Looking at the way of use and the code of the components themselves - it is a huge success and a reflection of the beautiful idea of โโprogramming: DRY KISS. Thank You !! A lot.
"May the Hive be with you!" :-D
(my introduction post is from before-fork days, to many of us it's obvious why I mentioned the other network, but I guess it will be a way better if I edit my old posts and put a links to our story of creating Hive)
Great to see the embeddable Hive components taking shape! ๐ This will be a game changer for accessibility.
Very cool ๐
Dark theme should be default :o)
That's awesome! Good Job!!!
it is a great work, i like see tools made it by others devs in hive :D
Fabulous!
Kudos to the brain behind this, great job.๐๐ช๐ฅ
๐๐
Wow this is lovely
That's great but we need to deal with the bad downvoters on Hive ๐ค
I've been getting downvoted for a long time for no reason ๐ค and I'm being downvoted by a racist person who is also a top Hive farmer
Congratulations @mtyszczak! You have completed the following achievement on the Hive blockchain And have been rewarded with New badge(s)
Your next target is to reach 400 upvotes.
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPCongratulations @mtyszczak! Your post has been a top performer on the Hive blockchain and you have been rewarded with this rare badge
You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOP$WINE
๐ Love the message-Write on Hive, read everywhere
It's amazing how this platform connects writers and readers from all over the world.
Keep sharing the inspiration๐๐โจ
This is amazing. You are doing a great job