Bluesky Hugo Comments

bluesky-comments.html

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bluesky-comments.css">

<style>
  /* Override default font sizes */
  .bsky-comments-container {
    font-size: 16px !important;
  }
  ._commentContainer_1pvtk_72 {
    font-size: 16px !important;
  }
  /* Target both possible avatar classes */
  ._avatar_1pvtk_89,
  ._avatar_1pvtk_89 img,
  ._avatar_1pvtk_89 > img,
  [class*="_avatar_"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  .bsky-comment-text {
    font-size: 1.1em !important;
  }
  .bsky-comment-author {
    font-size: 1.1em !important;
  }
  .bsky-comment-date {
    font-size: 0.9em !important;
  }

  /* Align interaction icons with their counts */
  [class*="_interactions_"] {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  [class*="_interactions_"] button {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    padding: 4px !important;
    border: none !important;
  }

  [class*="_interactions_"] svg {
    margin: 0 !important;
    vertical-align: middle !important;
  }

  [class*="_interactions_"] span {
    line-height: 1 !important;
    vertical-align: middle !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  [class*="_interactions_"] .text-xs,
  [class*="_interactions_"] p.text-xs,
  p.text-xs {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    border-bottom: none !important;
  }
</style>

<div id="bluesky-comments"></div>

<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@18",
    "react-dom/client": "https://esm.sh/react-dom@18/client"
  }
}
</script>

<script type="module">
  import { createElement } from 'react';
  import { createRoot } from 'react-dom/client';
  import { BlueskyComments } from 'https://unpkg.com/[email protected]/dist/bluesky-comments.es.js';

  const container = document.getElementById('bluesky-comments');
  const root = createRoot(container);
  root.render(
    createElement(BlueskyComments, {
      author: "micahhausler.com",
      uri: "{{ .Params.bluesky_post_uri }}",
      commentFilters: []
    })
  );
</script>