<style>
  article {
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: 1rem;
  }

  article p {
    margin-bottom: 1rem;
    font-size: 1.05rem;
  }

  p {
    margin-top: 1rem;
  }

  article a {
    color: rgb(163 230 53);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
  }

  h1,
  h2,
  h3,
  h4 {
    margin-top: 1rem;
    margin-bottom: 0.3rem;
    font-weight: bold;
    font-family: samo;
    color: rgb(163 230 53);
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  h3 {
    margin-top: 1.1em;
    font-size: 1rem;
  }

  h3::before {
    content: "~ ";
  }

  ul {
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    list-style: square;
  }

  li {
    margin-bottom: 0.15rem;
  }

  article a {
    text-decoration: none;
  }

  article blockquote {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    border-left: 0.3rem solid rgb(163 230 53);
    color: rgb(142, 146, 150);
  }

  code {
    background: #2b282872;
    border: 1px solid #494242;
    border-radius: 0.2rem;
    font-weight: bold;
    border-left: 3px solid #89f333;
    color: #d3cccc;
    font-family: samo;
    max-width: 100%;
    overflow: scorll;
    padding: 1em 1em;
    display: block;
    word-wrap: break-word;
    max-width: 90vw;
    margin-top: 1em;
  }

  hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
</style>

<div id="main" class="flex flex-col justify-center items-center my-8">
  <article class="md:p-4 md:max-w-5xl font-inter">
    <div class="px-4 py-2 m-2 rounded-xl bg-gray-500/10">
      <h2 id="why" class="font-bold text-lime-400">
        how to use the nostr comments?
      </h2>
      <p>
        Start by reading
        <a target="_blank" href="https://usenostr.org" target="_blank"
          >the nostr basics</a
        >
        to understand how Nostr works.
      </p>

      <h3 id="creating an account" class="pt-4 w-full border-t border-white/20">
        creating an account
      </h3>

      <p>
        Creating a Nostr account is as easy as generating a private key. From
        the private key, your public key will be derived. The public key acts as
        your <b>username</b>.
      </p>

      <p>
        In this guide, we will use
        <a
          target="_blank"
          href="https://github.com/nostr-protocol/nips/blob/master/07.md"
          >Browser Signer Extensions</a
        >
        to generate the private key, these act as a vault for your private key,
        and Nostr apps will interact with the extension, issuing sign requests.
        This way, your private key never leaves your computer local storage.
      </p>

      <p>
        For this, I recommend you use
        <a target="_blank" href="https://github.com/reyamir/nostr-connect"
          >Nostr Connect</a
        >
        extension. Install it on
        <a
          target="_blank"
          href="https://chromewebstore.google.com/detail/nostr-connect/ampjiinddmggbhpebhaegmjkbbeofoaj"
          >Chrome</a
        >
        or
        <a
          target="_blank"
          href="https://addons.mozilla.org/en-US/firefox/addon/nostr-connect/"
          >Firefox</a
        >. You can also find a list of available Signers
        <a
          target="_blank"
          href="https://github.com/aljazceru/awesome-nostr#nip-07-browser-extensions"
          >here</a
        >.
      </p>

      <p>
        Then, open the extension, generate a private key and click save. That's
        all, you are now part of Nostr.
      </p>

      <p>Other ways to generate a key:</p>

      <ul>
        <li>
          Use key mining tools like
          <a target="_blank" href="https://github.com/grunch/rana">rana</a>.
        </li>
        <li>
          Use
          <a target="_blank" href="https://github.com/fiatjaf/noscl"
            >nostr CLI</a
          >
        </li>
        <li>
          Use platforms like
          <a target="_blank" href="https://primal.net">primal</a>,
          <a target="_blank" href="https://snort.social/">snort</a> or
          <a target="_blank" href="https://coracle.social/">coracle</a>.
        </li>
      </ul>

      <h3
        id="configure your profile"
        class="pt-4 w-full border-t border-white/20"
      >
        configure your profile
      </h3>

      <p>
        Visit
        <a target="_blank" href="https://metadata.nostr.com/"
          >Nostr Profile Manager</a
        >
        and configure your profile:
      </p>

      <ul>
        <li>Configure the Metadata fields.</li>
        <li>
          Add some relays. Check out
          <a target="_blank" href="https://nostr.watch">nostr.watch</a> for a
          list of relays.
        </li>
      </ul>

      <h3 id="logging in" class="pt-4 w-full border-t border-white/20">
        logging in
      </h3>

      <p>
        After your account is set up, you will be able to log in to any platform
        that uses the Nostr protocol. Go to any kycnot.me service page, and try
        to log into the comment section.
      </p>
    </div>
  </article>
</div>
