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
