@ziteh/yangchun-comment-client 0.1.0 → 0.2.0-alpha.1

package/dist/index.js

@@ -1,23 +0,0 @@
-import { YangchunCommentElement } from './element';
-export function initYangchunComment(elementId = 'ycc-app', options = {}) {
-    const host = document.getElementById(elementId);
-    if (!host)
-        throw new Error(`Container #${elementId} not found`);
-    const el = document.createElement('yangchun-comment');
-    if (options.post)
-        el.post = options.post;
-    if (options.apiUrl)
-        el.apiUrl = options.apiUrl;
-    if (options.authorName)
-        el.authorName = options.authorName;
-    if (options.language)
-        el.language = options.language;
-    host.innerHTML = '';
-    host.appendChild(el);
-    return el;
-}
-// Define custom element if not already defined (avoid double-define in HMR/dev)
-if (!customElements.get('yangchun-comment')) {
-    customElements.define('yangchun-comment', YangchunCommentElement);
-}
-export default initYangchunComment;

package/dist/types.d.ts

@@ -1,3 +0,0 @@
-import type { Comment } from '@ziteh/yangchun-comment-shared';
-export type CommentMap = Record<string, Comment>;
-export type TabType = 'write' | 'preview';

package/dist/utils/apiService.d.ts

@@ -1,15 +0,0 @@
-import type { Comment } from '@ziteh/yangchun-comment-shared';
-export declare const createApiService: (apiUrl: string) => {
-    getComments: (post: string) => Promise<Comment[]>;
-    addComment: (post: string, pseudonym: string, nameHash: string, msg: string, replyTo: string | null) => Promise<string | null>;
-    updateComment: (post: string, commentId: string, pseudonym: string, nameHash: string, msg: string) => Promise<boolean>;
-    deleteComment: (post: string, commentId: string) => Promise<boolean>;
-    saveAuthInfo: (id: string, timestamp: number, token: string) => void;
-    getAuthInfo: (commentId: string) => {
-        id: string;
-        timestamp: number;
-        token: string;
-    } | null;
-    removeAuthInfo: (commentId: string) => void;
-    canEditComment: (commentId: string) => boolean;
-};

package/dist/utils/apiService.js

@@ -1,118 +0,0 @@
-// TODO HttpOnly Cookie?
-export const createApiService = (apiUrl) => {
-    const commentAuthMap = new Map();
-    const getComments = async (post) => {
-        const url = new URL('/api/comments', apiUrl);
-        url.searchParams.append('post', post);
-        const res = await fetch(url);
-        return await res.json();
-    };
-    const addComment = async (post, pseudonym, nameHash, msg, replyTo) => {
-        try {
-            const url = new URL('/api/comments', apiUrl);
-            url.searchParams.append('post', post); // Get honeypot field if present
-            const websiteField = document.querySelector('input[name="website"]');
-            const website = websiteField ? websiteField.value : '';
-            const res = await fetch(url, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    pseudonym,
-                    nameHash,
-                    msg,
-                    replyTo,
-                    website, // Include honeypot field
-                }),
-            });
-            if (res.ok) {
-                const data = await res.json();
-                saveAuthInfo(data.id, data.timestamp, data.token);
-                return data.id;
-            }
-            return null;
-        }
-        catch {
-            return null;
-        }
-    };
-    const updateComment = async (post, commentId, pseudonym, nameHash, msg) => {
-        const authInfo = getAuthInfo(commentId);
-        if (!authInfo)
-            return false;
-        try {
-            const url = new URL('/api/comments', apiUrl);
-            url.searchParams.append('post', post);
-            const response = await fetch(url, {
-                method: 'PUT',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    id: authInfo.id,
-                    timestamp: authInfo.timestamp,
-                    token: authInfo.token,
-                    pseudonym,
-                    nameHash,
-                    msg,
-                }),
-            });
-            return response.ok;
-        }
-        catch {
-            return false;
-        }
-    };
-    const deleteComment = async (post, commentId) => {
-        const authInfo = getAuthInfo(commentId);
-        if (!authInfo)
-            return false;
-        try {
-            const url = new URL('/api/comments', apiUrl);
-            url.searchParams.append('post', post);
-            const response = await fetch(url, {
-                method: 'DELETE',
-                headers: {
-                    'Content-Type': 'application/json',
-                    'X-Comment-ID': authInfo.id,
-                    'X-Comment-Token': authInfo.token,
-                    'X-Comment-Timestamp': authInfo.timestamp.toString(),
-                },
-            });
-            if (response.ok) {
-                removeAuthInfo(commentId);
-                return true;
-            }
-            return false;
-        }
-        catch {
-            return false;
-        }
-    };
-    const saveAuthInfo = (id, timestamp, token) => {
-        commentAuthMap.set(id, { timestamp, token });
-        // optionally store in sessionStorage for persistence across page reloads
-        const encryptedInfo = btoa(JSON.stringify({ timestamp }));
-        sessionStorage.setItem(`comment_auth_${id}`, encryptedInfo);
-    };
-    const getAuthInfo = (commentId) => {
-        const authInfo = commentAuthMap.get(commentId);
-        if (authInfo)
-            return { id: commentId, ...authInfo };
-        return null;
-    };
-    const removeAuthInfo = (commentId) => {
-        commentAuthMap.delete(commentId);
-        sessionStorage.removeItem(`comment_auth_${commentId}`);
-    };
-    const canEditComment = (commentId) => {
-        return !!getAuthInfo(commentId);
-    };
-    return {
-        getComments,
-        addComment,
-        updateComment,
-        deleteComment,
-        saveAuthInfo,
-        getAuthInfo,
-        removeAuthInfo,
-        canEditComment,
-    };
-};

package/dist/utils/format.d.ts

@@ -1 +0,0 @@
-export declare function formatDate(timestamp: number): string;

package/dist/utils/format.js

@@ -1,14 +0,0 @@
-export function formatDate(timestamp) {
-    const date = new Date(timestamp);
-    const y = date.getFullYear();
-    const m = String(date.getMonth() + 1).padStart(2, '0');
-    const d = String(date.getDate()).padStart(2, '0');
-    let hour = date.getHours();
-    const minute = String(date.getMinutes()).padStart(2, '0');
-    const period = hour >= 12 ? 'PM' : 'AM';
-    hour = hour % 12;
-    if (hour === 0)
-        hour = 12;
-    const h = String(hour).padStart(2, '0');
-    return `${y}/${m}/${d} ${h}:${minute} ${period}`;
-}

package/dist/utils/i18n.d.ts

@@ -1,51 +0,0 @@
-export interface I18nStrings {
-    anonymous: string;
-    replyTo: string;
-    edit: string;
-    delete: string;
-    reply: string;
-    replyingTo: string;
-    cancelReply: string;
-    editing: string;
-    cancelEdit: string;
-    updateComment: string;
-    submitComment: string;
-    namePlaceholder: string;
-    messagePlaceholder: string;
-    loading: string;
-    confirmDelete: string;
-    editFailed: string;
-    submitFailed: string;
-    deleteFailed: string;
-    nameTooLong: string;
-    messageTooLong: string;
-    write: string;
-    preview: string;
-    emptyPreview: string;
-    markdownHelp: string;
-    modified: string;
-    commentSystemTitle: string;
-    commentSystemDesc: string;
-    commentTimeLimit: string;
-    markdownSyntax: string;
-    markdownBasicSupport: string;
-    markdownLinkExample: string;
-    markdownImageExample: string;
-    markdownItalicExample: string;
-    markdownBoldExample: string;
-    markdownListExample: string;
-    markdownOrderedListExample: string;
-    markdownInlineCodeExample: string;
-    markdownCodeBlockExample: string;
-    pseudonymNotice: string;
-    editingPseudonymNotice: string;
-    author: string;
-    noComments: string;
-}
-export declare const en: I18nStrings;
-export declare const zhHant: I18nStrings;
-export declare const createI18n: (initLang?: I18nStrings) => {
-    t: (key: keyof I18nStrings) => string;
-    setLanguage: (lang: I18nStrings) => void;
-    getLanguage: () => I18nStrings;
-};

package/dist/utils/i18n.js

@@ -1,98 +0,0 @@
-export const en = {
-    anonymous: 'Anonymous',
-    replyTo: 'Reply to',
-    edit: 'Edit',
-    delete: 'Delete',
-    reply: 'Reply',
-    replyingTo: 'Replying to: ',
-    modified: 'Modified on',
-    cancelReply: 'Cancel',
-    editing: 'Editing: ',
-    cancelEdit: 'Cancel',
-    updateComment: 'Update',
-    submitComment: 'Submit',
-    namePlaceholder: 'Name (optional)',
-    messagePlaceholder: 'Your comment...\nSupports Markdown syntax',
-    loading: 'Loading...',
-    confirmDelete: 'Are you sure you want to delete this comment?',
-    editFailed: 'Failed to edit comment. Permission may have expired.',
-    submitFailed: 'Failed to submit comment.',
-    deleteFailed: 'Failed to delete comment. Permission may have expired.',
-    nameTooLong: 'Name is too long',
-    messageTooLong: 'Message is too long',
-    write: 'Write',
-    preview: 'Preview',
-    emptyPreview: 'Nothing to preview',
-    markdownHelp: 'Help',
-    commentSystemTitle: 'Comments',
-    commentSystemDesc: 'This is a simple comment system. You can post your opinions or respond to other comments. Click "Preview" to see how your comment looks before posting.',
-    commentTimeLimit: "After posting a comment, you can edit or delete it within two minutes, as long as you don't leave or refresh the page.",
-    markdownSyntax: 'Syntax',
-    markdownBasicSupport: 'Basic Markdown syntax is supported. HTML is not supported.',
-    markdownLinkExample: '[Link](https://www.example.com)',
-    markdownImageExample: '![Image](https://www.example.com/sample.jpg)',
-    markdownItalicExample: '*Italic* or _Italic_',
-    markdownBoldExample: '**Bold** or __Bold__',
-    markdownListExample: '- List item',
-    markdownOrderedListExample: '1. Ordered list item',
-    markdownInlineCodeExample: '`Inline code`',
-    markdownCodeBlockExample: '```\nCode block\n```',
-    pseudonymNotice: 'Will be converted to a unique pseudonym, longer names help avoid impersonation',
-    editingPseudonymNotice: 'Cannot be changed when editing',
-    author: 'Author',
-    noComments: 'No comments yet',
-};
-export const zhHant = {
-    anonymous: '匿名',
-    replyTo: '回覆給',
-    edit: '編輯',
-    delete: '刪除',
-    reply: '回覆',
-    modified: '修改於',
-    replyingTo: '回覆給：',
-    cancelReply: '取消',
-    editing: '編輯中：',
-    cancelEdit: '取消',
-    updateComment: '更新',
-    submitComment: '發送',
-    namePlaceholder: '名稱 (選填)',
-    messagePlaceholder: '留言內容...\n支援 Markdown 語法',
-    loading: '載入中...',
-    confirmDelete: '確定要刪除此留言嗎?',
-    editFailed: '編輯留言失敗，可能權限已過期',
-    submitFailed: '發送留言失敗',
-    deleteFailed: '刪除留言失敗，可能權限已過期',
-    nameTooLong: '暱稱過長',
-    messageTooLong: '留言內容過長',
-    write: '編輯',
-    preview: '預覽',
-    emptyPreview: '沒有內容可供預覽',
-    markdownHelp: '說明',
-    commentSystemTitle: '留言',
-    commentSystemDesc: '這是一個簡單的留言系統，你可以發表意見或回應其他留言。發佈前可點擊「預覽」查看留言樣式。',
-    commentTimeLimit: '發佈留言後，在不離開或重新整理頁面的情況下，你可以編輯或刪除兩分鐘內的留言。',
-    markdownSyntax: '語法',
-    markdownBasicSupport: '支援基本 Markdown 語法，不支援 HTML。',
-    markdownLinkExample: '[連結](https://www.example.com)',
-    markdownImageExample: '![圖片](https://www.example.com/sample.jpg)',
-    markdownItalicExample: '*斜體* 或 _斜體_',
-    markdownBoldExample: '**粗體** 或 __粗體__',
-    markdownListExample: '- 清單',
-    markdownOrderedListExample: '1. 編號清單',
-    markdownInlineCodeExample: '`行內程式碼`',
-    markdownCodeBlockExample: '```\n程式碼區塊\n```',
-    pseudonymNotice: '名稱將被轉換為化名，使用較長的名稱有助於避免被冒充',
-    editingPseudonymNotice: '編輯時無法更改',
-    author: '作者',
-    noComments: '尚未有留言',
-};
-export const createI18n = (initLang = en) => {
-    let currentStrings = initLang;
-    return {
-        t: (key) => currentStrings[key],
-        setLanguage: (lang) => {
-            currentStrings = lang;
-        },
-        getLanguage: () => currentStrings,
-    };
-};

package/dist/utils/pseudonym.js

@@ -1,34 +0,0 @@
-import { adjectives, nouns } from './wordBank';
-export async function generateSHA256Hash(text) {
-    const encoder = new TextEncoder();
-    const data = encoder.encode(text);
-    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
-    const hashArray = Array.from(new Uint8Array(hashBuffer));
-    return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
-}
-function selectWordsFromHash(hash) {
-    // Using the first 8 characters of the hash to select an adjective
-    const adjIndex = parseInt(hash.substring(0, 8), 16) % adjectives.length;
-    // Using the next 8 characters of the hash to select a noun
-    const nounIndex = parseInt(hash.substring(8, 16), 16) % nouns.length;
-    return {
-        adjective: adjectives[adjIndex],
-        noun: nouns[nounIndex],
-    };
-}
-export async function generatePseudonymAndHash(originalName) {
-    const name = (originalName || '').trim();
-    if (name.length === 0) {
-        return {
-            pseudonym: '',
-            hash: '',
-        };
-    }
-    const hash = await generateSHA256Hash(name);
-    const { adjective, noun } = selectWordsFromHash(hash);
-    const pseudonym = `${adjective} ${noun}`;
-    return {
-        pseudonym,
-        hash,
-    };
-}

package/dist/utils/sanitize.d.ts

@@ -1,4 +0,0 @@
-import { type Config as DomPurifyConfig } from 'dompurify';
-export declare const DOMPURIFY_CONFIG: DomPurifyConfig;
-export declare function setupDOMPurifyHooks(): void;
-export declare function sanitizeHtml(html: string): string;

package/dist/utils/sanitize.js

@@ -1,59 +0,0 @@
-import DOMPurify, {} from 'dompurify';
-export const DOMPURIFY_CONFIG = {
-    ALLOWED_TAGS: [
-        'a',
-        'b',
-        'i',
-        'em',
-        'strong',
-        's',
-        'p',
-        'ul',
-        'ol',
-        'li',
-        'code',
-        'pre',
-        'blockquote',
-        'h6', // only H6
-        'hr',
-        'br',
-        'img',
-    ],
-    ALLOWED_ATTR: ['href', 'src', 'alt'],
-    ALLOW_DATA_ATTR: false, // disable data-* attributes
-    ALLOW_ARIA_ATTR: false, // disable aria-* attributes
-    // Explicitly blocklist
-    // FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'form', 'embed'],
-    // FORBID_ATTR: ['style', 'onclick', 'onmouseover', 'onload', 'onunload', 'onerror'],
-};
-export function setupDOMPurifyHooks() {
-    DOMPurify.addHook('afterSanitizeAttributes', (node) => {
-        // Make all links open in a new tab, and prevent window.opener vulnerability
-        if (node.tagName === 'A') {
-            node.setAttribute('rel', 'noopener noreferrer');
-            node.setAttribute('target', '_blank');
-        }
-        // Optimize image loading
-        if (node.tagName === 'IMG') {
-            node.setAttribute('loading', 'lazy');
-        }
-    });
-    DOMPurify.addHook('uponSanitizeAttribute', (_node, data) => {
-        // Only allow http: and https: for href/src attributes
-        // Remove javascript: and other potentially dangerous protocols
-        if (data.attrName === 'href' || data.attrName === 'src') {
-            try {
-                const url = new URL(data.attrValue || '');
-                if (url.protocol !== 'http:' && url.protocol !== 'https:') {
-                    data.keepAttr = false;
-                }
-            }
-            catch {
-                data.keepAttr = false;
-            }
-        }
-    });
-}
-export function sanitizeHtml(html) {
-    return DOMPurify.sanitize(html, DOMPURIFY_CONFIG);
-}