Honeycomb
npmGitHub

HivePostCard

Display Hive posts with title, author, content preview, stats, and metadata.

Display-only component

Fetches post data automatically via condenser_api. Displays post content, author, stats, and metadata. Requires HiveProvider wrapper.

Usage

<template>
  <HivePostCard
    author="barddev"
    permlink="my-first-post"
  />
</template>

<script setup lang="ts">
import { HivePostCard } from "@hiveio/honeycomb-vue";
</script>

Preview

Card (default)

@barddev

@barddev

2h ago

Building Components for Hive

Learn how to create reusable React components that interact with the Hive blockchain...

42 12
$8.45

Compact

Quick Update on Development Progress

@barddev · 5h ago

56 8$3.21

Grid

Honeycomb Components Tutorial

@barddev · 1d ago

89 24
$15.30

Props

PropTypeDefault
authorstringrequired
permlinkstringrequired
variant"card" | "compact" | "grid""card"
hide("author" | "thumbnail" | "payout" | "votes" | "comments" | "time")[][]
linkTargetstring"https://blog.openhive.network"
classstring-

Examples

Variants

<template>
  <!-- Card (default) -->
  <HivePostCard author="barddev" permlink="post" variant="card" />

  <!-- Compact -->
  <HivePostCard author="barddev" permlink="post" variant="compact" />

  <!-- Grid -->
  <HivePostCard author="barddev" permlink="post" variant="grid" />
</template>

Hide elements

<template>
  <!-- Hide specific elements -->
  <HivePostCard
    author="barddev"
    permlink="my-post"
    :hide="['author', 'thumbnail', 'payout']"
  />

  <!-- Available options: "author" | "thumbnail" | "payout" | "votes" | "comments" | "time" -->
</template>

Custom styling

<template>
  <!-- Custom styling with class -->
  <HivePostCard
    author="barddev"
    permlink="my-post"
    class="max-w-xl shadow-lg rounded-2xl"
  />
</template>

Render post list

<template>
  <div class="space-y-4">
    <HivePostCard
      v-for="post in posts"
      :key="`${post.author}/${post.permlink}`"
      :author="post.author"
      :permlink="post.permlink"
    />
  </div>
</template>

<script setup lang="ts">
import { HivePostCard } from "@hiveio/honeycomb-vue";

defineProps<{
  posts: Array<{ author: string; permlink: string }>;
}>();
</script>
ManabarPost List