mirror of
https://github.com/aljazceru/njump.git
synced 2026-01-18 05:44:26 +01:00
228 lines
9.6 KiB
HTML
228 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html class="theme--default">
|
|
<meta charset="UTF-8" />
|
|
<head>
|
|
<title>njump - the nostr static gateway</title>
|
|
<meta name="description" content="" />
|
|
|
|
{{template "head_common" .}}
|
|
</head>
|
|
|
|
<body class="homepage">
|
|
{{template "top" .}}
|
|
|
|
<div
|
|
class="block sm:flex sm:justify-center sm:items-center mx-auto px-4 sm:px-0"
|
|
>
|
|
<div
|
|
class="flex w-full sm:w-9/12 px-4 justify-between overflow-visible gap-10 lg:gap-20 print:w-full"
|
|
>
|
|
<div>
|
|
<h2 class="text-strongpink text-2xl">What 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 }}/<nip-19-entity></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">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">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">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">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">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">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 }}/<nip-5></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">
|
|
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">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/<relay-host></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">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>
|