Parameterize app name

.env

@@ -1,3 +1,4 @@
 VITE_DEFAULT_PUBKEYS=fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9
+VITE_PLATFORM_NAME=Flotilla
 VITE_PLATFORM_LOGO=/flotilla.png
 VITE_PLATFORM_RELAY=

src/app/components/InfoHandle.svelte

@@ -2,6 +2,7 @@
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import {PLATFORM_NAME} from "@app/state"
 </script>
 
 <div class="column gap-4">
@@ -9,7 +10,7 @@
     <div slot="title">What is a nostr address?</div>
   </ModalHeader>
   <p>
-    Flotilla hosts spaces on the <Link external href="https://nostr.com/" class="underline"
+    {PLATFORM_NAME} hosts spaces on the <Link external href="https://nostr.com/" class="underline"
       >Nostr protocol</Link
     >. Nostr uses "nostr addresses" to make it easier for people to find you, without having to
     memorize your public key (your user id).

src/app/components/InfoKeys.svelte

@@ -2,6 +2,7 @@
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import {PLATFORM_NAME} from "@app/state"
 </script>
 
 <div class="column gap-4">
@@ -22,8 +23,8 @@
   </p>
   <p>
     It's very important to keep private keys safe, but this can sometimes be confusing for
-    newcomers. This is why flotilla supports <strong>remote signer</strong> login. These services can
+    newcomers. This is why {PLATFORM_NAME} supports <strong>remote signer</strong> login. These services
-    store your keys securely for you, giving you access using a username and password.
+    can store your keys securely for you, giving you access using a username and password.
   </p>
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/InfoNostr.svelte

@@ -2,6 +2,7 @@
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import {PLATFORM_NAME} from "@app/state"
 </script>
 
 <div class="column gap-4">
@@ -15,8 +16,8 @@
   </p>
   <p>
     This can be a little confusing when you're just getting started, but as long as you're using
-    Flotilla, it will work just like a normal app. When you're ready to start exploring nostr, visit
+    {PLATFORM_NAME}, it will work just like a normal app. When you're ready to start exploring
-    your settings page to learn more.
+    nostr, visit your settings page to learn more.
   </p>
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/InfoRelay.svelte

@@ -2,6 +2,7 @@
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import {PLATFORM_NAME} from "@app/state"
 </script>
 
 <div class="column gap-4">
@@ -9,7 +10,7 @@
     <div slot="title">What is a relay?</div>
   </ModalHeader>
   <p>
-    Flotilla hosts spaces on the <Link external href="https://nostr.com/" class="underline"
+    {PLATFORM_NAME} hosts spaces on the <Link external href="https://nostr.com/" class="underline"
       >Nostr protocol</Link
     >. Nostr uses "relays" to host data, which are special-purpose servers that speak nostr's
     language. This means that anyone can host their own data, making the web more decentralized and

src/app/components/Landing.svelte

@@ -5,6 +5,7 @@
   import CardButton from "@lib/components/CardButton.svelte"
   import LogIn from "@app/components/LogIn.svelte"
   import SignUp from "@app/components/SignUp.svelte"
+  import {PLATFORM_NAME} from "@app/state"
   import {pushModal} from "@app/modal"
 
   const logIn = () => pushModal(LogIn)
@@ -15,7 +16,7 @@
 <Dialog>
   <div class="column gap-4">
     <div class="py-2">
-      <h1 class="heading">Welcome to Flotilla!</h1>
+      <h1 class="heading">Welcome to {PLATFORM_NAME}!</h1>
       <p class="text-center">The chat app built for sovereign communities.</p>
     </div>
     <Button on:click={logIn}>

src/app/components/LogIn.svelte

@@ -12,6 +12,7 @@
   import LogInInfoRemoteSigner from "@app/components/LogInInfoRemoteSigner.svelte"
   import LogInKey from "@app/components/LogInKey.svelte"
   import {pushModal, clearModals} from "@app/modal"
+  import {PLATFORM_NAME} from "@app/state"
   import {pushToast} from "@app/toast"
   import {loadUserData} from "@app/commands"
 
@@ -116,7 +117,7 @@
 <form class="column gap-4" on:submit|preventDefault={loginWithNip46}>
   <h1 class="heading">Log in with Nostr</h1>
   <p class="m-auto max-w-sm text-center">
-    Flotilla is built using the
+    {PLATFORM_NAME} is built using the
     <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
     you to own your social identity.
   </p>

src/app/components/MenuSettings.svelte

@@ -4,6 +4,7 @@
   import Button from "@lib/components/Button.svelte"
   import CardButton from "@lib/components/CardButton.svelte"
   import LogOut from "@app/components/LogOut.svelte"
+  import {PLATFORM_NAME} from "@app/state"
   import {pushModal} from "@app/modal"
 
   const logout = () => pushModal(LogOut)
@@ -14,21 +15,21 @@
     <CardButton>
       <div slot="icon"><Icon icon="server" size={7} /></div>
       <div slot="title">Relays</div>
-      <div slot="info">Control how Flotilla talks to the network</div>
+      <div slot="info">Control how {PLATFORM_NAME} talks to the network</div>
     </CardButton>
   </Link>
   <Link href="/settings">
     <CardButton>
       <div slot="icon"><Icon icon="settings" size={7} /></div>
       <div slot="title">Settings</div>
-      <div slot="info">Get into the details about how Flotilla works</div>
+      <div slot="info">Get into the details about how {PLATFORM_NAME} works</div>
     </CardButton>
   </Link>
   <Link href="/settings/about">
     <CardButton>
       <div slot="icon"><Icon icon="code-2" size={7} /></div>
       <div slot="title">About</div>
-      <div slot="info">Learn about Flotilla and support the developer</div>
+      <div slot="info">Learn about {PLATFORM_NAME} and support the developer</div>
     </CardButton>
   </Link>
   <Button on:click={logout} class="btn btn-error">

src/app/components/MenuSpace.svelte

@@ -21,6 +21,7 @@
     memberships,
     roomsByUrl,
     GENERAL,
+    PLATFORM_RELAY,
   } from "@app/state"
   import {checkRelayConnection, checkRelayAuth} from "@app/commands"
   import {pushModal} from "@app/modal"
@@ -97,7 +98,7 @@
               Create Invite
             </Button>
           </li>
-          {#if !import.meta.env.VITE_PLATFORM_RELAY}
+          {#if !PLATFORM_RELAY}
             <li>
               {#if getMembershipUrls($userMembership).includes(url)}
                 <Button on:click={leaveSpace} class="text-error">

src/app/components/PrimaryNav.svelte

@@ -8,7 +8,7 @@
   import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
   import MenuSpaces from "@app/components/MenuSpaces.svelte"
   import MenuSettings from "@app/components/MenuSettings.svelte"
-  import {userMembership, getMembershipUrls} from "@app/state"
+  import {userMembership, getMembershipUrls, PLATFORM_RELAY, PLATFORM_LOGO} from "@app/state"
   import {pushModal} from "@app/modal"
   import {makeSpacePath} from "@app/routes"
 
@@ -23,15 +23,15 @@
   <div class="flex h-full flex-col justify-between">
     <div>
       <PrimaryNavItem title="Home" href="/home" class="tooltip-right">
-        <Avatar src={import.meta.env.VITE_PLATFORM_LOGO} class="!h-10 !w-10" />
+        <Avatar src={PLATFORM_LOGO} class="!h-10 !w-10" />
       </PrimaryNavItem>
       <Divider />
-      {#if import.meta.env.VITE_PLATFORM_RELAY}
+      {#if PLATFORM_RELAY}
         <PrimaryNavItem
-          title={displayRelayUrl(import.meta.env.VITE_PLATFORM_RELAY)}
+          title={displayRelayUrl(PLATFORM_RELAY)}
-          href={makeSpacePath(import.meta.env.VITE_PLATFORM_RELAY)}
+          href={makeSpacePath(PLATFORM_RELAY)}
           class="tooltip-right">
-          <SpaceAvatar url={import.meta.env.VITE_PLATFORM_RELAY} />
+          <SpaceAvatar url={PLATFORM_RELAY} />
         </PrimaryNavItem>
       {:else}
         {#each getMembershipUrls($userMembership) as url (url)}

src/app/components/SignUp.svelte

@@ -10,6 +10,7 @@
   import InfoNostr from "@app/components/InfoNostr.svelte"
   import SignUpKey from "@app/components/SignUpKey.svelte"
   import {pushModal, clearModals} from "@app/modal"
+  import {PLATFORM_NAME} from "@app/state"
   import {pushToast} from "@app/toast"
 
   const login = () => pushModal(LogIn)
@@ -74,7 +75,7 @@
 <form class="column gap-4" on:submit|preventDefault={signup}>
   <h1 class="heading">Sign up with Nostr</h1>
   <p class="m-auto max-w-sm text-center">
-    Flotilla is built using the
+    {PLATFORM_NAME} is built using the
     <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
     you to own your social identity.
   </p>

src/app/components/SpaceCreateExternal.svelte

@@ -5,6 +5,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
+  import {PLATFORM_NAME} from "@app/state"
   import {pushModal} from "@app/modal"
 
   const back = () => history.back()
@@ -23,11 +24,11 @@
   </ModalHeader>
   <p>
     <Link class="text-primary" external href="https://relay.tools">relay.tools</Link> is a third-party
-    service that allows anyone to run their own relay for use with Flotilla, or any other nostr-compatible
+    service that allows anyone to run their own relay for use with {PLATFORM_NAME}, or any other
-    app.
+    nostr-compatible app.
   </p>
   <p>
-    Once you've created a relay of your own, come back here to link Flotilla with your new relay.
+    Once you've created a relay of your own, come back here to link {PLATFORM_NAME} with your new relay.
   </p>
   <ModalFooter>
     <Button class="btn btn-link" on:click={back}>

src/app/state.ts

@@ -74,6 +74,14 @@ export const INDEXER_RELAYS = [
   "wss://relay.nostr.band/",
 ]
 
+export const PLATFORM_LOGO = import.meta.env.VITE_PLATFORM_LOGO
+
+export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
+
+export const PLATFORM_RELAY = import.meta.env.VITE_PLATFORM_RELAY
+
+export const DEFAULT_PUBKEYS = import.meta.env.VITE_DEFAULT_PUBKEYS
+
 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"
 
 export const IMGPROXY_URL = "https://imgproxy.coracle.social"
@@ -123,7 +131,7 @@ export const entityLink = (entity: string) => `https://coracle.social/${entity}`
 export const tagRoom = (room: string, url: string) => [ROOM, room, url]
 
 export const getDefaultPubkeys = () => {
-  const appPubkeys = import.meta.env.VITE_DEFAULT_PUBKEYS.split(",")
+  const appPubkeys = DEFAULT_PUBKEYS.split(",")
   const userPubkeys = shuffle(getPubkeyTagValues(getListTags(get(userFollows))))
 
   return userPubkeys.length > 5 ? userPubkeys : [...userPubkeys, ...appPubkeys]

src/routes/chat/[chat]/+page.svelte

@@ -35,7 +35,7 @@
   import ProfileList from "@app/components/ProfileList.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChannelCompose.svelte"
-  import {deriveChat, splitChatId} from "@app/state"
+  import {deriveChat, splitChatId, PLATFORM_NAME} from "@app/state"
   import {pushModal} from "@app/modal"
   import {sendWrapped} from "@app/commands"
 
@@ -147,7 +147,7 @@
             Your inbox is not configured.
           </p>
           <p>
-            In order to deliver messages, Flotilla needs to know where to send them. Please visit
+            In order to deliver messages, {PLATFORM_NAME} needs to know where to send them. Please visit
             your <Link class="link" href="/settings/relays">relay settings page</Link> to set up your
             inbox.
           </p>

src/routes/home/+page.svelte

@@ -6,6 +6,7 @@
   import SpaceAdd from "@app/components/SpaceAdd.svelte"
   import ChatStart from "@app/components/ChatStart.svelte"
   import {pushModal} from "@app/modal"
+  import {PLATFORM_NAME} from "@app/state"
 
   const addSpace = () => pushModal(SpaceAdd)
 
@@ -16,7 +17,7 @@
   <div class="hero-content">
     <div class="column content gap-4">
       <h1 class="text-center text-5xl">Welcome to</h1>
-      <h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
+      <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
       <div class="grid gap-3 lg:grid-cols-2">
         <Button on:click={addSpace}>
           <CardButton>

src/routes/settings/+page.svelte

@@ -7,7 +7,7 @@
   import Button from "@lib/components/Button.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {pushToast} from "@app/toast"
-  import {SETTINGS, userSettings} from "@app/state"
+  import {SETTINGS, PLATFORM_NAME, userSettings} from "@app/state"
 
   const settings = {...$userSettings?.values}
 
@@ -50,7 +50,7 @@
         class="toggle toggle-primary"
         bind:checked={settings.hide_sensitive} />
       <p slot="info">
-        If content is marked by the author as sensitive, flotilla will hide it by default.
+        If content is marked by the author as sensitive, {PLATFORM_NAME} will hide it by default.
       </p>
     </FieldInline>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">

src/routes/settings/about/+page.svelte

@@ -4,6 +4,7 @@
   import Button from "@lib/components/Button.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushDrawer} from "@app/modal"
+  import {PLATFORM_NAME} from "@app/state"
 
   const openProfile = () =>
     pushDrawer(ProfileDetail, {
@@ -15,7 +16,7 @@
   <div class="hero-content">
     <div class="column content gap-6">
       <p class="text-center text-2xl">Thanks for using</p>
-      <h1 class="mb-4 text-center text-5xl font-bold uppercase">Flotilla</h1>
+      <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
       <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
         <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
           <h3 class="text-2xl sm:h-12">Donate</h3>

tailwind.config.js

@@ -1,8 +1,6 @@
 import daisyui from "daisyui"
 import themes from "daisyui/src/theming/themes"
 
-console.log(themes["dark"])
-
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
@@ -26,7 +24,7 @@ export default {
       {
         dark: {
           ...themes["dark"],
-          "primary": "#7161FF",
+          primary: "#7161FF",
         },
       },
     ],