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

package/dist/views/comments.js

@@ -1,119 +0,0 @@
-import { html } from 'lit';
-function getCommentCssClasses(isRoot) {
-    const prefix = isRoot ? 'comment' : 'reply';
-    return {
-        item: prefix,
-        header: `${prefix}-header ycc-flex ycc-flex-wrap`,
-        name: `${prefix}-name`,
-        time: `${prefix}-time`,
-        content: `${prefix}-content`,
-    };
-}
-function createCommentHeader(ctx, comment, css, replyToName, canEdit) {
-    const isMy = ctx.isMyComment(comment);
-    const isAdmin = comment.isAdmin;
-    return html ` <div class="${css.header}">
-    <span class="${css.name}" title="${comment.id}">
-      ${ctx.getDisplayName(comment)}
-      ${isAdmin
-        ? html `<span class="author-badge">${ctx.i18n$.t('author')}</span>`
-        : isMy
-            ? html `<span class="my-comment-badge">Me</span>`
-            : ''}
-    </span>
-    <span
-      class="${css.time}"
-      title="${comment.modDate ? ctx.formatDate(comment.pubDate) : undefined}"
-    >
-      ${comment.modDate
-        ? ctx.i18n$.t('modified') + ' ' + ctx.formatDate(comment.modDate)
-        : ctx.formatDate(comment.pubDate)}
-    </span>
-    ${replyToName
-        ? html `<span class="reply-to"
-          >${ctx.i18n$.t('replyTo')}<span title="${comment.replyTo ?? ''}"
-            >${replyToName}</span
-          ></span
-        >`
-        : ''}
-    ${canEdit
-        ? html `<span class="comment-controls ycc-flex ycc-gap-xs">
-          <button
-            class="edit-button ycc-clickable ycc-transition ycc-transparent-bg ycc-reset-button"
-            @click=${() => ctx.handleEdit(comment)}
-          >
-            ${ctx.i18n$.t('edit')}
-          </button>
-          <button
-            class="delete-button ycc-clickable ycc-transition ycc-transparent-bg ycc-reset-button"
-            @click=${() => ctx.handleDelete(comment.id)}
-          >
-            ${ctx.i18n$.t('delete')}
-          </button>
-        </span>`
-        : ''}
-  </div>`;
-}
-function createCommentContent(ctx, comment, contentClass) {
-    return html `<div class="${contentClass}">${ctx.renderMarkdown(comment.msg)}</div>`;
-}
-function createCommentActions(ctx, comment) {
-    return html `<button
-    class="reply-button ycc-clickable ycc-transition ycc-transparent-bg ycc-reset-button"
-    @click=${() => ctx.setReplyTo(comment.id)}
-  >
-    ${ctx.i18n$.t('reply')}
-  </button>`;
-}
-function createCommentItemTemplate(ctx, comment, isRoot = false, replyToName = null, allReplies = null, commentMap = null) {
-    const css = getCommentCssClasses(isRoot);
-    const canEdit = ctx.canEditComment(comment.id);
-    return html ` <div class="${css.item}" ${isRoot ? `data-id="${comment.id}"` : ''}>
-    ${createCommentHeader(ctx, comment, css, replyToName, canEdit)}
-    ${createCommentContent(ctx, comment, css.content)} ${createCommentActions(ctx, comment)}
-    ${isRoot
-        ? html `<div class="replies">
-          ${allReplies
-            ? allReplies.map((reply) => {
-                const replyToComment = reply.replyTo && commentMap ? commentMap[reply.replyTo] : undefined;
-                const replyToName = replyToComment ? ctx.getDisplayName(replyToComment) : '';
-                return createCommentItemTemplate(ctx, reply, false, replyToName);
-            })
-            : ''}
-        </div>`
-        : ''}
-  </div>`;
-}
-function processComments(ctx, data, commentMap) {
-    const roots = data.filter((c) => !c.replyTo);
-    const replyMap = {};
-    data.forEach((c) => {
-        if (c.replyTo) {
-            (replyMap[c.replyTo] ||= []).push(c);
-        }
-    });
-    const getAll = (id) => {
-        const all = [];
-        const q = [...(replyMap[id] || [])];
-        while (q.length) {
-            const r = q.shift();
-            if (!r)
-                break;
-            all.push(r);
-            const children = replyMap[r.id] || [];
-            if (children.length)
-                q.push(...children);
-        }
-        return all;
-    };
-    return roots.map((root) => createCommentItemTemplate(ctx, root, true, null, getAll(root.id), commentMap));
-}
-export function createCommentsTemplate(ctx) {
-    const comments = ctx.comments$;
-    if (comments.length === 0) {
-        return html `<div id="comments">
-      <div class="no-comments-message">${ctx.i18n$.t('noComments')}</div>
-    </div>`;
-    }
-    return html `<div id="comments">${processComments(ctx, comments, ctx.commentMap$)}</div>`;
-}

package/dist/views/preview.d.ts

@@ -1,3 +0,0 @@
-import { type TemplateResult } from 'lit';
-import type { YangchunCommentElement } from '../element';
-export declare function createPreviewTemplate(ctx: YangchunCommentElement): TemplateResult;

package/dist/views/preview.js

@@ -1,53 +0,0 @@
-import { html } from 'lit';
-import { formatDate } from '../utils/format';
-export function createPreviewTemplate(ctx) {
-    const now = Date.now();
-    const userName = ctx.previewPseudonym$ ?? '';
-    return html ` <div class="comment-box preview-mode">
-    <div id="preview">
-      ${ctx.previewText$
-        ? html ` <div class="preview-comment">
-            <div class="comment-header">
-              <span class="comment-name">${userName || ctx.i18n$.t('anonymous')}</span>
-              <span class="comment-time">${formatDate(now)}</span>
-              ${ctx.currentReplyTo$ && ctx.commentMap$[ctx.currentReplyTo$]
-            ? html `<span class="reply-to"
-                    >${ctx.i18n$.t('replyTo')}<span
-                      >${ctx.getDisplayName(ctx.commentMap$[ctx.currentReplyTo$])}</span
-                    ></span
-                  >`
-            : ''}
-            </div>
-            <div class="comment-content">${ctx.renderMarkdown(ctx.previewText$)}</div>
-          </div>`
-        : html `<div class="empty-preview">${ctx.i18n$.t('emptyPreview')}</div>`}
-    </div>
-    <div class="comment-footer ycc-flex ycc-gap-xs">
-      <span style="flex: 1;"></span>
-      <div class="ycc-flex ycc-gap-xs">
-        <button
-          type="button"
-          class="help-btn ycc-clickable ycc-reset-button"
-          title="${ctx.i18n$.t('markdownHelp')}"
-          @click=${() => ctx.toggleMarkdownHelp()}
-        >
-          ?
-        </button>
-        <button
-          type="button"
-          class="preview-btn ycc-clickable ycc-transition ycc-transparent-bg active ycc-reset-button"
-          @click=${() => ctx.switchTab('write')}
-        >
-          ${ctx.i18n$.t('write')}
-        </button>
-        <button
-          type="button"
-          class="submit-btn ycc-clickable ycc-transition ycc-reset-button"
-          @click=${() => ctx.handlePreviewSubmit()}
-        >
-          ${ctx.editingComment$ ? ctx.i18n$.t('updateComment') : ctx.i18n$.t('submitComment')}
-        </button>
-      </div>
-    </div>
-  </div>`;
-}

package/dist/yangchun-comment.css

@@ -1 +0,0 @@
-:root{--ycc-text-color: #333;--ycc-background-color: #fff;--ycc-primary-color: #3b82f6;--ycc-font-family: inherit;--ycc-base-font-size: 14px;--ycc-border-radius: 6px;--ycc-small-border-radius: 4px;--ycc-tiny-border-radius: 2px;--ycc-spacing: 16px;--ycc-small-font-size: .8em;--ycc-transition: all .2s ease;--ycc-reply-indent: 12px;--ycc-hover-opacity: .8;--ycc-light: color-mix(in srgb, var(--ycc-text-color) 60%, var(--ycc-background-color));--ycc-lighter: color-mix(in srgb, var(--ycc-text-color) 40%, var(--ycc-background-color));--ycc-subtle: color-mix(in srgb, var(--ycc-text-color) 20%, var(--ycc-background-color));--ycc-minimal: color-mix(in srgb, var(--ycc-text-color) 5%, var(--ycc-background-color));--ycc-primary-soft: color-mix(in srgb, var(--ycc-primary-color) 90%, var(--ycc-background-color));--ycc-overlay: color-mix(in srgb, var(--ycc-text-color) 50%, transparent)}body.ycc-modal-open{overflow:hidden}.ycc-flex{display:flex}.ycc-flex-center{display:flex;align-items:center}.ycc-flex-wrap{flex-wrap:wrap}.ycc-transparent-bg{background-color:transparent}.ycc-clickable{cursor:pointer}.ycc-transition{transition:var(--ycc-transition)}.ycc-reset-button{border:none;padding:0;margin:0;background:none;font-family:var(--ycc-font-family)}.ycc-reset-form{margin:0;padding:0;border:none;box-shadow:none}.ycc-gap-xs{gap:.5rem}.ycc-gap-sm{gap:.75rem}.ycc-gap-md{gap:1rem}.ycc-container{font-family:var(--ycc-font-family);color:var(--ycc-text-color);font-size:var(--ycc-base-font-size)}.comment-box{border:1px solid var(--ycc-subtle);border-radius:var(--ycc-border-radius);overflow:hidden;background-color:var(--ycc-background-color)}.comment-input{padding:1rem 1rem .25rem}.comment-input textarea{width:100%;border:none;resize:none;font-size:16px;min-height:120px;outline:none;font-family:var(--ycc-font-family);color:var(--ycc-text-color);background-color:var(--ycc-background-color);box-sizing:border-box}.comment-input textarea::placeholder{color:var(--ycc-lighter);opacity:1}.char-count{font-size:12px;color:var(--ycc-light);text-align:right;margin-top:4px}.char-count .over-limit{color:#dc3545;font-weight:700}.name-input-container{flex:1;position:relative}.comment-footer{align-items:center;border-top:1px solid var(--ycc-subtle);padding:.5rem 1rem;background-color:var(--ycc-background-color);position:relative}.comment-footer input[type=text]{width:100%;border:none;font-size:14px;outline:none;font-family:var(--ycc-font-family);color:var(--ycc-text-color);background-color:var(--ycc-background-color);border-radius:var(--ycc-tiny-border-radius)}.comment-footer input[type=text]::placeholder{color:var(--ycc-lighter);opacity:1}.comment-footer button{padding:.3rem .8rem;margin-left:.4rem;font-size:14px;border-radius:var(--ycc-small-border-radius);font-family:var(--ycc-font-family)}.help-btn{font-size:16px;color:var(--ycc-lighter);background:none!important;padding:.2rem .5rem!important}.help-btn:hover,.preview-btn{color:var(--ycc-primary-color)}.preview-btn:hover{background-color:var(--ycc-primary-color);color:var(--ycc-background-color)}.submit-btn{background-color:var(--ycc-primary-color);color:var(--ycc-background-color);border:1px solid var(--ycc-primary-color)}.submit-btn:hover{opacity:var(--ycc-hover-opacity)}.info{max-width:600px;margin:.5rem 0;font-size:13px;color:var(--ycc-lighter);align-items:flex-start}.preview-mode{border:1px solid var(--ycc-subtle);border-radius:var(--ycc-border-radius);background-color:var(--ycc-background-color)}#preview{padding:1rem}.empty-preview{color:var(--ycc-lighter);font-style:italic;padding:2rem 0;text-align:center}#comment-form{box-sizing:border-box;width:100%;background:none}#comments{margin-top:var(--ycc-spacing)}.no-comments-message{text-align:center;color:var(--ycc-lighter);font-style:italic;padding:2rem 1rem;margin:1rem 0}.comment{margin-bottom:12px;padding:4px}.comment-header,.reply-header{margin-bottom:8px;align-items:center;flex-wrap:wrap}.comment-name,.reply-name{font-weight:700}.my-comment-badge{background-color:var(--ycc-light);color:var(--ycc-background-color);border-radius:var(--ycc-small-border-radius);padding:2px 3px;margin-left:2px;font-size:.8em}.author-badge{background-color:var(--ycc-primary-color);color:var(--ycc-background-color);border-radius:var(--ycc-small-border-radius);padding:2px 3px;margin-left:2px;font-size:.8em;font-weight:700}.comment-time,.reply-time,.reply-to{font-size:var(--ycc-small-font-size);color:var(--ycc-light);margin-left:8px}.reply-to{color:var(--ycc-lighter);opacity:0;transition:var(--ycc-transition)}.reply:hover .reply-to{opacity:1}.comment-content,.reply-content,.preview-comment{margin-bottom:6px;line-height:1.5;word-break:break-word}.preview-comment{margin:0;padding:0;border:none;box-shadow:none}.comment-content a,.reply-content a,.preview-comment a{color:var(--ycc-primary-color);text-decoration:none;border-bottom:1px solid var(--ycc-primary-color);padding-bottom:1px}.comment-content img,.reply-content img,.preview-comment img{max-width:75%}.comment-content ul,.reply-content ul,.preview-comment ul{padding-left:20px;margin:8px 0;list-style-type:disc}.comment-content ol,.reply-content ol,.preview-comment ol{padding-left:20px;margin:8px 0;list-style-type:decimal}.comment-content li,.reply-content li,.preview-comment li{margin-bottom:4px}.reply-button,.cancel-link,.edit-button,.delete-button{font-family:var(--ycc-font-family)}.reply-button{color:var(--ycc-text-color);background-color:transparent;font-size:12px;padding:0;text-decoration:underline;text-underline-offset:4px}.cancel-link{color:var(--ycc-primary-color);background-color:transparent;font-size:13px;padding:0}.reply-button:hover,.cancel-link:hover{opacity:var(--ycc-hover-opacity)}.edit-button,.delete-button{color:var(--ycc-light);border-radius:calc(var(--ycc-border-radius) / 2);font-size:calc(var(--ycc-base-font-size) - 2px);padding:2px 6px}.edit-button:hover,.delete-button:hover{background-color:var(--ycc-minimal)}.replies{margin-top:4px}.reply{margin-left:var(--ycc-reply-indent);border-left:4px solid var(--ycc-minimal);padding-left:15px;padding-top:15px}.comment-controls{margin-left:auto}#markdown-help-modal{display:none}#markdown-help-modal.active{display:block;position:fixed;z-index:1000;inset:0}.markdown-help-container{width:100%;height:100%;align-items:center;justify-content:center;position:relative}.markdown-help-backdrop{position:absolute;inset:0;background-color:var(--ycc-overlay)}.markdown-help-content{position:relative;background-color:var(--ycc-background-color);color:var(--ycc-text-color);border-radius:var(--ycc-small-border-radius);padding:1.5rem;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 2px 8px var(--ycc-light);z-index:1010}.markdown-help-close{position:absolute;top:10px;right:10px;font-size:1.5rem;color:var(--ycc-light)}.markdown-help-button{align-items:center;justify-content:center;width:26px;height:26px;color:var(--ycc-light);background:none;font-weight:700;margin-right:10px;line-height:1;font-size:var(--ycc-base-font-size)}.markdown-examples{padding:10px 15px;border-radius:var(--ycc-border-radius);background-color:var(--ycc-minimal);overflow-x:auto;margin-bottom:1em}.markdown-help-content a{color:var(--ycc-primary-color);text-decoration:none}.markdown-help-content h4{margin-top:1.5em;margin-bottom:.75em;font-size:1.1rem;color:var(--ycc-primary-color)}.markdown-help-content h4:first-child{margin-top:0}.markdown-help-content p{margin-bottom:1em;font-size:.9rem;line-height:1.5}.markdown-help-content code{font-family:monospace;font-size:.9em}.markdown-help-content pre{margin:0;white-space:pre-wrap;line-height:1.6}.honeypot-field{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;pointer-events:none!important;opacity:0!important}.comment-box-container{display:flex;flex-direction:column}.form-content{flex:1}.admin-btn-wrapper{display:flex;justify-content:flex-end;padding-right:8px}.admin-btn{font-size:16px;color:var(--ycc-lighter);padding:4px 6px;border-radius:var(--ycc-small-border-radius);opacity:0;transition:var(--ycc-transition)}.comment-box-container:hover .admin-btn{opacity:1}.admin-btn:hover{color:var(--ycc-primary-color);background-color:var(--ycc-subtle)!important}.admin-modal-backdrop{position:fixed;inset:0;background-color:var(--ycc-overlay);display:flex;justify-content:center;align-items:center;z-index:1000}.admin-modal-content{background-color:var(--ycc-background-color);border:1px solid var(--ycc-subtle);border-radius:var(--ycc-border-radius);padding:2rem;max-width:400px;width:90%;position:relative;box-shadow:0 4px 12px #00000026}.admin-modal-close{position:absolute;top:8px;right:12px;font-size:24px;color:var(--ycc-light);background:none!important;padding:0!important;border:none!important;line-height:1}.admin-modal-close:hover{color:var(--ycc-text-color)}.admin-modal-content h3{margin:0 0 1rem;color:var(--ycc-text-color);font-family:var(--ycc-font-family);font-size:1.2em}.admin-form-group{margin-bottom:1rem}.admin-form-group label{display:block;margin-bottom:.5rem;color:var(--ycc-text-color);font-family:var(--ycc-font-family);font-size:var(--ycc-base-font-size)}.admin-form-group input{width:100%;padding:.5rem;border:1px solid var(--ycc-subtle);border-radius:var(--ycc-small-border-radius);font-family:var(--ycc-font-family);font-size:var(--ycc-base-font-size);background-color:var(--ycc-background-color);color:var(--ycc-text-color);box-sizing:border-box}.admin-form-group input:focus{outline:none;border-color:var(--ycc-primary-color)}.admin-login-btn{width:100%;padding:.75rem;background-color:var(--ycc-primary-color);color:var(--ycc-background-color);border:none;border-radius:var(--ycc-small-border-radius);font-family:var(--ycc-font-family);font-size:var(--ycc-base-font-size);font-weight:500;transition:var(--ycc-transition)}.admin-login-btn:hover{opacity:var(--ycc-hover-opacity)}@media (max-width: 576px){.ycc-container,.info{margin:0;max-width:100%}.comment-box{border-radius:var(--ycc-border-radius);margin:0 .5rem;border:1px solid var(--ycc-subtle)}.comment-input{padding:.75rem}.comment-input textarea{min-height:100px;font-size:16px}.comment-footer{flex-direction:column;align-items:stretch;padding:.75rem}.comment-footer input[type=text]{width:100%;min-width:unset;flex:none;margin-bottom:0;padding:.5rem;border:1px solid var(--ycc-subtle);border-radius:var(--ycc-small-border-radius);box-sizing:border-box}.name-input-container{margin-bottom:.75rem}.comment-footer .ycc-flex{justify-content:space-between;align-items:center;width:100%}.help-btn,.preview-btn,.submit-btn{font-size:13px;padding:.4rem .8rem}.comment,.reply{padding:8px}.reply{margin-left:8px;padding-left:10px}.comment-header,.reply-header{flex-direction:column;align-items:flex-start}.comment-time,.reply-time,.reply-to{margin-left:0;margin-top:4px}.reply:hover .reply-to{opacity:1}.comment-controls{margin-left:0;margin-top:8px}.info{flex-direction:column;align-items:flex-start;margin:.5rem 0;padding:0 1rem}.preview-mode .comment-footer{flex-direction:row;justify-content:space-between;align-items:center;padding:.75rem}}