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 and
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! 🏃
We began by asking simple questions 🤔 about which components are essential and how they should be used, and we got immediate answers!
<hive-witness account="gtg"></hive-witness>
<hive-post permlink="@gtg/hello-world"></hive-post>
<hive-comments permlink="@gtg/67juuw-skyteam-airline-alliance-official-partner-of-hivefest"></hive-comments>
<hive-tag tag="photography" url-template="/photography/{permlink}"></hive-tag>
Thanks to , 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! ♻️
No worries! The components are fully responsive! ⚡
No need to adjust settings. They automatically adapt to the viewport! 😊
I created a quick start guide 🧠 in my repository.
TL;DR:
<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>
<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>
<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>
Introducing the ✨ dark theme ✨:
Just set the theme="dark" attribute on any component and you're good to go! 💪
Customize your communities and websites with just a few lines of CSS! 🤩
hive-comments {
--hive-on-surface: blue;
}
And here are the results: 👇
Great! I love your spirit! 👻
You can request a new component by creating an issue 💡 or suggest edits by opening a pull request 🛠️
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! 🤯
Just kidding 🤣 It's completely 🆓 🗽
Feel free to visit the repository to contribute or use the components via CDN, thanks to 🧙♂️
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