Make app name configurable

.env

@@ -5,3 +5,4 @@ VITE_DEFAULT_FOLLOWS=97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad9
 VITE_ENABLE_ZAPS=true
 VITE_FORCE_RELAYS=
 VITE_LOGO_URL=
+VITE_APP_NAME=Coracle

src/app/TopNav.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {theme} from "src/partials/state"
+  import {theme, appName} from "src/partials/state"
   import Anchor from "src/partials/Anchor.svelte"
   import {menuIsOpen} from "src/app/state"
   import {newNotifications} from "src/app/state"
 
+  const logoUrl = import.meta.env.VITE_LOGO_URL || "/images/logo.png"
   const toggleMenu = () => menuIsOpen.update(x => !x)
   const toggleTheme = () => theme.update(t => (t === "dark" ? "light" : "dark"))
 
@@ -27,8 +28,8 @@
       type="unstyled"
       href="https://info.coracle.social"
       class="flex items-center gap-2">
-      <img alt="Coracle Logo" src="/images/logo.png" class="w-8" />
-      <h1 class="staatliches text-3xl">Coracle</h1>
+      <img alt="Coracle Logo" src={logoUrl} class="w-8" />
+      <h1 class="staatliches text-3xl">{appName}</h1>
     </Anchor>
     <i class="fa fa-lightbulb -m-4 cursor-pointer p-4 text-lg" on:click={toggleTheme} />
   </div>

src/app/views/ListList.svelte

@@ -1,7 +1,7 @@
 <script type="ts">
   import {indexBy} from "ramda"
   import {Tags} from "src/util/nostr"
-  import {modal} from "src/partials/state"
+  import {modal, appName} from "src/partials/state"
   import Heading from "src/partials/Heading.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Content from "src/partials/Content.svelte"
@@ -35,7 +35,7 @@
   <p>
     Lists allow you to group people and topics to create custom feeds. You can create new lists by
     handing using the "<i class="fa fa-plus" /> List" button above, or by clicking the
-    <i class="fa fa-scroll px-1" /> icon that appears throughout Coracle.
+    <i class="fa fa-scroll px-1" /> icon that appears throughout {appName}.
   </p>
   {#each $lists as e (e.id)}
     {@const meta = Tags.from(e).asMeta()}

src/app/views/LoginPrivKey.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {Capacitor} from "@capacitor/core"
   import {toHex} from "src/util/nostr"
-  import {toast} from "src/partials/state"
+  import {toast, appName} from "src/partials/state"
   import Input from "src/partials/Input.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Content from "src/partials/Content.svelte"
@@ -29,7 +29,7 @@
 
 <Content size="lg" class="text-center">
   <Heading>Login with your Private Key</Heading>
-  <p>To give Coracle full access to your nostr identity, enter your private key below.</p>
+  <p>To give {appName} full access to your nostr identity, enter your private key below.</p>
   <div class="flex gap-2">
     <div class="flex-grow">
       <Input type="password" bind:value={nsec} placeholder="nsec...">

src/app/views/OnboardingKey.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import {nip19} from "nostr-tools"
   import {copyToClipboard} from "src/util/html"
-  import {modal, toast} from "src/partials/state"
+  import {modal, appName, toast} from "src/partials/state"
   import Input from "src/partials/Input.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Heading from "src/partials/Heading.svelte"
@@ -36,5 +36,5 @@
       Log in
     </Anchor>
   </div>
-  <p>If you don't want to save your keys now, you can find them later in Coracle's settings.</p>
+  <p>If you don't want to save your keys now, you can find them later in {appName}'s settings.</p>
 </Content>

src/app/views/RelayList.svelte

@@ -1,5 +1,6 @@
 <script>
   import {fly} from "svelte/transition"
+  import {appName} from "src/partials/state"
   import Anchor from "src/partials/Anchor.svelte"
   import Content from "src/partials/Content.svelte"
   import RelaySearch from "src/app/shared/RelaySearch.svelte"
@@ -45,8 +46,8 @@
         <h2 class="staatliches text-2xl">Other relays</h2>
       </div>
       <p>
-        Coracle automatically discovers relays as you browse the network. Adding more relays will
-        generally make things quicker to load, at the expense of higher data usage.
+        {appName} automatically discovers relays as you browse the network. Adding more relays will generally
+        make things quicker to load, at the expense of higher data usage.
       </p>
       <RelaySearch />
     </div>

src/app/views/UserSettings.svelte

@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import {fly} from "svelte/transition"
   import {navigate} from "svelte-routing"
-  import {toast} from "src/partials/state"
+  import {toast, appName} from "src/partials/state"
   import Toggle from "src/partials/Toggle.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Input from "src/partials/Input.svelte"
@@ -33,7 +33,7 @@
   <Content>
     <div class="mb-4 flex flex-col items-center justify-center">
       <Heading>App Settings</Heading>
-      <p>Make Coracle work the way you want it to.</p>
+      <p>Make {appName} work the way you want it to.</p>
     </div>
     <div class="flex w-full flex-col gap-8">
       <div class="flex flex-col gap-1">
@@ -42,8 +42,7 @@
           <Toggle bind:value={values.showMedia} />
         </div>
         <p class="text-sm text-gray-4">
-          If enabled, coracle will automatically retrieve a link preview for the last link in any
-          note.
+          If enabled, {appName} will automatically retrieve a link preview for the last link in any note.
         </p>
       </div>
       <div class="flex flex-col gap-1">
@@ -72,8 +71,8 @@
           <i slot="before" class="fa-solid fa-server" />
         </Input>
         <p class="text-sm text-gray-4">
-          Enter a custom url for Coracle's helper application. Dufflepud is used for hosting images
-          and loading link previews. You can find the source code <Anchor
+          Enter a custom url for {appName}'s helper application. Dufflepud is used for hosting
+          images and loading link previews. You can find the source code <Anchor
             href="https://github.com/coracle-social/dufflepud">here</Anchor
           >.
         </p>
@@ -99,8 +98,8 @@
           <Toggle bind:value={values.reportAnalytics} />
         </div>
         <p class="text-sm text-gray-4">
-          Keep this enabled if you would like the Coracle developers to be able to know what
-          features are used, and to diagnose and fix bugs.
+          Keep this enabled if you would like developers to be able to know what features are used,
+          and to diagnose and fix bugs.
         </p>
       </div>
       <Button type="submit" class="text-center">Save</Button>

src/partials/state.ts

@@ -6,6 +6,10 @@ import {writable, get} from "svelte/store"
 import {globalHistory} from "svelte-routing/src/history"
 import {sleep, synced, WritableList} from "src/util/misc"
 
+// Settings
+
+export const appName = import.meta.env.VITE_APP_NAME
+
 // Location
 
 export const location = (() => {

vite.config.js

@@ -6,6 +6,8 @@ import sveltePreprocess from "svelte-preprocess"
 import {svelte} from "@sveltejs/vite-plugin-svelte"
 import {nodePolyfills} from "vite-plugin-node-polyfills"
 
+console.log(process.env.VITE_APP_NAME)
+
 export default defineConfig({
   server: {
     https: false,
@@ -27,8 +29,8 @@ export default defineConfig({
       registerType: "autoUpdate",
       injectRegister: "auto",
       manifest: {
-        name: "Coracle",
-        short_name: "Coracle",
+        name: process.env.VITE_APP_NAME,
+        short_name: process.env.VITE_APP_NAME,
         description: "Nostr, your way.",
         theme_color: "#EB5E28",
         icons: [