enh: dashboard environment variable updates

packages/dashboard/src/components/Navbar.svelte

@@ -2,7 +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 { DOCS_URL } from '$src/env'
   import { handleLogoutAndRedirect } from '$util/database'
   import { getInstances } from '$util/getInstances'
   import { globalInstancesStore } from '$util/stores'
@@ -80,7 +80,7 @@
     >
 
     <a
-      href={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs`}
+      href={`${DOCS_URL()}`}
       class={linkClasses}
       target="_blank"
       rel="noreferrer"

packages/dashboard/src/components/helpers/Meta.svelte

@@ -1,7 +1,7 @@
 <script>
-  import { APP_DOMAIN, HTTP_PROTOCOL } from '$src/env'
+  import { APP_URL } from '$src/env'
 
-  const baseUrl = `${HTTP_PROTOCOL}://${APP_DOMAIN}/`
+  const baseUrl = APP_URL()
   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={APP_DOMAIN} />
+  <meta property="twitter:domain" content={APP_URL()} />
   <meta property="twitter:url" content={baseUrl} />
   <meta name="twitter:title" content="PocketHost" />
   <meta name="twitter:description" content={tagline} />

packages/dashboard/src/components/helpers/Protect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PUBLIC_ROUTES } from '$src/env'
+  import { ROUTES } from '$src/constants'
   import { client } from '$src/pocketbase'
   import { getRouter } from '$util/utilities'
   import { LoggerService } from '@pockethost/common'
@@ -11,7 +11,7 @@
     const router = getRouter()
 
     const { pathname } = router
-    if (!PUBLIC_ROUTES.find((matcher) => matcher.match(pathname))) {
+    if (!ROUTES.find((matcher) => matcher.match(pathname))) {
       const { warn } = LoggerService()
       // Send user to the homepage
       warn(`${pathname} is a private route`)

packages/dashboard/src/constants.ts

@@ -0,0 +1,7 @@
+import publicRoutes from '$util/public-routes.json'
+import UrlPattern from 'url-pattern'
+import base from '../../../package.json'
+
+export const POCKETHOST_VERSION = base.version
+
+export const ROUTES = publicRoutes.map((pattern) => new UrlPattern(pattern))

packages/dashboard/src/env.ts

@@ -1,44 +1,44 @@
-import { dev } from '$app/environment'
-import { env as _env } from '$env/dynamic/public'
-import publicRoutes from '$util/public-routes.json'
-import { LoggerService } from '@pockethost/common'
 import { boolean } from 'boolean'
-import UrlPattern from 'url-pattern'
-import base from '../../../package.json'
 
-export type PublicEnvName = `PUBLIC_${string}`
+/**
+ * These environment variables default to pointing to the production build so frontend development is easy.
+ * If they are specified in .env, those values will prevail.
+ */
 
-export const env = (name: PublicEnvName, _default: string = '') => {
-  const v = _env[name]
-  if (!v) return _default
-  return v
-}
+// The domain name of the lander/marketing site
+export const PUBLIC_BLOG_DOMAIN =
+  import.meta.env.PUBLIC_BLOG_DOMAIN || 'pockethost.io'
 
-export const envi = (name: PublicEnvName, _default: number) =>
-  parseInt(env(name, _default.toString()))
+// The domain name where this dashboard lives
+export const PUBLIC_APP_DOMAIN =
+  import.meta.env.PUBLIC_APP_DOMAIN || 'app.pockethost.io'
 
-export const envb = (name: PublicEnvName, _default: boolean) =>
-  boolean(env(name, _default.toString()))
+// The domain name apex where all instances live (eg, <subdomain>.pockethost.io)
+export const PUBLIC_EDGE_APEX_DOMAIN =
+  import.meta.env.PUBLIC_EDGE_APEX_DOMAIN || 'pockethost.io'
 
-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',
-)
+// The protocol to use, almost always will be https
+export const PUBLIC_HTTP_PROTOCOL =
+  import.meta.env.PUBLIC_HTTP_PROTOCOL || 'https'
 
-export const PUBLIC_DEBUG = envb('PUBLIC_DEBUG', dev)
+// The complete URL to the mothership
+export const PUBLIC_MOTHERSHIP_NAME =
+  import.meta.env.PUBLIC_MOTHERSHIP_NAME || `pockethost-central`
 
-export const PUBLIC_POCKETHOST_VERSION = base.version
+// Whether or not we are in debugging mode - default TRUE
+export const PUBLIC_DEBUG = boolean(import.meta.env.PUBLIC_DEBUG || 'true')
 
-export const PUBLIC_ROUTES = publicRoutes.map(
-  (pattern) => new UrlPattern(pattern),
-)
-
-try {
-  LoggerService()
-} catch {
-  LoggerService({ debug: PUBLIC_DEBUG, trace: false, errorTrace: false })
-}
+// Derived
+export const MOTHERSHIP_URL = `${PUBLIC_HTTP_PROTOCOL}://${PUBLIC_MOTHERSHIP_NAME}/${PUBLIC_EDGE_APEX_DOMAIN}`
+export const WWW_URL = (path = '') =>
+  `${PUBLIC_HTTP_PROTOCOL}://${PUBLIC_BLOG_DOMAIN}/${path}`
+export const BLOG_URL = (path = '') => WWW_URL(`blog/${path}`)
+export const DOCS_URL = (path = '') => WWW_URL(`docs/${path}`)
+export const APP_URL = (path = '') =>
+  `${PUBLIC_HTTP_PROTOCOL}://${PUBLIC_APP_DOMAIN}/${path}`
+export const INSTANCE_URL = (name: string, path = '') =>
+  `${PUBLIC_HTTP_PROTOCOL}://${name}.${PUBLIC_EDGE_APEX_DOMAIN}/${path}`
+export const INSTANCE_ADMIN_URL = (name: string, path = '') =>
+  INSTANCE_URL(name, `_/${path}`)
+export const FTP_URL = (email: string) =>
+  `ftp://${encodeURIComponent(email)}@ftp.${PUBLIC_EDGE_APEX_DOMAIN}`

packages/dashboard/src/pocketbase/index.ts

@@ -1,5 +1,5 @@
 import { browser } from '$app/environment'
-import { HTTP_PROTOCOL, MOTHERSHIP_DOMAIN } from '$src/env'
+import { MOTHERSHIP_URL } from '$src/env'
 import { LoggerService } from '@pockethost/common'
 import {
   createPocketbaseClient,
@@ -13,7 +13,7 @@ export const client = (() => {
     if (clientInstance) return clientInstance
     const { info } = LoggerService()
     info(`Initializing pocketbase client`)
-    const url = `${HTTP_PROTOCOL}://${MOTHERSHIP_DOMAIN}`
+    const url = MOTHERSHIP_URL
     clientInstance = createPocketbaseClient({ url })
     return clientInstance
   }

packages/dashboard/src/routes/+layout.svelte

@@ -1,10 +1,11 @@
 <script>
+  import MediaQuery from '$components/MediaQuery.svelte'
+  import MobileNavDrawer from '$components/MobileNavDrawer.svelte'
   import Navbar from '$components/Navbar.svelte'
   import Meta from '$components/helpers/Meta.svelte'
   import Protect from '$components/helpers/Protect.svelte'
-  import MediaQuery from '$components/MediaQuery.svelte'
-  import MobileNavDrawer from '$components/MobileNavDrawer.svelte'
   import '../app.css'
+  import '../services'
 
   import { isUserLoggedIn } from '$util/stores'
 </script>

packages/dashboard/src/routes/app/instances/[instanceId]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { EDGE_APEX_DOMAIN } from '$src/env'
+  import { INSTANCE_ADMIN_URL } from '$src/env'
   import { assertExists } from '@pockethost/common'
   import { slide } from 'svelte/transition'
   import Code from './Code.svelte'
@@ -43,7 +43,7 @@
   </div>
 
   <a
-    href="https://{$instance.subdomain}.{EDGE_APEX_DOMAIN}/_"
+    href={INSTANCE_ADMIN_URL($instance.subdomain)}
     rel="noreferrer"
     target="_blank"
     class="btn btn-primary"

packages/dashboard/src/routes/app/instances/[instanceId]/Code.svelte

@@ -2,14 +2,14 @@
   import CodeSample from '$components/CodeSample.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 { DOCS_URL, INSTANCE_URL } from '$src/env'
   import { instance } from './store'
 
   let installSnippet = `npm i pocketbase`
 
   let connectionSnippet = ''
   $: {
-    const url = `${HTTP_PROTOCOL}://${$instance.subdomain}.${EDGE_APEX_DOMAIN}`
+    const url = INSTANCE_URL($instance.subdomain)
     connectionSnippet = `import PocketBase from 'pocketbase';\n\nconst url = '${url}'\nconst client = new PocketBase(url)`
   }
 
@@ -39,10 +39,8 @@
   <p>Additional Resources:</p>
   <ul class="list-disc pl-4">
     <li>
-      <a
-        href="https://pocketbase.io/docs/api-records/"
-        target="_blank"
-        class="link">PocketBase Web APIs</a
+      <a href={DOCS_URL(`/api-records/`)} target="_blank" class="link"
+        >PocketBase Web APIs</a
       >
     </li>
     <li>

packages/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte

@@ -1,7 +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 { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { instance } from '../store'
 
@@ -21,9 +21,7 @@
 </script>
 
 <Card>
-  <CardHeader
-    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/maintenance`}
-  >
+  <CardHeader documentation={DOCS_URL(`/usage/maintenance`)}>
     Maintenance Mode
   </CardHeader>
 

packages/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte

@@ -1,7 +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 { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { instance } from '../store'
 
@@ -37,9 +37,7 @@
 </script>
 
 <Card>
-  <CardHeader
-    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/rename-instance`}
-  >
+  <CardHeader documentation={DOCS_URL(`/usage/rename-instance`)}>
     Rename Instance
   </CardHeader>
 

packages/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte

@@ -1,7 +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 { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { instance } from '../store'
 
@@ -32,9 +32,7 @@
 </script>
 
 <Card>
-  <CardHeader
-    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/upgrading`}
-  >
+  <CardHeader documentation={DOCS_URL(`/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 { BLOG_DOMAIN, EDGE_APEX_DOMAIN, HTTP_PROTOCOL } from '$src/env'
+  import { DOCS_URL, FTP_URL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { bash } from 'svelte-highlight/languages'
 
@@ -13,15 +13,11 @@
   if (!email) {
     throw new Error(`Email expected here`)
   }
-  const ftpUrl = `ftp://${encodeURIComponent(email)}@ftp.${EDGE_APEX_DOMAIN}`
+  const ftpUrl = FTP_URL(email)
 </script>
 
 <Card>
-  <CardHeader
-    documentation={`${HTTP_PROTOCOL}://${BLOG_DOMAIN}/docs/usage/ftp`}
-  >
-    FTP Access
-  </CardHeader>
+  <CardHeader documentation={DOCS_URL(`/usage/ftp`)}>FTP Access</CardHeader>
 
   <p class="mb-8">
     Securely access your instance files via FTPS. Use your PocketHost account

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 { EDGE_APEX_DOMAIN } from '$src/env'
+  import { INSTANCE_URL } 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}.{EDGE_APEX_DOMAIN}
+        {INSTANCE_URL(instanceName)}
       </h4>
 
       {#if formError}

packages/dashboard/src/routes/dashboard/InstanceList.svelte

@@ -1,7 +1,7 @@
 <script>
   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_ADMIN_URL } from '$src/env'
   import { globalInstancesStore } from '$util/stores'
 
   // Convert the object of objects into an array of objects
@@ -52,7 +52,7 @@
 
           <a
             class="btn btn-secondary"
-            href={`${HTTP_PROTOCOL}://${instance.subdomain}.${EDGE_APEX_DOMAIN}/_`}
+            href={INSTANCE_ADMIN_URL(instance.subdomain)}
             target="_blank"
           >
             <img

packages/dashboard/src/services.ts

@@ -0,0 +1,8 @@
+import { LoggerService } from '@pockethost/common'
+import { PUBLIC_DEBUG } from './env'
+
+try {
+  LoggerService()
+} catch {
+  LoggerService({ debug: PUBLIC_DEBUG, trace: false, errorTrace: false })
+}

packages/dashboard/src/util/getInstances.ts

@@ -10,10 +10,9 @@ import {
 } from '@pockethost/common'
 import { onDestroy, onMount } from 'svelte'
 
-const { error } = LoggerService()
-const cm = createCleanupManager()
-
 export const getInstances = async () => {
+  const { error } = LoggerService()
+
   onMount(() => {
     if (browser) {
       ;(async () => {
@@ -44,6 +43,7 @@ export const getInstances = async () => {
 }
 
 export const getSingleInstance = async (instanceId: string) => {
+  const cm = createCleanupManager()
   // Only run this on the browser
   if (browser) {
     const { dbg, error } = LoggerService().create(`layout.svelte`)

packages/dashboard/src/util/stores.ts

@@ -7,6 +7,7 @@ import {
   type InstanceId,
 } from '@pockethost/common'
 import { writable } from 'svelte/store'
+import '../services'
 
 export const authStoreState = writable<AuthStoreProps>({
   isValid: false,