Docs — Integrations

Add comments to Astro

Zero framework lock-in. Astro ships no JS by default — our widget hydrates only the comment island.

01

Create a site

Create a site in Admin and verify the domain you will embed on.

02

Add client island

Use a client:load island or a plain <script type="module"> in your layout. No bundler config needed.

03

Mount container

Add <div id="comment"></div> in your .astro page or layout.

Astro example (src/layouts/Base.astro)

Astro islands: wrap the init script with client:load if you need reactive props. Otherwise a plain module script is enough.

src/layouts/Base.astro
---
 // Base.astro — works for both SSG & SSR
 ---
 <html>
   <head>
     <link rel="stylesheet" href="https://unpkg.com/@roudanio/awesome-comment@latest/dist/style.css" />
   </head>
   <body>
     <slot />
     <div id="comment" style="min-height:360px"></div>
     <script type="module">
       import { getInstance } from 'https://unpkg.com/@roudanio/awesome-auth@latest/dist/awesome-auth.js';
       import Comment from 'https://unpkg.com/@roudanio/awesome-comment@latest/dist/awesome-comment.js';
       const auth = getInstance({ googleId: "YOUR_GOOGLE_CLIENT_ID", root: "https://awesomecomment.org/api/site/auth" });
       Comment.init(document.querySelector('#comment'), {
         siteId: "YOUR_SITE_ID",
         apiUrl: "https://awesomecomment.org",
         awesomeAuth: auth,
         postId: location.pathname,
         locale: navigator.language,
       });
     </script>
   </body>
 </html>

Tips

  • • SSG: each static page gets its own thread via postId. SSR: same code works with on-demand rendering.
  • • Use client:load or client:visible to defer loading until the island is visible.
  • • Keep the widget out of view-transitions to avoid double init.

FAQ

Does it work with Starlight?

Yes. Starlight is Astro-based. Add the widget to your custom doc page or override the default layout.

Performance impact?

The widget is ~18kB gzipped and only hydrates the comment island. Your Astro score stays 100.

View ExamplesSee all comparisons