Frontend FTP info page

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

@@ -4,6 +4,7 @@
   import { assertExists } from '@pockethost/common'
   import Backup from './Backup.svelte'
   import Code from './Code.svelte'
+  import Ftp from './Ftpx.svelte'
   import Overview from './Overview.svelte'
   import Restore from './Restore.svelte'
   import { instance } from './store'
@@ -19,6 +20,7 @@
 </svelte:head>
 {#if $instance}
   <Overview instance={$instance} />
+  <Ftp instance={$instance} />
   <Code instance={$instance} />
   <Backup instance={$instance} />
   <Restore instance={$instance} />

packages/pockethost.io/src/routes/app/instances/[instanceId]/Ftpx.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { PUBLIC_APP_DOMAIN } from '$src/env'
+  import type { InstanceFields } from '@pockethost/common'
+
+  export let instance: InstanceFields
+
+  const { subdomain } = instance
+  const ftpUrl = `ftp://${subdomain}.${PUBLIC_APP_DOMAIN}`
+</script>
+
+<div class="py-4">
+  <h2>FTP Access</h2>
+  <div>
+    Securely access your instance files via <a href={ftpUrl}>{ftpUrl}</a>. Use your PocketHost
+    account login and password.
+    <table>
+      <thead><tr><th>Directory</th><th>Description</th></tr></thead>
+      <tr>
+        <th>pb_data</th><td>The PocketBase data directory</td>
+      </tr>
+      <tr>
+        <th>pb_static</th><td>Static files, such as a web frontend</td>
+      </tr>
+      <tr>
+        <th>backups</th><td>Location of tgz backups made using this UI</td>
+      </tr>
+      <tr>
+        <th>workers</th><td>Deno workers (cloud TS/JS functions)</td>
+      </tr>
+    </table>
+  </div>
+</div>
+
+<style lang="scss">
+  table {
+    margin: 10px;
+    td,
+    tr,
+    th {
+      border: 2px solid rgb(92, 92, 157);
+      padding: 5px;
+    }
+  }
+</style>

readme.md

@@ -132,10 +132,9 @@ If all goes well:
 
 **soon**
 
-- Proxy localhost paths to avoid local DNS setup
-
 **next**
 
+- FTP support
 - Cache pocketbase releases
 - Enhance instance uptime