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:
<!-- 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>
<!-- 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>
<!-- 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
Comments (19)
Great to see the embeddable Hive components taking shape! ๐ This will be a game changer for accessibility.
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)
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
STOPI 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?
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
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 :)
Dark theme should be default :o)
Very cool ๐
Congratulations @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
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
@themarkymark & Co,
The truth is not yours to conquer, nor is it something you can bend to your will. No amount of manipulation, no cascade of downvotes, no orchestrated campaigns can alter its essence. Call us names if it pleases youโlabel us, mock us, dismiss usโbut know this: it changes nothing. The facts remain unshaken, etched into the immutable ledger of the blockchain for all to see.
TURN OFF THE BUILDAWHALE SCAM FARM
Key Issues That Demand Immediate Attention:
The problems are glaring, undeniable, and corrosive to the Hive ecosystem. They must be addressed without delay:
These practices harm not just individual usersโthey undermine the very foundation of Hive, eroding trust and poisoning the community. Such actions are unethical and outright destructive.
@buildawhale Wallet:
@usainvote Wallet:
@buildawhale/wallet | @usainvote/wallet
@ipromote Wallet:
Author Rewards: 2,181.16
Curation Rewards: 4,015.61
Staked HIVE (HP): 0.00
Rewards/Stake Co-efficient (KE): NaN
HIVE: 25,203.749
Staked HIVE (HP): 0.000
Delegated HIVE: 0.000
Estimated Account Value: $6,946.68
Recent Activity:
@leovoter Wallet:
Author Rewards: 194.75
Curation Rewards: 193.88
Staked HIVE (HP): 0.00
Rewards/Stake Co-efficient (KE): 388,632.00 (Suspiciously High)
HIVE: 0.000
Staked HIVE (HP): 0.001
Total: 16.551
Delegated HIVE: +16.550
Recent Activity:
@abide Wallet:
Recent Activity:
@proposalalert Wallet:
Recent Activity:
@stemgeeks Wallet:
Recent Activity:
@theycallmemarky Wallet:
Recent Activity:
@apeminingclub Wallet:
Recent Activity:
Scheduled unstake (power down): ~2.351 HIVE (in 4 days, remaining 7 weeks)
Total Staked HIVE: 1,292.019
Delegated HIVE: +1,261.508
Withdraw vesting from @apeminingclub to @blockheadgames 2.348 HIVE (10 days ago)
Claim rewards: 0.290 HP (10 days ago)
@blockheadgames Wallet:
Recent Activity:
@empoderat Wallet:
Recent Activity:
@gogreenbuddy Wallet:
Recent Activity:
@rollingbones Wallet:
Recent Activity:
The blockchain data speaks for itself. We are not fabricating these claims; we are simply presenting what is already visible for all to see. As weโve repeatedly urged @themarkymark & Coโthe solution is simple: STOP.
SO PLEASE STOP. Itโs time to do whatโs right for Hive and its community. Why cling to practices that harm others? Power down, step away, and let Hive thrive as it was meant to. You bring nothing positive to this ecosystem.
THOSE WHO ARE WATCHINGโTHIS COULD HAPPEN TO YOU. YOU ARE NOT GOD. YOU ARE DOING WRONG EACH DAY.
PLEASE STOP.
Weโve shown that weโre here to stay and have exposed the truth. So why has nothing been done? Do @themarkymark and @blocktrades own the Hive Blockchain? Is that why no action is being taken?
https://peakd.com/hive-122609/@bilpcoinbpc/themarkymark-and-co-you-seem-to-enjoy-spreading-lies-but-here-s-the-truth-we-have-no-reason-to-lie
https://peakd.com/hive-167922/@bilpcoinbpc/themarkymark-and-co-you-claim-we-re-the-number-one-spammers-on-hive-but-all-we-do-is-share-the-truth-lol
https://peakd.com/hive-133987/@bpcvoter3/isn-t-it-funny-how-themarkymark-and-co-are-suddenly-talking-about-ke-levels-on-hive-well-look-what-we-found-some-of-the-accounts
https://peakd.com/hive-178265/@bpcvoter1/themarkymark-and-co-the-same-old-tactics-are-at-play-calling-people-names-and-telling-others-to-avoid-them-lol-keep-digging-and
https://peakd.com/hive-122609/@bpcvoter2/hive-community-are-we-really-going-to-allow-a-small-group-of-individuals-to-make-hive-look-like-a-joke-we-ve-done-the-work-we-ve
https://peakd.com/hive-196233/@bpcvoter1/you-call-it-sound-advice-coming-from-themarkymark
https://peakd.com/hive-196233/@bpcvoter1/steevc-you-seem-to-enjoy-spreading-lies-don-t-you-we-only-share-the-truth-call-it-spam-if-you-wish-turn-off-the-buildawhale-scam
https://peakd.com/hive-140084/@bpcvoter1/bilpcoin-fun-drop-your-posts-videos-pics-doodles-masterpieces-literally-anything-that-makes-you-happy
#bilpcoin we must stop the #buildawhalescam #buildawhalefarm #themarkymarkscam #themarkymarkfarm on #hive #thedarksideofhive
Hello @themarkymark aka @gogreenbuddy Aka @buildawhale Aka @punkteam please explain why you keep downvoting my original content ๐ค
Please explain to everyone why ๐ค
@meno @steevc @crimsonclad @azircon let's not forget blocktrades ๐ please tell your racist friend to stop downvoting my original content
How can we we allow a mentally ill person to have so much control on Hive ๐
It's unbelievable you downvoted this Goodbye Auntie R.I.P ๐๐พ You fucked up big time it's clear blocktrades is in control ๐
If nothing can be done about your downvote abuse then Hive is a dead project ๐๐พ
It's crazy that the person doing the downvoting is also farming the shit out of Hive ๐๐๐๐
If anyone wants to speak to me privately send me a message on Instagram @kgakakillerg
You can never stop the truth with lies ๐๐๐๐๐๐
It's crazy we have a man who pretends to be a millionaire running around Hive downvoting people for fun ๐ค and nothing has been done ๐ค
It's crazy that someone is trying to bully me on Hive ๐๐๐๐๐๐๐๐
It's unbelievable that no one has came to help as people are afraid to say anything or they get downvoted too ๐๐๐๐๐๐
There's no real freedom on Hive if one person can cause so much harm
You can keep talking shit it changes nothing you have been exposed ๐๐๐คฃ๐คฃ๐คฃ your word's mean nothing
When you tell me and everyone else why you keep downvoting original content on Hive ๐ค you are weak
I feel so sorry for you ๐๐พ
Downvotes do nothing ๐ค
I don't get it what are you getting out of downvoting my original content ๐ค
Trying to bully me won't work ๐๐๐๐๐
Blocktrades don't you think it's time to stop ๐ค
@themarkymark & Co,
The truth is not yours to conquer, nor is it something you can bend to your will. No amount of manipulation, no cascade of downvotes, no orchestrated campaigns can alter its essence. Call us names if it pleases youโlabel us, mock us, dismiss usโbut know this: it changes nothing. The facts remain unshaken, etched into the immutable ledger of the blockchain for all to see.
TURN OFF THE BUILDAWHALE SCAM FARM
Key Issues That Demand Immediate Attention:
The problems are glaring, undeniable, and corrosive to the Hive ecosystem. They must be addressed without delay:
These practices harm not just individual usersโthey undermine the very foundation of Hive, eroding trust and poisoning the community. Such actions are unethical and outright destructive.
@buildawhale Wallet:
@usainvote Wallet:
@buildawhale/wallet | @usainvote/wallet
@ipromote Wallet:
Author Rewards: 2,181.16
Curation Rewards: 4,015.61
Staked HIVE (HP): 0.00
Rewards/Stake Co-efficient (KE): NaN
HIVE: 25,203.749
Staked HIVE (HP): 0.000
Delegated HIVE: 0.000
Estimated Account Value: $6,946.68
Recent Activity:
@leovoter Wallet:
Author Rewards: 194.75
Curation Rewards: 193.88
Staked HIVE (HP): 0.00
Rewards/Stake Co-efficient (KE): 388,632.00 (Suspiciously High)
HIVE: 0.000
Staked HIVE (HP): 0.001
Total: 16.551
Delegated HIVE: +16.550
Recent Activity:
@abide Wallet:
Recent Activity:
@proposalalert Wallet:
Recent Activity:
@stemgeeks Wallet:
Recent Activity:
@theycallmemarky Wallet:
Recent Activity:
@apeminingclub Wallet:
Recent Activity:
Scheduled unstake (power down): ~2.351 HIVE (in 4 days, remaining 7 weeks)
Total Staked HIVE: 1,292.019
Delegated HIVE: +1,261.508
Withdraw vesting from @apeminingclub to @blockheadgames 2.348 HIVE (10 days ago)
Claim rewards: 0.290 HP (10 days ago)
@blockheadgames Wallet:
Recent Activity:
@empoderat Wallet:
Recent Activity:
@gogreenbuddy Wallet:
Recent Activity:
@rollingbones Wallet:
Recent Activity:
The blockchain data speaks for itself. We are not fabricating these claims; we are simply presenting what is already visible for all to see. As weโve repeatedly urged @themarkymark & Coโthe solution is simple: STOP.
SO PLEASE STOP. Itโs time to do whatโs right for Hive and its community. Why cling to practices that harm others? Power down, step away, and let Hive thrive as it was meant to. You bring nothing positive to this ecosystem.
THOSE WHO ARE WATCHINGโTHIS COULD HAPPEN TO YOU. YOU ARE NOT GOD. YOU ARE DOING WRONG EACH DAY.
PLEASE STOP.
Weโve shown that weโre here to stay and have exposed the truth. So why has nothing been done? Do @themarkymark and @blocktrades own the Hive Blockchain? Is that why no action is being taken?
https://peakd.com/hive-122609/@bilpcoinbpc/themarkymark-and-co-you-seem-to-enjoy-spreading-lies-but-here-s-the-truth-we-have-no-reason-to-lie
https://peakd.com/hive-167922/@bilpcoinbpc/themarkymark-and-co-you-claim-we-re-the-number-one-spammers-on-hive-but-all-we-do-is-share-the-truth-lol
https://peakd.com/hive-133987/@bpcvoter3/isn-t-it-funny-how-themarkymark-and-co-are-suddenly-talking-about-ke-levels-on-hive-well-look-what-we-found-some-of-the-accounts
https://peakd.com/hive-178265/@bpcvoter1/themarkymark-and-co-the-same-old-tactics-are-at-play-calling-people-names-and-telling-others-to-avoid-them-lol-keep-digging-and
https://peakd.com/hive-122609/@bpcvoter2/hive-community-are-we-really-going-to-allow-a-small-group-of-individuals-to-make-hive-look-like-a-joke-we-ve-done-the-work-we-ve
https://peakd.com/hive-196233/@bpcvoter1/you-call-it-sound-advice-coming-from-themarkymark
https://peakd.com/hive-196233/@bpcvoter1/steevc-you-seem-to-enjoy-spreading-lies-don-t-you-we-only-share-the-truth-call-it-spam-if-you-wish-turn-off-the-buildawhale-scam
https://peakd.com/hive-140084/@bpcvoter1/bilpcoin-fun-drop-your-posts-videos-pics-doodles-masterpieces-literally-anything-that-makes-you-happy
#bilpcoin we must stop the #buildawhalescam #buildawhalefarm #themarkymarkscam #themarkymarkfarm on #hive #thedarksideofhive
@themarkymark & Co,
The truth is not yours to conquer, nor is it something you can bend to your will. No amount of manipulation, no cascade of downvotes, no orchestrated campaigns can alter its essence. Call us names if it pleases youโlabel us, mock us, dismiss usโbut know this: it changes nothing. The facts remain unshaken, etched into the immutable ledger of the blockchain for all to see.
TURN OFF THE BUILDAWHALE SCAM FARM
Key Issues That Demand Immediate Attention:
The problems are glaring, undeniable, and corrosive to the Hive ecosystem. They must be addressed without delay:
These practices harm not just individual usersโthey undermine the very foundation of Hive, eroding trust and poisoning the community. Such actions are unethical and outright destructive.
@buildawhale Wallet:
@usainvote Wallet:
@buildawhale/wallet | @usainvote/wallet
@ipromote Wallet:
Author Rewards: 2,181.16
Curation Rewards: 4,015.61
Staked HIVE (HP): 0.00
Rewards/Stake Co-efficient (KE): NaN
HIVE: 25,203.749
Staked HIVE (HP): 0.000
Delegated HIVE: 0.000
Estimated Account Value: $6,946.68
Recent Activity:
@leovoter Wallet:
Author Rewards: 194.75
Curation Rewards: 193.88
Staked HIVE (HP): 0.00
Rewards/Stake Co-efficient (KE): 388,632.00 (Suspiciously High)
HIVE: 0.000
Staked HIVE (HP): 0.001
Total: 16.551
Delegated HIVE: +16.550
Recent Activity:
@abide Wallet:
Recent Activity:
@proposalalert Wallet:
Recent Activity:
@stemgeeks Wallet:
Recent Activity:
@theycallmemarky Wallet:
Recent Activity:
@apeminingclub Wallet:
Recent Activity:
Scheduled unstake (power down): ~2.351 HIVE (in 4 days, remaining 7 weeks)
Total Staked HIVE: 1,292.019
Delegated HIVE: +1,261.508
Withdraw vesting from @apeminingclub to @blockheadgames 2.348 HIVE (10 days ago)
Claim rewards: 0.290 HP (10 days ago)
@blockheadgames Wallet:
Recent Activity:
@empoderat Wallet:
Recent Activity:
@gogreenbuddy Wallet:
Recent Activity:
@rollingbones Wallet:
Recent Activity:
The blockchain data speaks for itself. We are not fabricating these claims; we are simply presenting what is already visible for all to see. As weโve repeatedly urged @themarkymark & Coโthe solution is simple: STOP.
SO PLEASE STOP. Itโs time to do whatโs right for Hive and its community. Why cling to practices that harm others? Power down, step away, and let Hive thrive as it was meant to. You bring nothing positive to this ecosystem.
THOSE WHO ARE WATCHINGโTHIS COULD HAPPEN TO YOU. YOU ARE NOT GOD. YOU ARE DOING WRONG EACH DAY.
PLEASE STOP.
Weโve shown that weโre here to stay and have exposed the truth. So why has nothing been done? Do @themarkymark and @blocktrades own the Hive Blockchain? Is that why no action is being taken?
https://peakd.com/hive-122609/@bilpcoinbpc/themarkymark-and-co-you-seem-to-enjoy-spreading-lies-but-here-s-the-truth-we-have-no-reason-to-lie
https://peakd.com/hive-167922/@bilpcoinbpc/themarkymark-and-co-you-claim-we-re-the-number-one-spammers-on-hive-but-all-we-do-is-share-the-truth-lol
https://peakd.com/hive-133987/@bpcvoter3/isn-t-it-funny-how-themarkymark-and-co-are-suddenly-talking-about-ke-levels-on-hive-well-look-what-we-found-some-of-the-accounts
https://peakd.com/hive-178265/@bpcvoter1/themarkymark-and-co-the-same-old-tactics-are-at-play-calling-people-names-and-telling-others-to-avoid-them-lol-keep-digging-and
https://peakd.com/hive-122609/@bpcvoter2/hive-community-are-we-really-going-to-allow-a-small-group-of-individuals-to-make-hive-look-like-a-joke-we-ve-done-the-work-we-ve
https://peakd.com/hive-196233/@bpcvoter1/you-call-it-sound-advice-coming-from-themarkymark
https://peakd.com/hive-196233/@bpcvoter1/steevc-you-seem-to-enjoy-spreading-lies-don-t-you-we-only-share-the-truth-call-it-spam-if-you-wish-turn-off-the-buildawhale-scam
https://peakd.com/hive-140084/@bpcvoter1/bilpcoin-fun-drop-your-posts-videos-pics-doodles-masterpieces-literally-anything-that-makes-you-happy
#bilpcoin we must stop the #buildawhalescam #buildawhalefarm #themarkymarkscam #themarkymarkfarm on #hive #thedarksideofhive
๐๐๐พ
๐๐
That's awesome! Good Job!!!
Fabulous!
Kudos to the brain behind this, great job.๐๐ช๐ฅ
it is a great work, i like see tools made it by others devs in hive :D
Wow this is lovely
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! ๐โจ
๐ 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