Write on Hive, Read Everywhere!

Hello, dear Hive community! ꙮ

Even though it's only been about a week since

, 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

💥

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