From 9ef18c3fe1768fd8d0401c351e28764cb5c94906 Mon Sep 17 00:00:00 2001 From: Heath Stewart Date: Sun, 8 Feb 2026 01:12:56 -0800 Subject: [PATCH] Add hide attribute to sequoia-comments component Resolves #1 --- bun.lock | 15 +-- docs/docs/pages/comments.mdx | 1 + docs/docs/public/sequoia-comments.js | 111 +++++++++--------- .../cli/src/components/sequoia-comments.js | 111 +++++++++--------- 4 files changed, 114 insertions(+), 124 deletions(-) diff --git a/bun.lock b/bun.lock index 853a1b9..ae399fb 100644 --- a/bun.lock +++ b/bun.lock @@ -24,7 +24,7 @@ }, "packages/cli": { "name": "sequoia-cli", - "version": "0.3.2", + "version": "0.4.0", "bin": { "sequoia": "dist/index.js", }, @@ -47,17 +47,6 @@ "typescript": "^5", }, }, - "packages/ui": { - "name": "sequoia-ui", - "version": "0.1.0", - "devDependencies": { - "@biomejs/biome": "^2.3.13", - "@types/node": "^20", - }, - "peerDependencies": { - "typescript": "^5", - }, - }, }, "packages": { "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="], @@ -1370,8 +1359,6 @@ "sequoia-cli": ["sequoia-cli@workspace:packages/cli"], - "sequoia-ui": ["sequoia-ui@workspace:packages/ui"], - "serve-static": ["serve-static@1.16.3", "", { "dependencies": { "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", "send": "~0.19.1" } }, "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA=="], "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="], diff --git a/docs/docs/pages/comments.mdx b/docs/docs/pages/comments.mdx index 4ee92c7..0b0b221 100644 --- a/docs/docs/pages/comments.mdx +++ b/docs/docs/pages/comments.mdx @@ -143,6 +143,7 @@ The `` component accepts the following attributes: |-----------|------|---------|-------------| | `document-uri` | `string` | - | AT Protocol URI for the document. Optional if a `` tag exists in the page head. | | `depth` | `number` | `6` | Maximum depth of nested replies to fetch. | +| `hide` | `string` | - | Set to "auto" to hide if no document link is detected | ```html diff --git a/docs/docs/public/sequoia-comments.js b/docs/docs/public/sequoia-comments.js index 5110d0b..8aa2c8f 100644 --- a/docs/docs/public/sequoia-comments.js +++ b/docs/docs/public/sequoia-comments.js @@ -14,6 +14,7 @@ * Attributes: * - document-uri: AT Protocol URI for the document (optional if link tag exists) * - depth: Maximum depth of nested replies to fetch (default: 6) + * - hide: Set to "auto" to hide if no document link is detected * * CSS Custom Properties: * - --sequoia-fg-color: Text color (default: #1f2937) @@ -573,13 +574,25 @@ const BaseElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {}; class SequoiaComments extends BaseElement { constructor() { super(); - this.shadow = this.attachShadow({ mode: "open" }); + const shadow = this.attachShadow({ mode: "open" }); + + const styleTag = document.createElement("style"); + shadow.appendChild(styleTag); + styleTag.innerText = styles; + + const container = document.createElement("div"); + shadow.appendChild(container); + container.className = "sequoia-comments-container"; + container.part = "container"; + + this.commentsContainer = container; this.state = { type: "loading" }; this.abortController = null; + } static get observedAttributes() { - return ["document-uri", "depth"]; + return ["document-uri", "depth", "hide"]; } connectedCallback() { @@ -616,6 +629,11 @@ class SequoiaComments extends BaseElement { return depthAttr ? parseInt(depthAttr, 10) : 6; } + get hide() { + const hideAttr = this.getAttribute("hide"); + return hideAttr === "auto"; + } + async loadComments() { // Cancel any in-flight request this.abortController?.abort(); @@ -666,68 +684,54 @@ class SequoiaComments extends BaseElement { } render() { - const styleTag = ``; - switch (this.state.type) { case "loading": - this.shadow.innerHTML = ` - ${styleTag} -
-
- - Loading comments... -
+ this.commentsContainer.innerHTML = ` +
+ + Loading comments...
`; break; case "no-document": - this.shadow.innerHTML = ` - ${styleTag} -
-
- No document found. Add a <link rel="site.standard.document" href="at://..."> tag to your page. -
+ this.commentsContainer.innerHTML = ` +
+ No document found. Add a <link rel="site.standard.document" href="at://..."> tag to your page.
`; + if (this.hide) { + this.commentsContainer.style.display = 'none'; + } break; case "no-comments-enabled": - this.shadow.innerHTML = ` - ${styleTag} -
-
- Comments are not enabled for this post. -
+ this.commentsContainer.innerHTML = ` +
+ Comments are not enabled for this post.
`; break; case "empty": - this.shadow.innerHTML = ` - ${styleTag} -
-
-

Comments

- - ${BLUESKY_ICON} - Reply on Bluesky - -
-
- No comments yet. Be the first to reply on Bluesky! -
+ this.commentsContainer.innerHTML = ` +
+

Comments

+ + ${BLUESKY_ICON} + Reply on Bluesky + +
+
+ No comments yet. Be the first to reply on Bluesky!
`; break; case "error": - this.shadow.innerHTML = ` - ${styleTag} -
-
- Failed to load comments: ${escapeHtml(this.state.message)} -
+ this.commentsContainer.innerHTML = ` +
+ Failed to load comments: ${escapeHtml(this.state.message)}
`; break; @@ -740,19 +744,16 @@ class SequoiaComments extends BaseElement { .join(""); const commentCount = this.countComments(replies); - this.shadow.innerHTML = ` - ${styleTag} -
-
-

${commentCount} Comment${commentCount !== 1 ? "s" : ""}

- - ${BLUESKY_ICON} - Reply on Bluesky - -
-
- ${threadsHtml} -
+ this.commentsContainer.innerHTML = ` +
+

${commentCount} Comment${commentCount !== 1 ? "s" : ""}

+ + ${BLUESKY_ICON} + Reply on Bluesky + +
+
+ ${threadsHtml}
`; break; diff --git a/packages/cli/src/components/sequoia-comments.js b/packages/cli/src/components/sequoia-comments.js index 5110d0b..8aa2c8f 100644 --- a/packages/cli/src/components/sequoia-comments.js +++ b/packages/cli/src/components/sequoia-comments.js @@ -14,6 +14,7 @@ * Attributes: * - document-uri: AT Protocol URI for the document (optional if link tag exists) * - depth: Maximum depth of nested replies to fetch (default: 6) + * - hide: Set to "auto" to hide if no document link is detected * * CSS Custom Properties: * - --sequoia-fg-color: Text color (default: #1f2937) @@ -573,13 +574,25 @@ const BaseElement = typeof HTMLElement !== "undefined" ? HTMLElement : class {}; class SequoiaComments extends BaseElement { constructor() { super(); - this.shadow = this.attachShadow({ mode: "open" }); + const shadow = this.attachShadow({ mode: "open" }); + + const styleTag = document.createElement("style"); + shadow.appendChild(styleTag); + styleTag.innerText = styles; + + const container = document.createElement("div"); + shadow.appendChild(container); + container.className = "sequoia-comments-container"; + container.part = "container"; + + this.commentsContainer = container; this.state = { type: "loading" }; this.abortController = null; + } static get observedAttributes() { - return ["document-uri", "depth"]; + return ["document-uri", "depth", "hide"]; } connectedCallback() { @@ -616,6 +629,11 @@ class SequoiaComments extends BaseElement { return depthAttr ? parseInt(depthAttr, 10) : 6; } + get hide() { + const hideAttr = this.getAttribute("hide"); + return hideAttr === "auto"; + } + async loadComments() { // Cancel any in-flight request this.abortController?.abort(); @@ -666,68 +684,54 @@ class SequoiaComments extends BaseElement { } render() { - const styleTag = ``; - switch (this.state.type) { case "loading": - this.shadow.innerHTML = ` - ${styleTag} -
-
- - Loading comments... -
+ this.commentsContainer.innerHTML = ` +
+ + Loading comments...
`; break; case "no-document": - this.shadow.innerHTML = ` - ${styleTag} -
-
- No document found. Add a <link rel="site.standard.document" href="at://..."> tag to your page. -
+ this.commentsContainer.innerHTML = ` +
+ No document found. Add a <link rel="site.standard.document" href="at://..."> tag to your page.
`; + if (this.hide) { + this.commentsContainer.style.display = 'none'; + } break; case "no-comments-enabled": - this.shadow.innerHTML = ` - ${styleTag} -
-
- Comments are not enabled for this post. -
+ this.commentsContainer.innerHTML = ` +
+ Comments are not enabled for this post.
`; break; case "empty": - this.shadow.innerHTML = ` - ${styleTag} -
-
-

Comments

- - ${BLUESKY_ICON} - Reply on Bluesky - -
-
- No comments yet. Be the first to reply on Bluesky! -
+ this.commentsContainer.innerHTML = ` +
+

Comments

+ + ${BLUESKY_ICON} + Reply on Bluesky + +
+
+ No comments yet. Be the first to reply on Bluesky!
`; break; case "error": - this.shadow.innerHTML = ` - ${styleTag} -
-
- Failed to load comments: ${escapeHtml(this.state.message)} -
+ this.commentsContainer.innerHTML = ` +
+ Failed to load comments: ${escapeHtml(this.state.message)}
`; break; @@ -740,19 +744,16 @@ class SequoiaComments extends BaseElement { .join(""); const commentCount = this.countComments(replies); - this.shadow.innerHTML = ` - ${styleTag} -
-
-

${commentCount} Comment${commentCount !== 1 ? "s" : ""}

- - ${BLUESKY_ICON} - Reply on Bluesky - -
-
- ${threadsHtml} -
+ this.commentsContainer.innerHTML = ` +
+

${commentCount} Comment${commentCount !== 1 ? "s" : ""}

+ + ${BLUESKY_ICON} + Reply on Bluesky + +
+
+ ${threadsHtml}
`; break; -- 2.51.2