fastcomments-astro 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 FastComments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+# fastcomments-astro
+
+A fast, full-featured live commenting widget for [Astro](https://astro.build), powered by [FastComments](https://fastcomments.com).
+
+## Install
+
+```bash
+npm install fastcomments-astro
+```
+
+## Quick Start
+
+```astro
+---
+import { FastComments } from 'fastcomments-astro';
+---
+
+<FastComments tenantId="demo" />
+```
+
+Replace `"demo"` with your FastComments tenant ID.
+
+## Components
+
+| Component | Description |
+| --- | --- |
+| `FastComments` | Commenting widget with replies, voting, and more |
+| `FastCommentsCommentCount` | Displays comment count for a page |
+| `FastCommentsImageChat` | Image annotation comments |
+| `FastCommentsLiveChat` | Live chat widget |
+| `FastCommentsCollabChat` | Collaborative inline commenting |
+| `FastCommentsReviewsSummary` | Star-rating reviews summary |
+| `FastCommentsUserActivityFeed` | User activity feed |
+
+All components are exported from the package root:
+
+```astro
+---
+import { FastComments, FastCommentsLiveChat } from 'fastcomments-astro';
+---
+```
+
+## Example Project
+
+A working demo is included in the `example/` directory:
+
+```bash
+cd example && npm install && npm run dev
+```
+
+## Links
+
+- [FastComments Documentation](https://docs.fastcomments.com)
+- [Customization & Configuration](https://docs.fastcomments.com/guide-customizations-and-configuration.html)
+- [Astro Documentation](https://docs.astro.build)
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "fastcomments-astro",
+  "version": "1.0.0",
+  "description": "Astro components for FastComments",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "astro",
+    "astro-component",
+    "fastcomments",
+    "comments",
+    "commenting"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/FastComments/fastcomments-astro"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "astro": "^3.0.0 || ^4.0.0 || ^5.0.0"
+  },
+  "dependencies": {
+    "fastcomments-typescript": "^3.0.12"
+  }
+}

package/src/FastComments.astro

@@ -0,0 +1,43 @@
+---
+import type { FastCommentsCommentWidgetConfig } from 'fastcomments-typescript';
+
+export interface Props extends FastCommentsCommentWidgetConfig {}
+
+const config: Record<string, unknown> = {};
+for (const [key, value] of Object.entries(Astro.props)) {
+    if (typeof value !== 'function') {
+        config[key] = value;
+    }
+}
+const containerId = `fc-${Math.random().toString(36).slice(2, 9)}`;
+const cdnBase = config.region === 'eu' ? 'https://cdn-eu.fastcomments.com' : 'https://cdn.fastcomments.com';
+const scriptSrc = `${cdnBase}/js/embed-v2.min.js`;
+---
+
+<div id={containerId}></div>
+
+<script define:vars={{ containerId, config, scriptSrc }}>
+(function() {
+    var el = document.getElementById(containerId);
+
+    function init() {
+        if (window.FastCommentsUI) {
+            var instance = window.FastCommentsUI(el, config);
+            document.addEventListener('astro:before-swap', function() {
+                instance.destroy();
+            }, { once: true });
+        } else {
+            setTimeout(init, 50);
+        }
+    }
+
+    if (!document.querySelector('script[data-fc-embed]')) {
+        var script = document.createElement('script');
+        script.src = scriptSrc;
+        script.setAttribute('data-fc-embed', '');
+        document.head.appendChild(script);
+    }
+
+    init();
+})();
+</script>

package/src/FastCommentsCollabChat.astro

@@ -0,0 +1,48 @@
+---
+import type { FastCommentsCollabChatWidgetConfig } from 'fastcomments-typescript';
+
+export interface Props extends FastCommentsCollabChatWidgetConfig {
+    /** CSS selector for the target element to enable collab chat on (e.g. "#my-content"). */
+    target: string;
+}
+
+const { target, ...rest } = Astro.props;
+const config: Record<string, unknown> = {};
+for (const [key, value] of Object.entries(rest)) {
+    if (typeof value !== 'function') {
+        config[key] = value;
+    }
+}
+const containerId = `fc-collab-chat-${Math.random().toString(36).slice(2, 9)}`;
+const cdnBase = config.region === 'eu' ? 'https://cdn-eu.fastcomments.com' : 'https://cdn.fastcomments.com';
+const scriptSrc = `${cdnBase}/js/embed-collab-chat.min.js`;
+---
+
+<div id={containerId}></div>
+
+<script define:vars={{ containerId, config, scriptSrc, target }}>
+(function() {
+    function init() {
+        if (window.FastCommentsCollabChat) {
+            var targetEl = document.querySelector(target);
+            if (targetEl) {
+                var instance = window.FastCommentsCollabChat(targetEl, config);
+                document.addEventListener('astro:before-swap', function() {
+                    instance.destroy();
+                }, { once: true });
+            }
+        } else {
+            setTimeout(init, 50);
+        }
+    }
+
+    if (!document.querySelector('script[data-fc-collab-chat]')) {
+        var script = document.createElement('script');
+        script.src = scriptSrc;
+        script.setAttribute('data-fc-collab-chat', '');
+        document.head.appendChild(script);
+    }
+
+    init();
+})();
+</script>

package/src/FastCommentsCommentCount.astro

@@ -0,0 +1,43 @@
+---
+import type { FastCommentsCommentCountConfig } from 'fastcomments-typescript';
+
+export interface Props extends FastCommentsCommentCountConfig {}
+
+const config: Record<string, unknown> = {};
+for (const [key, value] of Object.entries(Astro.props)) {
+    if (typeof value !== 'function') {
+        config[key] = value;
+    }
+}
+const containerId = `fc-count-${Math.random().toString(36).slice(2, 9)}`;
+const cdnBase = config.region === 'eu' ? 'https://cdn-eu.fastcomments.com' : 'https://cdn.fastcomments.com';
+const scriptSrc = `${cdnBase}/js/widget-comment-count.min.js`;
+---
+
+<span id={containerId}></span>
+
+<script define:vars={{ containerId, config, scriptSrc }}>
+(function() {
+    var el = document.getElementById(containerId);
+
+    function init() {
+        if (window.FastCommentsCommentCount) {
+            var instance = window.FastCommentsCommentCount(el, config);
+            document.addEventListener('astro:before-swap', function() {
+                instance.destroy();
+            }, { once: true });
+        } else {
+            setTimeout(init, 50);
+        }
+    }
+
+    if (!document.querySelector('script[data-fc-count]')) {
+        var script = document.createElement('script');
+        script.src = scriptSrc;
+        script.setAttribute('data-fc-count', '');
+        document.head.appendChild(script);
+    }
+
+    init();
+})();
+</script>

package/src/FastCommentsImageChat.astro

@@ -0,0 +1,48 @@
+---
+import type { FastCommentsImageChatWidgetConfig } from 'fastcomments-typescript';
+
+export interface Props extends FastCommentsImageChatWidgetConfig {
+    /** CSS selector for the target image element (e.g. "#my-image"). */
+    target: string;
+}
+
+const { target, ...rest } = Astro.props;
+const config: Record<string, unknown> = {};
+for (const [key, value] of Object.entries(rest)) {
+    if (typeof value !== 'function') {
+        config[key] = value;
+    }
+}
+const containerId = `fc-image-chat-${Math.random().toString(36).slice(2, 9)}`;
+const cdnBase = config.region === 'eu' ? 'https://cdn-eu.fastcomments.com' : 'https://cdn.fastcomments.com';
+const scriptSrc = `${cdnBase}/js/embed-image-chat.min.js`;
+---
+
+<div id={containerId}></div>
+
+<script define:vars={{ containerId, config, scriptSrc, target }}>
+(function() {
+    function init() {
+        if (window.FastCommentsImageChat) {
+            var targetEl = document.querySelector(target);
+            if (targetEl) {
+                var instance = window.FastCommentsImageChat(targetEl, config);
+                document.addEventListener('astro:before-swap', function() {
+                    instance.destroy();
+                }, { once: true });
+            }
+        } else {
+            setTimeout(init, 50);
+        }
+    }
+
+    if (!document.querySelector('script[data-fc-image-chat]')) {
+        var script = document.createElement('script');
+        script.src = scriptSrc;
+        script.setAttribute('data-fc-image-chat', '');
+        document.head.appendChild(script);
+    }
+
+    init();
+})();
+</script>

package/src/FastCommentsLiveChat.astro

@@ -0,0 +1,43 @@
+---
+import type { FastCommentsLiveChatWidgetConfig } from 'fastcomments-typescript';
+
+export interface Props extends FastCommentsLiveChatWidgetConfig {}
+
+const config: Record<string, unknown> = {};
+for (const [key, value] of Object.entries(Astro.props)) {
+    if (typeof value !== 'function') {
+        config[key] = value;
+    }
+}
+const containerId = `fc-live-chat-${Math.random().toString(36).slice(2, 9)}`;
+const cdnBase = config.region === 'eu' ? 'https://cdn-eu.fastcomments.com' : 'https://cdn.fastcomments.com';
+const scriptSrc = `${cdnBase}/js/embed-live-chat.min.js`;
+---
+
+<div id={containerId}></div>
+
+<script define:vars={{ containerId, config, scriptSrc }}>
+(function() {
+    var el = document.getElementById(containerId);
+
+    function init() {
+        if (window.FastCommentsLiveChat) {
+            var instance = window.FastCommentsLiveChat(el, config);
+            document.addEventListener('astro:before-swap', function() {
+                instance.destroy();
+            }, { once: true });
+        } else {
+            setTimeout(init, 50);
+        }
+    }
+
+    if (!document.querySelector('script[data-fc-live-chat]')) {
+        var script = document.createElement('script');
+        script.src = scriptSrc;
+        script.setAttribute('data-fc-live-chat', '');
+        document.head.appendChild(script);
+    }
+
+    init();
+})();
+</script>

package/src/FastCommentsReviewsSummary.astro

@@ -0,0 +1,48 @@
+---
+export interface Props {
+    /** Id that represents you as a customer. */
+    tenantId: string;
+    /** Id that represents the page, if you don't want to tie comments to the page url. */
+    urlId?: string;
+    /** The region your account is in. EU customers should set to 'eu'. */
+    region?: 'eu';
+}
+
+const config = Astro.props;
+const containerId = `fc-rs-${Math.random().toString(36).slice(2, 9)}`;
+const cdnBase = config.region === 'eu' ? 'https://cdn-eu.fastcomments.com' : 'https://cdn.fastcomments.com';
+const scriptSrc = `${cdnBase}/js/embed-reviews-summary.min.js`;
+---
+
+<div id={containerId}></div>
+
+<script define:vars={{ containerId, config, scriptSrc }}>
+(function() {
+    var el = document.getElementById(containerId);
+
+    function init() {
+        if (window.FastCommentsReviewsSummaryWidget) {
+            window.FastCommentsReviewsSummaryWidget(el, config, function(error, instance) {
+                if (error) {
+                    console.error('FastComments Reviews Summary Load Failure', error);
+                } else {
+                    document.addEventListener('astro:before-swap', function() {
+                        instance.destroy();
+                    }, { once: true });
+                }
+            });
+        } else {
+            setTimeout(init, 50);
+        }
+    }
+
+    if (!document.querySelector('script[data-fc-reviews-summary]')) {
+        var script = document.createElement('script');
+        script.src = scriptSrc;
+        script.setAttribute('data-fc-reviews-summary', '');
+        document.head.appendChild(script);
+    }
+
+    init();
+})();
+</script>

package/src/FastCommentsUserActivityFeed.astro

@@ -0,0 +1,51 @@
+---
+import type { FastCommentsCommentWidgetConfig } from 'fastcomments-typescript';
+
+export interface Props extends FastCommentsCommentWidgetConfig {
+    /** With SSO: tenantId + ':' + userId. With Simple SSO: tenantId + ':' + userEmail. */
+    userId: string;
+}
+
+const config: Record<string, unknown> = {};
+for (const [key, value] of Object.entries(Astro.props)) {
+    if (typeof value !== 'function') {
+        config[key] = value;
+    }
+}
+const containerId = `fc-activity-${Math.random().toString(36).slice(2, 9)}`;
+const cdnBase = config.region === 'eu' ? 'https://cdn-eu.fastcomments.com' : 'https://cdn.fastcomments.com';
+const scriptSrc = `${cdnBase}/js/embed-user-activity.min.js`;
+---
+
+<div id={containerId}></div>
+
+<script define:vars={{ containerId, config, scriptSrc }}>
+(function() {
+    var el = document.getElementById(containerId);
+
+    function init() {
+        if (window.FastCommentsUserActivity) {
+            window.FastCommentsUserActivity(el, config, function(error, instance) {
+                if (error) {
+                    console.error('FastComments User Activity Load Failure', error);
+                } else {
+                    document.addEventListener('astro:before-swap', function() {
+                        instance.destroy();
+                    }, { once: true });
+                }
+            });
+        } else {
+            setTimeout(init, 50);
+        }
+    }
+
+    if (!document.querySelector('script[data-fc-user-activity]')) {
+        var script = document.createElement('script');
+        script.src = scriptSrc;
+        script.setAttribute('data-fc-user-activity', '');
+        document.head.appendChild(script);
+    }
+
+    init();
+})();
+</script>

package/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.astro' {
+    const component: (_props: Record<string, any>) => any;
+    export default component;
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export { default as FastComments } from './FastComments.astro';
+export { default as FastCommentsCommentCount } from './FastCommentsCommentCount.astro';
+export { default as FastCommentsCollabChat } from './FastCommentsCollabChat.astro';
+export { default as FastCommentsImageChat } from './FastCommentsImageChat.astro';
+export { default as FastCommentsLiveChat } from './FastCommentsLiveChat.astro';
+export { default as FastCommentsReviewsSummary } from './FastCommentsReviewsSummary.astro';
+export { default as FastCommentsUserActivityFeed } from './FastCommentsUserActivityFeed.astro';
+export type * from 'fastcomments-typescript';