dashboard cleanup

This commit is contained in:
Ben Allfree 2024-10-05 05:40:53 -07:00
parent ed2761e03e
commit c86cdc088d
6 changed files with 68 additions and 127 deletions

View File

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { assertExists } from 'pockethost/common' import { assertExists } from 'pockethost/common'
import Code from './Code.svelte' import Code from './Overview.svelte'
import Ftp from './ftp/+page.svelte' import Ftp from './ftp/+page.svelte'
import { instance } from './store' import { instance } from './store'

View File

@ -1,70 +0,0 @@
<script lang="ts">
import CodeSample from '$components/CodeSample.svelte'
import { DISCORD_URL, INSTANCE_URL } from '$src/env'
import { instance } from './store'
let installSnippet = `npm i pocketbase`
const url = INSTANCE_URL($instance)
let connectionSnippet = ''
$: {
connectionSnippet = `import PocketBase from 'pocketbase';\n\nconst url = '${url}'\nconst client = new PocketBase(url)`
}
let firstQuerySnippet = `const records = await client.collection('posts').getFullList({
sort: '-created',
});`
</script>
<h2>Overview</h2>
<div class="mb-4">
<p>Your PocketBase URL is</p>
<CodeSample code={url} />
</div>
<div class="mb-4">
<p>Installing PocketBase</p>
<CodeSample code={installSnippet} />
</div>
<div class="mb-4">
<p>Connecting to Your Instance</p>
{#if $instance.cname}
{#if $instance.cname_active}
<div class="text-accent">Notice: You are in Custom Domain mode</div>
{:else}
<div class="text-error">
Notice: You are in Custom Domain mode but it is not active and will not
work. Go find <a href={DISCORD_URL} target="_blank" class="link"
>@noaxis on Discord</a
> to get set up.
</div>
{/if}
{/if}
<CodeSample code={connectionSnippet} />
</div>
<div class="mb-4">
<p>Making Your First Query</p>
<CodeSample code={firstQuerySnippet} />
</div>
<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
>
</li>
<li>
<a
href="https://www.npmjs.com/package/pocketbase"
target="_blank"
class="link">PocketBase NPM Package</a
>
</li>
</ul>

View File

@ -1,18 +1,73 @@
<script lang="ts"> <script lang="ts">
import ProvisioningStatus from '$components/ProvisioningStatus.svelte' import CodeSample from '$components/CodeSample.svelte'
import CardHeader from '$src/components/cards/CardHeader.svelte'
import { DISCORD_URL, DOCS_URL, INSTANCE_URL } from '$src/env'
import { instance } from './store' import { instance } from './store'
$: ({ status, version } = $instance) let installSnippet = `npm i pocketbase`
const url = INSTANCE_URL($instance)
let connectionSnippet = ''
$: {
connectionSnippet = `import PocketBase from 'pocketbase';\n\nconst url = '${url}'\nconst client = new PocketBase(url)`
}
let firstQuerySnippet = `const records = await client.collection('posts').getFullList({
sort: '-created',
});`
</script> </script>
<div class="card card-body bg-base-200"> <CardHeader documentation={DOCS_URL(`/usage/accessing-instance/`)}
<h3 class="font-bold text-2xl">Overview</h3> >Overview</CardHeader
>
<div> <div class="mb-4">
Status: <ProvisioningStatus {status} /> <p>Your PocketBase URL is</p>
<CodeSample code={url} />
</div> </div>
<div> <div class="mb-4">
Version: {version} <p>Installing PocketBase</p>
<CodeSample code={installSnippet} />
</div> </div>
<div class="mb-4">
<p>Connecting to Your Instance</p>
{#if $instance.cname}
{#if $instance.cname_active}
<div class="text-accent">Notice: You are in Custom Domain mode</div>
{:else}
<div class="text-error">
Notice: You are in Custom Domain mode but it is not active and will not
work. Go find <a href={DISCORD_URL} target="_blank" class="link"
>@noaxis on Discord</a
> to get set up.
</div> </div>
{/if}
{/if}
<CodeSample code={connectionSnippet} />
</div>
<div class="mb-4">
<p>Making Your First Query</p>
<CodeSample code={firstQuerySnippet} />
</div>
<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
>
</li>
<li>
<a
href="https://www.npmjs.com/package/pocketbase"
target="_blank"
class="link">PocketBase NPM Package</a
>
</li>
</ul>

View File

@ -16,7 +16,7 @@
const ftpUrl = FTP_URL(email) const ftpUrl = FTP_URL(email)
</script> </script>
<h2>FTP Access</h2> <CardHeader documentation={DOCS_URL(`/usage/ftp`)}>FTP Access</CardHeader>
<div class="mb-8"> <div class="mb-8">
Securely access your instance files via FTPS. Use your PocketHost account Securely access your instance files via FTPS. Use your PocketHost account
login and password. login and password.

View File

@ -1,35 +0,0 @@
<script lang="ts">
import { assertExists } from 'pockethost/common'
import { instance } from '../store'
import AdminSync from '../admin-sync/+page.svelte'
import CustomDomain from '../domain/+page.svelte'
import DangerZoneTitle from './DangerZoneTitle.svelte'
import DeleteInstance from '../delete/+page.svelte'
import DevMode from '../dev/+page.svelte'
import RenameInstance from '../rename/+page.svelte'
import VersionChange from '../version/+page.svelte'
$: ({ status, version, id } = $instance)
assertExists($instance, `Expected instance here`)
const { subdomain } = $instance
</script>
<svelte:head>
<title>{subdomain} overview - PocketHost</title>
</svelte:head>
<DangerZoneTitle />
<div class="grid lg:grid-cols-3 gap-4 mb-4">
<RenameInstance />
<VersionChange />
<AdminSync />
<DevMode />
<DeleteInstance />
</div>
<CustomDomain />

View File

@ -1,9 +0,0 @@
<div class="block py-8 mb-4">
<div class="flex items-center justify-center gap-4 w-full">
<i class="fa-solid fa-siren-on text-error"></i>
<h2 class="text-4xl font-bold text-error">Danger Zone</h2>
<i class="fa-solid fa-siren-on text-error"></i>
</div>
</div>