<!DOCTYPE html>
<html class="theme--default font-light">
  <meta charset="UTF-8" />
  <head>
    <title>njump - the nostr static gateway</title>
    <meta name="description" content="" />

    {{template "head_common" .HeadCommonPartial}}
  </head>

  <body
    class="mb-16 print:text-black text-gray-600 dark:text-neutral-50 bg-white dark:bg-neutral-800"
  >
    {{template "top" .}}

    <div
      class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0 mt-8"
    >
      <div
        class="flex w-full sm:w-3/5 px-4 justify-between overflow-visible gap-10 lg:gap-48vw max-w-screen-2xl print:w-full"
      >
        <div>
          <h2 class="text-strongpink text-2xl">What mt-7 is njump?</h2>

          <p class="leading-5 my-3">
            <i>njump</i> is a HTTP
            <a class="underline" href="https://github.com/nostr-protocol/nostr"
              >Nostr</a
            >
            gateway that allows you to browse profiles, notes and relays; it is
            an easy way to preview a resource and then open it with your
            preferred client. The typical use of <i>njump</i> is to share a
            resource outside the Nostr world, where the
            <code>nostr:</code> schema is not (yet) working.
          </p>
          <p class="leading-5 my-3">
            <i>njump</i> currently lives under {{ .Host }}, you can reach it
            appending a Nostr
            <a
              class="underline"
              href="https://github.com/nostr-protocol/nips/blob/master/19.md"
              >NIP-19</a
            >
            entity (<code>npub</code>, <code>nevent</code>, <code>naddr</code>,
            etc) after the domain:
            <span class="rounded px-1 bg-lavender dark:bg-garnet"
              >{{ .Host }}/&lt;nip-19-entity&gt;</span
            >.
          </p>
          <p class="leading-5 my-3">
            For example, here's
            <a
              href="/npub180cvv07tjdrrgpa0j7j7tmnyl2yr6yr7l8j4s3evf6u64th6gkwsyjh6w6"
              >a user</a
            >
            <a
              href="/npub10000003zmk89narqpczy4ff6rnuht2wu05na7kpnh3mak7z2tqzsv8vwqk"
              >profile</a
            >,
            <a
              href="/nevent1qqs860kwt3m500hfnve6vxdpagkfqkm6hq03dnn2n7u8dev580kd2uszyztuwzjyxe4x2dwpgken87tna2rdlhpd02va5cvvgrrywpddnr3jydc2w4t"
              >a note</a
            >
            and a
            <a
              href="/naddr1qqxnzd3cxqmrzv3exgmr2wfeqy08wumn8ghj7mn0wd68yttsw43zuam9d3kx7unyv4ezumn9wshszyrhwden5te0dehhxarj9ekk7mf0qy88wumn8ghj7mn0wvhxcmmv9uq3zamnwvaz7tmwdaehgu3wwa5kuef0qy2hwumn8ghj7un9d3shjtnwdaehgu3wvfnj7q3qdergggklka99wwrs92yz8wdjs952h2ux2ha2ed598ngwu9w7a6fsxpqqqp65wy2vhhv"
              >long blog post</a
            >.
          </p>

          <h2 class="text-strongpink text-xl">
            Try it now, jump to some Nostr content
          </h2>

          <div
            class="my-3 mb-8 p-4 pb-3 sm:p-6 sm:pb-4 rounded-lg bg-zinc-100 dark:bg-neutral-800"
          >
            <form
              _="on submit halt the event's default then go to url `/${event.target.code.value}`"
            >
              <div
                class="flex items-center flex-wrap sm:flex-nowrap justify-center sm:justify-normal"
              >
                <div class="text-xl mb-1.5 sm:mb-0">{{ .Host }}/</div>
                <input
                  name="code"
                  placeholder="paste a npub / nprofile / nevent / ..."
                  autofocus
                  class="basis-full sm:basis-11/12 w-full text-base p-2 ml-0 sm:ml-1 border-0 rounded-lg sm:rounded-s-lg focus:outline-0 bg-white text-gray-700 dark:bg-zinc-900 dark:text-neutral-50 placeholder:text-gray-300 dark:placeholder:text-gray-400"
                />
                <button
                  class="uppercase basis-full sm:basis-2/12 w-full text-base p-2 rounded-lg sm:rounded-s-lg text-white ml-0 sm:-ml-4 border-0 bg-strongpink"
                >
                  View
                </button>
              </div>
            </form>
            <div class="mt-3 sm:mt-1 text-sm text-center sm:text-left">
              or pick
              <a
                class="underline"
                href="/random"
                _="on click halt the event then fetch /random with method:'POST' then tell <input[name='code'] /> set @value to result"
                >some random content</a
              >
            </div>
          </div>

          <p class="leading-5 my-3">
            There are several reasons to choose <i>njump</i> when sharing Nostr
            content outside of Nostr:
          </p>

          <h2 class="text-strongpink text-2xl mt-7">Clean, fast and solid</h2>
          <p class="leading-5 my-3">
            Pages by <i>njump</i> are extremely lightweight and fast to load
            because there isn't any client side javascript involved; they are
            minimalistic with the right attention to typography, focusing the
            content without unecessary details. Furthermore they are cached, so
            when sharing a page you can expect the other part will load it
            without any glitch in a fraction of second: the perfect tool to
            onboard new users!
          </p>

          <h2 class="text-strongpink text-2xl mt-7">Good preview</h2>
          <p class="leading-5 my-3">
            <i>njump</i> renders everything on the server-side, so it is able to
            generate useful rich previews that work on Telegram, Discord,
            Twitter and other places.
          </p>
          <p class="leading-5 my-3">
            When opening the URL directly in a browser, visitors will find
            referenced content like images, video and links to referenced Nostr
            events displayed in a simple but effective way. It shows the note
            parent, allowing the visitor to follow it up and it has custom CSS
            for printing or exporting to PDF.
          </p>

          <h2 class="text-strongpink text-2xl mt-7">Cooperative (jump-out)</h2>
          <p class="leading-5 my-3">
            <i>njump</i> is not interested capturing users at all, on the
            contrary it invites them to "jump" to the Nostr resource by picking
            from a list of web clients or with a <code>nostr:</code> for native
            clients. It even remembers the most used one for each visitor and
            puts it on the top for fast clicking or tap.
          </p>
          <p class="leading-5 my-3">
            <a
              class="underline"
              href="https://github.com/nostr-protocol/nips/blob/master/89.md"
              >NIP-89</a
            >
            support coming!
          </p>

          <h2 class="text-strongpink text-2xl mt-7">Search friendly (jump-in)</h2>
          <p class="leading-5 my-3">
            This is crucial: <i>njump</i> pages are static so search engines can
            index them, this means that <i>njump</i> can help others to discover
            great content on Nostr, jump in and join us! <i>njump</i> is the
            only nostr resource that has this explicit goal, if you care that a
            good note can be found online use <i>njump</i> to share it, this way
            you also help Nostr flourish.
          </p>

          <h2 class="text-strongpink text-2xl mt-7">Share NIP-05 profiles</h2>
          <p class="leading-5 my-3">
            Now you can share your own profile with a pretty
            <a
              class="underline"
              href="https://github.com/nostr-protocol/nips/blob/master/05.md"
              >NIP-05</a
            >
            inspired permalink:
            <span class="rounded px-1 bg-lavender dark:bg-garnet"
              >{{ .Host }}/&lt;nip-5&gt;</span
            >, for example:
            <a class="underline" href="/nvk.org">https://{{ .Host }}/nvk.org</a>
            or
            <a class="underline" href="/mike@mikedilger.com"
              >https://{{ .Host }}/mike@mikedilger.com</a
            >.
          </p>
          <p class="leading-5 my-3">
            A profile shows the basic metadata infos, the used "outbox" relays
            and the last notes.
          </p>

          <h2 class="text-strongpink text-2xl mt-7">
            Share on Twitter and Telegram
          </h2>
          <p class="leading-5 my-3">
            Now you can quickly and effortlessly share Nostr notes on Twitter
            and Telegram, and maybe on many other "social platforms": just drop
            a link, and njump will render the note text using the preview image
            as a canvas, to maximize the sharing experience and utility.<br />
            On Telegram we have also the Instant View to access long content
            in-app!
          </p>

          <h2 class="text-strongpink text-2xl mt-7">Relays view</h2>
          <p class="leading-5 my-3">
            You can have a view of the last content posted to a relay using
            <span class="rounded px-1 bg-lavender dark:bg-garnet"
              >{{ .Host }}/r/&lt;relay-host&gt;</span
            >, for example:
            <a class="underline" href="/r/nostr.wine"
              >https://{{ .Host }}/r/nostr.wine</a
            >
          </p>
          <p class="leading-5 my-3">
            Some basic infos (<a
              href="https://github.com/nostr-protocol/nips/blob/master/11.md"
              >NIP-11</a
            >) are available; We hope operators will start to make them more
            personal and informative so users can have a way to evaluate if/when
            to join a relay.
          </p>

          <h2 class="text-strongpink text-2xl mt-7">Inspector tool</h2>
          <p class="leading-5 my-3">
            You know, we are all programmers, including our moms, so for every
            <i>njump</i> page you can toggle the "Show more details" switch and
            inspect the full event JSON. Without installing other tools (like
            <a class="underline" href="https://github.com/fiatjaf/nak">nak</a>)
            this is probably the fastest way to access that.
          </p>
        </div>
      </div>
    </div>

    {{template "footer" .}}
  </body>
</html>
