-
Notifications
You must be signed in to change notification settings - Fork 22
/
homepage.templ
288 lines (285 loc) · 17.6 KB
/
homepage.templ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
package main
type HomePageParams struct {
HeadParams
Npubs []string
LastNotes []string
}
templ homepageTemplate(params HomePageParams) {
<!DOCTYPE html>
<html class="theme--default font-light">
<meta charset="UTF-8"/>
<head>
<title>njump - jump on board on Nostr, start now!</title>
<meta name="description" content=""/>
@headCommonTemplate(params.HeadParams)
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
</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 block sm:flex sm:flex-col sm:items-center sm:justify-center sm:px-0"
>
<div
class="w-full px-4 max-w-screen-2xl sm:flex sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12 print:w-full"
>
<!-- Title nimation -->
<div class="mb-10 px-4 sm:mb-20 mt-8 border-l-[0.8rem] border-strongpink pl-4">
<h1 class="font-bold">
<div class="text-[3.5em] sm:text-[4em] leading-[1em] text-neutral-300">
NOSTR <span class="text-neutral-400">IS</span>
</div>
<div class="text-[2.5em] h-20 sm:h-auto sm:text-[5em] leading-[1em] break-words" id="tw">A PROTOCOL</div>
<script>
var tw = document.getElementById('tw')
new Typewriter(tw, {
strings: [
'',
'A PROTOCOL',
'MANY PLATFORMS',
'FREEDOM',
'A SOCIAL PLACE',
'UNCENSORED',
'REALLY WEIRD',
'FULL OF ENERGY',
'UNIVERSAL',
'YOUR HAPPINESS',
'PERMISSIONLESS',
'HEALTHY',
'OPEN SOURCE',
'COOL TO DEVELOP',
'RESILIENT',
'YOUR NEXT IDEA',
'.......'
],
autoStart: true,
loop: true,
cursorClassName: 'typewriter-cursor'
})
</script>
</h1>
</div>
</div>
<div
class="w-full px-4 max-w-screen-2xl sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12 sm:gap-10 print:w-full"
>
<!-- Intro -->
<div class="sm:flex sm:gap-20">
<div>
<h2 class="text-4xl text-strongpink">Freedom at risk</h2>
<div class="text-xl mt-2">The original principles of the internet, rooted in decentralization, user empowerment, openness, collaboration, and freedom of expression, were not designed to be dominated by centralized control systems led by governments and capitalist markets.</div>
<div class="mt-2 text-neutral-500 dark:text-neutral-300">Current social networks such as Twitter, Threads and Instagram struggle with challenges of censorship, user bans, server closures, and spam. This underscores the necessity for a decentralized, censorship-resistant, and user-centric social network.</div>
</div>
<div class="mt-8 sm:mt-0">
<h2 class="text-4xl text-strongpink">The Nostr revolution</h2>
<div class="text-xl mt-2">Nostr, acronym for “Notes and Other Stuff Transmitted by Relays”, revolutionizes social networking and online communication by eliminating dependency of centralized servers.It employs a client-relay model, where users run clients, and anyone can operate relays.</div>
<div class="mt-2 text-neutral-500 dark:text-neutral-300">This protocol ensures tamperproof communication through cryptographic keys and signatures. By enabling users to establish pathways and publish notes to relays and incentivizing relay operators, Nostr addresses many shortcomings of existing systems.</div>
</div>
</div>
<!-- Main section -->
<div id="why-nostr" class="mt-16 mb-12 sm:text-center">
<div class="text-4xl text-strongpink">Empowering freedom in Nostr</div>
<div class="text-2xl">A secure, user-centric protocol and social network</div>
</div>
<div class="sm:flex sm:gap-20 mt-8 sm:mt-20 items-center">
<div class="sm:w-1/2">
<h3 class="text-2xl mb-4 text-strongpink">You own your identity, signed</h3>
<p>Nostr uses a public key system, where your identity is tied to a unique cryptographic key. You have full control over your identity without relying on a central authority. Nostr's protocol eliminates the need for Know Your Customer (KYC) processes. No email, ID, thumbprint, or eyeball scans required. Your privacy is entirely yours to safeguard.</p>
</div>
<div class="sm:w-1/2 mt-4 sm:mt-0">
<img class="dark:hidden" src="/njump/static/home/home01.png"/>
<img class="hidden dark:inline" src="/njump/static/home/home01-dark.png"/>
</div>
</div>
<div class="sm:flex sm:flex-row-reverse sm:gap-20 mt-8 sm:mt-20 items-center">
<div class="sm:w-1/2">
<h3 class="text-2xl mb-4 text-strongpink">You own your data, signed</h3>
<p>Users sign their posts with their cryptographic keys in Nostr. This cryptographic signature ensures the authenticity of your data, and you maintain ownership over it. Each client validates these signatures, ensuring data integrity. Users select relays for data exchange, and relays communicate directly with users, not with each other.</p>
</div>
<div class="sm:w-1/2 mt-4 sm:mt-0">
<img class="dark:hidden" src="/njump/static/home/home02.png"/>
<img class="hidden dark:inline" src="/njump/static/home/home02-dark.png"/>
</div>
</div>
<div class="sm:flex sm:gap-20 mt-8 sm:mt-20 items-center">
<div class="sm:w-1/2">
<h3 class="text-2xl mb-4 text-strongpink">You own your audience</h3>
<p>In Nostr, you have full control over your audience. Users choose their preferred relay servers and can recommend relays to maintain their follower base, even if they switch relays. Additionally, users can mute other users, words, and contents (if the feature is available), shaping their social media feed according to their preferences.</p>
</div>
<div class="sm:w-1/2 mt-4 sm:mt-0">
<img class="dark:hidden" src="/njump/static/home/home03.png"/>
<img class="hidden dark:inline" src="/njump/static/home/home03-dark.png"/>
</div>
</div>
<div class="sm:flex sm:flex-row-reverse sm:gap-20 mt-8 sm:mt-20 items-center">
<div class="sm:w-1/2">
<h3 class="text-2xl mb-4 text-strongpink">You are free to speak</h3>
<p>You can publish anything you want as long as relays are willing to accept it. If no one accepts what you have to say you can easily run your own relay. Relays can ban some users from publishing to them, but if you have people that follow you can always find another relay to publish to and your follower clients should be capable of finding you there and continue to get your updates.</p>
</div>
<div class="sm:w-1/2 mt-4 sm:mt-0">
<img class="dark:hidden" src="/njump/static/home/home04.png"/>
<img class="hidden dark:inline" src="/njump/static/home/home04-dark.png"/>
</div>
</div>
<div class="sm:flex sm:gap-20 mt-8 sm:mt-20 items-center">
<div class="sm:w-1/2">
<h3 class="text-2xl mb-4 text-strongpink">You are free to be anonymous</h3>
<p>Nostr supports user anonymity. Users can choose to be anonymous or use pseudonyms without compromising their ability to participate. Nostr is also available On TOR that prevents tracking of users. Nostr does not have the capacity to provide user data to governments, safeguarding users' freedom of expression from prohibitions or restrictions.</p>
</div>
<div class="sm:w-1/2 mt-4 sm:mt-0">
<img class="dark:hidden" src="/njump/static/home/home05.png"/>
<img class="hidden dark:inline" src="/njump/static/home/home05-dark.png"/>
</div>
</div>
<div class="sm:flex sm:flex-row-reverse sm:gap-20 mt-8 sm:mt-20 items-center">
<div class="sm:w-1/2">
<h3 class="text-2xl mb-4 text-strongpink">You are free to develop</h3>
<p>Nostr encourages development and customization. Users are free to develop on the platform, contributing to the growth and evolution of the network. Anyone can build on Nostr, creating clients, relays, tools, and apps. Users have the freedom to establish payment methods for their features, providing developers with a potential source of revenue.</p>
</div>
<div class="sm:w-1/2 mt-4 sm:mt-0">
<img class="dark:hidden" src="/njump/static/home/home06.png"/>
<img class="hidden dark:inline" src="/njump/static/home/home06-dark.png"/>
</div>
</div>
</div>
<!-- Get started -->
<div id="getstarted" class="relative px-4 sm:px-0 sm:flex mt-20 py-14 sm:py-28 justify-center bg-gradient-to-br from-slate-600 to-slate-900 text-neutral-50 dark:from-slate-700 dark:to-slate-950">
<div class="w-full max-w-screen-2xl sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12">
<h2 class="text-4xl mb-10 sm:mb-12">Get started with Nostr</h2>
<div class="sm:flex sm:flex-row sm:flex-wrap sm:w-4/5">
<div class="sm:basis-1/2 sm:pr-20 mb-8">
<h3 class="text-2xl mb-1 text-strongpink">Create an account</h3>
<p>With Nostr there is not a central provider that give you an account, in fact your account is powered just by cryptography, and you could create one (or more!) yourself by hand, without any limit. But usually the easiest way is to use a <a href="#social" class="underline">Nostr app</a> to bootstrap a new account and then use it everywhere.</p>
</div>
<div class="sm:basis-1/2 sm:pr-20 mb-8">
<h3 class="text-2xl mb-1 text-strongpink">Secure your key</h3>
<p>An account is a key-pair. The private key (nsec) is your digital identity, if you lose or leak it, you are burned; so you need to keep your key-pair secure and private. Use a password manager, make a backup on paper and use it only in trusted apps. Never enter your nsec in a website, install a <a href="#signers" class="underline">signer extension</a>.</p>
</div>
<div class="sm:basis-1/2 sm:pr-20 mb-8 sm:mb-0">
<h3 class="text-2xl mb-1 text-strongpink">Pick an app</h3>
<p>Nostr developers already have built several applications that cover different areas; probably the easiest way to start using Nostr and learn more is downloading a <a href="#social" class="underline">social client</a> and start getting involved with the community and learn more. Need help? Use the #asknostr hashtag!</p>
</div>
<div class="sm:basis-1/2 sm:pr-20 mb-8 sm:mb-0">
<h3 class="text-2xl mb-1 text-strongpink">Explore Nostr</h3>
<p>After you are familiar with the basic concepts you can explore other social clients and other <a href="#readwrite" class="underline">Nostr applications</a>; your already have your digital identity and it works everywhere, so you can simply login in using your nsec. As usual be sure that the app is from a trusted source!</p>
</div>
</div>
</div>
<div class="justify-end -mr-4 sm:-mr-0 sm:absolute flex sm:flex-row-reverse sm:top-1/2 sm:right-0 sm:transform sm:-translate-y-1/2 sm:w-1/4">
<img src="/njump/static/home/client.png" class="sm:h-full sm:object-cover" alt="Nostr Client"/>
</div>
</div>
<!-- Resources -->
<div
id="resources"
class="w-full px-4 py-14 sm:py-28 max-w-screen-2xl sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12 sm:gap-10 print:w-full"
>
<div id="why-nostr" class="mb-10 sm:mb-12 text-center">
<div class="text-4xl text-strongpink">Nostr resources</div>
<div class="text-2xl">Discover how many things you can do with Nostr</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-y-8 sm:gap-x-8 sm:gap-y-12">
<div class="sm:basis-1/3 text-center bg-neutral-200/50 dark:bg-neutral-700/60 rounded-md p-8">
<h2 id="social" class="text-2xl text-strongpink">Microblogging</h2>
<a href="https://apps.apple.com/us/app/damus/id1628663131" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Damus</h3>
</a>
<a href="https://coracle.social" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Coracle</h3>
</a>
<a href="https://github.com/mikedilger/gossip" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Gossip</h3>
</a>
</div>
<div class="sm:basis-1/3 text-center bg-neutral-200/50 dark:bg-neutral-700/60 rounded-md p-8">
<h2 id="readwrite" class="text-2xl text-strongpink">Long-form</h2>
<a href="https://habla.news" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Habla</h3>
</a>
<a href="https://yakihonne.com" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Yakihonne</h3>
</a>
<a href="https://shipyard.pub" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Shipyard</h3>
</a>
</div>
<div class="sm:basis-1/3 text-center bg-neutral-200/50 dark:bg-neutral-700/60 rounded-md p-8">
<h2 class="text-2xl text-strongpink">Streaming</h2>
<a href="https://nostrnests.com" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Nests</h3>
</a>
<a href="https://zap.stream" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Zap.stream</h3>
</a>
<a href="https://stemstr.app" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Stemstr</h3>
</a>
</div>
<div class="sm:basis-1/3 text-center bg-neutral-200/50 dark:bg-neutral-700/60 rounded-md p-8">
<h2 class="text-2xl text-strongpink">Community</h2>
<a href="https://highlighter.com" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Highlighter</h3>
</a>
<a href="https://www.flockstr.com" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Flockstr</h3>
</a>
<a href="https://creatr.nostr.wine/" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Creatr</h3>
</a>
</div>
<div class="sm:basis-1/3 text-center bg-neutral-200/50 dark:bg-neutral-700/60 rounded-md p-8">
<h2 class="text-2xl text-strongpink">Other Stuff</h2>
<a href="https://blowater.app" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Blowater</h3>
</a>
<a href="https://play.google.com/store/apps/details?id=com.vitorpamplona.amethyst&hl=en&gl=US" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Amethyst</h3>
</a>
<a href="https://www.flare.pub" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Flare</h3>
</a>
</div>
<div class="sm:basis-1/3 text-center bg-neutral-200/50 dark:bg-neutral-700/60 rounded-md p-8">
<h2 id="signers" class="text-2xl text-strongpink">Key Management</h2>
<a href="https://chromewebstore.google.com/detail/nos2x/kpgefcfmnafjgpblomihpgmejjdanjjp" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">nos2x</h3>
</a>
<a href="https://github.com/greenart7c3/Amber" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">Amber</h3>
</a>
<a href="https://nsec.app" class="group bg-slate-200" target="_blank">
<h3 class="text-xl mt-4 group-hover:text-strongpink">nsec.app</h3>
</a>
</div>
</div>
<div class="mt-12 text-center">This is only a quick selection of the 80+ applications that have already been built on Nostr, <a class="underline" href="https://www.nostrapps.com" target="_blank">discover them all</a>!</div>
</div>
<!-- Develop on Nostr -->
<div id="development" class="relative px-4 sm:px-0 sm:flex mb-20 py-14 sm:py-28 justify-center bg-gradient-to-br from-sky-100 to-purple-100 dark:from-slate-700 dark:to-slate-950 dark:text-neutral-50">
<div class="w-full max-w-screen-2xl sm:w-11/12 sm:px-4 md:w-10/12 lg:w-9/12">
<h2 class="text-4xl mb-10 sm:mb-12 sm:text-center">Develop on Nostr</h2>
<div class="sm:flex sm:gap-20">
<div class="basis-1/3">
<h2 class="text-2xl text-strongpink">Where it all started</h2>
<div class="mt-2">The Nostr "manifesto" was published in 2019 and slowly but surely the community gathered around the idea and expanded it, turning it into a fast, flexible and usable protocol that is used by real people everyday.</div>
<a class="block underline mt-2 text-right" href="https://fiatjaf.com/nostr.html" target="_blank">Read more >></a>
</div>
<div class="basis-1/3">
<h2 class="text-2xl text-strongpink">Discover the NIPs</h2>
<div class="mt-2">NIPs stand for "Nostr Implementation Possibilities", they exist to document what may be implemented by Nostr compatible relay and client software; study them to develop your new Nostr application.</div>
<a class="block underline mt-2 text-right" href="https://github.com/nostr-protocol/nips" target="_blank">Read more >></a>
</div>
<div class="basis-1/3">
<h2 class="text-2xl text-strongpink">The design guide</h2>
<div class="mt-2">Nostrdesign.org is the official resource with which you can discover how to best develop the interface for your Nostr application, discover new paradigms and optimise the UI and user experience.</div>
<a class="block underline mt-2 text-right" href="https://nostrdesign.org/" target="_blank">Read more >></a>
</div>
</div>
</div>
</div>
</div>
@footerTemplate()
</body>
</html>
}