item.html

---
layout: default
---

<div x-data="{story: { }}" x-init="story = await getItem(getParam(document.location.search, 'id').slice(0, -5))">

  <div class="story-title">
    <template x-if="story.hasOwnProperty('domain')">
      <div>
        <a :href="story.url" target="_blank" rel="noopener noreferrer">
          <h1 x-text="story.title" class="text-bold"></h1>
        </a>
        <a x-text="story.domain" :href="story.url"></a>
      </div>
    </template>

    <template x-if="!story.hasOwnProperty('domain')">
      <h1 x-text="story.title" class="text-bold"></h1>
    </template>
    
    <br>
    
    <p>
      <span x-text="story.points"></span>
      <span> points by </span>
      <a :href="getUserLink(story.user)">
        <span x-text="story.user" class="text-underline"></span>
      </a>
      <span> | </span>
      <span x-text="story.time_ago"></span>
      <span> | </span>
      <span x-text="story.comments_count"></span>
      <span> comments</span>
    </p>
  </div>

  <br>
  <h2>Comments</h2>

  <template x-for="comment in getComments(story)">
    <div class="my-1" x-init="style = { marginLeft: `${comment.level * 1.5}rem`}">
      <div class="comment" :style="style">
        <p class="text-bold comment-head">
          <a :href="getUserLink(comment.user)"><span x-text="comment.user" class="text-underline"></span></a>
          <span x-text="comment.time_ago"></span>
        </p>
        <div x-html="comment.content"></div>
      </div>
    </div>
  </template>
  
  <div class="text-center" x-cloak>
    <!-- <span>AJHN | </span>
    <span> -->
      <a href="/about" class="text-underline">About</a>
    <!-- </span> -->
  </div>
</div>