diff --git a/bun.lock b/bun.lock --- 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", }, @@ -41,17 +41,6 @@ "devDependencies": { "@biomejs/biome": "^2.3.13", "@types/mime-types": "^3.0.1", - "@types/node": "^20", - }, - "peerDependencies": { - "typescript": "^5", - }, - }, - "packages/ui": { - "name": "sequoia-ui", - "version": "0.1.0", - "devDependencies": { - "@biomejs/biome": "^2.3.13", "@types/node": "^20", }, "peerDependencies": { @@ -1369,8 +1358,6 @@ "send": ["send@0.19.2", "", { "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", "fresh": "~0.5.2", "http-errors": "~2.0.1", "mime": "1.6.0", "ms": "2.1.3", "on-finished": "~2.4.1", "range-parser": "~1.2.1", "statuses": "~2.0.2" } }, "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg=="], "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=="], diff --git a/docs/docs/pages/comments.mdx b/docs/docs/pages/comments.mdx --- a/docs/docs/pages/comments.mdx +++ b/docs/docs/pages/comments.mdx @@ -143,6 +143,7 @@ |-----------|------|---------|-------------| | `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 --- 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 @@ 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() { @@ -614,6 +627,11 @@ get depth() { const depthAttr = this.getAttribute("depth"); return depthAttr ? parseInt(depthAttr, 10) : 6; + } + + get hide() { + const hideAttr = this.getAttribute("hide"); + return hideAttr === "auto"; } async loadComments() { @@ -666,68 +684,54 @@ } 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 @@ .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 --- 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 @@ 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() { @@ -614,6 +627,11 @@ get depth() { const depthAttr = this.getAttribute("depth"); return depthAttr ? parseInt(depthAttr, 10) : 6; + } + + get hide() { + const hideAttr = this.getAttribute("hide"); + return hideAttr === "auto"; } async loadComments() { @@ -666,68 +684,54 @@ } 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 @@ .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;