enh: dashboard env var refactor

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 .",

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"

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} />

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 BLOG_DOMAIN = env('PUBLIC_BLOG_DOMAIN', 'pockethost.io')
-export const PUBLIC_APP_DOMAIN = env('PUBLIC_APP_DOMAIN', 'pockethost.io')
+export const APP_DOMAIN = env('PUBLIC_APP_DOMAIN', 'app.pockethost.io')
-export const PUBLIC_HTTP_PROTOCOL = env('PUBLIC_HTTP_PROTOCOL', 'https')
+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)
 

packages/dashboard/src/pocketbase/index.ts

@@ -1,9 +1,5 @@
 import { browser } from '$app/environment'
-import {
+import { HTTP_PROTOCOL, MOTHERSHIP_DOMAIN } from '$src/env'
-  PUBLIC_APP_DB,
-  PUBLIC_APP_DOMAIN,
-  PUBLIC_HTTP_PROTOCOL,
-} 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
   }

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"

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)`
   }
 

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>
 

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>
 

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>
 

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(
+  const ftpUrl = `ftp://${encodeURIComponent(email)}@ftp.${EDGE_APEX_DOMAIN}`
-    email,
-  )}@ftp.sfo-1.${PUBLIC_APP_DOMAIN}`
 </script>
 
 <Card>
-  <CardHeader documentation="https://pockethost.io/docs/usage/ftp">
+  <CardHeader
+    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/ftp`}
+  >
     FTP Access
   </CardHeader>
 

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}

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