mirror of
https://github.com/aljazceru/njump.git
synced 2025-12-17 06:14:22 +01:00
250 lines
10 KiB
Plaintext
250 lines
10 KiB
Plaintext
package main
|
|
|
|
type AboutParams struct {
|
|
HeadParams
|
|
}
|
|
|
|
templ aboutTemplate(params AboutParams) {
|
|
<!DOCTYPE html>
|
|
<html class="theme--default font-light">
|
|
<meta charset="UTF-8"/>
|
|
<head>
|
|
<title>njump - the nostr static gateway</title>
|
|
<meta name="description" content=""/>
|
|
@headCommonTemplate(params.HeadParams)
|
|
</head>
|
|
<body class="mb-16 bg-white text-gray-600 dark:bg-neutral-900 dark:text-neutral-50 print:text-black">
|
|
@topTemplate(params.HeadParams)
|
|
<div class="mx-auto sm:mt-8 block px-4 sm:flex sm:items-center sm:justify-center sm:px-0">
|
|
<div class="w-full max-w-screen-2xl justify-between gap-10 overflow-visible print:w-full sm:flex sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12">
|
|
<div>
|
|
<h2 class="text-2xl text-strongpink">What is njump?</h2>
|
|
<p class="my-3 leading-5">
|
|
<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="my-3 leading-5">
|
|
<i>njump</i> currently lives under { s.Domain }, 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 bg-lavender px-1 dark:bg-garnet">
|
|
{ s.Domain }/<nip-19-entity>
|
|
</span>.
|
|
</p>
|
|
<p class="my-3 leading-5">
|
|
For example, here's
|
|
<a
|
|
class="underline"
|
|
href="/npub1sn0wdenkukak0d9dfczzeacvhkrgz92ak56egt7vdgzn8pv2wfqqhrjdv9"
|
|
>
|
|
a user profile
|
|
</a>,
|
|
<a
|
|
class="underline"
|
|
href="/nevent1qqstnl4ddmhc0kzqpj7p543pvq9nvppc4laewc9x5ppucz7aagsa4dspzemhxue69uhhyetvv9ujumn0wd68ytnzv9hxgqgewaehxw309ac8junpd45kgtnxd9shg6npvchxxmmdqyv8wumn8ghj7un9d3shjtnndehhyapwwdhkx6tpdsds02v2"
|
|
>
|
|
a note
|
|
</a>
|
|
and a
|
|
<a
|
|
class="underline"
|
|
href="/naddr1qqxnzd3cxqmrzv3exgmr2wfeqy08wumn8ghj7mn0wd68yttsw43zuam9d3kx7unyv4ezumn9wshszyrhwden5te0dehhxarj9ekk7mf0qy88wumn8ghj7mn0wvhxcmmv9uq3zamnwvaz7tmwdaehgu3wwa5kuef0qy2hwumn8ghj7un9d3shjtnwdaehgu3wvfnj7q3qdergggklka99wwrs92yz8wdjs952h2ux2ha2ed598ngwu9w7a6fsxpqqqp65wy2vhhv"
|
|
>
|
|
long blog post
|
|
</a>
|
|
.
|
|
</p>
|
|
<h2 class="text-xl text-strongpink">
|
|
Try it now, jump to some Nostr content
|
|
</h2>
|
|
<div
|
|
class="my-3 mb-8 rounded-lg bg-zinc-100 p-4 pb-3 dark:bg-neutral-900 sm:p-6 sm:pb-4"
|
|
>
|
|
<form
|
|
_="on submit halt the event's default then go to url `/${event.target.code.value}`"
|
|
>
|
|
<div
|
|
class="flex flex-wrap items-center justify-center sm:flex-nowrap sm:justify-normal"
|
|
>
|
|
<div class="mb-1.5 text-xl sm:mb-0">{ s.Domain }/</div>
|
|
<input
|
|
name="code"
|
|
placeholder="paste a npub / nprofile / nevent / ..."
|
|
autofocus
|
|
class="ml-0 w-full basis-full rounded-lg border-0 bg-white p-2 text-base text-gray-700 placeholder:text-gray-300 focus:outline-0 dark:bg-zinc-900 dark:text-neutral-50 dark:placeholder:text-gray-400 sm:ml-1 sm:basis-11/12 sm:rounded-s-lg"
|
|
/>
|
|
<button
|
|
class="ml-0 w-full basis-full rounded-lg border-0 bg-strongpink p-2 text-base uppercase text-white sm:-ml-4 sm:basis-2/12 sm:rounded-s-lg"
|
|
>
|
|
View
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<div class="mt-3 text-center text-sm sm:mt-1 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="my-3 leading-5">
|
|
There are several reasons to choose <i>njump</i> when sharing Nostr
|
|
content outside of Nostr:
|
|
</p>
|
|
<h2 class="mt-7 text-2xl text-strongpink">Clean, fast and solid</h2>
|
|
<p class="my-3 leading-5">
|
|
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 unnecessary 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="mt-7 text-2xl text-strongpink">Good preview</h2>
|
|
<p class="my-3 leading-5">
|
|
<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="my-3 leading-5">
|
|
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="mt-7 text-2xl text-strongpink">Cooperative (jump-out)</h2>
|
|
<p class="my-3 leading-5">
|
|
<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> prefix 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="my-3 leading-5">
|
|
<a class="underline" href="https://github.com/nostr-protocol/nips/blob/master/89.md">NIP-89</a>
|
|
support coming!
|
|
</p>
|
|
<h2 class="mt-7 text-2xl text-strongpink">
|
|
Search friendly (jump-in)
|
|
</h2>
|
|
<p class="my-3 leading-5">
|
|
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="mt-7 text-2xl text-strongpink">Share NIP-05 profiles</h2>
|
|
<p class="my-3 leading-5">
|
|
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 bg-lavender px-1 dark:bg-garnet">
|
|
{ s.Domain }/<nip-05>
|
|
</span>
|
|
, for example:
|
|
<a class="underline" href="/nvk.org">https://{ s.Domain }/nvk.org</a>
|
|
or
|
|
<a class="underline" href="/mike@mikedilger.com">
|
|
https://{ s.Domain }/mike@mikedilger.com
|
|
</a>
|
|
.
|
|
</p>
|
|
<p class="my-3 leading-5">
|
|
A profile shows the basic metadata infos, the used "outbox" relays
|
|
and the last notes.
|
|
</p>
|
|
<h2 class="mt-7 text-2xl text-strongpink">
|
|
Share on Twitter and Telegram
|
|
</h2>
|
|
<p class="my-3 leading-5">
|
|
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="mt-7 text-2xl text-strongpink">Relays view</h2>
|
|
<p class="my-3 leading-5">
|
|
You can have a view of the last content posted to a relay using
|
|
<span class="rounded bg-lavender px-1 dark:bg-garnet">
|
|
{ s.Domain }/r/<relay-host>
|
|
</span>
|
|
, for example:
|
|
<a class="underline" href="/r/nostr.wine">
|
|
https://{ s.Domain }/r/nostr.wine
|
|
</a>
|
|
</p>
|
|
<p class="my-3 leading-5">
|
|
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="mt-7 text-2xl text-strongpink">Website widgets</h2>
|
|
<div class="my-3 leading-5">
|
|
You can embed notes, long form contents and profiles in a web page
|
|
with a simple script:
|
|
<br/>
|
|
<span class="rounded bg-lavender px-1 dark:bg-garnet">
|
|
<script src="https://{ s.Domain }/embed/<nip-19-entity>"
|
|
/>
|
|
</span>
|
|
<div class="mt-4 gap-8 sm:flex">
|
|
<div class="mb-4 flex-auto sm:mb-0">
|
|
<script src="/embed/npub1sn0wdenkukak0d9dfczzeacvhkrgz92ak56egt7vdgzn8pv2wfqqhrjdv9"></script>
|
|
</div>
|
|
<div class="flex-auto">
|
|
<script src="/embed/naddr1qqxnzd3cxqmrzv3exgmr2wfeqy08wumn8ghj7mn0wd68yttsw43zuam9d3kx7unyv4ezumn9wshszyrhwden5te0dehhxarj9ekk7mf0qy88wumn8ghj7mn0wvhxcmmv9uq3zamnwvaz7tmwdaehgu3wwa5kuef0qy2hwumn8ghj7un9d3shjtnwdaehgu3wvfnj7q3qdergggklka99wwrs92yz8wdjs952h2ux2ha2ed598ngwu9w7a6fsxpqqqp65wy2vhhv"></script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 class="mt-7 text-2xl text-strongpink">Inspector tool</h2>
|
|
<p class="my-3 leading-5">
|
|
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>
|
|
@footerTemplate()
|
|
</body>
|
|
</html>
|
|
}
|