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 Hive account@crimsonclad and Hive account@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 Hive account@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:

<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>

🧛🏻‍♀️ 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! ⬇️

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 Hive account@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