LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-07 21:07:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

prettify and rm unneeded

Browse Source
This commit is contained in:
Jesse Winton
2024-08-27 13:45:07 -04:00
parent f3eca13ee9
commit f22d30788a
23 changed files with 178 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/routes/docs/products/ai/integrations/anyscale/+page.markdoc
View File

@@ -132,16 +132,16 @@ After the `</head>` tag add a `<body>` containing the visible form:
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <div
class="flex gap-4 justify-center mt-4" class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
> >
<h1 class="heading-level-1">Prompt Anyscale Demo</h1> <h1 class="heading-level-1">Prompt Anyscale Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p <p
class="body-text-1 u-normal mt-2" class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem" style="max-width: 50rem"
> >
Use this page to test your implementation with Anyscale using Mixtral 8x7B. Enter Use this page to test your implementation with Anyscale using Mixtral 8x7B. Enter
@@ -153,8 +153,8 @@ After the `</head>` tag add a `<body>` containing the visible form:
class="container u-margin-block-start-negative-56" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }" x-data="{ prompt: '', answer: '', loading: false }"
> >
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" class="input-text-wrapper is-with-end-button u-width-full-line"
> >
@@ -171,9 +171,9 @@ After the `</head>` tag add a `<body>` containing the visible form:
</button> </button>
</div> </div>
<template x-if="answer"> <template x-if="answer">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Anyscale:</h5> <h5 class="eyebrow-heading-2">Anyscale:</h5>
</div> </div>

16
src/routes/docs/products/ai/integrations/elevenlabs/+page.markdoc
View File

@@ -135,16 +135,16 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <div
class="flex gap-4 justify-center mt-4" class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
> >
<h1 class="heading-level-1">ElevenLabs Demo</h1> <h1 class="heading-level-1">ElevenLabs Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p <p
class="body-text-1 u-normal mt-2" class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem" style="max-width: 50rem"
> >
Use this page to test your implementation with ElevenLabs. Enter Use this page to test your implementation with ElevenLabs. Enter
@@ -156,8 +156,8 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
class="container u-margin-block-start-negative-56" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', response: '', loading: false }" x-data="{ prompt: '', response: '', loading: false }"
> >
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" class="input-text-wrapper is-with-end-button u-width-full-line"
> >
@@ -174,9 +174,9 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
</button> </button>
</div> </div>
<template x-if="response"> <template x-if="response">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Output:</h5> <h5 class="eyebrow-heading-2">Output:</h5>
</div> </div>

24
src/routes/docs/products/ai/integrations/fal-ai/+page.markdoc
View File

@@ -131,15 +131,15 @@ Within the `<html>` tag, add a `<head>` tag with the necessary meta tags, styles
And after the `</head>` tag, add our `<body>` tag with the following content: And after the `</head>` tag, add our `<body>` tag with the following content:
```html ```html
<body class="dark"> <body class="theme-dark">
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div class="flex gap-4 justify-center mt-4"> <div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
<h1 class="heading-level-1">fal.ai demo</h1> <h1 class="heading-level-1">fal.ai demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p class="body-text-1 u-normal mt-2" style="max-width: 50rem"> <p class="body-text-1 u-normal u-margin-block-start-8" style="max-width: 50rem">
Use this page to test your implementation with fal.ai. Enter Use this page to test your implementation with fal.ai. Enter
text and receive the model output as a response. text and receive the model output as a response.
</p> </p>
@@ -147,8 +147,8 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
</div> </div>
<div class="container u-margin-block-start-negative-56" <div class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', result: { src: '' }, loading: false }"> x-data="{ prompt: '', result: { src: '' }, loading: false }">
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div class="input-text-wrapper is-with-end-button u-width-full-line"> <div class="input-text-wrapper is-with-end-button u-width-full-line">
<input x-model="prompt" type="search" placeholder="Prompt" /> <input x-model="prompt" type="search" placeholder="Prompt" />
<div class="icon-search" aria-hidden="true"></div> <div class="icon-search" aria-hidden="true"></div>
@@ -159,12 +159,12 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
</button> </button>
</div> </div>
<template x-if="answer.type"> <template x-if="answer.type">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Result:</h5> <h5 class="eyebrow-heading-2">Result:</h5>
</div> </div>
<img class="max-w-[400px]" x-bind:src="result.src" alt="fal.ai output" /> <img class="u-max-width-400" x-bind:src="result.src" alt="fal.ai output" />
</div> </div>
</div> </div>
</template> </template>
@@ -175,6 +175,7 @@ And after the `</head>` tag, add our `<body>` tag with the following content:
``` ```
This HTML form will allow users to input a prompt and generate an image using the fal.ai API. The AlpineJS script handles the form submission and display the result. This HTML form will allow users to input a prompt and generate an image using the fal.ai API. The AlpineJS script handles the form submission and display the result.
{% /section %} {% /section %}
{% section #step-6 step=6 title="Handle POST Request" %} {% section #step-6 step=6 title="Handle POST Request" %}
@@ -205,7 +206,8 @@ return res.json({ ok: true, src: result.images[0].url });
With the function complete, deploy it to Appwrite by pushing the changes to your repository. With the function complete, deploy it to Appwrite by pushing the changes to your repository.
Additional models can be found in the [fal.ai model catalogue](https://fal.ai/models). Additional models can be found in the [fal.ai model catalogue](https://fal.ai/models).
{% /section %} {% /section %}
{% section #step-7 step=7 title="Test the function" %} {% section #step-7 step=7 title="Test the function" %}

10
src/routes/docs/products/ai/integrations/langchain/+page.markdoc
View File

@@ -115,16 +115,16 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <div
class="flex gap-4 justify-center mt-4" class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
> >
<h1 class="heading-level-1">Pinecone Demo</h1> <h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p <p
class="body-text-1 u-normal mt-2" class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem" style="max-width: 50rem"
> >
Use this demo to verify that the sync between Appwrite Databases and Use this demo to verify that the sync between Appwrite Databases and
@@ -138,7 +138,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
x-data="{ search: '', results: [ ] }" x-data="{ search: '', results: [ ] }"
x-init="$watch('search', async (value) => { results = await onSearch(value) })" x-init="$watch('search', async (value) => { results = await onSearch(value) })"
> >
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div id="searchbox"> <div id="searchbox">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" class="input-text-wrapper is-with-end-button u-width-full-line"
@@ -147,7 +147,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="icon-search" aria-hidden="true"></div> <div class="icon-search" aria-hidden="true"></div>
</div> </div>
</div> </div>
<div id="hits" class="flex flex-col gap-3"> <div id="hits" class="u-flex u-flex-vertical u-gap-12">
<template x-for="result in results"> <template x-for="result in results">
<div class="card"> <div class="card">
<pre x-text="JSON.stringify(result, null, '\t')"></pre> <pre x-text="JSON.stringify(result, null, '\t')"></pre>

27
src/routes/docs/products/ai/integrations/lmnt/+page.markdoc
View File

@@ -28,11 +28,11 @@ Head to the [Appwrite Console](https://cloud.appwrite.io/console), click on **Fu
{% /only_light %} {% /only_light %}
1. In the Appwrite Console's sidebar, click **Functions**. 1. In the Appwrite Console's sidebar, click **Functions**.
1. Click **Create function**. 2. Click **Create function**.
1. Under **Connect Git repository**, select your provider. 3. Under **Connect Git repository**, select your provider.
1. After connecting to GitHub, under **Quick start**, select the **Node.js** starter template. 4. After connecting to GitHub, under **Quick start**, select the **Node.js** starter template.
1. In the **Variables** step, add `APPWRITE_BUCKET_ID`, `LMNT_API_KEY`. Generate your LMNT Key [here](https://app.lmnt.com/account). For the `APPWRITE_API_KEY`, tick the box to **Generate API key on completion**. 5. In the **Variables** step, add `APPWRITE_BUCKET_ID`, `LMNT_API_KEY`. Generate your LMNT Key [here](https://app.lmnt.com/account). For the `APPWRITE_API_KEY`, tick the box to **Generate API key on completion**.
1. Follow the step-by-step wizard and create the Function. 6. Follow the step-by-step wizard and create the Function.
{% /section %} {% /section %}
{% section #step-2 step=2 title="Add dependencies" %} {% section #step-2 step=2 title="Add dependencies" %}
@@ -143,16 +143,16 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <div
class="flex gap-4 justify-center mt-4" class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
> >
<h1 class="heading-level-1">LMNT Demo</h1> <h1 class="heading-level-1">LMNT Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p <p
class="body-text-1 u-normal mt-2" class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem" style="max-width: 50rem"
> >
Use this page to test your implementation with LMNT. Enter Use this page to test your implementation with LMNT. Enter
@@ -164,8 +164,8 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
class="container u-margin-block-start-negative-56" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', response: '', loading: false }" x-data="{ prompt: '', response: '', loading: false }"
> >
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" class="input-text-wrapper is-with-end-button u-width-full-line"
> >
@@ -182,9 +182,9 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
</button> </button>
</div> </div>
<template x-if="response"> <template x-if="response">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Output:</h5> <h5 class="eyebrow-heading-2">Output:</h5>
</div> </div>
@@ -236,6 +236,7 @@ const response = await lmnt.synthesize(req.body.text, 'lily', { format: 'mp3' })
``` ```
This code will send the prompt to the LMNT API and return the audio as a blob. Additionally, any errors will be caught and reported for easy debugging. This code will send the prompt to the LMNT API and return the audio as a blob. Additionally, any errors will be caught and reported for easy debugging.
{% /section %} {% /section %}
{% section #step-7 step=7 title="Store Audio in Appwrite Storage" %} {% section #step-7 step=7 title="Store Audio in Appwrite Storage" %}

16
src/routes/docs/products/ai/integrations/openai/+page.markdoc
View File

@@ -132,16 +132,16 @@ After the `</head>` tag add a `<body>` containing the visible form:
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <div
class="flex gap-4 justify-center mt-4" class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
> >
<h1 class="heading-level-1">Prompt ChatGPT Demo</h1> <h1 class="heading-level-1">Prompt ChatGPT Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p <p
class="body-text-1 u-normal mt-2" class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem" style="max-width: 50rem"
> >
Use this page to test your implementation with OpenAI ChatGPT. Enter Use this page to test your implementation with OpenAI ChatGPT. Enter
@@ -153,8 +153,8 @@ After the `</head>` tag add a `<body>` containing the visible form:
class="container u-margin-block-start-negative-56" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }" x-data="{ prompt: '', answer: '', loading: false }"
> >
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" class="input-text-wrapper is-with-end-button u-width-full-line"
> >
@@ -171,9 +171,9 @@ After the `</head>` tag add a `<body>` containing the visible form:
</button> </button>
</div> </div>
<template x-if="answer"> <template x-if="answer">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">ChatGPT:</h5> <h5 class="eyebrow-heading-2">ChatGPT:</h5>
</div> </div>

17
src/routes/docs/products/ai/integrations/perplexity/+page.markdoc
View File

@@ -82,6 +82,7 @@ export default async ({ req, res, error }) => {
} }
}; };
``` ```
{% /section %} {% /section %}
{% section #step-5 step=5 title="Create static page" %} {% section #step-5 step=5 title="Create static page" %}
@@ -134,16 +135,16 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <div
class="flex gap-4 justify-center mt-4" class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
> >
<h1 class="heading-level-1">Perplexity AI Demo</h1> <h1 class="heading-level-1">Perplexity AI Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p <p
class="body-text-1 u-normal mt-2" class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem" style="max-width: 50rem"
> >
Use this page to test your implementation with Perplexity AI. Enter Use this page to test your implementation with Perplexity AI. Enter
@@ -155,8 +156,8 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
class="container u-margin-block-start-negative-56" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }" x-data="{ prompt: '', answer: '', loading: false }"
> >
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" class="input-text-wrapper is-with-end-button u-width-full-line"
> >
@@ -173,9 +174,9 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
</button> </button>
</div> </div>
<template x-if="answer"> <template x-if="answer">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Perplexity AI:</h5> <h5 class="eyebrow-heading-2">Perplexity AI:</h5>
</div> </div>

10
src/routes/docs/products/ai/integrations/pinecone/+page.markdoc
View File

@@ -116,16 +116,16 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <div
class="flex gap-4 justify-center mt-4" class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
> >
<h1 class="heading-level-1">Pinecone Demo</h1> <h1 class="heading-level-1">Pinecone Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p <p
class="body-text-1 u-normal mt-2" class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem" style="max-width: 50rem"
> >
Use this demo to verify that the sync between Appwrite Databases and Use this demo to verify that the sync between Appwrite Databases and
@@ -139,7 +139,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
x-data="{ search: '', results: [ ] }" x-data="{ search: '', results: [ ] }"
x-init="$watch('search', async (value) => { results = await onSearch(value) })" x-init="$watch('search', async (value) => { results = await onSearch(value) })"
> >
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div id="searchbox"> <div id="searchbox">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" class="input-text-wrapper is-with-end-button u-width-full-line"
@@ -148,7 +148,7 @@ And after the `</head>` tag add this `<body>` which will contain the actual form
<div class="icon-search" aria-hidden="true"></div> <div class="icon-search" aria-hidden="true"></div>
</div> </div>
</div> </div>
<div id="hits" class="flex flex-col gap-3"> <div id="hits" class="u-flex u-flex-vertical u-gap-12">
<template x-for="result in results"> <template x-for="result in results">
<div class="card"> <div class="card">
<pre x-text="JSON.stringify(result, null, '\t')"></pre> <pre x-text="JSON.stringify(result, null, '\t')"></pre>

24
src/routes/docs/products/ai/integrations/replicate/+page.markdoc
View File

@@ -131,13 +131,13 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div class="flex gap-4 justify-center mt-4"> <div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
<h1 class="heading-level-1">Replicate Demo</h1> <h1 class="heading-level-1">Replicate Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p class="body-text-1 u-normal mt-2" style="max-width: 50rem"> <p class="body-text-1 u-normal u-margin-block-start-8" style="max-width: 50rem">
Use this page to test your implementation with Replicate. Enter Use this page to test your implementation with Replicate. Enter
text and receive the model output as a response. text and receive the model output as a response.
</p> </p>
@@ -145,8 +145,8 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
</div> </div>
<div class="container u-margin-block-start-negative-56" <div class="container u-margin-block-start-negative-56"
x-data="{ type: 'text', prompt: '', answer: {type: '', answer: ''}, loading: false }"> x-data="{ type: 'text', prompt: '', answer: {type: '', answer: ''}, loading: false }">
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div class="input-text-wrapper is-with-end-button u-width-full-line"> <div class="input-text-wrapper is-with-end-button u-width-full-line">
<input x-model="prompt" type="search" placeholder="Prompt" /> <input x-model="prompt" type="search" placeholder="Prompt" />
<div class="icon-search" aria-hidden="true"></div> <div class="icon-search" aria-hidden="true"></div>
@@ -166,18 +166,18 @@ And after the `</head>` tag we're going to add our `<body>` which will contain t
</button> </button>
</div> </div>
<template x-if="answer.type"> <template x-if="answer.type">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Result:</h5> <h5 class="eyebrow-heading-2">Result:</h5>
</div> </div>
<template x-if="answer.type === 'image'" class="flex gap-3"> <template x-if="answer.type === 'image'" class="u-flex u-gap-12">
<img class="max-w-[400px]" x-bind:src="answer.response" alt="Replicate output" /> <img class="u-max-width-400" x-bind:src="answer.response" alt="Replicate output" />
</template> </template>
<template x-if="answer.type === 'audio'" class="flex gap-3"> <template x-if="answer.type === 'audio'" class="u-flex u-gap-12">
<audio x-bind:src="answer.response" controls></audio> <audio x-bind:src="answer.response" controls></audio>
</template> </template>
<template x-if="answer.type === 'text'" class="flex gap-3"> <template x-if="answer.type === 'text'" class="u-flex u-gap-12">
<p class="u-color-text-gray" x-text="answer.response"></p> <p class="u-color-text-gray" x-text="answer.response"></p>
</template> </template>
</div> </div>

24
src/routes/docs/products/ai/integrations/tensorflow/+page.markdoc
View File

@@ -193,7 +193,9 @@ def main(context):
``` ```
{% /section %} {% /section %}
{% section #step-7 step=7 title="Build the generate_text function" %} {% section #step-7 step=7 title="Build the generate_text function" %}
Create the `generate_text` function in the `src/main.py` file to generate text completions using the TensorFlow model. Create the `generate_text` function in the `src/main.py` file to generate text completions using the TensorFlow model.
```python ```python
@@ -220,8 +222,10 @@ def generate_text(prompt):
return prompt + "".join(text_generated) return prompt + "".join(text_generated)
``` ```
{% /section %} {% /section %}
{% section #step-8 step=8 title="Create web page" %} {% section #step-8 step=8 title="Create web page" %}
Create a HTML web page that the function will serve. Create a new file at `static/index.html` with some HTML boilerplate: Create a HTML web page that the function will serve. Create a new file at `static/index.html` with some HTML boilerplate:
@@ -259,18 +263,18 @@ Create a HTML web page that the function will serve. Create a new file at `stati
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" /> <link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" />
<link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" /> <link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />
</head> </head>
<body class="dark"> <body class="theme-dark">
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div <div
class="flex gap-4 justify-center mt-4" class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16"
> >
<h1 class="heading-level-1">Generate with TensorFlow demo</h1> <h1 class="heading-level-1">Generate with TensorFlow demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p <p
class="body-text-1 u-normal mt-2" class="body-text-1 u-normal u-margin-block-start-8"
style="max-width: 50rem" style="max-width: 50rem"
> >
Use this page to test your implementation with TensorFlow. Enter Use this page to test your implementation with TensorFlow. Enter
@@ -282,8 +286,8 @@ Create a HTML web page that the function will serve. Create a new file at `stati
class="container u-margin-block-start-negative-56" class="container u-margin-block-start-negative-56"
x-data="{ prompt: '', answer: '', loading: false }" x-data="{ prompt: '', answer: '', loading: false }"
> >
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div <div
class="input-text-wrapper is-with-end-button u-width-full-line" class="input-text-wrapper is-with-end-button u-width-full-line"
> >
@@ -300,9 +304,9 @@ Create a HTML web page that the function will serve. Create a new file at `stati
</button> </button>
</div> </div>
<template x-if="answer"> <template x-if="answer">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">TensorFlow Model:</h5> <h5 class="eyebrow-heading-2">TensorFlow Model:</h5>
</div> </div>
@@ -327,4 +331,4 @@ Now that the function is deployed, test it by visiting the function URL in your
This should show the UI created earlier. To test it, write a prompt and click the submit button. After a brief moment, you should see the generated text from the TensorFlow model. This should show the UI created earlier. To test it, write a prompt and click the submit button. After a brief moment, you should see the generated text from the TensorFlow model.
{% /section %} {% /section %}
This concludes the tutorial on integrating TensorFlow with Appwrite. You now have a working example of a text generation model integrated with Appwrite functions! This concludes the tutorial on integrating TensorFlow with Appwrite. You now have a working example of a text generation model integrated with Appwrite functions!

22
src/routes/docs/products/ai/integrations/togetherai/+page.markdoc
View File

@@ -134,13 +134,13 @@ And after the `</head>` tag add a `<body>` which will contain the actual form:
```html ```html
<body> <body>
<main class="main-content"> <main class="main-content">
<div class="top-cover pb-14"> <div class="top-cover u-padding-block-end-56">
<div class="container"> <div class="container">
<div class="flex gap-4 justify-center mt-4"> <div class="u-flex u-gap-16 u-flex-justify-center u-margin-block-start-16">
<h1 class="heading-level-1">Together AI Demo</h1> <h1 class="heading-level-1">Together AI Demo</h1>
<code class="u-un-break-text"></code> <code class="u-un-break-text"></code>
</div> </div>
<p class="body-text-1 u-normal mt-2" style="max-width: 50rem"> <p class="body-text-1 u-normal u-margin-block-start-8" style="max-width: 50rem">
Use this page to test your implementation with Together AI. Enter Use this page to test your implementation with Together AI. Enter
text and receive the model output as a response. text and receive the model output as a response.
</p> </p>
@@ -148,8 +148,8 @@ And after the `</head>` tag add a `<body>` which will contain the actual form:
</div> </div>
<div class="container u-margin-block-start-negative-56" <div class="container u-margin-block-start-negative-56"
x-data="{ type: 'text', prompt: '', answer: {type: '', answer: ''}, loading: false }"> x-data="{ type: 'text', prompt: '', answer: {type: '', answer: ''}, loading: false }">
<div class="card flex gap-6 flex flex-col"> <div class="card u-flex u-gap-24 u-flex-vertical">
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<div class="input-text-wrapper is-with-end-button u-width-full-line"> <div class="input-text-wrapper is-with-end-button u-width-full-line">
<input x-model="prompt" type="search" placeholder="Prompt" /> <input x-model="prompt" type="search" placeholder="Prompt" />
<div class="icon-search" aria-hidden="true"></div> <div class="icon-search" aria-hidden="true"></div>
@@ -168,15 +168,15 @@ And after the `</head>` tag add a `<body>` which will contain the actual form:
</button> </button>
</div> </div>
<template x-if="answer.type"> <template x-if="answer.type">
<div class="flex flex-col gap-3"> <div class="u-flex u-flex-vertical u-gap-12">
<div class="flex flex-col gap-3 card"> <div class="u-flex u-flex-vertical u-gap-12 card">
<div class="flex gap-3"> <div class="u-flex u-gap-12">
<h5 class="eyebrow-heading-2">Result:</h5> <h5 class="eyebrow-heading-2">Result:</h5>
</div> </div>
<template x-if="answer.type === 'image'" class="flex gap-3"> <template x-if="answer.type === 'image'" class="u-flex u-gap-12">
<img class="max-w-[400px]" x-bind:src="answer.response" alt="Together output" /> <img class="u-max-width-400" x-bind:src="answer.response" alt="Together output" />
</template> </template>
<template x-if="answer.type === 'text'" class="flex gap-3"> <template x-if="answer.type === 'text'" class="u-flex u-gap-12">
<p class="u-color-text-gray" x-text="answer.response"></p> <p class="u-color-text-gray" x-text="answer.response"></p>
</template> </template>
</div> </div>

4
src/routes/docs/products/auth/mfa/+page.markdoc
View File

@@ -300,6 +300,7 @@ const response = await account.updatePhone(
'+12065550100', // phone '+12065550100', // phone
'password' // password 'password' // password
); );
```
```client-flutter ```client-flutter
Future result = account.updatePhone( Future result = account.updatePhone(
phone: '+12065550100', phone: '+12065550100',
@@ -344,6 +345,7 @@ Then, initiate verification for the phone number by calling `account.createPhone
{% multicode %} {% multicode %}
```client-web ```client-web
const response = await account.createPhoneVerification(); const response = await account.createPhoneVerification();
```
```client-flutter ```client-flutter
Future result = account.createPhoneVerification(); Future result = account.createPhoneVerification();
@@ -379,6 +381,7 @@ const response = await account.updatePhoneVerification(
'<USER_ID>', // userId '<USER_ID>', // userId
'<SECRET>' // secret '<SECRET>' // secret
); );
```
```client-flutter ```client-flutter
Future result = account.updatePhoneVerification( Future result = account.updatePhoneVerification(
userId: '<USER_ID>', userId: '<USER_ID>',
@@ -429,6 +432,7 @@ First, add a TOTP authenticator to the user's account by calling `account.addAut
const { secret, uri } = await account.createMfaAuthenticator( const { secret, uri } = await account.createMfaAuthenticator(
'totp' // type 'totp' // type
); );
```
```client-flutter ```client-flutter
Future result = account.createMfaAuthenticator( Future result = account.createMfaAuthenticator(
type: 'totp', type: 'totp',

7
src/routes/docs/products/functions/runtimes/+page.markdoc
View File

@@ -57,7 +57,7 @@ While still in beta, Appwrite Cloud has limited support for Cloud runtimes. As w
--- ---
* {% icon icon="python" size="l" /%} * {% icon icon="python" size="l" /%}
* [Python ML](https://hub.docker.com/r/openruntimes/python-ml) * [Python ML](https://hub.docker.com/r/openruntimes/python-ml)
* `python-ML-3.11` * `python-ml-3.11`
* x86 / arm64 * x86 / arm64
--- ---
* {% icon icon="dart" size="l" /%} * {% icon icon="dart" size="l" /%}
@@ -161,6 +161,11 @@ While still in beta, Appwrite Cloud has limited support for Cloud runtimes. As w
`python-3.12` `python-3.12`
* x86 / arm64 / armv7 / armv8 * x86 / arm64 / armv7 / armv8
--- ---
* {% icon icon="python" size="l" /%}
* [Python ML](https://hub.docker.com/r/openruntimes/python-ml)
* `python-ml-3.11`
* x86 / arm64
---
* {% icon icon="dart" size="l" /%} * {% icon icon="dart" size="l" /%}
* [Dart](https://hub.docker.com/r/openruntimes/dart/tags) * [Dart](https://hub.docker.com/r/openruntimes/dart/tags)
* `dart-2.16` * `dart-2.16`

10
src/routes/docs/quick-starts/+page.svelte
View File

@@ -197,16 +197,16 @@
<main class="web-main-section" id="main"> <main class="web-main-section" id="main">
<article class="web-article"> <article class="web-article">
<header class="web-article-header"> <header class="web-article-header">
<div class="web-article-header-start web-u-cross-start flex flex-col"> <div class="web-article-header-start u-flex-vertical web-u-cross-start">
<div class="relative flex items-center"> <div class="u-position-relative u-flex u-cross-center">
<h1 class="web-title">Quick start</h1> <h1 class="web-title">Quick start</h1>
</div> </div>
</div> </div>
<div class="web-article-header-end" /> <div class="web-article-header-end" />
</header> </header>
<div class="web-article-content gap-20"> <div class="web-article-content web-u-gap-80">
{#each quickStarts as category} {#each quickStarts as category}
<section class="flex flex-col gap-6"> <section class="u-flex-vertical u-gap-24">
<h2 class="web-eyebrow">{category.title}</h2> <h2 class="web-eyebrow">{category.title}</h2>
<ul class="web-grid-row-4 web-grid-row-4-mobile-2"> <ul class="web-grid-row-4 web-grid-row-4-mobile-2">
{#each category.quickStarts as quickStart} {#each category.quickStarts as quickStart}
@@ -215,7 +215,7 @@
href={`/docs/quick-starts/${quickStart.href}`} href={`/docs/quick-starts/${quickStart.href}`}
class="web-card is-normal" class="web-card is-normal"
> >
<header class="flex items-baseline gap-1"> <header class="u-flex u-cross-baseline u-gap-4">
<span <span
class="{quickStart.icon} web-u-font-size-24" class="{quickStart.icon} web-u-font-size-24"
aria-hidden="true" aria-hidden="true"

6
src/routes/docs/references/[version]/[platform]/[service]/(components)/RateLimits.svelte
View File

@@ -37,9 +37,9 @@
} }
</script> </script>
<div class="web-card is-normal p-4"> <div class="web-card is-normal u-padding-16">
<div class="flex flex-col gap-6"> <div class="u-flex-vertical u-gap-24">
<div class="flex flex-col gap-4"> <div class="u-flex-vertical u-gap-16">
{#if platformType === "CLIENT"} {#if platformType === "CLIENT"}
<p class="web-sub-body-400"> <p class="web-sub-body-400">
This endpoint is rate limited. You can only make a limited number of This endpoint is rate limited. You can only make a limited number of

10
src/routes/docs/references/[version]/[platform]/[service]/(components)/Request.svelte
View File

@@ -5,13 +5,13 @@
export let method: SDKMethod; export let method: SDKMethod;
</script> </script>
<div class="web-card is-transparent p-4"> <div class="web-card is-transparent u-padding-16">
<ul class="flex flex-col"> <ul class="u-flex-vertical">
{#each method.parameters as parameter, i} {#each method.parameters as parameter, i}
{@const first = i === 0} {@const first = i === 0}
<li class:pt-4={!first}> <li class:u-padding-block-start-16={!first}>
<article> <article>
<header class="flex items-baseline gap-2"> <header class="u-flex u-cross-baseline u-gap-8">
<span class="web-code web-u-color-text-primary"> <span class="web-code web-u-color-text-primary">
{parameter.name} {parameter.name}
</span> </span>
@@ -20,7 +20,7 @@
<div class="web-tag">required</div> <div class="web-tag">required</div>
{/if} {/if}
</header> </header>
<p class="web-sub-body-400 mt-4"> <p class="web-sub-body-400 u-margin-block-start-16">
<!-- eslint-disable-next-line svelte/no-at-html-tags --> <!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html parse(parameter.description)} {@html parse(parameter.description)}
</p> </p>

6
src/routes/docs/references/[version]/[platform]/[service]/(components)/Response.svelte
View File

@@ -5,20 +5,20 @@
export let method: SDKMethod; export let method: SDKMethod;
</script> </script>
<div class="web-card is-transparent p-4"> <div class="web-card is-transparent u-padding-16">
<ul> <ul>
{#each method.responses as response} {#each method.responses as response}
{#if response.models} {#if response.models}
<li> <li>
<article> <article>
<header class="flex items-baseline gap-2"> <header class="u-flex u-cross-baseline u-gap-8">
<span class="web-eyebrow web-u-color-text-primary"> <span class="web-eyebrow web-u-color-text-primary">
{response.code} {response.code}
</span> </span>
<span class="web-caption-400">application/json</span> <span class="web-caption-400">application/json</span>
</header> </header>
{#if response.models.length > 0} {#if response.models.length > 0}
<ul class="web-sub-body-400 mt-4"> <ul class="web-sub-body-400 u-margin-block-start-16">
{#each response.models as model} {#each response.models as model}
<li> <li>
<a <a

40
src/routes/docs/references/[version]/[platform]/[service]/+page.svelte
View File

@@ -102,8 +102,8 @@
{/if} {/if}
</svelte:head> </svelte:head>
<main class="contents" id="main"> <main class="u-contents" id="main">
<article class="web-article contents"> <article class="web-article u-contents">
<header class="web-article-header"> <header class="web-article-header">
<div class="web-article-header-start"> <div class="web-article-header-start">
<h1 class="web-title">{serviceName}</h1> <h1 class="web-title">{serviceName}</h1>
@@ -111,10 +111,10 @@
</div> </div>
<div class="web-article-header-end"> <div class="web-article-header-end">
<div <div
class="web-u-flex-vertical-mobile web-u-color-text-primary flex gap-6" class="u-flex u-gap-24 web-u-flex-vertical-mobile web-u-color-text-primary"
> >
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<label class="web-is-not-mobile text-sm" for="platform" <label class="u-small web-is-not-mobile" for="platform"
>Platform</label >Platform</label
> >
<Select <Select
@@ -141,8 +141,8 @@
nativeMobile nativeMobile
/> />
</div> </div>
<div class="flex items-center gap-2"> <div class="u-flex u-cross-center u-gap-8">
<label class="web-is-not-mobile text-sm" for="version" <label class="u-small web-is-not-mobile" for="version"
>Version</label >Version</label
> >
@@ -164,12 +164,14 @@
</header> </header>
<div class="web-article-content" style:gap="6rem"> <div class="web-article-content" style:gap="6rem">
<section class="web-article-content-grid-6-4"> <section class="web-article-content-grid-6-4">
<div class="web-article-content-grid-6-4-column-1 flex flex-col gap-2"> <div
class="web-article-content-grid-6-4-column-1 u-flex-vertical u-gap-8"
>
<!-- eslint-disable-next-line svelte/no-at-html-tags --> <!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html parse(data.service?.description)} {@html parse(data.service?.description)}
</div> </div>
<div <div
class="web-article-content-grid-6-4-column-2 flex flex-col justify-end gap-8" class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32 u-main-end"
> >
<Fence <Fence
language="text" language="text"
@@ -182,7 +184,7 @@
{#if data.methods.length === 0} {#if data.methods.length === 0}
<div <div
class="web-article-content-grid-6-4-column-2 flex flex-col gap-8" class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32"
> >
<div class="web-inline-info"> <div class="web-inline-info">
<span class="icon-info" aria-hidden="true" /> <span class="icon-info" aria-hidden="true" />
@@ -197,14 +199,14 @@
{#each data.methods as method (method.id)} {#each data.methods as method (method.id)}
<section class="web-article-content-grid-6-4"> <section class="web-article-content-grid-6-4">
<div <div
class="web-article-content-grid-6-4-column-1 flex flex-col gap-8" class="web-article-content-grid-6-4-column-1 u-flex-vertical u-gap-32"
> >
<header class="web-article-content-header"> <header class="web-article-content-header">
<Heading id={method.id} level={2} inReferences <Heading id={method.id} level={2} inReferences
>{method.title}</Heading >{method.title}</Heading
> >
</header> </header>
<div class="flex flex-col gap-2"> <div class="u-flex-vertical u-gap-8">
<!-- eslint-disable-next-line svelte/no-at-html-tags --> <!-- eslint-disable-next-line svelte/no-at-html-tags -->
{@html parse(method.description)} {@html parse(method.description)}
</div> </div>
@@ -225,11 +227,11 @@
</Accordion> </Accordion>
</div> </div>
<div <div
class="web-article-content-grid-6-4-column-2 flex flex-col gap-8" class="web-article-content-grid-6-4-column-2 u-flex-vertical u-gap-32"
> >
<div class="theme-dark contents"> <div class="u-contents theme-dark">
<div <div
class="sticky" class="u-position-sticky"
style="--inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position);" style="--inset-block-start:var(--p-grid-huge-navs-secondary-sticky-position);"
> >
<Fence <Fence
@@ -240,7 +242,7 @@
process process
withLineNumbers={false} withLineNumbers={false}
/> />
<div class="mt-6"> <div class="u-margin-block-start-24">
<Fence <Fence
language={platform} language={platform}
content={method.demo} content={method.demo}
@@ -269,7 +271,7 @@
</button> </button>
<div class="web-references-menu-content"> <div class="web-references-menu-content">
<div <div
class="web-references-menu-header mt-6 flex items-center justify-between gap-4" class="web-references-menu-header u-flex u-main-space-between u-cross-center u-gap-16 u-margin-block-start-24"
> >
<h5 class="web-references-menu-title web-eyebrow">On This Page</h5> <h5 class="web-references-menu-title web-eyebrow">On This Page</h5>
<button <button
@@ -291,9 +293,9 @@
</li> </li>
{/each} {/each}
</ul> </ul>
<div class="border-border-primary web-u-padding-block-20 border-t"> <div class="u-sep-block-start web-u-padding-block-20">
<button <button
class="web-link inline-flex items-center gap-2" class="web-link u-inline-flex u-cross-center u-gap-8"
use:scrollToTop use:scrollToTop
> >
<span class="web-icon-arrow-up" aria-hidden="true" /> <span class="web-icon-arrow-up" aria-hidden="true" />

14
src/routes/docs/tutorials/+page.svelte
View File

@@ -59,16 +59,16 @@
<main class="web-main-section" id="main"> <main class="web-main-section" id="main">
<article class="web-article"> <article class="web-article">
<header class="web-article-header"> <header class="web-article-header">
<div class="web-article-header-start web-u-cross-start flex flex-col"> <div class="web-article-header-start u-flex-vertical web-u-cross-start">
<div class="relative flex items-center"> <div class="u-position-relative u-flex u-cross-center">
<h1 class="web-title">Tutorials</h1> <h1 class="web-title">Tutorials</h1>
</div> </div>
</div> </div>
<div class="web-article-header-end" /> <div class="web-article-header-end" />
</header> </header>
<div class="web-article-content gap-20"> <div class="web-article-content web-u-gap-80">
{#each data.tutorials as category} {#each data.tutorials as category}
<section class="flex flex-col gap-6"> <section class="u-flex-vertical u-gap-24">
<h2 class="web-eyebrow">{category.title}</h2> <h2 class="web-eyebrow">{category.title}</h2>
<ul class="web-grid-row-4 web-grid-row-4-mobile-2"> <ul class="web-grid-row-4 web-grid-row-4-mobile-2">
{#each category.tutorials as tutorial} {#each category.tutorials as tutorial}
@@ -80,7 +80,7 @@
aria-disabled="true" aria-disabled="true"
tabindex="-1" tabindex="-1"
> >
<header class="flex items-baseline gap-1"> <header class="u-flex u-cross-baseline u-gap-4">
<span <span
class="{getIcon(tutorial)} web-u-font-size-24" class="{getIcon(tutorial)} web-u-font-size-24"
aria-hidden="true" aria-hidden="true"
@@ -93,7 +93,7 @@
</a> </a>
{:else} {:else}
<a href={tutorial.href} class="web-card is-normal"> <a href={tutorial.href} class="web-card is-normal">
<header class="flex items-baseline gap-1"> <header class="u-flex u-cross-baseline u-gap-4">
<span <span
class="{getIcon(tutorial)} web-u-font-size-24" class="{getIcon(tutorial)} web-u-font-size-24"
aria-hidden="true" aria-hidden="true"
@@ -102,7 +102,7 @@
{tutorial.framework} {tutorial.framework}
</h3> </h3>
</header> </header>
<p class="web-sub-body-400 mt-1"> <p class="web-sub-body-400 u-margin-block-start-4">
{tutorial.title} {tutorial.title}
</p> </p>
</a> </a>

5
src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
View File

@@ -60,7 +60,6 @@ npm run dev
Nuxt relies on an opiniated directory structure to automate tasks and help organize the codebase. Nuxt relies on an opiniated directory structure to automate tasks and help organize the codebase.
To take advantage of this we need to add the following directories: To take advantage of this we need to add the following directories:
- `/components/` to keep our UI components in one place. - `/components/` to keep our UI components in one place.
We will get back to it in [step 5](/docs/tutorials/nuxt/step-5) We will get back to it in [step 5](/docs/tutorials/nuxt/step-5)
- `/composables/`for storing files handling global states and data fetching. - `/composables/`for storing files handling global states and data fetching.
@@ -107,8 +106,8 @@ Add the file `index.vue` with the following code.
<!-- pages/index.vue --> <!-- pages/index.vue -->
<template> <template>
<nav class="main-header pr-0"> <nav class="main-header u-padding-inline-end-0">
<h3 class="flex-1 eyebrow-heading-1">Hello, Idea Tracker!</h3> <h3 class="u-stretch eyebrow-heading-1">Hello, Idea Tracker!</h3>
</nav> </nav>
</template> </template>
``` ```

12
src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
View File

@@ -106,15 +106,15 @@ const handleRegistration = async (event) => {
</script> </script>
<template> <template>
<div class="max-w-[650px]" style="margin: 0 auto;"> <div class="u-max-width-650" style="margin: 0 auto;">
<section class="card u-margin-32"> <section class="card u-margin-32">
<h2 class="eyebrow-heading-2">Login/Register</h2> <h2 class="eyebrow-heading-2">Login/Register</h2>
<AuthForm v-if="isSignUp" :handle-submit="handleRegistration" submit-type="Sign Up"></AuthForm> <AuthForm v-if="isSignUp" :handle-submit="handleRegistration" submit-type="Sign Up"></AuthForm>
<AuthForm v-else :handle-submit="handleLogin" submit-type="Log In"></AuthForm> <AuthForm v-else :handle-submit="handleLogin" submit-type="Log In"></AuthForm>
<button v-if="isSignUp" @click="isSignUp = false" class="mt-4"> <button v-if="isSignUp" @click="isSignUp = false" class="u-margin-block-start-16">
Already have an account? Log in Already have an account? Log in
</button> </button>
<button v-else @click="isSignUp = true" class="mt-4"> <button v-else @click="isSignUp = true" class="u-margin-block-start-16">
Don't have an account? Sign up Don't have an account? Sign up
</button> </button>
</section> </section>
@@ -127,7 +127,7 @@ We will also show buttons to toggle between the two different types of forms.
# Authentication forms {% #auth-forms %} # Authentication forms {% #auth-forms %}
In the previous step, we defined a `AuthForm` to handle signup and login. In the previous step, we defined a `AuthForm` to handle signup and login.
Let's build this form now. Let's build this form now.
Create a new file `components/authForm.vue` and add the following code. Create a new file `components/authForm.vue` and add the following code.
@@ -138,7 +138,7 @@ The handle submit and submit type are props passed from `pages/login.vue`
<template> <template>
<form <form
class="form u-width-full-line max-w-[500px] mt-4" class="form u-width-full-line u-max-width-500 u-margin-block-start-16"
@submit.prevent="handleSubmit" @submit.prevent="handleSubmit"
> >
<ul class="form-list"> <ul class="form-list">
@@ -169,7 +169,7 @@ The handle submit and submit type are props passed from `pages/login.vue`
</div> </div>
</li> </li>
</ul> </ul>
<ul class="buttons-list mt-4"> <ul class="buttons-list u-margin-block-start-16">
<!-- Login button --> <!-- Login button -->
<li class="buttons-list-item"> <li class="buttons-list-item">
<button <button

4
src/routes/docs/tutorials/nuxt/step-5/+page.markdoc
View File

@@ -22,8 +22,8 @@ const user = useUserSession();
<template> <template>
<div> <div>
<!--- Navbar --> <!--- Navbar -->
<nav class="main-header pr-0"> <nav class="main-header u-padding-inline-end-0">
<h3 class="flex-1 eyebrow-heading-1">Idea Tracker</h3> <h3 class="u-stretch eyebrow-heading-1">Idea Tracker</h3>
<!-- Email and logout button if logged in user --> <!-- Email and logout button if logged in user -->
<div <div
class="main-header-end u-margin-inline-end-16" class="main-header-end u-margin-inline-end-16"

15
src/routes/docs/tutorials/nuxt/step-7/+page.markdoc
View File

@@ -43,7 +43,7 @@ const handleAddIdea = async (event) => {
<div> <div>
<article class="container padding-0"> <article class="container padding-0">
<h4 class="heading-level-4">Submit Idea</h4> <h4 class="heading-level-4">Submit Idea</h4>
<form @submit.prevent="handleAddIdea" class="mt-4"> <form @submit.prevent="handleAddIdea" class="u-margin-block-start-16">
<ul class="form-list"> <ul class="form-list">
<li class="form-item"> <li class="form-item">
<label class="label">Title</label> <label class="label">Title</label>
@@ -87,7 +87,7 @@ const user = useUserSession();
</script> </script>
<template> <template>
<div class="max-w-[650px]" style="margin-inline: auto;"> <div class="u-max-width-650" style="margin-inline: auto;">
<!-- Idea form component for logged in users --> <!-- Idea form component for logged in users -->
<section v-if="user.current.value" class="card u-margin-32"> <section v-if="user.current.value" class="card u-margin-32">
<IdeasForm /> <IdeasForm />
@@ -108,10 +108,9 @@ article.box {
background-color: hsl(var(--color-neutral-0)); background-color: hsl(var(--color-neutral-0));
} }
</style> </style>
``` ````
# Ideas list {% #ideas-list %} # Ideas list {% #ideas-list %}
Now that we can get some ideas to show, we go on to build the component for the list of ideas. Now that we can get some ideas to show, we go on to build the component for the list of ideas.
Once again, we need to take a moment to think about how this component should work. Once again, we need to take a moment to think about how this component should work.
@@ -136,13 +135,13 @@ const user = useUserSession();
<section class="u-margin-32"> <section class="u-margin-32">
<article class="card"> <article class="card">
<h4 class="heading-level-4">Latest Ideas</h4> <h4 class="heading-level-4">Latest Ideas</h4>
<ul class="mt-2"> <ul class="u-margin-block-start-8">
<template v-if="ideas.current.value && ideas.current.value.length"> <template v-if="ideas.current.value && ideas.current.value.length">
<li v-for="idea in ideas.current.value"> <li v-for="idea in ideas.current.value">
<div class="box"> <div class="box">
<h5 class="heading-level-6">{{ idea.title }}</h5> <h5 class="heading-level-6">{{ idea.title }}</h5>
<p class="body-text-2">{{ idea.description }}</p> <p class="body-text-2">{{ idea.description }}</p>
<div class="absolute u-inset-inline-end-8 u-inset-block-start-8"> <div class="u-position-absolute u-inset-inline-end-8 u-inset-block-start-8">
<button class="button is-small is-text is-only-icon" aria-label="Remove item" v-if="user.current.value && <button class="button is-small is-text is-only-icon" aria-label="Remove item" v-if="user.current.value &&
idea.userId === user.current.value.userId idea.userId === user.current.value.userId
" type="button" @click="ideas.remove(idea.$id)"> " type="button" @click="ideas.remove(idea.$id)">
@@ -168,14 +167,14 @@ This component should be visible to all users, so no conditional rendering neeed
<!-- pages/index.vue --> <!-- pages/index.vue -->
<template> <template>
<div class="max-w-[650px]" style="margin: 0 auto;"> <div class="u-max-width-650" style="margin: 0 auto;">
<!-- ... Some skipped code --> <!-- ... Some skipped code -->
<IdeasList /> <IdeasList />
</div> </div>
</template> </template>
<!-- ... Some skipped code --> <!-- ... Some skipped code -->
``` ````
Congratulations! Congratulations!
You now have an ideas tracker built with Nuxt and Appwrite to use locally. You now have an ideas tracker built with Nuxt and Appwrite to use locally.