web-annotation-discovery-server/views

<p class='small' style='margin-bottom: 3em;'>
  <a class='plainlink' href='..'>← Back to all users</a>
</p>

<h1>Annotation collections of {{name}}</h1>

<details class="infobox">
  <summary>
    How to use/create an annotation collection
  </summary>

  <h2>Subscribe to a collection</h2>
  <p>With an annotation-capable browser (extension), you can view annotations from the collections below while you visit the pages they target.</p>
  <p>Each collection is an annotation ‘feed’: Choose a collection below, and your browser should give you the option to import/subscribe to this collection, and then update it periodically.</p>

  <h2>Create a collection</h2>
  <p>
    If you are {{name}}, you can add and edit annotations from your annotation-capable browser.
  </p>
  <p>
    Create a collection below. Keep your password at hand (perhaps your browser has remembered it for you).
  </p>

  <form method="POST">
    <div>
      <input required name='label' placeholder='Name of collection' oninput="generateSlug(event)" style="font-size: 1em;"/>
      <button style="font-size: large;">Create</button>
    </div>
    <p style="margin-top: .2em;">
      /{{name}}/<input required name='name' placeholder='' style="color: grey; background: none; border: none; font-size: 1em;" />
    </p>
  </form>
  <script>
    function generateSlug(event) {
      const slug = event.target.value.toLowerCase().replaceAll(/\s+/g, '_');
      event.target.form.elements.name.value = slug;
    }
  </script>

  <h2>Start creating annotations</h2>
  <p>
    Open a collection, then ‘subscribe’ to it in your annotation-enabled browser. You can then choose to create new annotations in this collection.
  </p>
</details>

{{#each collections}}
  <p>
    <a href='{{name}}/'>{{#if label}}{{label}}{{else}}{{name}}{{/if}}</a>
  </p>
{{/each}}