Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-03-30 15:08:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish cosmetics

Browse Source
This commit is contained in:
Ben Allfree 2022-09-19 12:12:31 -07:00
parent 32692fd131
commit cfd04716c6
15 changed files with 257 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/pockethost.io/src/components/Button/Button.svelte
View File

@ -1,22 +1,31 @@
<script lang="ts">
import { goto } from '$app/navigation'
import { Button } from 'sveltestrap'
import { ButtonStyles } from './types'
import { ButtonColors, ButtonSizes } from './types'
export let style: ButtonStyles = ButtonStyles.Wide
export let color: ButtonColors = ButtonColors.Primary
export let size: ButtonSizes = ButtonSizes.Normal
export let disabled = false
export let href: string = '#'
export let click: () => void = () => {
goto(href)
}
const size = style === ButtonStyles.Micro ? 'sm' : 'lg'
</script>
<Button
class={style}
color={'primary'}
{disabled}
block={style === ButtonStyles.Wide}
{size}
on:click={click}><slot /></Button
>
<div class="button">
<Button
class={size}
{color}
{disabled}
block={size === ButtonSizes.Wide}
size={size === ButtonSizes.Micro ? 'sm' : 'lg'}
on:click={click}><slot /></Button
>
</div>
<style lang="scss">
.button {
margin: 2px;
display: inline-block;
}
</style>

20
packages/pockethost.io/src/components/Button/types.ts
View File

@ -1,5 +1,21 @@
export enum ButtonStyles {
export enum ButtonSizes {
Micro = 'micro',
Normal = 'normal',
Wide = 'wide',
Wide = 'wide'
}
/**
* | 'primary'
| 'secondary'
| 'success'
| 'danger'
| 'warning'
| 'info'
| 'light'
| 'dark'
| 'link';
*/
export enum ButtonColors {
Primary = 'primary',
Light = 'light'
}

47
packages/pockethost.io/src/components/CodeSample.svelte
View File

@ -1,35 +1,32 @@
<script lang="ts">
import { Highlight } from 'svelte-highlight'
import { typescript } from 'svelte-highlight/languages'
import Clipboard from './Clipboard.svelte'
import 'svelte-highlight/styles/github.css'
import Button from './Button/Button.svelte'
import { ButtonStyles } from './Button/types'
import CopyButton from './CopyButton.svelte'
import { Highlight } from 'svelte-highlight'
import { typescript } from 'svelte-highlight/languages'
import 'svelte-highlight/styles/github.css'
import CopyButton from './CopyButton.svelte'
export let code: string
const handleCopy = () => {
console.log('copied')
}
export let code: string
const handleCopy = () => {
console.log('copied')
}
</script>
<div class="copy-container">
<Highlight language={typescript} {code} />
<div class="copy-button">
<CopyButton {code} copy={handleCopy} />
</div>
<Highlight language={typescript} {code} />
<div class="copy-button">
<CopyButton {code} copy={handleCopy} />
</div>
</div>
<style type="text/scss">
.copy-container {
position: relative;
margin: 5px;
border: 1px solid gray;
.copy-container {
position: relative;
margin: 5px;
border: 1px solid gray;
.copy-button {
position: absolute;
top: 2px;
right: 2px;
}
}
.copy-button {
position: absolute;
top: 2px;
right: 2px;
}
}
</style>

22
packages/pockethost.io/src/components/CopyButton.svelte
View File

@ -1,17 +1,17 @@
<script lang="ts">
import Button from './Button/Button.svelte'
import { ButtonStyles } from './Button/types'
import Clipboard from './Clipboard.svelte'
import Button from './Button/Button.svelte'
import { ButtonSizes } from './Button/types'
import Clipboard from './Clipboard.svelte'
let isCopied = false
export let code: string
export let copy: () => void
const handleCopy = () => {
isCopied = true
copy()
}
let isCopied = false
export let code: string
export let copy: () => void
const handleCopy = () => {
isCopied = true
copy()
}
</script>
<Clipboard text={code} let:copy on:copy={handleCopy}>
<Button style={ButtonStyles.Micro} click={copy}>{isCopied ? 'Copied!' : 'Copy'}</Button>
<Button size={ButtonSizes.Micro} click={copy}>{isCopied ? 'Copied!' : 'Copy'}</Button>
</Clipboard>

5
packages/pockethost.io/src/components/Icons/Github.svelte Normal file
View File

@ -0,0 +1,5 @@
<script>
import { Icon } from 'sveltestrap'
</script>
<Icon name="github" />

38
packages/pockethost.io/src/components/Navbar.svelte
View File

@ -1,9 +1,24 @@
<script lang="ts">
import { redirect } from '$util/redirect'
import { isLoggedIn, logOut, user } from '@pockethost/common/src/pocketbase'
import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'sveltestrap'
import {
Collapse,
Dropdown,
DropdownItem,
DropdownMenu,
DropdownToggle,
Icon,
Nav,
Navbar,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink
} from 'sveltestrap'
import logo from '../assets/logo-square.png'
import Github from './Icons/Github.svelte'
import NavbarBrandImage from './NavbarBrandImage.svelte'
import NavbarText from './NavbarText.svelte'
import Title from './Title/Title.svelte'
import { TitleSize } from './Title/types'
@ -28,15 +43,21 @@
<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
<Nav class="ms-auto" navbar>
{#if isLoggedIn()}
<NavItem>
<div class="navbar-text">Welcome back, {user()?.email}</div>
</NavItem>
<NavItem />
<NavItem>
<NavLink href="/dashboard">Dashboard</NavLink>
</NavItem>
<NavItem>
<NavLink on:click={handleLogout}>Logout</NavLink>
</NavItem>
<NavItem />
<Dropdown nav inNavbar>
<DropdownToggle nav><Icon name="person-fill" /></DropdownToggle>
<DropdownMenu end>
<DropdownItem>
<NavbarText>{user()?.email}</NavbarText>
</DropdownItem>
<DropdownItem divider />
<DropdownItem><NavLink on:click={handleLogout}>Logout</NavLink></DropdownItem>
</DropdownMenu>
</Dropdown>
{/if}
{#if !isLoggedIn()}
<NavItem>
@ -46,6 +67,9 @@
<NavLink href="/login">Log in</NavLink>
</NavItem>
{/if}
<NavItem>
<NavLink href="https://github.com/benallfree/pockethost"><Github /></NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>

1
packages/pockethost.io/src/components/NavbarText.svelte Normal file
View File

@ -0,0 +1 @@
<div class="navbar-text"><slot /></div>

6
packages/pockethost.io/src/components/Title/Title.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts">
import { TitleSize } from './types'
export let first = 'Pocket'
export let second = 'Host'
export let first = ''
export let second = ''
export let third = ''
export let size: TitleSize = TitleSize.Normal
</script>
@ -12,7 +12,7 @@
<style type="text/scss">
h1 {
color: #ff3e00;
font-size: 12vw;
font-size: 30px;
font-weight: 100;
margin-left: auto;
margin-right: auto;

10
packages/pockethost.io/src/routes/+layout.svelte
View File

@ -5,4 +5,12 @@
<Styles />
<Navbar />
<slot />
<main>
<slot />
</main>
<style lang="scss">
main {
margin-top: 20px;
}
</style>

4
packages/pockethost.io/src/routes/+page.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import Button from '$components/Button/Button.svelte'
import { ButtonStyles } from '$components/Button/types'
import { ButtonSizes } from '$components/Button/types'
import Caption from '$components/Caption/Caption.svelte'
import { CaptionSize } from '$components/Caption/types'
import Feature from '$components/Feature.svelte'
@ -11,7 +11,7 @@
<Caption size={CaptionSize.Hero}>Firebase and Supabase...<br />ljbf</Caption>
<div style="max-width: 400px; margin-left: auto; margin-right: auto">
<Button href="/signup" style={ButtonStyles.Wide}>Get Started Free</Button>
<Button href="/signup" size={ButtonSizes.Wide}>Get Started Free</Button>
</div>
<Gap />
<div>

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

@ -1,5 +1,6 @@
<script lang="ts">
import { page } from '$app/stores'
import Button from '$components/Button/Button.svelte'
import Caption from '$components/Caption/Caption.svelte'
import CodeSample from '$components/CodeSample.svelte'
import Protected from '$components/Protected.svelte'
@ -38,29 +39,39 @@
</script>
<Protected>
<Title />
{#if instance}
{#if instance.status === InstanceStatuses.Started}
<Caption>Your PocketHost instance is now live.</Caption>
<div>
Admin URL: <a href={`${url}/_`} target="_blank">{`${url}/_`}</a>
</div>
<div>
JavaScript:
<CodeSample {code} />
</div>
<main>
<Title />
{#if instance}
{#if instance.status === InstanceStatuses.Started}
<ProvisioningStatus status={instance.status} />
<div>
Admin URL: <a href={`${url}/_`} target="_blank">{`${url}/_`}</a>
</div>
<div>
JavaScript:
<CodeSample {code} />
</div>
{/if}
{#if instance.status !== InstanceStatuses.Started}
<Caption>Please stand by, your instance is starting now...</Caption>
<div class="provisioning">
<ProvisioningStatus status={instance.status} size={ProvisioningSize.Hero} />
</div>
{/if}
{/if}
{#if instance.status !== InstanceStatuses.Started}
<Caption>Please stand by, your instance is starting now...</Caption>
<div class="provisioning">
<ProvisioningStatus status={instance.status} size={ProvisioningSize.Hero} />
</div>
{/if}
{/if}
<Button href="/dashboard">&lt; Back to Dashboard</Button>
</main>
</Protected>
<style lang="scss">
.provisioning {
text-align: center;
main {
margin: 10px;
.provisioning {
text-align: center;
}
a {
text-decoration: initial;
}
}
</style>

8
packages/pockethost.io/src/routes/app/new/+page.svelte
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { browser } from '$app/environment'
import Button from '$components/Button/Button.svelte'
import { ButtonStyles } from '$components/Button/types'
import { ButtonColors, ButtonSizes } from '$components/Button/types'
import Error from '$components/Error/Error.svelte'
import { parseError } from '$components/Error/parseError'
import Protected from '$components/Protected.svelte'
@ -48,13 +48,12 @@
</script>
<Protected>
<Title />
<Title first="New" second="App" />
<main>
<h2>New App</h2>
<div class="caption">Choose a name for your PocketBase app.</div>
<div class="subdomain">
<label for="instanceName">Instance Name</label>
<Button click={() => (instanceName = generateSlug(2))} style={ButtonStyles.Micro}>
<Button click={() => (instanceName = generateSlug(2))} size={ButtonSizes.Micro}>
<Fa icon={faRefresh} /></Button
>
@ -67,6 +66,7 @@
</div>
<Error>{errorMessage}</Error>
<Button click={handleCreate}>Create</Button>
<Button href={`/dashboard`} color={ButtonColors.Light}>Cancel</Button>
</main>
</Protected>

71
packages/pockethost.io/src/routes/dashboard/+page.svelte
View File

@ -1,12 +1,14 @@
<script lang="ts">
import Button from '$components/Button/Button.svelte'
import { ButtonStyles } from '$components/Button/types'
import { ButtonSizes } from '$components/Button/types'
import Gap from '$components/Gap.svelte'
import Protected from '$components/Protected.svelte'
import ProvisioningStatus from '$components/ProvisioningStatus/ProvisioningStatus.svelte'
import Title from '$components/Title/Title.svelte'
import { getAllInstancesById } from '@pockethost/common/src/pocketbase'
import { InstanceStatuses, type Instance_Out_ByIdCollection } from '@pockethost/common/src/schema'
import { values } from '@s-libs/micro-dash'
import { Col, Container, Row } from 'sveltestrap'
let apps: Instance_Out_ByIdCollection = {}
getAllInstancesById()
@ -19,39 +21,56 @@
</script>
<Protected>
<Title />
<Title first="Dash" second="board" />
<main>
<h2>Dashboard</h2>
<h4>Apps</h4>
{#each values(apps) as app}
<div>
<ProvisioningStatus status={app.status} />
{app.subdomain}.pockethost.io
<h2>Apps</h2>
<Container>
{#each values(apps) as app}
<Row>
<Col>
<ProvisioningStatus status={app.status} />
</Col>
<Col>
{app.subdomain}.pockethost.io
</Col>
<Button style={ButtonStyles.Micro} href={`/app/instances/${app.id}`}>Details</Button>
<Button
disabled={app.status !== InstanceStatuses.Started}
style={ButtonStyles.Micro}
click={() => {
window.open(`https://${app.subdomain}.pockethost.io/_`)
}}>Admin</Button
>
</div>
{/each}
<Button href="/app/new">+</Button>
<Col>
<Button size={ButtonSizes.Micro} href={`/app/instances/${app.id}`}>Details</Button>
<Button
disabled={app.status !== InstanceStatuses.Started}
size={ButtonSizes.Micro}
click={() => {
window.open(`https://${app.subdomain}.pockethost.io/_`)
}}>Admin</Button
>
</Col>
</Row>
{/each}
</Container>
<Gap />
<div class="newApp">
<Button href="/app/new" size={ButtonSizes.Wide}>+ New App</Button>
</div>
</main>
</Protected>
<style type="text/scss">
main {
padding: 1em;
margin-left: auto;
margin-top: 10px;
margin-right: auto;
.caption {
font-size: 30px;
margin-top: 20px;
margin-bottom: 20px;
margin-bottom: 10px;
margin-left: auto;
max-width: 600px;
padding: 10px;
h2 {
text-align: center;
}
.newApp {
width: 200px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
}
</style>

40
packages/pockethost.io/src/routes/login/+page.svelte
View File

@ -3,6 +3,7 @@
import Title from '$components/Title/Title.svelte'
import { redirect } from '$util/redirect'
import { authViaEmail } from '@pockethost/common/src/pocketbase'
import { Form, FormGroup, Input, Label } from 'sveltestrap'
let email = ''
let password = ''
@ -21,18 +22,21 @@
}
</script>
<Title first="Log" second="In" />
<Title first="Log" second="in" />
<main>
<error>{loginError}</error>
<div>
<label for="email">Email</label>
<input name="email" type="email" bind:value={email} />
</div>
<div>
<label for="password">Password</label>
<input name="password" type="password" bind:value={password} />
</div>
<Form>
<FormGroup>
<Label for="email">Email</Label>
<Input type="email" id="email" bind:value={email} />
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<Input type="password" id="password" bind:value={password} />
</FormGroup>
</Form>
<div>
Need to <a href="/signup">create an account</a>?
</div>
@ -40,25 +44,9 @@
</main>
<style type="text/scss">
error {
color: red;
display: block;
}
label {
display: block;
font-weight: bold;
width: 200px;
}
main {
padding: 1em;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.caption {
font-size: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
</style>

72
packages/pockethost.io/src/routes/signup/+page.svelte
View File

@ -1,12 +1,15 @@
<script lang="ts">
import Button from '$components/Button/Button.svelte'
import Error from '$components/Error/Error.svelte'
import { parseError } from '$components/Error/parseError'
import Title from '$components/Title/Title.svelte'
import { TitleSize } from '$components/Title/types'
import { redirect } from '$util/redirect'
import { authViaEmail, createUser } from '@pockethost/common/src/pocketbase'
import { Form, FormGroup, Input, Label } from 'sveltestrap'
let email = ''
let errorMessage = ''
let emailError = ''
let password = ''
let passwordError = ''
@ -19,7 +22,7 @@
// .catch((e) => console.error(`user login error`, e))
const handleSignup = () => {
errorMessage = ''
emailError = ''
passwordError = ''
createUser(email, password)
.then((user) => {
@ -33,25 +36,27 @@
.catch((e) => console.error(`user login error`, e))
})
.catch((e) => {
errorMessage = parseError(e)
console.error(errorMessage, e)
emailError = parseError(e)
console.error(emailError, e)
})
}
</script>
<Title first="Sign" second="Up" />
<Title first="Sign" second="up" size={TitleSize.Normal} />
<main>
<div>
<label for="email">Email</label>
<input name="email" type="email" bind:value={email} />
<error>{errorMessage}</error>
</div>
<div>
<label for="password">Password</label>
<input name="password" type="password" bind:value={password} />
<error>{passwordError}</error>
</div>
<Form>
<FormGroup>
<Label for="email">Email Address</Label>
<Input type="email" bind:value={email} id="email" />
<Error>{emailError}</Error>
</FormGroup>
<FormGroup>
<Label for="password">Password</Label>
<Input type="password" name="password" id="password" bind:value={password} />
<Error>{passwordError}</Error>
</FormGroup>
</Form>
<Button click={handleSignup} disabled={email.length === 0 || password.length === 0}>
Sign Up
</Button>
@ -61,25 +66,30 @@
</main>
<style type="text/scss">
error {
color: red;
display: block;
}
label {
display: block;
font-weight: bold;
width: 200px;
}
main {
padding: 1em;
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
error {
color: red;
display: block;
}
.caption {
font-size: 30px;
margin-top: 20px;
margin-bottom: 20px;
label {
display: block;
font-weight: bold;
width: 200px;
}
main {
padding: 1em;
margin-left: auto;
margin-right: auto;
}
.caption {
font-size: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
}
</style>