puzzmo-stats Demonstration

This page demonstrates usage of the puzzmo-stats web component. It loads Puzzmo streak stats from ATProto records.

For this to work, the Puzzmo account must be connected to the provided ATProto or Bluesky handle.

HTML

<figure>
  <puzzmo-stats handle="cbennell.com"></puzzmo-stats>
</figure>

JavaScript

<script type="module" src="puzzmo-stats.dev.js"></script>

CSS

:root {
  --font-display: Optima, "Noto Sans", sans-serif;
  color-scheme: light dark;
}

figure {
  width: 26rem;
  border: thin solid light-dark(#333, #cfcfcf);
  border-radius: 10px;
  padding: 1rem;
}

puzzmo-stats {
  --puzzmo-stats-font-display: var(--font-display);
  --puzzmo-stats-icon-foreground: #141620;
  --puzzmo-stats-icon-background: #ececec;
}

@media (prefers-color-scheme: dark) {
  puzzmo-stats {
    --puzzmo-stats-icon-foreground: #ececec;
    --puzzmo-stats-icon-background: #141620;
  }
}