Robert Birming

Hardcover widget

Goutham Veeramachaneni has made a handy Hardcover book embed that lets you show your latest book reviews on your blog. This add-on styles it to feel right at home on Bear.1

Preview

How to use

  1. Copy the snippet below and add it where you want the widget to appear.
  2. Replace your-username with your Hardcover username.
  3. Copy the styles and add them to your theme.

Snippet

<script src="https://hardcoverembed.gouthamve.dev/static/review-widget.js"></script>
<div data-hardcover-review-widget
     data-username="your-username"
     data-api-url="https://hardcoverembed.gouthamve.dev"
     data-max-width="34rem"
     data-show-powered-by="false">
</div>

Styles

/* Hardcover widget | robertbirming.com */
.hardcover-review-widget {
  --hrw-max-width: 34rem;
  --hrw-padding: 0;
  margin-inline: auto;
  inline-size: 100%;
}

.hardcover-review-widget .hrw-reviews-list {
  gap: var(--space-block);
}

.hardcover-review-widget .hrw-review-item {
  padding: 1rem !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (hover: hover) {
  .hardcover-review-widget .hrw-review-item:hover {
    border-color: var(--border);
    box-shadow: none;
  }
}

.hardcover-review-widget .hrw-book-cover {
  inline-size: 4.5rem;
  block-size: auto;
  aspect-ratio: 2 / 3;
  box-shadow: none;
  margin-inline-end: 1rem !important;
  margin-block-end: 0.5rem !important;
  float: inline-start;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.hardcover-review-widget .hrw-book-cover img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  margin-block: 0;
  border-radius: 0;
}

.hardcover-review-widget .hrw-book-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

@media (hover: hover) {
  .hardcover-review-widget .hrw-book-title:hover {
    color: var(--link) !important;
  }
}

.hardcover-review-widget .hrw-authors {
  font-size: 0.85rem;
  color: var(--muted);
}

.hardcover-review-widget .hrw-author-link {
  color: inherit;
}

@media (hover: hover) {
  .hardcover-review-widget .hrw-author-link:hover {
    color: var(--link) !important;
  }
}

.hardcover-review-widget .hrw-review-meta {
  font-size: 0.85rem;
  color: var(--muted);
}

.hardcover-review-widget .hrw-star {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  fill: var(--link);
}

.hardcover-review-widget .hrw-star.empty {
  fill: var(--border);
}

.hardcover-review-widget .hrw-review-text {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  margin-block-start: 0.5em !important;
}

.hardcover-review-widget .hrw-spoiler-warning {
  background: var(--bg);
  color: var(--muted);
  border-radius: var(--radius);
}

.hardcover-review-widget .hrw-read-more {
  color: var(--link);
  font-size: 0.85rem;
}

.hardcover-review-widget .hrw-powered-by {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: end;
  margin-block-start: 0;
}

.hardcover-review-widget .hrw-loading,
.hardcover-review-widget .hrw-empty-state {
  color: var(--muted);
}

.hardcover-review-widget .hrw-error {
  color: var(--text);
  background: var(--bg);
  border-radius: var(--radius);
}

Want more? Check out the Bear library.

Happy blogging, and happy reading.

  1. This add-on is built for Bearming. Using a different theme? Add the Bearming tokens to make it work with your setup.↩