What’s your Bear age?

25 Feb, 2026

My Bear blog recently turned three years old.

Back then, it had another domain name, and I’m still in the process of restoring things, but the original “robert” bearblog.dev subdomain has always stayed the same.

With the ongoing Bearblog Creation Festival and my recent Bear birthday in mind, I thought it would be fun to make a widget for displaying your “Bear age”. And to be honest, it’s also a small reminder and motivator for me to stick around.

So I came up with a simple 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. This is what it looks like:

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.

Happy blogging, and happy Bear birthday when it comes.

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 */
.bear-age-widget {
  position: relative;
  margin-block: var(--space-block);
  margin-inline: auto;
  padding: 1em 1.2em;
  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.