nate/cofabricate-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on login

Browse Source
This commit is contained in:
nate
2024-06-14 16:43:05 -04:00
parent 13ea2ccd9e
commit a7ec9a5100
12 changed files with 211 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app.html
View File

@@ -1,18 +1,17 @@
<!doctype html> <!doctype html>
<html data-theme="dark" lang="en"> <html data-theme="dark" lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" /> <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" /> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css" />
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<main class="container"> <div style="display: contents">
<div style="display: contents">%sveltekit.body%</div> <div class="container is-fluid">%sveltekit.body%</div>
</main> </div>
</body> </body>
</html> </html>

18
src/lib/app.d.ts vendored Normal file
View File

@@ -0,0 +1,18 @@
declare global {
namespace App {
interface UserProfile {
id?: string;
name?: string;
displayName?: string;
image?: string;
banner?: string;
bio?: string;
nip05?: string;
lud16?: string;
about?: string;
zapService?: string;
}
}
}
export {};

23
src/lib/components/Avatar.svelte Normal file
View File

@@ -0,0 +1,23 @@
<script lang="ts">
import UserInterface from '$lib/interfaces/user';
import { ndk } from '$lib/stores/nostr';
import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
export let userProfile: NDKUserProfile | undefined;
let _userProfile = userProfile;
let image: string | undefined;
let defaultImage = `https://robohash.org/${userProfile?.id?.slice(0, 2)}`;
let observerUserProfile;
if (!_userProfile?.image) {
observerUserProfile = $ndk.activeUser?.profile;
}
$: {
_userProfile = $observerUserProfile! as NDKUserProfile;
image = _userProfile.image;
}
</script>
<img src={image || defaultImage} alt="User Avatar" class="is-rounded" />

7
src/lib/components/LoginDropdown.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang='ts'>
import { ndk } from '$lib/stores/nostr';
</script>
{#if !$ndk.signer}
<div></div>
{/if}

37
src/lib/components/NavBar.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts">
import Avatar from '$lib/components/Avatar.svelte';
import { ndk } from '$lib/stores/nostr';
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
let avatarimage: string | undefined;
$: {
avatarimage = $ndk.activeUser?.profile?.image;
}
function signIn() {
console.debug('signing in');
dispatch('signin');
}
</script>
<nav class="navbar" aria-label="main navigation">
<div class="navbar-brand">
<h1 class="title is-1">CoFabricate</h1>
</div>
<div class="navbar-menu"></div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button" href="/">Home</a>
<a class="button" href="/about">About</a>
{#if $ndk.activeUser}
<Avatar userProfile={$ndk.activeUser.profile} />
{:else}
<button class="button" on:click={signIn}>Sign In</button>
{/if}
</div>
</div>
</div>
</nav>

22
src/lib/interfaces/user.ts Normal file
View File

@@ -0,0 +1,22 @@
import { get as getStore } from 'svelte/store';
import { ndk as ndkStore } from '$lib/stores/nostr';
import GetUserParams, { type NDKUserParams } from '@nostr-dev-kit/ndk';
// import { liveQuery, type Observable } from 'dexie';
import { browser } from '$app/environment';
// import { db } from '$lib/interfaces/db';
const UserInterface = {
//get: (opts: GetUserParams): Observable<App.UserProfile> => {
get: (opts: NDKUserParams): App.UserProfile => {
const ndk = getStore(ndkStore);
const user = ndk.getUser(opts);
console.log('get user', opts);
let userProfile = { ...(user.profile || {}), id: user.pubkey };
user.fetchProfile().then(async () => {
userProfile = { ...userProfile, ...(user.profile || {}) };
});
return userProfile;
}
};
export default UserInterface;

22
src/lib/stores/nostr.ts
View File

@@ -1,7 +1,5 @@
import { writable } from "svelte/store"; import { writable } from 'svelte/store';
import NDK from "@nostr-dev-kit/ndk"; import NDKSvelte from '@nostr-dev-kit/ndk-svelte';
import NDKSvelte from "@nostr-dev-kit/ndk-svelte";
import { RelayList } from "@nostr-dev-kit/ndk-svelte-components";
let relays; let relays;
@@ -15,24 +13,24 @@ if (relays) {
relayList = JSON.parse(relays); relayList = JSON.parse(relays);
} }
export const defaultRelays = [ export const defaultRelays = ['wss://purplepag.es', 'wss://relay.damus.io', 'wss://relay.f7z.io'];
'wss://purplepag.es',
'wss://relay.damus.io',
'wss://relay.f7z.io'
]
if (!relayList || !Array.isArray(relayList) || relayList.length === 0) { if (!relayList || !Array.isArray(relayList) || relayList.length === 0) {
relayList = defaultRelays; relayList = defaultRelays;
} }
const _ndk: NDKSvelte = new NDKSvelte({ const _ndk: NDKSvelte = new NDKSvelte({
//devWriteRelayUrls: ['wss://relay.strfront.com'], devWriteRelayUrls: ['wss://relay.strfront.com'],
explicitRelayUrls: relayList, explicitRelayUrls: relayList,
enableOutboxModel: true, enableOutboxModel: true,
autoConnectUserRelays: true,
autoFetchUserMutelist: true
}) as NDKSvelte; }) as NDKSvelte;
_ndk.connect(); _ndk.connect();
export const ndk = _ndk; console.log(_ndk.activeUser?.profile);
// export default ndk; const ndkStore = writable(_ndk);
export const ndk = ndkStore;

4
src/lib/types.ts Normal file
View File

@@ -0,0 +1,4 @@
export enum CofabKind {
Supplier = 30000,
Order = 30001
}

0
src/lib/utils/modal.ts Normal file
View File

46
src/routes/+layout.svelte
View File

@@ -1,11 +1,37 @@
<nav> <script lang="ts">
<ul> import NavBar from '$lib/components/NavBar.svelte';
<li><h1>Welcome to CoFabricate</h1></li> import { ndk } from '$lib/stores/nostr';
</ul> import { NDKNip07Signer } from '@nostr-dev-kit/ndk';
<ul> import { onMount } from 'svelte';
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li> onMount(async () => {
<li><a href="/login">Sign In</a></li> await signIn();
</ul> });
</nav>
async function signIn() {
console.debug('signIn called');
let signer;
try {
signer = await new NDKNip07Signer();
} catch (e) {}
console.log(signer);
//if (!signer) return;
$ndk.signer = signer;
const pubkey = await signer?.user();
console.log(pubkey);
if (pubkey) {
$ndk.activeUser = pubkey;
await $ndk.activeUser.fetchProfile();
console.log($ndk.activeUser);
}
await $ndk.connect();
}
</script>
<NavBar />
<slot></slot> <slot></slot>

39
src/routes/+page.svelte
View File

@@ -1,23 +1,36 @@
<script lang='ts'> <script lang="ts">
import { ndk } from "$lib/stores/nostr.js"; import { ndk } from '$lib/stores/nostr.js';
import { NDKHighlight } from '@nostr-dev-kit/ndk'; import { NDKHighlight } from '@nostr-dev-kit/ndk';
import { RelayList } from "@nostr-dev-kit/ndk-svelte-components"; import { RelayList } from '@nostr-dev-kit/ndk-svelte-components';
const img = 'https://picsum.photos/800/500';
// export let data; // export let data;
const highlights = ndk.storeSubscribe(
{kinds: [9802 as number]},
{closeOnEose: true},
NDKHighlight
);
</script> </script>
<svelte:head> <svelte:head>
<title>Decentralized Manufacturing</title> <title>Decentralized Manufacturing</title>
</svelte:head> </svelte:head>
<h1>Home</h1>
<p> <p>
{$highlights.length} Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
{ndk.explicitRelayUrls} labore et dolore magna aliqua. Consequat id porta nibh venenatis cras sed felis eget. Fermentum et
{ndk.activeUser} sollicitudin ac orci phasellus egestas tellus rutrum tellus. Lobortis mattis aliquam faucibus
purus in massa tempor nec. In nisl nisi scelerisque eu ultrices vitae. Dui sapien eget mi proin
sed libero enim. Pharetra massa massa ultricies mi quis. Quam viverra orci sagittis eu volutpat
odio. Et malesuada fames ac turpis egestas integer eget. Tellus elementum sagittis vitae et leo.
Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Nulla posuere sollicitudin
aliquam ultrices sagittis orci a scelerisque purus.
</p>
<img src={img} alt="placeholder" />
<p>
Imperdiet dui accumsan sit amet nulla. At erat pellentesque adipiscing commodo elit at. Eu mi
bibendum neque egestas. Leo vel orci porta non pulvinar neque laoreet. Quam pellentesque nec nam
aliquam sem et tortor consequat. Blandit volutpat maecenas volutpat blandit. Praesent semper
feugiat nibh sed pulvinar proin gravida hendrerit lectus. Malesuada proin libero nunc consequat
interdum. Risus pretium quam vulputate dignissim. Sollicitudin nibh sit amet commodo nulla. Et
netus et malesuada fames ac turpis egestas sed. Enim sed faucibus turpis in eu mi bibendum neque.
Blandit massa enim nec dui nunc. Aliquam ultrices sagittis orci a scelerisque purus. Pharetra diam
sit amet nisl suscipit adipiscing bibendum. Lorem donec massa sapien faucibus et molestie. Enim
tortor at auctor urna nunc id cursus metus. A erat nam at lectus urna duis convallis convallis.
Tempor id eu nisl nunc mi ipsum.
</p> </p>

7
svelte.config.js
View File

@@ -11,7 +11,12 @@ const config = {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter. // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters. // See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter() adapter: adapter(),
alias: {
$lib: 'src/lib',
$utils: 'src/lib/utils',
$comp: 'src/lib/components'
}
} }
}; };