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

fix: all platforms

Browse Source
This commit is contained in:
Torsten Dittmann
2022-10-14 14:31:31 +02:00
parent f48eef7c0e
commit 54480b2a35
16 changed files with 85 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/code.svelte
+21 -7
View File
@@ -14,10 +14,11 @@
import { Copy } from '.';
export let label: string = null;
export let labelIcon: 'code' | 'android' | 'flutter' | 'apple' = null;
export let code: string;
export let language: 'js' | 'html' | 'dart' | 'kotlin' | 'json' | 'sh' | 'yml' | 'swift';
export let showLineNumbers = false;
export let showCopy = false;
export let withLineNumbers = false;
export let withCopy = false;
afterUpdate(async () => {
Prism.highlightAll();
@@ -28,9 +29,14 @@
<div
class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
{#if label}
<Pill>{label}</Pill>
<Pill>
{#if labelIcon}
<span class={`icon-${labelIcon}`} aria-hidden="true" />
{/if}
{label}
</Pill>
{/if}
{#if showCopy}
{#if withCopy}
<Copy value={code}>
<button class="button is-small is-text is-only-icon" aria-label="copy code">
<span class="icon-duplicate" aria-hidden="true" />
@@ -39,15 +45,23 @@
{/if}
</div>
<pre class={`language-${language}`} class:line-numbers={showLineNumbers}><code
<pre class={`language-${language}`} class:line-numbers={withLineNumbers}><code
>{code}</code></pre>
</section>
<style lang="scss" global>
@import 'prismjs/themes/prism.css';
.controls {
z-index: 2;
.box {
--p-box-background-color: var(--color-neutral-300) !important;
body.theme-light & {
--p-box-background-color: var(--color-neutral-5) !important;
}
.controls {
z-index: 2;
}
}
code,
src/lib/components/json.svelte
+1 -1
View File
@@ -4,4 +4,4 @@
export let code: string;
</script>
<Code showLineNumbers showCopy language="json" {code} />
<Code withLineNumbers withCopy language="json" {code} />
src/lib/layout/wizard.svelte
+2 -2
View File
@@ -113,8 +113,8 @@
{/each}
<div class="form-footer">
<div class="u-flex u-main-end u-gap-12">
{#if sortedSteps[currentStep - 1][1].optional}
<Button text on:click={() => (isLastStep = true)} submit
{#if !isLastStep && sortedSteps[currentStep - 1][1].optional}
<Button text on:click={() => dispatch('finish')}
>Skip optional steps</Button>
{/if}
{#if currentStep === 1}
src/routes/console/project-[project]/overview/platforms/createAndroid.svelte
+6 -3
View File
@@ -29,15 +29,18 @@
});
stepsComponents.set(2, {
label: 'Get the SDK',
component: Step2
component: Step2,
optional: true
});
stepsComponents.set(3, {
label: "Let's get coding",
component: Step3
component: Step3,
optional: true
});
stepsComponents.set(4, {
label: 'All set',
component: Step4
component: Step4,
optional: true
});
</script>
src/routes/console/project-[project]/overview/platforms/createApple.svelte
+6 -3
View File
@@ -29,15 +29,18 @@
});
stepsComponents.set(2, {
label: 'Get the SDK',
component: Step2
component: Step2,
optional: true
});
stepsComponents.set(3, {
label: "Let's get coding",
component: Step3
component: Step3,
optional: true
});
stepsComponents.set(4, {
label: 'All set',
component: Step4
component: Step4,
optional: true
});
</script>
src/routes/console/project-[project]/overview/platforms/createFlutter.svelte
+6 -3
View File
@@ -29,15 +29,18 @@
});
stepsComponents.set(2, {
label: 'Get the SDK',
component: Step2
component: Step2,
optional: true
});
stepsComponents.set(3, {
label: "Let's get coding",
component: Step3
component: Step3,
optional: true
});
stepsComponents.set(4, {
label: 'All set',
component: Step4
component: Step4,
optional: true
});
</script>
src/routes/console/project-[project]/overview/platforms/createWeb.svelte
+6 -3
View File
@@ -29,15 +29,18 @@
});
stepsComponents.set(2, {
label: 'Get the SDK',
component: Step2
component: Step2,
optional: true
});
stepsComponents.set(3, {
label: "Let's get coding",
component: Step3
component: Step3,
optional: true
});
stepsComponents.set(4, {
label: 'All set',
component: Step4
component: Step4,
optional: true
});
</script>
src/routes/console/project-[project]/overview/platforms/wizard/android/step2.svelte
+3 -2
View File
@@ -11,11 +11,12 @@
<WizardStep>
<svelte:fragment slot="title">Get the SDK</svelte:fragment>
<p>First, add this to your root level build.gradle file:</p>
<Code label="Groovy" language="kotlin" code={example1} showCopy />
<Code label="Groovy" language="kotlin" code={example1} withCopy />
<p class="common-section">And add this to your project's build.gradle file:</p>
<Code
label="Groovy"
labelIcon="android"
language="kotlin"
code={`implementation("io.appwrite:sdk-for-android:${versions['client-android']}")`}
showCopy />
withCopy />
</WizardStep>
src/routes/console/project-[project]/overview/platforms/wizard/android/step3.svelte
+6 -8
View File
@@ -14,12 +14,10 @@ appwrite
<WizardStep>
<svelte:fragment slot="title">Let's get coding</svelte:fragment>
<div class="common-section">
<h2 class="heading-level-7">Init your SDK</h2>
<p>
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
which can be found in your project settings page.
</p>
<Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
</div>
<h2 class="heading-level-7">Init your SDK</h2>
<p>
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
can be found in your project settings page.
</p>
<Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
</WizardStep>
src/routes/console/project-[project]/overview/platforms/wizard/apple/step2.svelte
+2 -2
View File
@@ -70,9 +70,9 @@
</ol>
{:else if method === Method.Swift}
<p>Add this to your Package.swift file:</p>
<Code showCopy showLineNumbers label="Swift" language="swift" code={example1} />
<Code withCopy withLineNumbers label="Swift" language="swift" code={example1} />
<p class="common-section">Then add the dependency to your target:</p>
<Code showCopy showLineNumbers label="Swift" language="swift" code={example2} />
<Code withCopy withLineNumbers label="Swift" language="swift" code={example2} />
{/if}
</div>
</WizardStep>
src/routes/console/project-[project]/overview/platforms/wizard/apple/step3.svelte
+6 -8
View File
@@ -15,14 +15,12 @@ let client = Client()
<WizardStep>
<svelte:fragment slot="title">Let's get coding</svelte:fragment>
<div class="common-section">
<h2 class="heading-level-7">Init your SDK</h2>
<p>
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
which can be found in your project settings page.
</p>
<Code label="Apple SDK" language="swift" {code} showCopy showLineNumbers />
</div>
<h2 class="heading-level-7">Init your SDK</h2>
<p>
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
can be found in your project settings page.
</p>
<Code label="Apple SDK" labelIcon="apple" language="swift" {code} withCopy withLineNumbers />
<p>
Before sending any API calls to your new Appwrite project, make sure your device or emulator
has network access to your Appwrite project's hostname or IP address.
src/routes/console/project-[project]/overview/platforms/wizard/flutter/step2.svelte
+2 -2
View File
@@ -11,9 +11,9 @@
<svelte:fragment slot="title">Get the SDK</svelte:fragment>
<p>Add Appwrite SDK to your package's pubspec.yaml file. You can view an example here.</p>
<Code label="YAML" language="yml" code={example1} showCopy />
<Code label="YAML" language="yml" code={example1} withCopy />
<p class="common-section">
You can also install the SDK using the Dart package manager from your terminal:
</p>
<Code label="Web SDK" language="js" code={`import { Appwrite } from 'appwrite';`} showCopy />
<Code label="Bash" language="sh" code={`pub get appwrite`} withCopy />
</WizardStep>
src/routes/console/project-[project]/overview/platforms/wizard/flutter/step3.svelte
+6 -8
View File
@@ -16,15 +16,13 @@ client
<WizardStep>
<svelte:fragment slot="title">Let's get coding</svelte:fragment>
<div class="common-section">
<h2 class="heading-level-7">Init your SDK</h2>
<p>
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
which can be found in your project settings page.
</p>
<Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
</div>
<h2 class="heading-level-7">Init your SDK</h2>
<p>
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
can be found in your project settings page.
</p>
<Code label="Flutter SDK" labelIcon="flutter" language="dart" {code} withCopy withLineNumbers />
<p class="common-section">
Before sending any API calls to your new Appwrite project, make sure your device or emulator
has network access to your Appwrite project's hostname or IP address.
</p>
src/routes/console/project-[project]/overview/platforms/wizard/step4.svelte
+2 -2
View File
@@ -4,9 +4,9 @@
<WizardStep>
<svelte:fragment slot="title">You're ready to go 🎉</svelte:fragment>
<svelte:fragment slot="subtitle">
<p>
Congrats, you've just added your first platform to your Appwrite dashboard! Are you ready to
give it a go? Why not add a database to your project, or start uploading files? The choice
is up to you.
</svelte:fragment>
</p>
</WizardStep>
src/routes/console/project-[project]/overview/platforms/wizard/web/step2.svelte
+4 -3
View File
@@ -31,7 +31,7 @@
Use <a href="https://npmjs.org" target="_blank" class="link"
>NPM (node package manager)</a> from your command line to add Appwrite SDK to your project.
</p>
<Code label="Bash" language="sh" code="npm install appwrite" showCopy />
<Code label="Bash" language="sh" code="npm install appwrite" withCopy />
<p class="common-section">
When you're using a bundler (like <a
href="https://vitejs.dev"
@@ -42,9 +42,10 @@
</p>
<Code
label="Web SDK"
labelIcon="code"
language="js"
code={`import { Appwrite } from 'appwrite';`}
showCopy />
withCopy />
{:else if method === Method.CDN}
<p>
To install with a CDN (content delivery network) add the following scripts to the bottom
@@ -54,6 +55,6 @@
label="HTML"
language="html"
code={`<script src="https://cdn.jsdelivr.net/npm/appwrite@${$versions['client-web']}"></script>`}
showCopy />
withCopy />
{/if}
</WizardStep>
src/routes/console/project-[project]/overview/platforms/wizard/web/step3.svelte
+6 -8
View File
@@ -14,12 +14,10 @@ appwrite
<WizardStep>
<svelte:fragment slot="title">Let's get coding</svelte:fragment>
<div class="common-section">
<h2 class="heading-level-7">Init your SDK</h2>
<p>
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID,
which can be found in your project settings page.
</p>
<Code label="Web SDK" language="js" {code} showCopy showLineNumbers />
</div>
<h2 class="heading-level-7">Init your SDK</h2>
<p>
Now that you've downloaded the SDK, it's time to initialze it. Use your project ID, which
can be found in your project settings page.
</p>
<Code label="Web SDK" labelIcon="code" language="js" {code} withCopy withLineNumbers />
</WizardStep>