Robert Birming

Popfeed movie log

Popfeed is a social platform for tracking films, shows, books, and more, built on the AT Protocol. If you use it to log your watched movies, this add-on pulls your latest reviews straight from your feed and displays them on your Bear blog.1

Preview

See it in action on my movie log page.

How to use

Markup

Replace your-did-here with your ATProto DID (find it at internect.info or in your Popfeed profile URL).

<div class="pf-movies" data-did="your-did-here" hidden></div>

Add the script and styles where you want them to appear on your page.

Styles

/* Popfeed movies */
.pf-movies { margin: var(--space-block) 0; }

.pf-movie-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: var(--space-block);
}

.pf-movie-select {
  position: relative;
  flex: 0 1 10rem;
  min-width: 8.5rem;
}

.pf-movie-select select {
  width: 100%;
  padding-block: 0.55em;
  padding-inline: 0.7em 2.2em;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  appearance: none;
}

.pf-movie-select select:focus-visible {
  border-color: color-mix(in srgb, var(--link) 45%, var(--bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent);
}

.pf-movie-select::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 0.9em;
  width: 0.5em;
  height: 0.5em;
  border-inline-end: 2px solid var(--text);
  border-block-end: 2px solid var(--text);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
  opacity: 0.9;
}

.pf-movies input[type="search"] {
  flex: 1 1 auto;
  min-width: 12rem;
  padding-block: 0.55em;
  padding-inline: 0.7em;
  font: inherit;
  letter-spacing: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  appearance: none;
}

.pf-movies input[type="search"]::placeholder { color: var(--muted); }

.pf-movies input[type="search"]:focus-visible {
  border-color: color-mix(in srgb, var(--link) 45%, var(--bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--link) 18%, transparent);
}

.pf-movie-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.pf-movie-item img {
  width: 70px;
  flex-shrink: 0;
  margin-block-start: 0.2rem;
}

.pf-movie-info {
  flex: 1;
  min-width: 0;
  font-size: var(--font-small);
}

.pf-movie-title {
  display: inline-block;
  margin: 0 0 0.1rem;
  font-size: var(--font-size);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
  line-height: 1.3;
  max-width: 100%;
}

.pf-movie-title:visited { color: var(--text); }

.pf-movie-title:hover {
  text-decoration: none !important;
  background-size: 0 !important;
}

.pf-movie-year {
  font-size: var(--font-small);
  font-weight: normal;
  color: var(--muted);
}

.pf-movie-muted {
  margin: 0 0 0.1rem;
  color: var(--muted);
}

.pf-movie-stars {
  margin: 0 0 0.1rem;
  color: var(--accent);
}

.pf-movie-review {
  margin: 0.6rem 0 0;
  font-size: var(--font-small);
}

.pf-movie-empty {
  font-size: var(--font-small);
  color: var(--muted);
}

Want more? Check out all available Bearming add-ons.

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