Robert Birming

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.1 2

Preview

My Bear age

Calculating...

How to use

  1. Copy the markup below and paste it where you want the widget to appear.
  2. 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.
  3. Update the script settings with the date of your first post, the link to it, and optionally the title.
  4. 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/";
  // Title of your first post (optional — leave empty to show "my first post")
  const firstPostTitle = "";

  /* =========================
     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;

  const linkText = firstPostTitle ? "\u201C" + firstPostTitle + "\u201D" : "my first post";

  container.textContent = "It\u2019s been " + timeString + " since ";

  try {
    new URL(firstPostUrl);
    const link = document.createElement("a");
    link.href = firstPostUrl;
    link.textContent = linkText;
    container.appendChild(link);
  } catch {
    container.appendChild(document.createTextNode(linkText));
  }

  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);
}

Happy blogging, and happy Bear birthday when it comes.

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

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make it work with your setup.↩

  2. Requires JavaScript, available on Bear Blog's premium plan.↩