Option to not display new comment form

src/new-comment-link.ts

@@ -0,0 +1,20 @@
+import { Issue } from './github';
+
+export class NewCommentLink {
+  public readonly element: HTMLElement;
+
+  constructor(
+    private readonly jump: () => void
+  ) {
+    this.element = document.createElement('article');
+    this.element.classList.add('timeline-comment');
+
+    this.element.innerHTML = `
+      <div class="new-comment-footer" style="width: 100%;">
+        <span class="timeline-header">Comments are recorded using GitHub Issues</span>
+        <button class="btn btn-primary btn-large" target="_blank">Comment on GitHub</button>
+      </div>`;
+
+    this.element.lastChild.lastElementChild.addEventListener('click', this.jump);
+  }
+}

src/page-attributes.ts

@@ -56,7 +56,8 @@ function readPageAttributes() {
     title: params.title,
     description: params.description,
     label: params.label,
-    theme: params.theme || 'github-light'
+    theme: params.theme || 'github-light',
+    form: params.form
   };
 }
 

src/utterances.ts

@@ -13,6 +13,7 @@ import {
 } from './github';
 import { TimelineComponent } from './timeline-component';
 import { NewCommentComponent } from './new-comment-component';
+import { NewCommentLink } from './new-comment-link';
 import { startMeasuring, scheduleMeasure } from './measure';
 import { loadTheme } from './theme';
 import { getRepoConfig } from './repo-config';
@@ -54,25 +55,33 @@ async function bootstrap() {
 
   enableReactions(!!user);
 
-  const submit = async (markdown: string) => {
-    await assertOrigin();
-    if (!issue) {
-      issue = await createIssue(
-        page.issueTerm as string,
-        page.url,
-        page.title,
-        page.description || '',
-        page.label
-      );
-      timeline.setIssue(issue);
+  if (page.form === 'false') {
+    const jump = () => {
+      assertIssueContainer(issue);
+      window.open(issue.html_url);
     }
-    const comment = await postComment(issue.number, markdown);
-    timeline.insertComment(comment, true);
-    newCommentComponent.clear();
+    const newCommentLink = new NewCommentLink(jump);
+    timeline.element.appendChild(newCommentLink.element);
+  } else {
+    const submit = async (markdown: string) => {
+      await assertOrigin();
+      if (!issue) {
+        issue = await createIssue(
+          page.issueTerm as string,
+          page.url,
+          page.title,
+          page.description || '',
+          page.label
+        );
+        timeline.setIssue(issue);
+      }
+      const comment = await postComment(issue.number, markdown);
+      timeline.insertComment(comment, true);
+      newCommentComponent.clear();
+    };
+    const newCommentComponent = new NewCommentComponent(user, submit);
+    timeline.element.appendChild(newCommentComponent.element);
   };
-
-  const newCommentComponent = new NewCommentComponent(user, submit);
-  timeline.element.appendChild(newCommentComponent.element);
 }
 
 bootstrap();
@@ -156,3 +165,22 @@ export async function assertOrigin() {
   scheduleMeasure();
   throw new Error('Origin not permitted.');
 }
+
+function assertIssueContainer(issue: Issue | null) {
+  const { owner, repo, issueTerm } = page;
+  if (issue) {
+    return;
+  }
+
+  document.querySelector('.timeline')!.lastElementChild!.insertAdjacentHTML('beforebegin', `
+  <div class="flash flash-error flash-not-installed">
+    Error: No issue container found at <code>${owner}/${repo}</code>,
+    <a href="https://github.com/${owner}/${repo}/issues" target="_blank">
+      <strong>create an issue on GitHub</strong>
+    </a>
+    with title: <strong><code>${issueTerm}</code></strong>, the issue body is not important
+    and is ignored. Please add your comment as a comment under the newly created issue.
+  </div>`);
+  scheduleMeasure();
+  throw new Error('No issue container.');
+}