From 6fe23a8515b73fc801fb45ff6af441a3607dfb16 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 27 Mar 2025 17:20:10 +0100 Subject: [PATCH] feat: template flows (WIP) --- package.json | 2 +- pnpm-lock.yaml | 10 +- src/lib/components/git/repositories.svelte | 2 +- src/lib/stores/sdk.ts | 1 + src/lib/stores/sites.ts | 35 +++++ .../function-[function]/executions/store.ts | 2 +- .../sites/create-site/aside.svelte | 2 +- .../sites/create-site/configuration.svelte | 2 +- .../sites/create-site/deploying/+page.svelte | 2 +- .../sites/create-site/templates/+page.svelte | 2 +- .../template-[template]/+page.svelte | 2 +- .../project-[project]/sites/grid.svelte | 3 +- .../sites/site-[site]/logs/store.ts | 2 +- .../settings/updateBuildSettings.svelte | 2 +- .../project-[project]/sites/store.ts | 36 ----- .../project-[project]/sites/table.svelte | 3 +- .../(public)/template-[template]/+page.svelte | 135 +++++++++++++++++- .../(public)/template-[template]/+page.ts | 42 ++++-- 18 files changed, 217 insertions(+), 68 deletions(-) create mode 100644 src/lib/stores/sites.ts diff --git a/package.json b/package.json index 3a3f88cc0..a4d21dd2a 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "e2e:ui": "playwright test tests/e2e --ui" }, "dependencies": { - "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c", + "@appwrite.io/console": "https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@cfe6b8d", "@appwrite.io/pink-icons": "0.25.0", "@appwrite.io/pink-icons-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5", "@appwrite.io/pink-legacy": "^1.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 33b568696..52ea9b689 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9,8 +9,8 @@ importers: .: dependencies: '@appwrite.io/console': - specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c - version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c + specifier: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@cfe6b8d + version: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@cfe6b8d '@appwrite.io/pink-icons': specifier: 0.25.0 version: 0.25.0 @@ -211,8 +211,8 @@ packages: '@analytics/type-utils@0.6.2': resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==} - '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c': - resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c} + '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@cfe6b8d': + resolution: {tarball: https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@cfe6b8d} version: 1.2.1 '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5': @@ -4241,7 +4241,7 @@ snapshots: '@analytics/type-utils@0.6.2': {} - '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@8db247c': {} + '@appwrite.io/console@https://pkg.pr.new/appwrite/appwrite/@appwrite.io/console@cfe6b8d': {} '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@4a5aab5(svelte@4.2.19)': dependencies: diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte index 3cf9e33b3..5b9abe2e8 100644 --- a/src/lib/components/git/repositories.svelte +++ b/src/lib/components/git/repositories.svelte @@ -18,8 +18,8 @@ import { IconLockClosed } from '@appwrite.io/pink-icons-svelte'; import ConnectGit from './connectGit.svelte'; import SvgIcon from '../svgIcon.svelte'; - import { getFrameworkIcon } from '$routes/(console)/project-[project]/sites/store'; import { VCSDetectionType, type Models } from '@appwrite.io/console'; + import { getFrameworkIcon } from '$lib/stores/sites'; const dispatch = createEventDispatcher(); diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts index 9f9b892a3..2ce82de82 100644 --- a/src/lib/stores/sdk.ts +++ b/src/lib/stores/sdk.ts @@ -85,6 +85,7 @@ export const sdk = { assistant: new Assistant(clientConsole), billing: new Billing(clientConsole), sources: new Sources(clientConsole), + sites: new Sites(clientConsole), domains: new Domains(clientConsole) }, get forProject() { diff --git a/src/lib/stores/sites.ts b/src/lib/stores/sites.ts new file mode 100644 index 000000000..fcd321572 --- /dev/null +++ b/src/lib/stores/sites.ts @@ -0,0 +1,35 @@ +export function getFrameworkIcon(framework: string) { + switch (true) { + case framework.toLocaleLowerCase().includes('sveltekit'): + return 'svelte'; + case framework.toLocaleLowerCase().includes('nuxt'): + return 'nuxt'; + case framework.toLocaleLowerCase().includes('vue'): + return 'vue'; + case framework.toLocaleLowerCase().includes('react'): + return 'react'; + case framework.toLocaleLowerCase().includes('angular'): + return 'angular'; + case framework.toLocaleLowerCase().includes('svelte'): + return 'svelte'; + case framework.toLocaleLowerCase().includes('next'): + return 'nextjs'; + case framework.toLocaleLowerCase().includes('astro'): + return 'astro'; + case framework.toLocaleLowerCase().includes('remix'): + return 'remix'; + case framework.toLocaleLowerCase().includes('flutter'): + return 'flutter'; + case framework.toLocaleLowerCase().includes('analog'): + return 'analog'; + case framework.toLocaleLowerCase().includes('vite'): + return 'vite'; + case framework.toLocaleLowerCase().includes('lynx'): + return 'lynx'; + case framework.toLocaleLowerCase().includes('other'): + return 'empty'; + + default: + return 'empty'; + } +} diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/executions/store.ts b/src/routes/(console)/project-[project]/functions/function-[function]/executions/store.ts index fa5843428..43134be5b 100644 --- a/src/routes/(console)/project-[project]/functions/function-[function]/executions/store.ts +++ b/src/routes/(console)/project-[project]/functions/function-[function]/executions/store.ts @@ -7,7 +7,7 @@ export const columns = writable([ id: 'requestPath', title: 'Path', type: 'string', - width: { min: 100, max: 200 }, + width: { min: 200 }, format: 'string' }, diff --git a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte index 0a40190f9..3e3d32978 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/aside.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/aside.svelte @@ -4,7 +4,7 @@ import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte'; import { consoleVariables } from '$routes/(console)/store'; import type { Models } from '@appwrite.io/console'; - import { getFrameworkIcon } from '../store'; + import { getFrameworkIcon } from '$lib/stores/sites'; export let framework: Partial; export let repositoryName: string; diff --git a/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte b/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte index 548b66be2..735a99a6a 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/configuration.svelte @@ -24,7 +24,6 @@ IconPencil } from '@appwrite.io/pink-icons-svelte'; import type { Models } from '@appwrite.io/console'; - import { getFrameworkIcon } from '../store'; import { iconPath } from '$lib/stores/app'; import VariableEditorModal from './variableEditorModal.svelte'; import SecretVariableModal from './secretVariableModal.svelte'; @@ -33,6 +32,7 @@ import DeleteVariableModal from './deleteVariableModal.svelte'; import UpdateVariableModal from './updateVariableModal.svelte'; import { Click, trackEvent } from '$lib/actions/analytics'; + import { getFrameworkIcon } from '$lib/stores/sites'; export let frameworks: Models.Framework[]; export let selectedFramework: Models.Framework; diff --git a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte index 6d6e899b2..52b415294 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/deploying/+page.svelte @@ -6,12 +6,12 @@ import Button from '$lib/elements/forms/button.svelte'; import Aside from '../aside.svelte'; import Logs from '../../(components)/logs.svelte'; - import { getFrameworkIcon } from '../../store'; import { Copy, SvgIcon } from '$lib/components'; import { sdk } from '$lib/stores/sdk'; import { invalidate } from '$app/navigation'; import { onMount } from 'svelte'; import { Dependencies } from '$lib/constants'; + import { getFrameworkIcon } from '$lib/stores/sites'; export let data; diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte index 02e5dea5b..21ca6638e 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/+page.svelte @@ -9,7 +9,7 @@ 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'; + import { getFrameworkIcon } from '$lib/stores/sites.js'; export let data; diff --git a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte index 0223f6f0b..9a8c4f8cd 100644 --- a/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte +++ b/src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte @@ -32,11 +32,11 @@ Repositories, RepositoryBehaviour } from '$lib/components/git'; - import { getFrameworkIcon } from '../../../store'; import { app, iconPath } from '$lib/stores/app'; import { consoleVariables } from '$routes/(console)/store'; import { connectGitHub } from '$lib/stores/git'; import Domain from '../../domain.svelte'; + import { getFrameworkIcon } from '$lib/stores/sites'; export let data; diff --git a/src/routes/(console)/project-[project]/sites/grid.svelte b/src/routes/(console)/project-[project]/sites/grid.svelte index 5bdfd2051..0185a0419 100644 --- a/src/routes/(console)/project-[project]/sites/grid.svelte +++ b/src/routes/(console)/project-[project]/sites/grid.svelte @@ -4,7 +4,7 @@ import { timeFromNow } from '$lib/helpers/date'; import type { Models } from '@appwrite.io/console'; import { Card, Icon, Layout, Popover, Tooltip, Typography } from '@appwrite.io/pink-svelte'; - import { generateSiteDeploymentDesc, getFrameworkIcon } from './store'; + import { generateSiteDeploymentDesc } from './store'; import { SvgIcon } from '$lib/components'; import { app } from '$lib/stores/app'; import { getApiEndpoint } from '$lib/stores/sdk'; @@ -13,6 +13,7 @@ import { capitalize } from '$lib/helpers/string'; import { IconExclamation } from '@appwrite.io/pink-icons-svelte'; import { Link } from '$lib/elements'; + import { getFrameworkIcon } from '$lib/stores/sites'; export let siteList: Models.SiteList; diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/logs/store.ts b/src/routes/(console)/project-[project]/sites/site-[site]/logs/store.ts index f76615480..074f38cf5 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/logs/store.ts +++ b/src/routes/(console)/project-[project]/sites/site-[site]/logs/store.ts @@ -7,7 +7,7 @@ export const columns = writable([ id: 'requestPath', title: 'Path', type: 'string', - width: { min: 500, max: 900 }, + width: { min: 500 }, format: 'string' }, diff --git a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte index 1643b3c69..d64b5336e 100644 --- a/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte +++ b/src/routes/(console)/project-[project]/sites/site-[site]/settings/updateBuildSettings.svelte @@ -9,10 +9,10 @@ import { Adapter, BuildRuntime, Framework, type Models } from '@appwrite.io/console'; import { Card, Fieldset, Icon, InlineCode, Layout, Tooltip } from '@appwrite.io/pink-svelte'; import { iconPath } from '$lib/stores/app'; - import { getFrameworkIcon } from '../../store'; import { Link } from '$lib/elements'; import { IconInfo } from '@appwrite.io/pink-icons-svelte'; import { adapterDataList } from './store'; + import { getFrameworkIcon } from '$lib/stores/sites'; export let site: Models.Site; export let frameworks: Models.Framework[]; diff --git a/src/routes/(console)/project-[project]/sites/store.ts b/src/routes/(console)/project-[project]/sites/store.ts index 4643d37d6..91d7e3c4b 100644 --- a/src/routes/(console)/project-[project]/sites/store.ts +++ b/src/routes/(console)/project-[project]/sites/store.ts @@ -16,42 +16,6 @@ export const columns = writable([ { id: '$createdAt', title: 'Created', type: 'datetime', width: { min: 120 } } ]); -export function getFrameworkIcon(framework: string) { - switch (true) { - case framework.toLocaleLowerCase().includes('sveltekit'): - return 'svelte'; - case framework.toLocaleLowerCase().includes('nuxt'): - return 'nuxt'; - case framework.toLocaleLowerCase().includes('vue'): - return 'vue'; - case framework.toLocaleLowerCase().includes('react'): - return 'react'; - case framework.toLocaleLowerCase().includes('angular'): - return 'angular'; - case framework.toLocaleLowerCase().includes('svelte'): - return 'svelte'; - case framework.toLocaleLowerCase().includes('next'): - return 'nextjs'; - case framework.toLocaleLowerCase().includes('astro'): - return 'astro'; - case framework.toLocaleLowerCase().includes('remix'): - return 'remix'; - case framework.toLocaleLowerCase().includes('flutter'): - return 'flutter'; - case framework.toLocaleLowerCase().includes('analog'): - return 'analog'; - case framework.toLocaleLowerCase().includes('vite'): - return 'vite'; - case framework.toLocaleLowerCase().includes('lynx'): - return 'lynx'; - case framework.toLocaleLowerCase().includes('other'): - return 'empty'; - - default: - return 'empty'; - } -} - export function generateSiteDeploymentDesc(site: Models.Site) { if (site.latestDeploymentStatus === 'building') { return `Deployment building ${timer(site.latestDeploymentCreatedAt)}`; diff --git a/src/routes/(console)/project-[project]/sites/table.svelte b/src/routes/(console)/project-[project]/sites/table.svelte index 2bdf6df0b..0218a6979 100644 --- a/src/routes/(console)/project-[project]/sites/table.svelte +++ b/src/routes/(console)/project-[project]/sites/table.svelte @@ -3,7 +3,7 @@ import { page } from '$app/stores'; import { timeFromNow, toLocaleDateTime } from '$lib/helpers/date'; import { Avatar, Icon, Layout, Popover, Table, Typography } from '@appwrite.io/pink-svelte'; - import { columns, getFrameworkIcon } from './store'; + import { columns } from './store'; import type { Models } from '@appwrite.io/console'; import SitesActionMenu from './sitesActionMenu.svelte'; import AddCollaboratorModal from './(components)/addCollaboratorModal.svelte'; @@ -13,6 +13,7 @@ import { Link } from '$lib/elements'; import { timer } from '$lib/helpers/timeConversion'; import DualTimeView from '$lib/components/dualTimeView.svelte'; + import { getFrameworkIcon } from '$lib/stores/sites'; export let siteList: Models.SiteList; diff --git a/src/routes/(public)/template-[template]/+page.svelte b/src/routes/(public)/template-[template]/+page.svelte index a2ac0dc4f..f8fdf1488 100644 --- a/src/routes/(public)/template-[template]/+page.svelte +++ b/src/routes/(public)/template-[template]/+page.svelte @@ -1,16 +1,135 @@ + + Deploy {data.template.name} - Appwrite + +
-
-
- -
+
+ + + + + Deploy {data.product} + + + + {#if isSiteTemplate(data.template, data.product)} + {@const framework = data.template.frameworks[0]} + Screenshot + + + + {data.template.name} + + + {data.template.tagline} + + + {@const frameworkIcon = getFrameworkIcon(framework.key)} + + {#if frameworkIcon} + + {/if} + + {framework.name} + + + + {/if} + + + + {#if data.account} + ({ + label: o.name, + value: o.$id + }))} + bind:value={selectedOrg.$id} /> + + + + {:else} + + Sign in to deploy a site from GitHub. + + + + + {/if} + + +