Add homepage (#41)

* Add homepage * Check backup status when loading account * Rename app * Add about card * Replace hamburger menu with brand * Rename app in title Co-authored-by: Jess Martin <jessmartin@gmail.com>
2022-08-30 13:42:46 -07:00 · 2022-08-30 13:42:46 -07:00 · eb61c6b5e6
parent ccfd146258
commit eb61c6b5e6
7 changed files with 158 additions and 39 deletions
--- a/src/app.html
+++ b/src/app.html
@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html class="bg-white" lang="en">
  <head>
-    <title>WebNative Template</title>
+    <title>Webnative Template</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="robots" content="index,follow" />
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@ -3,6 +3,8 @@
  import { sessionStore, theme } from '../stores'
  import { storeTheme, type Theme } from '$lib/theme/index'

+  import { appName } from '$lib/app-name'
+  import Brand from '$components/icons/Brand.svelte'
  import Shield from '$components/icons/Shield.svelte'
  import LightMode from '$components/icons/LightMode.svelte'
  import DarkMode from '$components/icons/DarkMode.svelte'
@ -14,25 +16,30 @@
 </script>

 <header class="navbar bg-base-100 pt-0">
-  <div class="flex-1">
-    <button class="btn btn-sm btn-square btn-ghost">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        class="inline-block w-7 h-7 stroke-current"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M4 6h16M4 12h16M4 18h16"
-        />
-      </svg>
-    </button>
+  <div class="flex-1 cursor-pointer hover:underline" on:click={() => goto('/')}>
+    <Brand />
+    <span class="text-xl ml-2">{appName}</span>
  </div>

-  <span class="mr-2">
+  {#if !$sessionStore.loading && !$sessionStore.authed}
+    <div class="flex-none">
+      <a class="btn btn-sm h-10 btn-primary normal-case" href="/connect">
+        Connect
+      </a>
+    </div>
+  {/if}
+
+  {#if !$sessionStore.loading && $sessionStore.backupCreated === false}
+    <span
+      on:click={() => goto('delegate-account')}
+      class="btn btn-sm h-10 btn-warning rounded-full font-normal transition-colors ease-in hover:bg-orange-500 hover:border-orange-500"
+    >
+      <Shield />
+      <span class="ml-2 hidden md:block">Backup recommended</span>
+    </span>
+  {/if}
+
+  <span class="ml-2">
    {#if $theme === 'light'}
      <span on:click={() => setTheme('dark')}>
        <LightMode />
@ -43,22 +50,4 @@
      </span>
    {/if}
  </span>
-
-  {#if !$sessionStore.loading}
-    {#if !$sessionStore.authed}
-      <div class="flex-none">
-        <a class="btn btn-sm h-10 btn-primary normal-case" href="/connect">
-          Connect
-        </a>
-      </div>
-    {:else if $sessionStore.backupCreated === false}
-      <span
-        on:click={() => goto('delegate-account')}
-        class="btn btn-sm btn-warning rounded-full font-extralight"
-      >
-        <Shield />
-        <span class="ml-2">Backup required</span>
-      </span>
-    {/if}
-  {/if}
 </header>
--- a/src/components/icons/Brand.svelte
+++ b/src/components/icons/Brand.svelte
@ -0,0 +1,22 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="35"
+  height="35"
+  viewBox="0 0 35 35"
+  version="1.1"
+>
+  <g id="surface1">
+    <rect
+      x="0"
+      y="0"
+      width="35"
+      height="35"
+      style="fill:rgb(12.54902%,12.941176%,14.117647%);fill-opacity:1;stroke:none;"
+    />
+    <path
+      style=" stroke:none;fill-rule:nonzero;fill:rgb(90.980392%,91.764706%,92.941176%);fill-opacity:1;"
+      d="M 2.039062 27.171875 L 4.1875 7.121094 C 5.070312 7.085938 5.898438 7.003906 6.671875 6.871094 C 7.460938 6.71875 8.242188 6.617188 9.011719 6.558594 C 9.011719 6.578125 8.984375 6.777344 8.925781 7.152344 C 8.871094 7.507812 8.796875 7.992188 8.703125 8.59375 C 8.609375 9.175781 8.507812 9.84375 8.394531 10.597656 C 8.277344 11.332031 8.109375 12.347656 7.886719 13.648438 C 7.675781 14.945312 7.398438 16.746094 7.039062 19.042969 L 7.460938 19.042969 C 7.949219 17.308594 8.355469 15.898438 8.675781 14.804688 C 8.996094 13.695312 9.25 12.800781 9.4375 12.125 C 9.644531 11.425781 9.832031 10.757812 10 10.117188 C 10.1875 9.476562 10.359375 8.882812 10.511719 8.339844 C 10.679688 7.792969 10.8125 7.332031 10.90625 6.957031 L 11.160156 6.957031 C 11.496094 6.957031 11.835938 6.933594 12.175781 6.898438 C 12.535156 6.859375 12.863281 6.820312 13.164062 6.785156 C 13.484375 6.730469 13.816406 6.664062 14.152344 6.589844 C 14.117188 6.757812 14.070312 7.105469 14.011719 7.632812 C 13.972656 8.160156 13.917969 8.800781 13.84375 9.554688 C 13.765625 10.289062 13.691406 11.105469 13.617188 12.011719 C 13.542969 12.890625 13.46875 13.769531 13.390625 14.636719 C 13.316406 15.484375 13.242188 16.292969 13.164062 17.0625 C 13.109375 17.835938 13.054688 18.496094 12.996094 19.042969 L 13.503906 19.042969 L 16.1875 6.898438 C 16.828125 6.804688 17.457031 6.71875 18.078125 6.644531 C 18.625 6.570312 19.1875 6.492188 19.773438 6.417969 C 20.355469 6.34375 20.875 6.257812 21.324219 6.164062 C 21.042969 6.957031 20.761719 7.839844 20.476562 8.816406 C 20.195312 9.777344 19.902344 10.792969 19.601562 11.867188 C 19.300781 12.941406 19.011719 14.023438 18.726562 15.113281 C 18.464844 16.207031 18.199219 17.261719 17.9375 18.28125 C 17.332031 20.6875 16.75 23.164062 16.1875 25.703125 L 9.804688 26.777344 L 11.046875 15.875 L 10.707031 15.875 L 7.914062 26.128906 Z M 18.007812 27.199219 C 18.535156 24.542969 19.042969 21.957031 19.535156 19.433594 C 19.722656 18.382812 19.917969 17.28125 20.128906 16.132812 C 20.355469 14.964844 20.558594 13.824219 20.746094 12.714844 C 20.933594 11.585938 21.105469 10.503906 21.257812 9.46875 C 21.425781 8.414062 21.558594 7.453125 21.652344 6.589844 C 22.234375 6.550781 22.800781 6.515625 23.34375 6.472656 C 23.835938 6.4375 24.332031 6.410156 24.84375 6.390625 C 25.351562 6.355469 25.800781 6.316406 26.199219 6.277344 C 26.441406 7.726562 26.660156 9.109375 26.847656 10.429688 C 26.941406 10.992188 27.035156 11.585938 27.128906 12.207031 C 27.242188 12.808594 27.347656 13.390625 27.441406 13.960938 C 27.535156 14.523438 27.628906 15.070312 27.722656 15.597656 C 27.816406 16.101562 27.910156 16.558594 28.003906 16.949219 C 28.078125 16.558594 28.164062 16.101562 28.261719 15.597656 C 28.351562 15.070312 28.457031 14.523438 28.570312 13.960938 C 28.683594 13.375 28.796875 12.78125 28.910156 12.179688 C 29.039062 11.578125 29.164062 10.992188 29.273438 10.429688 C 29.558594 9.109375 29.847656 7.734375 30.148438 6.304688 L 33.59375 5.882812 C 32.957031 8.707031 32.390625 11.378906 31.898438 13.902344 C 31.675781 14.996094 31.449219 16.09375 31.222656 17.207031 C 31.019531 18.316406 30.820312 19.386719 30.632812 20.421875 C 30.445312 21.457031 30.285156 22.417969 30.148438 23.304688 C 30.019531 24.167969 29.914062 24.902344 29.839844 25.503906 C 29.785156 25.503906 29.558594 25.554688 29.164062 25.648438 C 28.785156 25.722656 28.34375 25.816406 27.835938 25.929688 C 27.347656 26.042969 26.847656 26.164062 26.339844 26.296875 C 25.851562 26.410156 25.480469 26.503906 25.238281 26.578125 C 25.105469 25.054688 24.964844 23.605469 24.816406 22.230469 C 24.757812 21.644531 24.691406 21.042969 24.617188 20.421875 C 24.542969 19.804688 24.464844 19.210938 24.390625 18.644531 C 24.332031 18.082031 24.269531 17.550781 24.191406 17.0625 C 24.136719 16.558594 24.078125 16.132812 24.023438 15.792969 C 23.96875 16.132812 23.890625 16.546875 23.800781 17.035156 C 23.703125 17.523438 23.609375 18.050781 23.515625 18.617188 C 23.417969 19.160156 23.328125 19.734375 23.230469 20.339844 C 23.140625 20.921875 23.035156 21.496094 22.921875 22.058594 C 22.679688 23.394531 22.414062 24.789062 22.132812 26.238281 Z M 18.007812 27.199219 "
+    />
+  </g>
+</svg>
--- a/src/components/icons/Shield.svelte
+++ b/src/components/icons/Shield.svelte
@ -4,6 +4,7 @@
  viewBox="0 0 17 18"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
+  class="inline-block"
 >
  <path
    fill-rule="evenodd"
--- a/src/lib/app-name.ts
+++ b/src/lib/app-name.ts
@ -1 +1 @@
-export const appName = 'Awesome WebNative App'
+export const appName = 'Awesome Webnative App'
--- a/src/lib/common/webnative.ts
+++ b/src/lib/common/webnative.ts
@ -111,10 +111,13 @@ export const loadAccount = async (username: string): Promise<void> => {
  const fs = await webnative.loadRootFileSystem()
  filesystemStore.set(fs)

+  const backupStatus = await getBackupStatus(fs)
+
  sessionStore.update(session => ({
    ...session,
    username,
-    authed: true
+    authed: true,
+    backupCreated: backupStatus.created
  }))
 }

--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -1,7 +1,111 @@
 <script lang="ts">
+  import { goto } from '$app/navigation'
+  import { onDestroy } from 'svelte'
+
+  import { sessionStore } from '../stores'
+  import { appName } from '$lib/app-name'
+  import type { Session } from '$lib/session'
+  import Shield from '$components/icons/Shield.svelte'
+
+  let session: Session
+
+  const unsubscribe = sessionStore.subscribe(val => {
+    session = val
+  })
+
+  onDestroy(unsubscribe)
 </script>

-<h1 class="text-center">Application Interface</h1>
+<div class="grid grid-flow-row auto-rows-max gap-5 justify-items-center pb-5">
+  <h1 class="text-2xl">Welcome to {appName}!</h1>
+
+  {#if session?.authed}
+    <div class="card card-bordered w-96 dark:border-slate-600">
+      <div class="card-body">
+        <h2 class="card-title">👋 Account</h2>
+        <p>
+          Your username is
+          <span
+            class="inline-block px-2 font-mono bg-slate-300 dark:bg-slate-700 rounded-md"
+          >
+            {session.username}
+          </span>
+        </p>
+
+        {#if session.backupCreated}
+          <p>✅ You have connected your account on another device.</p>
+        {:else}
+          <p>
+            <span
+              class="h-7 w-7 inline-block bg-orange-300 rounded-full font-normal text-center"
+            >
+              <Shield />
+            </span>
+
+            You have not connected your account on another device.
+          </p>
+        {/if}
+        <div class="card-actions justify-center mt-3">
+          <button
+            class="btn btn-primary"
+            on:click={() => goto('/delegate-account')}
+          >
+            Connect a new device
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="card w-96 card-bordered dark:border-slate-600">
+      <div class="card-body">
+        <h2 class="card-title">📷 Photo Gallery Demo</h2>
+        <p>
+          Try out the Webnative File System by storing your photos in public and
+          private storage.
+        </p>
+        <div class="card-actions justify-center">
+          <a class="btn btn-primary" href="/gallery">Go to Photos</a>
+        </div>
+      </div>
+    </div>
+  {/if}
+  <div class="card card-bordered w-96 dark:border-slate-600">
+    <div class="card-body">
+      <h2 class="card-title">About</h2>
+      <p>
+        This app is a template for building apps with the
+        <a
+          class="link link-primary whitespace-nowrap"
+          href="https://github.com/fission-codes/webnative"
+          target="_blank"
+        >
+          Webnative SDK
+          <span class="-scale-x-100 scale-y-100 inline-block">⎋</span>
+        </a>
+      </p>
+      <p>
+        Get started
+        <a
+          class="link link-primary"
+          href="https://github.com/fission-codes/webnative-app-template"
+          target="_blank"
+        >
+          using this template
+          <span class="-scale-x-100 scale-y-100 inline-block">⎋</span>
+        </a>
+        and learn more in the
+        <a
+          class="link link-primary"
+          href="https://guide.fission.codes/developers/webnative"
+          target="_blank"
+        >
+          Webnative Guide
+          <span class="-scale-x-100 scale-y-100 inline-block">⎋</span>
+        </a>
+      </p>
+    </div>
+  </div>
+</div>

 <style>
 </style>