add data-readonly attributes.

README.md

@@ -19,6 +19,7 @@ You can pass special attributes to that `<script>` tag, such as
 - `data-skip="/"`, an **optional** path of your website to skip rendering the widgets in. The default is `"/"`.
 - `data-owner="reference"`, an **optional** string with the post owner's public key in hex, `npub1` or `nprofile1` format.
 - `data-placeholder="reference"`, an **optional** string with the placeholder for the textarea
+- `data-readonly="true"`, an **optional** boolean to turn off new comments
 
 Custom CSS variables for styling:
 

embeddable/embed.jsx

@@ -11,6 +11,7 @@ const skip = script.dataset.skip || '/'
 const owner = script.dataset.owner || ''
 const customBase = script.dataset.customBase
 const placeholder = script.dataset.placeholder || ''
+const readonly = script.dataset.readonly === 'true'
 
 const container = document.createElement('div')
 container.style.width = '100%'
@@ -24,5 +25,6 @@ root.render(
     relays={relays}
     owner={owner}
     placeholder={placeholder}
+    readonly={readonly}
   />
 )

src/NoComment.jsx

@@ -14,7 +14,8 @@ export function NoComment({
   owner,
   skip,
   customBase,
-  placeholder
+  placeholder,
+  readonly
 }) {
   let customBaseTag = useMemo(() => {
     if (customBase) {
@@ -147,7 +148,7 @@ export function NoComment({
 
   return (
     <Container>
-      {editor()}
+      {!readonly && editor()}
 
       <div>
         {threads?.map(thread => (
@@ -157,6 +158,7 @@ export function NoComment({
             metadata={metadata}
             relays={chosenRelays}
             replyForm={editor}
+            readonly={readonly}
           />
         ))}
       </div>

src/Thread.jsx

@@ -21,7 +21,8 @@ export default function Thread({
   metadata,
   relays,
   replyForm,
-  level = 0
+  level = 0,
+  readonly
 }) {
   const [expanded, setExpanded] = useState(false)
   return (
@@ -48,7 +49,7 @@ export default function Thread({
         >
           {dayjs(thread.created_at * 1000).from(new Date())}
         </CommentDate>
-        <ReplyButton onClick={() => setExpanded(!expanded)} />
+        {!readonly && <ReplyButton onClick={() => setExpanded(!expanded)} />}
       </div>
       <CommentContent>{thread.content}</CommentContent>
       {expanded && <ReplyWrap>{replyForm(thread.id)}</ReplyWrap>}
@@ -65,6 +66,7 @@ export default function Thread({
             relays={relays}
             level={level + 1}
             replyForm={replyForm}
+            readonly={readonly}
           />
         ))}
       </div>