` anywhere on your blog post page where you want the **Likes, Views, and Comments Section** to render:
```html
```
*That's it!* The script will automatically:
1. Verify website authorization with the developer backend.
2. Mount the floating **Sign In / Account Avatar** in the top right.
3. Fetch and display the post's **Views**, **Likes count**, and **Comments list**.
4. Intercept submissions to run the **Multi-Layer AI Profanity Scanner** with real-time UI status.
5. Auto-inject the discreet **Footer Watermark**.
---
## ๐ค Instructions for AI Coding Agents
If you are an **AI Coding Assistant** integrating this system into a repository, execute the following steps in sequence:
### Phase 1: Environment & Website Configuration
1. Inspect the host project's routing model (e.g. Next.js App Router, Pages Router, Vite React, Astro, or Static HTML).
2. Determine how unique post slugs are derived (e.g., `params.slug`, `window.location.pathname`, or frontmatter `slug`).
3. Set the global SaaS Website ID constant:
```javascript
const PARTIAL_EXISTENCE_WEBSITE_ID = "YOUR_REGISTERED_WEBSITE_ID";
const PARTIAL_EXISTENCE_API_URL = "https://partial-existence.pages.dev";
```
---
### Phase 2: React / Next.js Component Integration Pattern
For React, Next.js (App / Pages router), or Astro projects, you can use the direct Component pattern:
#### 1. API Client Helper (`lib/partialExistence.js`)
```javascript
const API_URL = "https://partial-existence.pages.dev";
const WEBSITE_ID = "YOUR_REGISTERED_WEBSITE_ID";
export function getDeviceId() {
let id = localStorage.getItem("pe_device_id");
if (!id) {
id = "dev_" + Math.random().toString(36).substring(2, 11);
localStorage.setItem("pe_device_id", id);
}
return id;
}
export function getAuthToken() {
return localStorage.getItem("pe_saas_token") || null;
}
export async function fetchWithAuth(endpoint, options = {}) {
const token = getAuthToken();
const headers = {
"Content-Type": "application/json",
"X-Website-Id": WEBSITE_ID,
"X-Device-Id": getDeviceId(),
...(token ? { "Authorization": `Bearer ${token}` } : {}),
...options.headers,
};
return fetch(`${API_URL}${endpoint}`, { ...options, headers });
}
```
#### 2. Interactions Component (`components/BlogInteractions.jsx`)
```jsx
import React, { useState, useEffect } from 'react';
import { fetchWithAuth, getDeviceId } from '../lib/partialExistence';
export default function BlogInteractions({ slug }) {
const [likes, setLikes] = useState(0);
const [liked, setLiked] = useState(false);
const [views, setViews] = useState(0);
const [comments, setComments] = useState([]);
const [commentText, setCommentText] = useState('');
const [loading, setLoading] = useState(false);
const [scanning, setScanning] = useState(false);
const [errorMsg, setErrorMsg] = useState(null);
// Load Likes, Views, Comments
useEffect(() => {
async function loadData() {
try {
// Record pageview
fetchWithAuth('/api/pageviews', {
method: 'POST',
body: JSON.stringify({ slug, deviceId: getDeviceId() })
}).then(r => r.json()).then(d => d && setViews(d.views || 0));
// Get comments & likes
const [cRes, lRes] = await Promise.all([
fetchWithAuth(`/api/comments?slug=${encodeURIComponent(slug)}`),
fetchWithAuth(`/api/likes?slug=${encodeURIComponent(slug)}`)
]);
const cData = await cRes.json();
const lData = await lRes.json();
if (cData?.comments) setComments(cData.comments);
if (lData?.likes !== undefined) setLikes(lData.likes);
} catch (err) {
console.error('Failed to load blog interactions:', err);
}
}
if (slug) loadData();
}, [slug]);
// Handle Like Toggle
async function toggleLike() {
const nextLiked = !liked;
setLiked(nextLiked);
setLikes(prev => nextLiked ? prev + 1 : Math.max(0, prev - 1));
await fetchWithAuth('/api/likes', {
method: 'POST',
body: JSON.stringify({ slug, action: nextLiked ? 'like' : 'unlike', deviceId: getDeviceId() })
});
}
// Handle Comment Submission with AI Profanity Check
async function submitComment(e) {
e.preventDefault();
if (!commentText.trim()) return;
setLoading(true);
setScanning(true);
setErrorMsg(null);
try {
const res = await fetchWithAuth('/api/comments', {
method: 'POST',
body: JSON.stringify({ slug, text: commentText })
});
const data = await res.json();
if (!res.ok || data.success === false) {
setErrorMsg(data.warning || data.message || data.error || 'Comment rejected by moderation filter.');
} else if (data.comment) {
setComments(prev => [data.comment, ...prev]);
setCommentText('');
}
} catch (err) {
setErrorMsg(err.message || 'Submission error');
} finally {
setLoading(false);
setScanning(false);
}
}
return (
{/* Action Buttons: Likes, Comments, Views */}
๐๏ธ {views} Views
๐ฌ {comments.length} Comments
{/* AI Profanity Scanning Notification */}
{scanning && (
๐ก๏ธ AI Profanity Filter: Analyzing comment safety and content policies...
)}
{errorMsg && (
โ ๏ธ {errorMsg}
)}
{/* Comment Form */}