-
+
diff --git a/src/components/common/LoadingSpinner.svelte b/src/components/common/LoadingSpinner.svelte
deleted file mode 100644
index e371470..0000000
--- a/src/components/common/LoadingSpinner.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
diff --git a/src/components/home/Authed.svelte b/src/components/home/Authed.svelte
new file mode 100644
index 0000000..7b1dca1
--- /dev/null
+++ b/src/components/home/Authed.svelte
@@ -0,0 +1,31 @@
+
+
+
+
Welcome, {$sessionStore.username}!
+
+
+
Photo Gallery Demo
+
+ Webnative makes it easy to implement private, encrypted, user-owned
+ storage in your app. See it in action with our photo gallery demo.
+
+
Try the Photo Gallery Demo
+
+
+
+
Device Connection Demo
+
+ With Webnative SDK, a user’s account lives only on their connected devices
+ — entirely under their control. It’s easy for them to connect as many
+ devices as they’d like. For recoverability, we recommend they always
+ connect at least two.
+
+
+ Connect an additional device
+
+
+
diff --git a/src/components/home/Public.svelte b/src/components/home/Public.svelte
new file mode 100644
index 0000000..d179874
--- /dev/null
+++ b/src/components/home/Public.svelte
@@ -0,0 +1,33 @@
+
+
+
+
Welcome to the {appName}
+
+
+
+ Webnative SDK is a true local-first edge computing stack. Effortlessly
+ give your users:
+
+
+
+
+ modern, passwordless accounts
+ , without a complex and costly cloud-native back-end
+
+
+ user-controlled data
+ , secured by default with our encrypted-at-rest file storage protocol
+
+
+ local-first functionality
+ , including the ability to work offline and collaborate across multiple devices
+
+
+
+
Connect
+
+
diff --git a/src/components/icons/About.svelte b/src/components/icons/About.svelte
new file mode 100644
index 0000000..4aaca17
--- /dev/null
+++ b/src/components/icons/About.svelte
@@ -0,0 +1,9 @@
+
+
diff --git a/src/components/icons/Brand.svelte b/src/components/icons/Brand.svelte
deleted file mode 100644
index 484f1a4..0000000
--- a/src/components/icons/Brand.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
diff --git a/src/components/icons/BrandLogo.svelte b/src/components/icons/BrandLogo.svelte
new file mode 100644
index 0000000..f9bdee3
--- /dev/null
+++ b/src/components/icons/BrandLogo.svelte
@@ -0,0 +1,8 @@
+
+
diff --git a/src/components/icons/BrandWordmark.svelte b/src/components/icons/BrandWordmark.svelte
new file mode 100644
index 0000000..75b97d7
--- /dev/null
+++ b/src/components/icons/BrandWordmark.svelte
@@ -0,0 +1,8 @@
+
+
diff --git a/src/components/icons/DarkMode.svelte b/src/components/icons/DarkMode.svelte
index 35e3df6..16ebe8e 100644
--- a/src/components/icons/DarkMode.svelte
+++ b/src/components/icons/DarkMode.svelte
@@ -1,16 +1,19 @@
-
-
+
diff --git a/src/components/icons/Discord.svelte b/src/components/icons/Discord.svelte
new file mode 100644
index 0000000..714583d
--- /dev/null
+++ b/src/components/icons/Discord.svelte
@@ -0,0 +1,6 @@
+
+
diff --git a/src/components/icons/ExternalLink.svelte b/src/components/icons/ExternalLink.svelte
new file mode 100644
index 0000000..f1e6a56
--- /dev/null
+++ b/src/components/icons/ExternalLink.svelte
@@ -0,0 +1,9 @@
+
+
diff --git a/src/components/icons/Github.svelte b/src/components/icons/Github.svelte
new file mode 100644
index 0000000..e781231
--- /dev/null
+++ b/src/components/icons/Github.svelte
@@ -0,0 +1,9 @@
+
+
diff --git a/src/components/icons/Hamburger.svelte b/src/components/icons/Hamburger.svelte
new file mode 100644
index 0000000..b2d5423
--- /dev/null
+++ b/src/components/icons/Hamburger.svelte
@@ -0,0 +1,3 @@
+
+
diff --git a/src/components/icons/Home.svelte b/src/components/icons/Home.svelte
new file mode 100644
index 0000000..513189a
--- /dev/null
+++ b/src/components/icons/Home.svelte
@@ -0,0 +1,9 @@
+
+
diff --git a/src/components/icons/LightMode.svelte b/src/components/icons/LightMode.svelte
index 73dcfd9..06d148f 100644
--- a/src/components/icons/LightMode.svelte
+++ b/src/components/icons/LightMode.svelte
@@ -1,16 +1,19 @@
-
-
+
diff --git a/src/components/icons/PhotoGallery.svelte b/src/components/icons/PhotoGallery.svelte
new file mode 100644
index 0000000..e1efbef
--- /dev/null
+++ b/src/components/icons/PhotoGallery.svelte
@@ -0,0 +1,9 @@
+
+
diff --git a/src/components/icons/Settings.svelte b/src/components/icons/Settings.svelte
new file mode 100644
index 0000000..8c3c705
--- /dev/null
+++ b/src/components/icons/Settings.svelte
@@ -0,0 +1,9 @@
+
+
diff --git a/src/components/icons/Share.svelte b/src/components/icons/Share.svelte
new file mode 100644
index 0000000..16ffefa
--- /dev/null
+++ b/src/components/icons/Share.svelte
@@ -0,0 +1,9 @@
+
+
diff --git a/src/components/icons/Shield.svelte b/src/components/icons/Shield.svelte
index e7c5520..259a81e 100644
--- a/src/components/icons/Shield.svelte
+++ b/src/components/icons/Shield.svelte
@@ -1,15 +1,9 @@
-
+
diff --git a/src/components/icons/WelcomeCheckIcon.svelte b/src/components/icons/WelcomeCheckIcon.svelte
index abfdf62..7f0630b 100644
--- a/src/components/icons/WelcomeCheckIcon.svelte
+++ b/src/components/icons/WelcomeCheckIcon.svelte
@@ -1,14 +1,8 @@
-
+
diff --git a/src/components/nav/AlphaTag.svelte b/src/components/nav/AlphaTag.svelte
new file mode 100644
index 0000000..c3fd724
--- /dev/null
+++ b/src/components/nav/AlphaTag.svelte
@@ -0,0 +1,5 @@
+
+ ALPHA
+
diff --git a/src/components/nav/SidebarNav.svelte b/src/components/nav/SidebarNav.svelte
new file mode 100644
index 0000000..be17e6b
--- /dev/null
+++ b/src/components/nav/SidebarNav.svelte
@@ -0,0 +1,95 @@
+
+
+
+{#if $sessionStore.authed && !$page.url.pathname.match(/register|backup|delegate/)}
+
+{:else}
+
+
{#each $notificationStore as notification (notification.id)}
diff --git a/src/components/settings/Avatar.svelte b/src/components/settings/Avatar.svelte
new file mode 100644
index 0000000..58b24ba
--- /dev/null
+++ b/src/components/settings/Avatar.svelte
@@ -0,0 +1,40 @@
+
+
+{#if $accountSettingsStore.avatar}
+ {#if $accountSettingsStore.loading}
+
+
+ {:else}
+
+ {/if}
+{:else}
+
+ {$sessionStore.username[0]}
+
+{/if}
diff --git a/src/components/settings/AvatarUpload.svelte b/src/components/settings/AvatarUpload.svelte
new file mode 100644
index 0000000..b413870
--- /dev/null
+++ b/src/components/settings/AvatarUpload.svelte
@@ -0,0 +1,35 @@
+
+
+
Avatar
+
+
+
+
Upload a new avatar
+
+
diff --git a/src/components/settings/ThemePreferences.svelte b/src/components/settings/ThemePreferences.svelte
new file mode 100644
index 0000000..b736cff
--- /dev/null
+++ b/src/components/settings/ThemePreferences.svelte
@@ -0,0 +1,48 @@
+
+
+
Theme preference
+
+{#each options as option}
+
+
+ {option.label}
+
+
+{/each}
diff --git a/src/global.css b/src/global.css
index d7dbc06..d5d2376 100644
--- a/src/global.css
+++ b/src/global.css
@@ -2,10 +2,95 @@
@tailwind components;
@tailwind utilities;
-.modal-box {
- @apply p-8;
+@font-face {
+ font-family: 'UncutSans_Regular';
+ src: url('/fonts/uncut-sans-regular-webfont.woff2') format('woff2'),
+ url('/fonts/uncut-sans-regular-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
}
+@font-face {
+ font-family: 'UncutSans_Medium';
+ src: url('/fonts/uncut-sans-medium-webfont.woff2') format('woff2'),
+ url('/fonts/uncut-sans-medium-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: 'UncutSans_Bold';
+ src: url('/fonts/uncut-sans-bold-webfont.woff2') format('woff2'),
+ url('/fonts/uncut-sans-bold-webfont.woff') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
+h1, h2, h3 {
+ @apply font-bold;
+}
+
+h4, h5, h6 {
+ @apply font-semiBold;
+}
+
+body, p, li, a, span, input {
+ @apply font-sans;
+}
+
+/* Button default styles */
+.btn {
+ @apply font-semiBold;
+ @apply border-2;
+ @apply min-h-0;
+}
+
+.btn-circle {
+ @apply text-base-100;
+ @apply bg-base-content;
+}
+
+.btn-outline {
+ @apply text-sm;
+ @apply text-base-content;
+ @apply border-base-content;
+ @apply bg-base-100;
+ @apply shadow-orange;
+ @apply h-11;
+ @apply px-4;
+}
+
+.btn-primary {
+ @apply text-sm;
+ @apply text-neutral;
+ @apply border-neutral;
+ @apply shadow-orange;
+ @apply bg-gradient-to-r;
+ @apply from-orange-600;
+ @apply to-orange-300;
+ @apply h-11;
+ @apply px-4;
+}
+
+.btn-primary:hover, .btn-warning:hover {
+ @apply border-orange-300;
+}
+
+/* Input default styles */
+.input-bordered {
+ @apply text-base-content;
+ @apply border-2;
+ @apply border-base-content;
+}
+
+/* Modal default styles */
+.modal-box {
+ @apply p-8;
+ @apply border-2;
+ @apply border-base-content;
+}
+
+/* Label default styles */
.label {
@apply px-0;
}
diff --git a/src/lib/account-settings.ts b/src/lib/account-settings.ts
new file mode 100644
index 0000000..1027632
--- /dev/null
+++ b/src/lib/account-settings.ts
@@ -0,0 +1,180 @@
+import { get as getStore } from 'svelte/store'
+import * as wn from 'webnative'
+import * as uint8arrays from 'uint8arrays'
+import type { CID } from 'multiformats/cid'
+import type { PuttableUnixTree, File as WNFile } from 'webnative/fs/types'
+import type { Metadata } from 'webnative/fs/metadata'
+
+import { accountSettingsStore, filesystemStore } from '$src/stores'
+import { addNotification } from '$lib/notifications'
+
+export type Avatar = {
+ cid: string
+ ctime: number
+ name: string
+ size?: number
+ src: string
+}
+
+export type AccountSettings = {
+ avatar: Avatar
+ loading: boolean
+}
+interface AvatarFile extends PuttableUnixTree, WNFile {
+ cid: CID
+ content: Uint8Array
+ header: {
+ content: Uint8Array
+ metadata: Metadata
+ }
+}
+
+export const ACCOUNT_SETTINGS_DIR = ['private', 'settings']
+const AVATAR_DIR = [...ACCOUNT_SETTINGS_DIR, 'avatars']
+const AVATAR_ARCHIVE_DIR = [...AVATAR_DIR, 'archive']
+const AVATAR_FILE_NAME = 'avatar'
+const FILE_SIZE_LIMIT = 5
+
+/**
+ * Move old avatar to the archive directory
+ */
+const archiveOldAvatar = async (): Promise
=> {
+ const fs = getStore(filesystemStore)
+
+ // Return if user has not uploaded an avatar yet
+ const avatarDirExists = await fs.exists(wn.path.file(...AVATAR_DIR))
+ if (!avatarDirExists) {
+ return
+ }
+
+ // Find the filename of the old avatar
+ const path = wn.path.directory(...AVATAR_DIR)
+ const links = await fs.ls(path)
+ const oldAvatarFileName = Object.keys(links).find(key =>
+ key.includes(AVATAR_FILE_NAME)
+ )
+ const oldFileNameArray = oldAvatarFileName.split('.')[0]
+ const archiveFileName = `${oldFileNameArray[0]}-${Date.now()}.${
+ oldFileNameArray[1]
+ }`
+
+ // Move old avatar to archive dir
+ const fromPath = wn.path.file(...AVATAR_DIR, oldAvatarFileName)
+ const toPath = wn.path.file(...AVATAR_ARCHIVE_DIR, archiveFileName)
+ await fs.mv(fromPath, toPath)
+
+ // Announce the changes to the server
+ await fs.publish()
+}
+
+/**
+ * Get the Avatar from the user's WNFS and construct its `src`
+ */
+export const getAvatarFromWNFS = async (): Promise => {
+ try {
+ // Set loading: true on the accountSettingsStore
+ accountSettingsStore.update(store => ({ ...store, loading: true }))
+
+ const fs = getStore(filesystemStore)
+
+ // If the avatar dir doesn't exist, silently fail and let the UI handle it
+ const avatarDirExists = await fs.exists(wn.path.file(...AVATAR_DIR))
+ if (!avatarDirExists) {
+ accountSettingsStore.update(store => ({
+ ...store,
+ loading: false
+ }))
+ return
+ }
+
+ // Find the file that matches the AVATAR_FILE_NAME
+ const path = wn.path.directory(...AVATAR_DIR)
+ const links = await fs.ls(path)
+ const avatarName = Object.keys(links).find(key =>
+ key.includes(AVATAR_FILE_NAME)
+ )
+
+ // If user has not uploaded an avatar, silently fail and let the UI handle it
+ if (!avatarName) {
+ accountSettingsStore.update(store => ({
+ ...store,
+ loading: false
+ }))
+ return
+ }
+
+ const file = await fs.get(wn.path.file(...AVATAR_DIR, `${avatarName}`))
+
+ // The CID for private files is currently located in `file.header.content`
+ const cid = (file as AvatarFile).header.content.toString()
+
+ // Create a base64 string to use as the image `src`
+ const src = `data:image/jpeg;base64, ${uint8arrays.toString(
+ (file as AvatarFile).content,
+ 'base64'
+ )}`
+
+ const avatar = {
+ cid,
+ ctime: (file as AvatarFile).header.metadata.unixMeta.ctime,
+ name: avatarName,
+ src
+ }
+
+ // Push images to the accountSettingsStore
+ accountSettingsStore.update(store => ({
+ ...store,
+ avatar,
+ loading: false
+ }))
+ } catch (error) {
+ console.error(error)
+ accountSettingsStore.update(store => ({
+ ...store,
+ avatar: null,
+ loading: false
+ }))
+ }
+}
+
+/**
+ * Upload an avatar image to the user's private WNFS
+ * @param image
+ */
+export const uploadAvatarToWNFS = async (image: File): Promise => {
+ try {
+ // Set loading: true on the accountSettingsStore
+ accountSettingsStore.update(store => ({ ...store, loading: true }))
+
+ const fs = getStore(filesystemStore)
+
+ // Reject files over 5MB
+ const imageSizeInMB = image.size / (1024 * 1024)
+ if (imageSizeInMB > FILE_SIZE_LIMIT) {
+ throw new Error('Image can be no larger than 5MB')
+ }
+
+ // Archive old avatar
+ await archiveOldAvatar()
+
+ // Rename the file to `avatar.[extension]`
+ const updatedImage = new File(
+ [image],
+ `${AVATAR_FILE_NAME}.${image.name.split('.')[1]}`,
+ {
+ type: image.type
+ }
+ )
+
+ // Create a sub directory and add the avatar
+ await fs.write(wn.path.file(...AVATAR_DIR, updatedImage.name), updatedImage)
+
+ // Announce the changes to the server
+ await fs.publish()
+
+ addNotification(`Your avatar has been updated!`, 'success')
+ } catch (error) {
+ addNotification(error.message, 'error')
+ console.error(error)
+ }
+}
diff --git a/src/lib/app-info.ts b/src/lib/app-info.ts
index d2167cd..745716a 100644
--- a/src/lib/app-info.ts
+++ b/src/lib/app-info.ts
@@ -1,4 +1,4 @@
-export const appName = 'Awesome Webnative App'
+export const appName = 'Webnative SDK Demo'
export const appDescription = 'This is another awesome Webnative app.'
export const appURL = 'https://webnative.netlify.app'
export const appImageURL = `${appURL}/preview.png`
diff --git a/src/lib/auth/account.ts b/src/lib/auth/account.ts
index a43e6fd..5ef4f46 100644
--- a/src/lib/auth/account.ts
+++ b/src/lib/auth/account.ts
@@ -4,6 +4,7 @@ import type FileSystem from 'webnative/fs/index'
import { asyncDebounce } from '$lib/utils'
import { filesystemStore, sessionStore } from '../../stores'
import { getBackupStatus } from '$lib/auth/backup'
+import { ACCOUNT_SETTINGS_DIR } from '$lib/account-settings'
import { AREAS } from '$routes/gallery/stores'
import { GALLERY_DIRS } from '$routes/gallery/lib/gallery'
@@ -50,6 +51,7 @@ export const register = async (username: string): Promise => {
const initializeFilesystem = async (fs: FileSystem): Promise => {
await fs.mkdir(webnative.path.directory(...GALLERY_DIRS[AREAS.PUBLIC]))
await fs.mkdir(webnative.path.directory(...GALLERY_DIRS[AREAS.PRIVATE]))
+ await fs.mkdir(webnative.path.directory(...ACCOUNT_SETTINGS_DIR))
}
export const loadAccount = async (username: string): Promise => {
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
index b7e1878..936ce00 100644
--- a/src/lib/theme.ts
+++ b/src/lib/theme.ts
@@ -1,13 +1,14 @@
import { browser } from '$app/environment'
-export type Theme = 'light' | 'dark'
+export type Theme = 'light' | 'dark' | 'default'
+
+export const getSystemDefaultTheme = (): Theme =>
+ window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
export const loadTheme = (): Theme => {
if (browser) {
const browserTheme = localStorage.getItem('theme') as Theme
- const osTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
- ? 'dark'
- : 'light'
+ const osTheme = getSystemDefaultTheme()
return browserTheme ?? (osTheme as Theme) ?? 'light'
}
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..520a0b3
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,43 @@
+
+
+
+
404 - Page not found
+
+
The page you have requested does not exist.
+
+
+
+
+
-
Welcome to {appName}!
-
- {#if session?.authed}
-
-
-
👋 Account
-
- Your username is
-
- {session.username}
-
-
-
- {#if session.backupCreated}
-
✅ You have connected your account on another device.
- {:else}
-
-
-
-
- You have not connected your account on another device.
-
- {/if}
-
- goto('/delegate-account')}
- >
- Connect a new device
-
-
-
-
-
-
-
-
📷 Photo Gallery Demo
-
- Try out the Webnative File System by storing your photos in public and
- private storage.
-
-
-
-
- {/if}
-
-
+
{#if $sessionStore.authed}
-