From ebd0802baf3e7958f30139c4ed72ccd4e2094be4 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Wed, 11 Oct 2023 05:57:49 -0700
Subject: [PATCH] enh: dashboard env var refactor

---
 packages/dashboard/package.json                  |  2 +-
 packages/dashboard/src/components/Navbar.svelte  |  3 ++-
 .../dashboard/src/components/helpers/Meta.svelte |  6 +++---
 packages/dashboard/src/env.ts                    | 11 ++++++++---
 packages/dashboard/src/pocketbase/index.ts       |  8 ++------
 .../app/instances/[instanceId]/+page.svelte      | 16 ++++++++--------
 .../app/instances/[instanceId]/Code.svelte       |  6 +++---
 .../[instanceId]/Danger/Maintenance.svelte       |  5 ++++-
 .../[instanceId]/Danger/RenameInstance.svelte    |  5 ++++-
 .../[instanceId]/Danger/VersionChange.svelte     |  5 ++++-
 .../app/instances/[instanceId]/Ftpx.svelte       | 10 +++++-----
 .../dashboard/src/routes/app/new/+page.svelte    |  4 ++--
 .../src/routes/dashboard/InstanceList.svelte     |  9 +++------
 13 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
index 59e40c98..30a12b92 100644
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preview": "npx http-server@latest ./build -P \"http://localhost:8080?\"",
-    "dev": "vite dev --force",
+    "dev": "DEBUG=1 source ../../.env && vite dev --force",
     "build": "vite build",
     "lint": "prettier --check .",
     "format": "prettier --write .",
diff --git a/packages/dashboard/src/components/Navbar.svelte b/packages/dashboard/src/components/Navbar.svelte
index d30c501a..61755df6 100644
--- a/packages/dashboard/src/components/Navbar.svelte
+++ b/packages/dashboard/src/components/Navbar.svelte
@@ -2,6 +2,7 @@
   import { page } from '$app/stores'
   import Logo from '$components/Logo.svelte'
   import MediaQuery from '$components/MediaQuery.svelte'
+  import { BLOG_DOMAIN, HTTP_PROTOCOL } from '$src/env'
   import { handleLogoutAndRedirect } from '$util/database'
   import { getInstances } from '$util/getInstances'
   import { globalInstancesStore } from '$util/stores'
@@ -79,7 +80,7 @@
     >
 
     <a
-      href="https://pockethost.io/docs"
+      href={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs`}
       class={linkClasses}
       target="_blank"
       rel="noreferrer"
diff --git a/packages/dashboard/src/components/helpers/Meta.svelte b/packages/dashboard/src/components/helpers/Meta.svelte
index d9ebf101..e6e4902d 100644
--- a/packages/dashboard/src/components/helpers/Meta.svelte
+++ b/packages/dashboard/src/components/helpers/Meta.svelte
@@ -1,7 +1,7 @@
 <script>
-  import { PUBLIC_APP_DOMAIN, PUBLIC_HTTP_PROTOCOL } from '$src/env'
+  import { APP_DOMAIN, HTTP_PROTOCOL } from '$src/env'
 
-  const baseUrl = `${PUBLIC_HTTP_PROTOCOL}://${PUBLIC_APP_DOMAIN}/`
+  const baseUrl = `${HTTP_PROTOCOL}://${APP_DOMAIN}/`
   const imageUrl = `${baseUrl}poster.png`
   const tagline = `Get a PocketBase backend for your next app in under 10 seconds.`
 </script>
@@ -22,7 +22,7 @@
 
   <!-- Twitter Meta Tags -->
   <meta name="twitter:card" content="summary_large_image" />
-  <meta property="twitter:domain" content={PUBLIC_APP_DOMAIN} />
+  <meta property="twitter:domain" content={APP_DOMAIN} />
   <meta property="twitter:url" content={baseUrl} />
   <meta name="twitter:title" content="PocketHost" />
   <meta name="twitter:description" content={tagline} />
diff --git a/packages/dashboard/src/env.ts b/packages/dashboard/src/env.ts
index e479d05d..b248781d 100644
--- a/packages/dashboard/src/env.ts
+++ b/packages/dashboard/src/env.ts
@@ -20,9 +20,14 @@ export const envi = (name: PublicEnvName, _default: number) =>
 export const envb = (name: PublicEnvName, _default: boolean) =>
   boolean(env(name, _default.toString()))
 
-export const PUBLIC_APP_DB = env('PUBLIC_APP_DB', 'pockethost-central')
-export const PUBLIC_APP_DOMAIN = env('PUBLIC_APP_DOMAIN', 'pockethost.io')
-export const PUBLIC_HTTP_PROTOCOL = env('PUBLIC_HTTP_PROTOCOL', 'https')
+export const BLOG_DOMAIN = env('PUBLIC_BLOG_DOMAIN', 'pockethost.io')
+export const APP_DOMAIN = env('PUBLIC_APP_DOMAIN', 'app.pockethost.io')
+export const EDGE_APEX_DOMAIN = env('PUBLIC_EDGE_APEX_DOMAIN', 'pockethost.io')
+export const HTTP_PROTOCOL = env('PUBLIC_HTTP_PROTOCOL', 'https')
+export const MOTHERSHIP_DOMAIN = env(
+  'PUBLIC_MOTHERSHIP_DOMAIN',
+  'pockethost-central.pockethost.io',
+)
 
 export const PUBLIC_DEBUG = envb('PUBLIC_DEBUG', dev)
 
diff --git a/packages/dashboard/src/pocketbase/index.ts b/packages/dashboard/src/pocketbase/index.ts
index bfeb6338..571a6e61 100644
--- a/packages/dashboard/src/pocketbase/index.ts
+++ b/packages/dashboard/src/pocketbase/index.ts
@@ -1,9 +1,5 @@
 import { browser } from '$app/environment'
-import {
-  PUBLIC_APP_DB,
-  PUBLIC_APP_DOMAIN,
-  PUBLIC_HTTP_PROTOCOL,
-} from '$src/env'
+import { HTTP_PROTOCOL, MOTHERSHIP_DOMAIN } from '$src/env'
 import { logger } from '@pockethost/common'
 import {
   createPocketbaseClient,
@@ -17,7 +13,7 @@ export const client = (() => {
     if (clientInstance) return clientInstance
     const { info } = logger()
     info(`Initializing pocketbase client`)
-    const url = `${PUBLIC_HTTP_PROTOCOL}://${PUBLIC_APP_DB}.${PUBLIC_APP_DOMAIN}`
+    const url = `${HTTP_PROTOCOL}://${MOTHERSHIP_DOMAIN}`
     clientInstance = createPocketbaseClient({ url })
     return clientInstance
   }
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
index dd6231b0..72dc1388 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
+  import { APP_DOMAIN } from '$src/env'
   import { assertExists } from '@pockethost/common'
+  import { slide } from 'svelte/transition'
   import Code from './Code.svelte'
-  import UsageChart from './UsageChart.svelte'
+  import DangerZoneTitle from './Danger/DangerZoneTitle.svelte'
+  import Maintenance from './Danger/Maintenance.svelte'
+  import RenameInstance from './Danger/RenameInstance.svelte'
+  import VersionChange from './Danger/VersionChange.svelte'
   import Ftp from './Ftpx.svelte'
   import Logging from './Logging.svelte'
   import Secrets from './Secrets/Secrets.svelte'
+  import UsageChart from './UsageChart.svelte'
   import { instance } from './store'
-  import { PUBLIC_APP_DOMAIN } from '$src/env'
-  import DangerZoneTitle from './Danger/DangerZoneTitle.svelte'
-  import RenameInstance from './Danger/RenameInstance.svelte'
-  import Maintenance from './Danger/Maintenance.svelte'
-  import VersionChange from './Danger/VersionChange.svelte'
-  import { slide } from 'svelte/transition'
 
   $: ({ status, version, secondsThisMonth } = $instance)
 
@@ -43,7 +43,7 @@
   </div>
 
   <a
-    href="https://{$instance.subdomain}.{PUBLIC_APP_DOMAIN}/_"
+    href="https://{$instance.subdomain}.{APP_DOMAIN}/_"
     rel="noreferrer"
     target="_blank"
     class="btn btn-primary"
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
index 613c2241..e723f534 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import CodeSample from '$components/CodeSample.svelte'
-  import { PUBLIC_APP_DOMAIN, PUBLIC_HTTP_PROTOCOL } from '$src/env'
-  import { instance } from './store'
   import Card from '$components/cards/Card.svelte'
   import CardHeader from '$components/cards/CardHeader.svelte'
+  import { EDGE_APEX_DOMAIN, HTTP_PROTOCOL } from '$src/env'
+  import { instance } from './store'
 
   let installSnippet = `npm i pocketbase`
 
   let connectionSnippet = ''
   $: {
-    const url = `${PUBLIC_HTTP_PROTOCOL}://${$instance.subdomain}.${PUBLIC_APP_DOMAIN}`
+    const url = `${HTTP_PROTOCOL}://${$instance.subdomain}.${EDGE_APEX_DOMAIN}`
     connectionSnippet = `import PocketBase from 'pocketbase';\n\nconst url = '${url}'\nconst client = new PocketBase(url)`
   }
 
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte
index a118219c..6f5b55e9 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Card from '$components/cards/Card.svelte'
   import CardHeader from '$components/cards/CardHeader.svelte'
+  import { BLOG_DOMAIN, HTTP_PROTOCOL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { instance } from '../store'
 
@@ -20,7 +21,9 @@
 </script>
 
 <Card>
-  <CardHeader documentation="https://pockethost.io/docs/usage/maintenance">
+  <CardHeader
+    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/maintenance`}
+  >
     Maintenance Mode
   </CardHeader>
 
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte
index 98fe014a..4dcaf73d 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Card from '$components/cards/Card.svelte'
   import CardHeader from '$components/cards/CardHeader.svelte'
+  import { BLOG_DOMAIN, HTTP_PROTOCOL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { instance } from '../store'
 
@@ -36,7 +37,9 @@
 </script>
 
 <Card>
-  <CardHeader documentation="https://pockethost.io/docs/usage/rename-instance">
+  <CardHeader
+    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/rename-instance`}
+  >
     Rename Instance
   </CardHeader>
 
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte
index 53177dd3..4c73d2d0 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Card from '$components/cards/Card.svelte'
   import CardHeader from '$components/cards/CardHeader.svelte'
+  import { BLOG_DOMAIN, HTTP_PROTOCOL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { instance } from '../store'
 
@@ -31,7 +32,9 @@
 </script>
 
 <Card>
-  <CardHeader documentation="https://pockethost.io/docs/usage/upgrading">
+  <CardHeader
+    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/upgrading`}
+  >
     Version Change
   </CardHeader>
 
diff --git a/packages/dashboard/src/routes/app/instances/[instanceId]/Ftpx.svelte b/packages/dashboard/src/routes/app/instances/[instanceId]/Ftpx.svelte
index 95c843f3..2e03f27d 100644
--- a/packages/dashboard/src/routes/app/instances/[instanceId]/Ftpx.svelte
+++ b/packages/dashboard/src/routes/app/instances/[instanceId]/Ftpx.svelte
@@ -2,7 +2,7 @@
   import CodeSample from '$components/CodeSample.svelte'
   import Card from '$components/cards/Card.svelte'
   import CardHeader from '$components/cards/CardHeader.svelte'
-  import { PUBLIC_APP_DOMAIN } from '$src/env'
+  import { BLOG_DOMAIN, EDGE_APEX_DOMAIN, HTTP_PROTOCOL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { bash } from 'svelte-highlight/languages'
 
@@ -13,13 +13,13 @@
   if (!email) {
     throw new Error(`Email expected here`)
   }
-  const ftpUrl = `ftp://${encodeURIComponent(
-    email,
-  )}@ftp.sfo-1.${PUBLIC_APP_DOMAIN}`
+  const ftpUrl = `ftp://${encodeURIComponent(email)}@ftp.${EDGE_APEX_DOMAIN}`
 </script>
 
 <Card>
-  <CardHeader documentation="https://pockethost.io/docs/usage/ftp">
+  <CardHeader
+    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/ftp`}
+  >
     FTP Access
   </CardHeader>
 
diff --git a/packages/dashboard/src/routes/app/new/+page.svelte b/packages/dashboard/src/routes/app/new/+page.svelte
index bd573543..d2c0a6ee 100644
--- a/packages/dashboard/src/routes/app/new/+page.svelte
+++ b/packages/dashboard/src/routes/app/new/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Card from '$components/cards/Card.svelte'
   import CardHeader from '$components/cards/CardHeader.svelte'
-  import { PUBLIC_APP_DOMAIN } from '$src/env'
+  import { EDGE_APEX_DOMAIN } from '$src/env'
   import { handleCreateNewInstance } from '$util/database'
   import { generateSlug } from 'random-word-slugs'
   import { slide } from 'svelte/transition'
@@ -64,7 +64,7 @@
       </div>
 
       <h4 class="text-center font-bold py-12">
-        https://{instanceName}.{PUBLIC_APP_DOMAIN}
+        https://{instanceName}.{EDGE_APEX_DOMAIN}
       </h4>
 
       {#if formError}
diff --git a/packages/dashboard/src/routes/dashboard/InstanceList.svelte b/packages/dashboard/src/routes/dashboard/InstanceList.svelte
index 8c8c7d73..464274ff 100644
--- a/packages/dashboard/src/routes/dashboard/InstanceList.svelte
+++ b/packages/dashboard/src/routes/dashboard/InstanceList.svelte
@@ -1,11 +1,8 @@
 <script>
-  import { globalInstancesStore } from '$util/stores'
-  import { fly } from 'svelte/transition'
-  import { backOut } from 'svelte/easing'
-  import { PUBLIC_APP_DOMAIN } from '$src/env'
-  import ProvisioningStatus from '$components/ProvisioningStatus.svelte'
   import Card from '$components/cards/Card.svelte'
   import CardHeader from '$components/cards/CardHeader.svelte'
+  import { EDGE_APEX_DOMAIN, HTTP_PROTOCOL } from '$src/env'
+  import { globalInstancesStore } from '$util/stores'
 
   // Convert the object of objects into an array of objects
   const allInstancesArray = Object.values($globalInstancesStore)
@@ -55,7 +52,7 @@
 
           <a
             class="btn btn-secondary"
-            href={`https://${instance.subdomain}.${PUBLIC_APP_DOMAIN}/_`}
+            href={`${HTTP_PROTOCOL}://${instance.subdomain}.${EDGE_APEX_DOMAIN}/_`}
             target="_blank"
           >
             <img