Make application name configurable

Co-authored-by: Brian Ginsburg <gins@brianginsburg.com>

README.md

@@ -1,6 +1,6 @@
 # webnative-app-template
-A web app template for Webnative.
 
+A web app template for Webnative.
 
 ## Setup
 
@@ -29,6 +29,7 @@ npm run build
 ```
 
 The build outputs the static site to the `build` directory.
+
 ## Publish
 
 The built site publishes with the [Fission CLI](https://guide.fission.codes/developers/cli) and the [Fission GH publish action](https://github.com/fission-suite/publish-action). Publishing from the command line is configured in [fission.yaml](fission.yaml), and the GitHub publish action is configured in [publish.yml](.github/workflows/publish.yml).
@@ -48,6 +49,12 @@ To set up the GitHub publish action:
 
 1. Export your machine key with `base64 ~/.config/fission/key/machine_id.ed25519`
 2. Add your machine key as a GH Repository secret named `FISSION_MACHINE_KEY`
-2. Update the `publish.yml` with the name of your registered app
+3. Update the `publish.yml` with the name of your registered app
 
 See the [Fission Guide](https://guide.fission.codes/developers/installation) and the publish action README for more details.
+
+## Customize
+
+- `app.html` - the SEO meta tags will need to be changed.
+- `lib/appName.ts` - choose a better application name
+- To customize the application's Tailwind theme, change `tailwind.config.ts` - link to DaisyUI customization page.

src/components/auth/Connect.svelte

@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation'
   import { onDestroy, onMount } from 'svelte'
 
+  import { appName } from '$lib/appName'
   import { sessionStore } from '../../stores'
   import type { Session } from '$lib/session'
 
@@ -24,7 +25,7 @@
     <a href="/" class="btn btn-xs btn-circle absolute right-2 top-2">✕</a>
 
     <div>
-      <h3 class="mb-7 text-xl font-serif">Connect to AppName</h3>
+      <h3 class="mb-7 text-xl font-serif">Connect to {appName}</h3>
       <div>
         <a class="btn btn-primary mb-5 w-full" href="/register">
           Create a new account

src/components/auth/Register.svelte

@@ -2,6 +2,7 @@
   import { goto } from '$app/navigation'
   import { onDestroy, onMount } from 'svelte'
 
+  import { appName } from '$lib/appName'
   import {
     bootstrapFilesystem,
     isUsernameValid,
@@ -142,8 +143,7 @@
         </label>
         <label for="registration" class="label mt-1 hidden peer-checked:block">
           <span class="label-text-alt text-error text-left">
-            <!-- TODO: Swap in application name for AppName -->
-            For security reasons, AppName doesn't support shared computers at this
+            For security reasons, {appName} doesn't support shared computers at this
             time.
           </span>
         </label>

src/lib/appName.ts

@@ -0,0 +1 @@
+export const appName = 'Awesome WebNative App'

src/lib/session.ts

@@ -1,3 +1,5 @@
+import { appName } from '$lib/appName'
+
 export type Session = {
   username: string
   authed: boolean
@@ -10,9 +12,9 @@ type SessionError = 'Insecure Context' | 'Unsupported Browser'
 export const errorToMessage = (error: SessionError): string => {
   switch (error) {
     case 'Insecure Context':
-      return 'This application requires a secure context (HTTPS)'
+      return `${appName} requires a secure context (HTTPS)`
 
     case 'Unsupported Browser':
-      return 'Your browser does not support this application'
+      return `Your browser does not support ${appName}`
   }
 }

src/routes/__layout.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte'
 
   import '../global.css'
+  import { appName } from '$lib/appName'
   import { initialize } from '$lib/common/webnative'
   import { deviceStore, sessionStore, theme } from '../stores'
   import { storeTheme } from '$lib/theme'
@@ -46,6 +47,10 @@
   init()
 </script>
 
+<svelte:head>
+  <title>{appName}</title>
+</svelte:head>
+
 <svelte:window on:resize={setDevice} />
 
 <div data-theme={$theme}>