Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat-pink-v2' into 'add-date-tooltips'.

Browse Source
This commit is contained in:
Darshan
2025-03-18 15:48:25 +05:30
parent 4e7f622970 7b827f2ca8
commit 1365eea998
23 changed files with 190 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -23,7 +23,7 @@
"@appwrite.io/pink-icons": "0.25.0",
"@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b",
"@appwrite.io/pink-legacy": "^1.0.3",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f17778f",
"@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a0d4aa7",
"@popperjs/core": "^2.11.8",
"@sentry/sveltekit": "^8.38.0",
"@stripe/stripe-js": "^3.5.0",
pnpm-lock.yaml
Generated
+12 -12
View File
@@ -21,8 +21,8 @@ importers:
specifier: ^1.0.3
version: 1.0.3
'@appwrite.io/pink-svelte':
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f17778f
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f17778f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a0d4aa7
version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a0d4aa7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)
'@popperjs/core':
specifier: ^2.11.8
version: 2.11.8
@@ -215,14 +215,14 @@ packages:
resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464}
version: 1.2.1
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a0d4aa7b1d41b9ad5ee388e0e038146baddc199a':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a0d4aa7b1d41b9ad5ee388e0e038146baddc199a}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f17778f35d297f5212804afad01a02c2adb3439f':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f17778f35d297f5212804afad01a02c2adb3439f}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b}
version: 1.0.0-next.7
peerDependencies:
svelte: ^4.0.0
@@ -236,8 +236,8 @@ packages:
'@appwrite.io/pink-legacy@1.0.3':
resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f17778f':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f17778f}
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a0d4aa7':
resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a0d4aa7}
version: 1.0.0-next.85
peerDependencies:
react-dom: ^18.0.0
@@ -4099,11 +4099,11 @@ snapshots:
'@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@74f9464': {}
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a0d4aa7b1d41b9ad5ee388e0e038146baddc199a(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f17778f35d297f5212804afad01a02c2adb3439f(svelte@4.2.19)':
'@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@bcb8ad2b(svelte@4.2.19)':
dependencies:
svelte: 4.2.19
@@ -4116,9 +4116,9 @@ snapshots:
'@appwrite.io/pink-icons': 1.0.0
the-new-css-reset: 1.11.3
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@f17778f(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
'@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@a0d4aa7(react-dom@18.3.1(react@18.3.1))(svelte@4.2.19)':
dependencies:
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@f17778f35d297f5212804afad01a02c2adb3439f(svelte@4.2.19)
'@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@a0d4aa7b1d41b9ad5ee388e0e038146baddc199a(svelte@4.2.19)
'@floating-ui/dom': 1.6.13
'@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.3(svelte@4.2.19))(svelte@4.2.19)
'@melt-ui/svelte': 0.86.3(svelte@4.2.19)
src/lib/components/boxAvatar.svelte
+4 -3
View File
@@ -1,13 +1,14 @@
<script lang="ts">
import { Box } from '.';
import { Layout } from '@appwrite.io/pink-svelte';
</script>
<Box>
<div class="u-flex u-gap-16">
<Layout.Stack direction="row" justifyContent="flex-start">
<slot name="image" />
<div class="u-cross-child-center u-line-height-1-5">
<div>
<slot name="title" />
<slot />
</div>
</div>
</Layout.Stack>
</Box>
src/lib/layout/createProject.svelte
+2 -6
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Layout, Typography, Input, Tag, Icon, Button } from '@appwrite.io/pink-svelte';
import { Layout, Typography, Input, Tag, Icon } from '@appwrite.io/pink-svelte';
import { IconPencil } from '@appwrite.io/pink-icons-svelte';
import { CustomId } from '$lib/components/index.js';
import type { Region } from '$lib/sdk/billing';
@@ -11,7 +11,6 @@
export let regions: Array<Region> = [];
export let region: string;
export let showTitle = true;
export let createProject: () => Promise<void>;
let showCustomId = false;
@@ -81,9 +80,6 @@
{/if}
</Layout.Stack>
</Layout.Stack>
<Layout.Stack direction="row" justifyContent="flex-end"
><Button.Button type="button" variant="primary" size="s" on:click={createProject}>
Create</Button.Button>
</Layout.Stack>
<slot name="submit"></slot>
</Layout.Stack>
</form>
src/lib/layout/wizard.svelte
+29 -45
View File
@@ -15,6 +15,7 @@
hideFooter?: boolean;
column?: boolean;
columnSize?: 's' | 'm' | 'l';
stickySide?: boolean;
onExit?: () => void;
}
| {
@@ -26,6 +27,7 @@
hideFooter?: boolean;
column?: boolean;
columnSize?: 's' | 'm' | 'l';
stickySide?: boolean;
onExit?: () => void;
};
@@ -37,6 +39,7 @@
export let hideFooter = false;
export let column: $$Props['column'] = false;
export let columnSize: $$Props['columnSize'] = 'm';
export let stickySide: $$Props['stickySide'] = false;
export let onExit: $$Props['onExit'] = undefined;
function handleKeydown(event: KeyboardEvent) {
@@ -57,32 +60,32 @@
<svelte:window on:keydown={handleKeydown} />
<div class="wizard-position">
<Layout.Wizard
{title}
{invertColumns}
{column}
{columnSize}
{hideFooter}
href={confirmExit ? null : href}
buttonMethod={() => {
if (confirmExit) {
showExitModal = true;
} else {
trackEvent('wizard_exit', {
from: 'button'
});
}
}}>
<slot />
<svelte:fragment slot="aside">
<slot name="aside" />
</svelte:fragment>
<svelte:fragment slot="footer">
<slot name="footer" />
</svelte:fragment>
</Layout.Wizard>
</div>
<Layout.Wizard
{title}
{invertColumns}
{column}
{columnSize}
{stickySide}
{hideFooter}
href={confirmExit ? null : href}
buttonMethod={() => {
if (confirmExit) {
showExitModal = true;
} else {
goto(href);
trackEvent('wizard_exit', {
from: 'button'
});
}
}}>
<slot />
<svelte:fragment slot="aside">
<slot name="aside" />
</svelte:fragment>
<svelte:fragment slot="footer">
<slot name="footer" />
</svelte:fragment>
</Layout.Wizard>
{#if showExitModal}
<WizardExitModal
@@ -107,22 +110,3 @@
</slot>
</WizardExitModal>
{/if}
<style lang="scss">
.wizard-position {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
width: 100%;
height: 100%;
max-height: 100dvh;
overflow-y: auto;
}
// :global(html) {
// overflow-y: hidden;
// }
</style>
src/routes/(console)/onboarding/create-project/+page.svelte
+13 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { Card } from '@appwrite.io/pink-svelte';
import { Card, Layout, Button } from '@appwrite.io/pink-svelte';
import type { RegionList } from '$lib/sdk/billing';
import { isCloud } from '$lib/system';
import { sdk } from '$lib/stores/sdk';
@@ -111,8 +111,18 @@
regions={isCloud ? data.regions.regions : []}
bind:projectName
bind:id
bind:region
{createProject} /></Card.Base>
bind:region>
<svelte:fragment slot="submit"
><Layout.Stack direction="row" justifyContent="flex-end"
><Button.Button
type="button"
variant="primary"
size="s"
on:click={createProject}>
Create</Button.Button>
</Layout.Stack></svelte:fragment>
</CreateProject>
</Card.Base>
{/if}
</div>
src/routes/(console)/organization-[organization]/createProjectCloud.svelte
+7 -2
View File
@@ -8,7 +8,7 @@
import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
import { ID, Region as ConsoleRegion } from '@appwrite.io/console';
import { createProject } from './wizard/store';
import { wizard } from '$lib/stores/wizard';
import { Button } from '@appwrite.io/pink-svelte';
import { base } from '$app/paths';
import CreateProject from '$lib/layout/createProject.svelte';
import { Modal } from '$lib/components';
@@ -67,4 +67,9 @@
bind:id={$createProject.id}
bind:projectName={$createProject.name}
bind:region={$createProject.region}
{regions} /></Modal>
{regions} />
<svelte:fragment slot="footer"
><Button.Button type="button" variant="primary" size="s" on:click={create}>
Create</Button.Button
></svelte:fragment>
</Modal>
src/routes/(console)/project-[project]/functions/create-function/+page.svelte
+1 -1
View File
@@ -66,7 +66,7 @@
}
</script>
<Wizard title="Create function" href={previousPage} column columnSize="l">
<Wizard title="Create function" href={previousPage} column columnSize="l" hideFooter>
<Layout.Stack gap="l">
<Layout.GridFraction start={4} end={6} gap="l" rowSize="auto">
<Card.Base>
src/routes/(console)/project-[project]/functions/create-function/manual/+page.svelte
+7 -2
View File
@@ -136,9 +136,14 @@
<Layout.Stack gap="xl">
<Layout.Stack gap="s">
<Typography.Text color="--fgcolor-neutral-primary">
Upload a zip file (tar.gz) containing your function source code
Upload a tar.gz file containing your function source code
</Typography.Text>
<Upload.Dropzone bind:files title="Upload function">
<Upload.Dropzone
bind:files
title="Upload function"
extensions={['gz', 'tar']}
maxSize={10000000}
required>
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack
src/routes/(console)/project-[project]/functions/function-[function]/(modals)/createManual.svelte
+2 -2
View File
@@ -63,8 +63,8 @@
<Modal title="Create manual deployment" {error} bind:show onSubmit={create}>
<p class="text">
Manually deploy a function by uploading a zip file containing the source code and a relative
path to the entry point.
Manually deploy a function by uploading a tar.gz file containing the source code and a
relative path to the entry point.
<a
href="https://appwrite.io/docs/products/functions/deployment"
target="_blank"
src/routes/(console)/project-[project]/overview/platforms/components/JavascriptFrameworkIcon.svelte
+5
View File
@@ -0,0 +1,5 @@
<script>
import { SvgIcon } from '$lib/components';
</script>
<SvgIcon name="js" type="color" iconSize="" />
src/routes/(console)/project-[project]/overview/platforms/components/index.ts
+9
View File
@@ -0,0 +1,9 @@
export { default as AngularFrameworkIcon } from './AngularFrameworkIcon.svelte';
export { default as ConnectionLine } from './ConnectionLine.svelte';
export { default as JavascriptFrameworkIcon } from './JavascriptFrameworkIcon.svelte';
export { default as NextjsFrameworkIcon } from './NextjsFrameworkIcon.svelte';
export { default as NoFrameworkIcon } from './NoFrameworkIcon.svelte';
export { default as NuxtFrameworkIcon } from './NuxtFrameworkIcon.svelte';
export { default as ReactFrameworkIcon } from './ReactFrameworkIcon.svelte';
export { default as SvelteFrameworkIcon } from './SvelteFrameworkIcon.svelte';
export { default as VueFrameworkIcon } from './AngularFrameworkIcon.svelte';
src/routes/(console)/project-[project]/overview/platforms/createWeb.svelte
+53 -19
View File
@@ -22,7 +22,8 @@
IconNuxt,
IconInfo,
IconExternalLink,
IconAngular
IconAngular,
IconJs
} from '@appwrite.io/pink-icons-svelte';
import { page } from '$app/stores';
import { type ComponentType, onMount } from 'svelte';
@@ -33,13 +34,16 @@
import ConnectionLine from './components/ConnectionLine.svelte';
import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
import { PlatformType } from '@appwrite.io/console';
import ReactFrameworkIcon from './components/ReactFrameworkIcon.svelte';
import SvelteFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/SvelteFrameworkIcon.svelte';
import NuxtFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/NuxtFrameworkIcon.svelte';
import NextjsFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/NextjsFrameworkIcon.svelte';
import VueFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/VueFrameworkIcon.svelte';
import NoFrameworkIcon from './components/NoFrameworkIcon.svelte';
import AngularFrameworkIcon from '$routes/(console)/project-[project]/overview/platforms/components/AngularFrameworkIcon.svelte';
import {
ReactFrameworkIcon,
SvelteFrameworkIcon,
NuxtFrameworkIcon,
NextjsFrameworkIcon,
VueFrameworkIcon,
NoFrameworkIcon,
AngularFrameworkIcon,
JavascriptFrameworkIcon
} from './components/index';
export let key;
@@ -51,8 +55,8 @@
const projectId = $page.params.project;
const updateConfigCode = `APPWRITE_PROJECT_ID = "${projectId}"
APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
const updateConfigCode = (prefix = '') => `${prefix}APPWRITE_PROJECT_ID = "${projectId}"
${prefix}APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
`;
type FrameworkType = {
key: string;
@@ -60,6 +64,8 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
icon: ComponentType;
smallIcon: ComponentType;
portNumber: number;
runCommand: string;
updateConfigCode: string;
};
export let platform: PlatformType = PlatformType.Flutterandroid;
export let selectedFrameworkKey: string | undefined = key ? key : undefined;
@@ -70,42 +76,63 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
label: 'Svelte',
icon: SvelteFrameworkIcon,
smallIcon: IconSvelte,
portNumber: 5173
portNumber: 5173,
runCommand: 'npm run dev',
updateConfigCode: updateConfigCode('PUBLIC_')
},
{
key: 'react',
label: 'React',
icon: ReactFrameworkIcon,
smallIcon: IconReact,
portNumber: 5173
portNumber: 5173,
runCommand: 'npm run dev',
updateConfigCode: updateConfigCode('VITE_')
},
{
key: 'nuxt',
label: 'Nuxt',
icon: NuxtFrameworkIcon,
smallIcon: IconNuxt,
portNumber: 3000
portNumber: 3000,
runCommand: 'npm run dev',
updateConfigCode: updateConfigCode('NUXT_')
},
{
key: 'nextjs',
label: 'Next.js',
icon: NextjsFrameworkIcon,
smallIcon: NextjsFrameworkIcon,
portNumber: 3000
portNumber: 3000,
runCommand: 'npm run dev',
updateConfigCode: updateConfigCode('NEXT_PUBLIC_')
},
{
key: 'vue',
label: 'Vue',
icon: VueFrameworkIcon,
smallIcon: IconVue,
portNumber: 5173
portNumber: 5173,
runCommand: 'npm run dev',
updateConfigCode: updateConfigCode('VITE_')
},
{
key: 'angular',
label: 'Angular',
icon: AngularFrameworkIcon,
smallIcon: IconAngular,
portNumber: 4200
portNumber: 4200,
runCommand: 'npm run start',
updateConfigCode: `appwriteEndpoint: '${sdk.forProject.client.config.endpoint}',\nappwriteProjectId:'${projectId}'`
},
{
key: 'js',
label: 'Javascript',
icon: JavascriptFrameworkIcon,
smallIcon: IconJs,
portNumber: 5173,
runCommand: 'npm run dev',
updateConfigCode: updateConfigCode('VITE_')
}
];
@@ -165,7 +192,7 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
});
</script>
<Wizard title="Add web platform" bind:showExitModal confirmExit>
<Wizard title="Add web platform" bind:showExitModal>
<Form onSubmit={createWebPlatform}>
<Layout.Stack gap="xxl">
<!-- Step One -->
@@ -249,7 +276,10 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
<!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
<div class="pink2-code-margin-fix">
<Code lang="bash" lineNumbers code={updateConfigCode} />
<Code
lang="bash"
lineNumbers
code={selectedFramework.updateConfigCode} />
</div>
<Typography.Text variant="m-500"
@@ -261,9 +291,13 @@ APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject.client.config.endpoint}"
</div>
<Typography.Text variant="m-500"
>3. Run the app, then click the <InlineCode
>4. Run the app, then click the <InlineCode
size="s"
code="Send a ping" /> button to verify the setup.</Typography.Text>
<!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
<div class="pink2-code-margin-fix">
<Code lang="bash" lineNumbers code={selectedFramework.runCommand} />
</div>
</Layout.Stack>
</Fieldset>
<Card.Base padding="s"
src/routes/(console)/project-[project]/rawVariableEditor.svelte
-11
View File
@@ -127,21 +127,10 @@
window.URL.revokeObjectURL(url);
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Enter') {
if (tab === 'env') {
envCode += '\n';
} else {
jsonCode += '\n';
}
}
}
$: isButtonDisabled =
(tab === 'env' && baseEnvCode === envCode) || (tab === 'json' && baseJsonCode === jsonCode);
</script>
<svelte:window on:keydown={handleKeydown} />
<Modal
title="Editor"
bind:show={showEditor}
src/routes/(console)/project-[project]/sites/(components)/logs.svelte
+2
View File
@@ -31,6 +31,7 @@
export let deployment: Models.Deployment;
export let hideTitle = false;
export let hideScrollButtons = false;
export let height = 'auto';
export let fullHeight = false;
let { status, buildLogs } = deployment;
@@ -76,6 +77,7 @@
{#key buildLogs}
<Logs
{fullHeight}
{height}
showScrollButton={!hideScrollButtons}
logs={buildLogs || 'No logs available'}
bind:theme={$app.themeInUse} />
src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte
+5 -1
View File
@@ -35,7 +35,11 @@
</Layout.Stack>
</Card.Base>
<Fieldset legend="Deploy">
<Logs bind:deployment={data.deployment} bind:site={data.site} hideScrollButtons />
<Logs
bind:deployment={data.deployment}
bind:site={data.site}
hideScrollButtons
height="calc(100dvh - 430px)" />
</Fieldset>
</Layout.Stack>
<svelte:fragment slot="aside">
src/routes/(console)/project-[project]/sites/create-site/manual/+page.svelte
+2 -2
View File
@@ -137,9 +137,9 @@
<Layout.Stack gap="xl">
<Layout.Stack gap="s">
<Typography.Text color="--fgcolor-neutral-primary">
Upload a zip file (tar.gz) containing your function source code
Upload a tar.gz containing your function source code
</Typography.Text>
<Upload.Dropzone extensions={['gz', 'zip']} bind:files maxSize={10000000} required>
<Upload.Dropzone extensions={['gz', 'tar']} bind:files maxSize={10000000} required>
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack
src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte
+18 -6
View File
@@ -1,14 +1,15 @@
<script lang="ts">
import { base } from '$app/paths';
import { EmptySearch, PaginationWithLimit } from '$lib/components';
import { EmptySearch, PaginationWithLimit, SvgIcon } from '$lib/components';
import { Button, InputSearch } from '$lib/elements/forms';
import { page } from '$app/stores';
import Wizard from '$lib/layout/wizard.svelte';
import { goto } from '$app/navigation';
import { debounce } from '$lib/helpers/debounce.js';
import { Card, Layout, Accordion, Selector } from '@appwrite.io/pink-svelte';
import { Card, Layout, Accordion, Selector, Tooltip } from '@appwrite.io/pink-svelte';
import { capitalize } from '$lib/helpers/string';
import { app } from '$lib/stores/app.js';
import { getFrameworkIcon } from '../../store.js';
export let data;
@@ -69,6 +70,7 @@
href={`${base}/project-${$page.params.project}/sites/`}
title="Create site"
invertColumns
stickySide
hideFooter>
<svelte:fragment slot="aside">
<Layout.Stack gap="xl">
@@ -95,7 +97,7 @@
{/each}
</Layout.Stack>
</Accordion>
<Accordion title="Framework">
<Accordion title="Framework" open>
<Layout.Stack>
{#each [...data.frameworks] as framework}
<Layout.Stack direction="row" gap="s">
@@ -126,13 +128,23 @@
padding="xxs">
<Card.Media
title={template.name}
description={templateFrameworks.join(', ')}
src={$app.themeInUse === 'dark'
? template?.screenshotDark ||
`${base}/images/sites/screenshot-placeholder-dark.svg`
: template?.screenshotDark ||
: template?.screenshotLight ||
`${base}/images/sites/screenshot-placeholder-light.svg`}
alt={template.name}>
alt={template.name}
avatar>
<svelte:fragment slot="avatar">
<Tooltip>
<SvgIcon
name={getFrameworkIcon(templateFrameworks[0])}
iconSize="small" />
<svelte:fragment slot="tooltip">
{capitalize(templateFrameworks[0])}
</svelte:fragment>
</Tooltip>
</svelte:fragment>
</Card.Media>
</Card.Link>
{/each}
src/routes/(console)/project-[project]/sites/create-site/templates/+page.ts
+4 -1
View File
@@ -17,7 +17,7 @@ export const load = async ({ url, route }) => {
console.log(siteTemplatesList);
const [frameworks, useCases] = siteTemplatesList.templates.reduce(
const [frameworksSet, useCasesSet] = siteTemplatesList.templates.reduce(
([fr, uc], next) => {
next.useCases.forEach((useCase) => uc.add(useCase));
next.frameworks.forEach((framework) => fr.add(framework.name));
@@ -26,6 +26,9 @@ export const load = async ({ url, route }) => {
[new Set<string>(), new Set<string>()]
);
const frameworks = Array.from(frameworksSet).sort((a, b) => a.localeCompare(b));
const useCases = Array.from(useCasesSet).sort((a, b) => a.localeCompare(b));
const templates = siteTemplatesList.templates.filter((template) => {
if (
filter.frameworks.length > 0 &&
src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
+3 -14
View File
@@ -30,11 +30,12 @@
null,
2
);
const baseEnvCode = envCode;
const baseJsonCode = jsonCode;
let baseEnvCode = envCode;
let baseJsonCode = jsonCode;
if (jsonCode === '{}') {
jsonCode = '';
baseJsonCode = '';
}
let tab: 'env' | 'json' = 'env';
@@ -108,24 +109,12 @@
window.URL.revokeObjectURL(url);
}
function handleKeydown(event: KeyboardEvent) {
if (event.key === 'Enter') {
if (tab === 'env') {
envCode += '\n';
} else {
jsonCode += '\n';
}
}
}
$: isButtonDisabled =
(tab === 'env' && baseEnvCode === envCode) || (tab === 'json' && baseJsonCode === jsonCode);
// TODO: merge this component with the rawVariableEditor?
</script>
<svelte:window on:keydown={handleKeydown} />
<Modal
title="Editor"
bind:show={showEditor}
src/routes/(console)/project-[project]/sites/createSiteModal.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
variant="secondary"
padding="xs"
radius="s"
href={`${base}/project-${$page.params.project}/sites/create-site/templates`}>
href={`${base}/project-${$page.params.project}/sites/create-site/templates?framework=React&framework=Vue.js&framework=Next.js&framework=SvelteKit&framework=Nuxt`}>
<Image
alt="repositories"
radius="xxs"
src/routes/(console)/project-[project]/sites/grid.svelte
+8 -2
View File
@@ -3,13 +3,14 @@
import { page } from '$app/stores';
import { timeFromNow } from '$lib/helpers/date';
import type { Models } from '@appwrite.io/console';
import { Card, Layout } from '@appwrite.io/pink-svelte';
import { Card, Layout, Tooltip } from '@appwrite.io/pink-svelte';
import { getFrameworkIcon } from './store';
import { SvgIcon } from '$lib/components';
import { app } from '$lib/stores/app';
import { getApiEndpoint } from '$lib/stores/sdk';
import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte';
import SitesActionMenu from './sitesActionMenu.svelte';
import { capitalize } from '$lib/helpers/string';
export let siteList: Models.SiteList;
export let deployments: Models.Deployment[];
@@ -51,7 +52,12 @@
alt={site.name}
avatar>
<svelte:fragment slot="avatar">
<SvgIcon name={getFrameworkIcon(site.framework)} iconSize="small" />
<Tooltip>
<SvgIcon name={getFrameworkIcon(site.framework)} iconSize="small" />
<svelte:fragment slot="tooltip">
{capitalize(site.framework)}
</svelte:fragment>
</Tooltip>
</svelte:fragment>
<SitesActionMenu {site} bind:showAddCollaborator bind:selectedSite />
</Card.Media>
src/routes/(console)/project-[project]/sites/site-[site]/deployments/createManualDeploymentModal.svelte
+2 -2
View File
@@ -46,9 +46,9 @@
<span slot="description"> Manually deploy a site by uploading any file(s) or folder. </span>
<Layout.Stack gap="s">
<Typography.Text color="--fgcolor-neutral-primary">
Upload a zip file (tar.gz) containing your function source code
Upload a tar.gz file containing your function source code
</Typography.Text>
<Upload.Dropzone extensions={['gz', 'zip']} bind:files maxSize={10000000} required>
<Upload.Dropzone extensions={['gz', 'tar']} bind:files maxSize={10000000} required>
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack