312 lines
No EOL
8.9 KiB
Svelte
312 lines
No EOL
8.9 KiB
Svelte
<script>
|
|
import 'websocket-polyfill';
|
|
import Container from '../Container.svelte';
|
|
import Widget from '../Widget.svelte';
|
|
import { chatAdapter } from '$lib/store';
|
|
|
|
let chatStarted;
|
|
let chatType = 'GLOBAL';
|
|
let websiteOwnerPubkey = 'fa984bd7dbb282f07e16e7ae87b26a2a7b9b90b7246a44771f0cf5ae58018f52';
|
|
let chatTags = ['bitcoin'];
|
|
let chatReferenceTags = [];
|
|
const relays = [
|
|
'wss://relay.f7z.io',
|
|
'wss://relay.nostr.info',
|
|
'wss://nostr-pub.wellorder.net',
|
|
'wss://relay.nos.lol',
|
|
'wss://nostr.walletofsatoshi.com',
|
|
'wss://relay.nostr.band',
|
|
];
|
|
|
|
$: currentTopic = [...chatTags, ...chatReferenceTags][0]
|
|
|
|
function currentTopic(topic) {
|
|
return [...chatTags, ...chatReferenceTags].includes(topic)
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Nostri.chat / A NOSTR chat widget you control</title>
|
|
<meta property="og:url" content="https://nostri.chat/">
|
|
<meta name="description" content="A chat widget you own, powered by nostr" />
|
|
<meta property="og:description" content="A chat widget you own, powered by nostr" />
|
|
</svelte:head>
|
|
|
|
<section class="
|
|
lg:min-h-screen
|
|
text-white
|
|
bg-gradient-to-b from-orange-500 to-orange-800
|
|
">
|
|
<div class="lg:min-h-screen mx-auto w-full lg:max-w-7xl py-5 xl:py-10
|
|
flex flex-col md:flex-row
|
|
gap-20 items-center px-4 lg:px-0
|
|
relative
|
|
">
|
|
<div class="
|
|
md:w-7/12 gap-10
|
|
">
|
|
<section id="hero" style="min-height: 50vh;">
|
|
<h1 class="
|
|
text-6xl
|
|
font-black
|
|
my-2
|
|
">Nostri.chat</h1>
|
|
|
|
<h2 class="
|
|
text-2xl lg:text-4xl
|
|
text-bold
|
|
">A chat widget for your site, powered by nostr</h2>
|
|
|
|
<p class="
|
|
max-w-prose
|
|
text-2xl
|
|
text-gray-200
|
|
tracking-wide
|
|
leading-9
|
|
my-5
|
|
">
|
|
Simple, interoperable
|
|
communication with your visitors, in a way
|
|
that gives you and them complete ownership
|
|
over the data.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="
|
|
flex-row items-center justify-center
|
|
min-h-screen
|
|
hidden md:flex
|
|
md:w-5/12
|
|
">
|
|
<div class="
|
|
shadow-2xl
|
|
bg-gray-100/90 backdrop-blur-md mb-5 w-96 max-w-screen-sm text-black rounded-3xl px-4 py-5 overflow-auto
|
|
flex flex-col justify-end
|
|
fixed
|
|
" style="{chatStarted ? 'max-height: 80vh;' : 'padding: 4rem 2rem !important;'}">
|
|
<Container chatConfiguration={{
|
|
chatType,
|
|
chatTags,
|
|
chatReferenceTags,
|
|
}} {relays} bind:chatStarted={chatStarted} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="
|
|
min-h-screen
|
|
py-5
|
|
lg:py-16
|
|
" style="min-height: 50vh;">
|
|
<div class="mx-auto w-full lg:max-w-7xl py-5 xl:py-10
|
|
flex flex-col lg:flex-row
|
|
gap-20 px-4 lg:px-0
|
|
" style="min-height: 50vh;">
|
|
<div class="md:w-7/12 flex flex-col gap-8">
|
|
<div>
|
|
<h1 class="text-6xl lg:text-7xl font-black">
|
|
Innovative modes
|
|
</h1>
|
|
|
|
<p class="
|
|
text-2xl font-extralight
|
|
">
|
|
Because we use Nostr for communicating,
|
|
<b>Nostri.chat</b>
|
|
can use some new, creative approaches to using chat widget,
|
|
depending on what you want to achieve.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<h2 class="text-3xl text-orange-600 font-black">
|
|
Classic mode
|
|
<span class="text-2xl text-slate-500 font-extralight block">encrypted 1-on-1 chats</span>
|
|
</h2>
|
|
|
|
<p class="
|
|
text-xl text-gray-500 text-justify
|
|
font-light
|
|
leading-8
|
|
">
|
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente quae eveniet placeat, obcaecati nesciunt nam iure. Culpa omnis hic eaque illum alias iure autem atque? Distinctio facilis recusandae omnis expedita.
|
|
</p>
|
|
|
|
{#if $chatAdapter}
|
|
{#if chatType === 'DM'}
|
|
<button class="px-4 rounded border-2 border-orange-700 py-2 text-orange-700 text-lg w-full font-semibold">
|
|
Active
|
|
</button>
|
|
{:else}
|
|
<button class="px-4 rounded bg-orange-700 py-2 text-white text-lg w-full font-semibold" on:click={()=>{ chatType='DM'; chatTags=[]; chatReferenceTags=[] }}>
|
|
Try it
|
|
</button>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3">
|
|
<h2 class="text-3xl text-orange-600 font-black">
|
|
<div class="flex flex-row gap-2">
|
|
<span>🔖</span>
|
|
<span class="flex flex-col">
|
|
<span>Tagged Global Chat</span>
|
|
<span class="text-2xl text-slate-500 font-extralight block">public discussion/support</span>
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</h2>
|
|
|
|
<p class="
|
|
text-xl text-gray-500 text-justify
|
|
font-light
|
|
leading-8
|
|
">
|
|
Imagine having a global chat on your website about a certain topic.
|
|
Anyone can participate, from your website or from any Nostr client.
|
|
</p>
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row justify-between mt-10 gap-10">
|
|
<div class="flex flex-col items-center gap-4 border p-4 shadow-md rounded-lg w-fit lg:w-full">
|
|
<h3 class="
|
|
text-black
|
|
text-lg
|
|
font-semibold
|
|
">🔖 Topic-based chats</h3>
|
|
|
|
<span class="inline-flex rounded-md">
|
|
<button type="button" class="
|
|
inline-flex items-center rounded-l-md border px-4 py-2 text-md font-medium
|
|
{currentTopic === 'nostrica' ?
|
|
'text-white bg-orange-700 border-orange-900'
|
|
:
|
|
'border-gray-300 bg-white text-gray-700'}
|
|
" on:click={()=>{ chatType='GLOBAL'; chatTags=['nostrica']; chatReferenceTags=[] }}>
|
|
#nostrica
|
|
</button>
|
|
|
|
<button type="button" class="
|
|
inline-flex items-center rounded-r-md border px-4 py-2 text-md font-medium
|
|
{currentTopic === 'bitcoin' ?
|
|
'text-white bg-orange-700 border-orange-900'
|
|
:
|
|
'border-gray-300 bg-white text-gray-700'}
|
|
" on:click={()=>{ chatType='GLOBAL'; chatTags=['bitcoin']; chatReferenceTags=[] }}>
|
|
#bitcoin
|
|
</button>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex flex-col items-center gap-4 border p-4 shadow-md rounded-lg w-fit lg:w-full">
|
|
<h3 class="
|
|
text-black
|
|
text-lg
|
|
font-semibold
|
|
">🌎 Website-based chats</h3>
|
|
<span class="inline-flex rounded-md">
|
|
<button type="button" class="
|
|
inline-flex items-center rounded-l-md border px-4 py-2 text-md font-medium
|
|
{currentTopic === 'https://nostri.chat' ?
|
|
'text-white bg-orange-700 border-orange-900'
|
|
:
|
|
'border-gray-300 bg-white text-gray-700'}
|
|
:ring-indigo-500"
|
|
on:click={()=>{ chatType='GLOBAL'; chatTags=[]; chatReferenceTags=['https://nostri.chat'] }}
|
|
>
|
|
<span class="opacity-50 font-normal">https://</span>nostri.chat
|
|
</button>
|
|
<button type="button" class="
|
|
inline-flex items-center rounded-r-md border px-4 py-2 text-md font-medium
|
|
{currentTopic === 'https://psbt.io' ?
|
|
'text-white bg-orange-700 border-orange-900'
|
|
:
|
|
'border-gray-300 bg-white text-gray-700'}
|
|
:ring-indigo-500"
|
|
on:click={()=>{ chatType='GLOBAL'; chatTags=[]; chatReferenceTags=['https://psbt.io'] }}
|
|
>
|
|
<span class="opacity-50 font-normal">https://</span>psbt.io
|
|
</button>
|
|
</span>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="
|
|
min-h-screen
|
|
py-5
|
|
lg:py-16
|
|
bg-slate-100
|
|
" style="min-height: 50vh;">
|
|
<div class="mx-auto w-full lg:max-w-7xl py-5 xl:py-10
|
|
flex flex-col lg:flex-row
|
|
gap-20 items-center px-4 lg:px-0
|
|
" style="min-height: 50vh;">
|
|
<div class="md:w-4/5 lg:w-3/5 grid grid-cols-1 gap-8">
|
|
|
|
<div>
|
|
<h1 class="text-7xl font-black">
|
|
Easy-peasy setup
|
|
</h1>
|
|
|
|
<p class="
|
|
text-2xl font-extralight
|
|
">
|
|
Just drop this snippet on your website and you're good to go.
|
|
</p>
|
|
</div>
|
|
|
|
<pre class ="
|
|
p-4
|
|
bg-white
|
|
overflow-auto
|
|
">
|
|
<script
|
|
src="https://nostri.chat/public/bundle.js"
|
|
<span class="text-green-600">// YOUR PUBKEY IN HEX FORMAT</span>
|
|
<b>data-website-owner-pubkey</b>="<span class="text-orange-500">YOUR_PUBKEY"</span>
|
|
<span class="text-green-600">// THE TYPE OF CHAT YOU WANT: GLOBAL or DMs</span>
|
|
<b>data-chat-type</b>="<span class="text-orange-500">GLOBAL" </span>
|
|
<span class="text-green-600">// If you use GLOBAL you can choose set a comma-separated list of hashtags</span>
|
|
<b>data-chat-tags</b>="<span class="text-orange-500">nostrica,bitcoin"</span>
|
|
<span class="text-green-600">// Relays you'd like to use, change this this as you wish</span>
|
|
<b>data-relays</b>="<span class="text-orange-500">wss://relay.f7z.io,wss://nos.lol,wss://relay.nostr.info,wss://nostr-pub.wellorder.net,wss://relay.current.fyi,wss://relay.nostr.band"</span>
|
|
></script>
|
|
<link rel="stylesheet" href="https://nostri.chat/public/bundle.css"></pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="md:hidden">
|
|
<Widget chatConfiguration={{
|
|
chatType,
|
|
chatTags,
|
|
chatReferenceTags,
|
|
}} {websiteOwnerPubkey} {relays} bind:chatStarted={chatStarted} />
|
|
</div>
|
|
|
|
<footer class="py-6 bg-orange-900 font-mono text-white text-center mt-12 px-10">
|
|
<div class="flex justify-center flex-row">
|
|
<div class="text-sm">
|
|
NOSTRI.CHAT
|
|
by
|
|
<a class="text-purple-50 hover:text-orange-400" href="https://pablof7z.com">
|
|
@pablof7z
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>
|
|
/* div { border: solid red 1px; } */
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
</style> |