Bear age widget

A card-style widget that shows how many years, months, and days you've been active on Bear, along with a link to your first post.¹

Preview

How to use

Copy the markup below and paste it where you want the widget to appear.
Copy the script and add it to your footer (Dashboard → Settings → Header and footer directives), or directly on the page where you have the widget markup.
Update the script settings with the date of your first post, and the link to it.
Copy the styles and add them to your theme.

Markup

<div class="bear-age-widget">
  <span class="bear-age-label">My Bear age</span>
  <p id="bear-age-sentence">Calculating...</p>
</div>

Script

<script>
(function () {
  /* =========================
     Settings (edit only this)
     ========================= */
  // Date of your first post (YYYY-MM-DD)
  const startDate = new Date("2023-02-16");
  // Link to first post
  const firstPostUrl = "https://robertbirming.com/its-alive/";
  /* =========================
     Calculation (don't pet the bear)
     ========================= */
  const now = new Date();
  let years = now.getFullYear() - startDate.getFullYear();
  let months = now.getMonth() - startDate.getMonth();
  let days = now.getDate() - startDate.getDate();
  if (days < 0) {
    months--;
    const lastMonth = new Date(now.getFullYear(), now.getMonth(), 0);
    days += lastMonth.getDate();
  }
  if (months < 0) {
    years--;
    months += 12;
  }
  const segments = [];
  if (years > 0) {
    segments.push(years + (years === 1 ? " year" : " years"));
  }
  if (months > 0) {
    segments.push(months + (months === 1 ? " month" : " months"));
  }
  // Always show days if nothing else exists
  if (days > 0 || segments.length === 0) {
    segments.push(days + (days === 1 ? " day" : " days"));
  }
  let timeString = "";
  if (segments.length === 1) {
    timeString = segments[0];
  } else if (segments.length === 2) {
    timeString = segments.join(" and ");
  } else {
    timeString = segments[0] + ", " + segments[1] + ", and " + segments[2];
  }
  const container = document.getElementById("bear-age-sentence");
  if (!container) return;
  container.textContent = "It's been " + timeString + " since ";
  const link = document.createElement("a");
  link.href = firstPostUrl;
  link.textContent = "my first post";
  container.appendChild(link);
  container.appendChild(document.createTextNode("."));
})();
</script>

Styles

/* Bear age widget | robertbirming.com */
.bear-age-widget {
  position: relative;
  margin-block: var(--space-block);
  margin-inline: auto;
  padding-block: 1rem;
  padding-inline: 1.2rem;
  max-width: fit-content;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bear-age-widget::after {
  content: "ʕ•ᴥ•ʔ";
  position: absolute;
  inset-block-start: 0.8em;
  inset-inline-end: 1em;
  font-size: 0.85em;
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .bear-age-widget:hover::after {
    opacity: 0.5;
  }
}

.bear-age-label {
  display: block;
  margin-block-end: 0.75em;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

#bear-age-sentence {
  margin: 0;
  font-size: var(--font-small);
  line-height: 1.5;
  color: var(--text);
}

Want more? Check out the Bear library.

Happy blogging, and happy Bear birthday when it comes.

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