{movie.overview}
-{game.name}
- {game.cover &&{game.summary}
-{game.console}
-
- {content.title}
-
- );
-}
-```
-
-## Deploy to Vercel
-
-The repository, is now ready to deploy to Vercel. Use the following steps to deploy: šš»
-
-- Start by creating a GitHub repository containing your app's code.
-- Then, navigate to the Vercel Dashboard and create a **New Project**.
-- Link the new project to the GitHub repository you just created.
-- In **Settings**, update the _Environment Variables_ to match those in your local `.env` file.
-- Deploy! š
-
-## More Information
-
-For more detailed insights, explore the references cited in this post.
-
-| Resource | Link |
-| --------------------- | ----------------------------------------------------------------------- |
-| GitHub Repo | https://github.com/rishi-raj-jain/remix-wysiwyg-litellm-xata-vercel |
-| Remix with Xata | https://xata.io/docs/getting-started/remix |
-| Xata File Attachments | https://xata.io/docs/sdk/file-attachments#upload-a-file-using-file-apis |
-| Remix Route Actions | https://remix.run/docs/en/main/discussion/data-flow#route-action |
-| Remix Route Loaders | https://remix.run/docs/en/main/discussion/data-flow#route-loader |
-
-## Whatās next?
-
-We'd love to hear from you if you have any feedback on this tutorial, would like to know more about Xata, or if you'd like to contribute a community blog or tutorial. Reach out to us on [Discord](https://discord.com/invite/kvAcQKh7vm) or join us on [X | Twitter](https://twitter.com/xata). Happy building š¦
diff --git a/build-image-gallery-astro-cloudflare.mdx b/build-image-gallery-astro-cloudflare.mdx
deleted file mode 100644
index fc64d0a6..00000000
--- a/build-image-gallery-astro-cloudflare.mdx
+++ /dev/null
@@ -1,452 +0,0 @@
----
-title: 'Build your own image gallery CMS'
-description: 'Learn how to create a custom image gallery CMS using Xata, Astro, and Cloudflare Pages.'
-image:
- src: https://raw.githubusercontent.com/xataio/mdx-blog/main/images/gallery-cms-astro-cloudflare.png
- alt: Xata image gallery
-author: Rishi Raj Jain
-date: 01-04-2024
-tags: ['fpFileAttachments']
-published: true
-slug: build-image-gallery-astro-cloudflare
-ogImage: https://raw.githubusercontent.com/xataio/mdx-blog/main/images/gallery-cms-astro-cloudflare.png
----
-
-In this post, you'll create an image gallery CMS using Astro, Xata, and Cloudflare Pages. You'll learn how to:
-
-- Set up Xata
-- Create a schema with different column types
-- Resize and blur images
-- Fetch all records without pagination
-- Handle forms in Astro using view transitions
-
-## Before you begin
-
-### Prerequisites
-
-You'll need the following:
-
-- A [Xata](https://app.xata.io/signin) account
-- [Node.js 18](https://nodejs.org/en/download) or later
-- A [Cloudflare](https://workers.cloudflare.com/) account
-
-### Tech stack
-
-| Technology | Description |
-| --------------------------------------------------- | ----------------------------------------------------------------------------- |
-| [Xata](https://xata.io) | Serverless database platform for scalable, real-time applications. |
-| [Astro](https://astro.build) | Framework for building fast, modern websites with serverless backend support. |
-| [Tailwind CSS](https://tailwindcss.com/) | CSS framework for building custom designs |
-| [Cloudflare Pages](https://workers.cloudflare.com/) | Platform for deploying and hosting web apps with global distribution. |
-
-## Setting up a Xata database
-
-After you've created a Xata account and are logged in, create a database.
-
-
-
-The next step is to create a table, in this instance `uploads`, that contains all the uploaded images.
-
-
-
-Great! Now, click **Schema** in the left sidebar and create two more tables `profiles` and `photographs`. You can do this by clicking **Add a table**. The newly created tables will contain user profile data and user uploaded photograph(s) data respectively.
-
-
-
-With that completed, you will see the schema.
-
-
-
-Letās move on to adding relevant columns in the tables you've just created.
-
-## Creating the schema
-
-In the `uploads` table, you want to store all the images only (and no other attributes) so that you can create references to the same image object again, if needed.
-
-Proceed with adding the column named `image`. This column is responsible for storing the `file` type objects. In our case, the `file` type object is for images, but you can use this for storing any kind of blob (e.g. PDF, fonts, etc.) thatās sized up to 1 GB.
-
-First, click **+ Add column** and select **File**.
-
-
-
-Set the column name to `image` and to make files public (so that they can be shown to users when they visit the image gallery), check the **Make files public by default** option.
-
-
-
-In the `profiles` table, we want to store the attributes such as userās unique slug (the path of the url where gallery will be displayed of that user), their name, their image with itās dimension, and itās transformed imageās base64 hash. Youāll reap the benefits of storing the hash to create literally 0 Cumulative Layout Shift (CLS) page(s).
-
-Proceed with adding the column named `slug`. It is responsible for maintaining the uniqueness of each profile that gets created. Click **+ Add a column**, select `String` type and enter the column name as `slug`. To associate a slug with only one user, check the `Unique` attribute to make sure that duplicate entries do not get inserted.
-
-
-
-In similar fashion, create `name`, `image`, `height` and `width` columns as `String` type (but not `Unique`).
-
-Great, you can also store `imageHash` as `Text` type so that you can instantly retrieve the imageās blur hash sized up to `200 KB`. While `String` is a great default type, storing more than 2048 characters would require you to switch to the `Text` type. Read more about the limits in [Xata Column limits](https://xata.io/docs/rest-api/limits#column-limits).
-
-Click **+ Add a column** and select the `Text` type.
-
-
-
-Enter the column name as `imageHash` and press `Create column`.
-
-
-
-Much similar what we did above, in the `photographs` table, we create `name`, `tagline`, `image`, `height`, `width`, `profile-slug`, and `slug` as `String` type and `imageHash` as the `Text` type column. The columns `slug` and `profile-slug` refer to photographās and user profileās slug respectively.
-
-Lovely! With all that done, the final schema will look something like the following...
-
-
-
-## Setting up your project
-
-Clone the app repository and follow this tutorial; you can fork the project by running the following command:
-
-```bash
-git clone https://github.com/rishi-raj-jain/image-gallery-cms-with-astro-xata-cloudflare
-cd image-gallery-cms-with-astro-xata-cloudflare
-pnpm install
-```
-
-## Configure Xata with Astro
-
-To seamlessly use Xata with Astro, install the Xata CLI globally:
-
-```bash
-npm install @xata.io/cli -g
-```
-
-Then, authorize the Xata CLI so it is associated with the logged in account:
-
-```bash
-xata auth login
-```
-
-
-
-Great! Now, initialize your project locally with the Xata CLI command:
-
-```bash
-xata init --db https://Rishi-Raj-Jain-s-workspace-80514q.ap-southeast-2.xata.sh/db/image-gallery-cms-with-xata-astro-cloudflare
-```
-
-Answer some quick one-time questions from the CLI to integrate with Astro.
-
-
-
-## Implementing form actions in Astro
-
-You can also allow transitions on form submissions by adding the `ViewTransitions` component.
-Hereās an example of the enabled form actions with view transitions in `src/layouts/Layout.astro`:
-
-```astro
----
-// File: src/layouts/Layout.astro
-
-import { ViewTransitions } from "astro:transitions";
----
-
-
-
-
-
-
- {content.author_name}
-
- {response.message}
- ) : ( -{response.message}
- )) -} - - - - - -``` - -## Using Xata query - -The user profile page (`src/pages/[profile]/index.astro`) leverages the Xata Client to dynamically fetch and display all the photographs (not paginated) for a specific user profile. To engage users visually as soon as they open the gallery, we use the stored `imageHash` value as the background of the images (to be loaded). To prevent CLS, we use the stored `width` and `height` values to inform the browser of the expected dimensions of the images. - -```astro ---- -// File: src/pages/[profile]/index.astro - -// Import the Xata Client created by Xata CLI in src/xata.ts -import { getXataClient } from '@/xata' - -import Layout from '@/layouts/Layout.astro' - -// Get the profile slug from url path -const { profile } = Astro.params - -// Fetch the Xata instance -const xata = getXataClient() - -// Get all the photographs related to the profile -const profilePhotographs = await xata.db.photographs - // Filter the results to the specific profile - .filter({ 'profile-slug': profile }) - // Get all the photographs - .getAll() ---- - -
- {
- profilePhotographs.map(
- ({ width: photoW, height: photoH, name: photoName, image: photoImageURL, tagline: photoTagline, imageHash: photoImageHash }, _) => (
- {/* Destructure the width and height to prevent CLS */}
- 
- ),
- )
- }
-
-Sign Up
- - - -``` - -The code above creates a sign up route in the Astro application containing a form that POSTs to `/api/sign/up` with the user's email and password. Create a `src/pages/api/sign/up.ts` file with the following code to handle the form submission: - -```tsx -// File: src/pages/api/sign/up.ts - -import { generateId } from 'lucia'; -import { lucia } from '@/lucia/index'; -import { getXataClient } from '@/xata'; -import type { APIContext } from 'astro'; -import { Argon2id } from 'oslo/password'; - -export async function POST({ request, redirect, cookies }: APIContext): PromiseSign In
- - - -``` - -The code above creates a sign in route in the Astro application containing a form that POSTs to `/api/sign/in` with the user's email and password. Create a `src/pages/api/sign/in.ts` file with the following code to handle the form submission: - -```tsx -// File: src/pages/api/sign/in.ts - -import { lucia } from '@/lucia/index'; -import { getXataClient } from '@/xata'; -import type { APIContext } from 'astro'; -import { Argon2id } from 'oslo/password'; - -export async function POST({ request, cookies, redirect }: APIContext): Promisetodo
;
-}
-
-export default App;
-```
-
-We can run `yarn dev` and see a white page with "todo".
-
-### Start fetching
-
-Let's try to fetch some users!
-
-```tsx
-import { QueryClient, QueryClientProvider } from \"react-query\";
-import { useSearchUsers } from \"./github/githubComponents\";
-
-const queryClient = new QueryClient();
-
-function App() {
- return (
-
-
- );
- }
-
- if (isLoading) {
- return {error.message}
- Documentation -Loadingā¦
;
- }
-
- return (
- -
- {data?.items.map((item) => (
-
- {item.login} - ))} -
-
- );
- }
-
- return (
- {error.message}
- Documentation -
- setQuery(e.target.value)} />
- {isLoading ? (
-
- );
-}
-```
-
-Now I can search for users, and also reach the API rate limit way quicker! š
I guess this is a good time to introduce authentication handling in our little application.
-
-### Authentication
-
-To keep it simple for our demo purposes, let's take a GitHub developer token and store it in localStorage. **This is unsafe and you probably shouldn't do this in production**. If the token is not set, ask for it, if it's there, show the data and provide a disconnect button. We will need to access this `token` at runtime later, with this in mind, let's create a `Auth.tsx` file, that isolates our authentication logic.
-
-```tsx title="auth.tsx"
-import React, { createContext, useContext, useState } from \"react\";
-import { useQueryClient } from \"react-query\";
-
-const authContext = createContext<{ token: null | string }>({
- token: null,
-});
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
- const key = \"githubToken\";
- const [token, setToken] = useState(localStorage.getItem(key));
- const [draftToken, setDraftToken] = useState(\"\");
- const queryClient = useQueryClient();
-
- return (
- Loadingā¦
- ) : (
- -
- {data?.items.map((item) => (
-
- {item.login} - ))} -
-
-
- )}
-
-
-```
-
-Using the `svelte-markdown` package, weāre able to visually format the responses returned by the chatbot API route for the user. Breaking HTML into components of their own tags (such as `
-
-
-
- {#each $messages as message}
-
- {capitalizeFirstLetter(message.role)}
-
-
- ` and ``), weāre able to selectively pass our own Svelte components containing their own processing logic. In this example, we create our custom `Code` svelte component to touch up the `` elementās visual appearance.
-
-```html
-
-
-
- {@html github}
-
-
-Game not found
;
-
- return (
-
- 
}
-
- );
-}
-```
-
-To see the new page in action, start up a local Next server with the command:
-
-```bash
-npm run dev
-```
-
-Then navigate to `localhost:3000/games/123` and behold your beautiful new server-rendered component, which automatically uses the default layout in `app/layout.tsx`.
-
-Server Components are great for pages that don't require interactivity, like our game-info page, because they can be more performantly rendered server-side. But what we really wanted in this app was a search page that dynamically loads data based on user input; for that, we're going to need a Client Component.
-
-### Create a Client Component
-
-[Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components) are what we might think of as "traditional" React components that allow us to power client-side interactions with hooks like `useState()`. Now that the `app/` directory makes Server Components the default, we have to explicitly designate our Client Components with the `'use client';` directive.
-
-Create a new `Search` Client Component by creating a new file `app/search.tsx` with `'use client';` on the first line and exporting a function called `Search()` that renders a basic search input:
-
-```tsx
-// app/search.tsx
-'use client';
-
-export default function Search() {
- return (
-
-
-
- );
-}
-```
-
-We want this component to show up on our app's home page at the `/` route, so in `app/page.tsx` import the `Search` component and use it to replace the default content in the `Home` component generated by `create-next-app`. While you're at it, why not change the page heading to something more fun?
-
-```tsx
-// app/page.tsx
-import styles from './page.module.css';
-import Search from './search';
-
-export default function Home() {
- return (
-
-
- Search Retro Games!
-
-
-
- );
-}
-```
-
-Navigate to `localhost:3000/` and you'll see the `Search` Client Component successfully rendered within the `Home` Server Component and default layout!
-
-{name}
-
-
- );
- })}
-
- );
-}
-```
-
-Now our search app, while basic, is complete! Reload the home page at `localhost:3000/` and enjoy searching through thousands of retro games.
-
-
-OPENAI_API_KEY=sk-
-```
-
-Install the Deno CLI. See [this page](https://deno.land/manual@v1.31.3/getting_started/installation) for the various install options, on macOs with Homebrew it is:
-
-```sh
-brew install deno
-```
-
-## Load data
-
-Itās now the time to write a bit of TypeScript code. Create a `loadWithEmbeddings.ts` file top level in your project with the following contents:
-
-```tsx
-import { Configuration, OpenAIApi } from 'npm:openai';
-import { getXataClient } from './src/xata.ts';
-import { config as dotenvConfig } from '';
-
-dotenvConfig({ export: true });
-
-const openAIConfig = new Configuration({
- apiKey: Deno.env.get('OPENAI_API_KEY')
-});
-const openAI = new OpenAIApi(openAIConfig);
-const xata = getXataClient();
-
-const sentences: string[] = [
- 'The quick brown fox jumps over the lazy dog story',
- 'The vehicle collided with the tree',
- 'The cat growled towards the dog',
- 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
- 'The sunset painted the sky with vibrant colors'
-];
-
-for (const sentence of sentences) {
- const resp = await openAI.createEmbedding({
- input: sentence,
- model: 'text-embedding-ada-002'
- });
- const [{ embedding }] = resp.data.data;
-
- xata.db.Sentences.create({
- sentence,
- embedding
- });
-}
-```
-
-Step by step, this is what the script is doing:
-
-- Uses `dotenv` to load the `.env` file into the current environment. This makes sure the `XATA_API_KEY` and the `OPENAI_API_KEY` are available to the rest of the script.
-- Initializes the OpenAI and Xata client libraries.
-- Defines the test data in the `sentences` array.
-- For each `sentence` , calls the [OpenAI embeddings API](https://platform.openai.com/docs/guides/embeddings) to get the embedding for it.
-- Inserts a record containing the sentence and the embedding into Xata.
-
-Execute the script like this:
-
-```sh
-deno run --allow-net --allow-env --allow-read --allow-run ./loadWithEmbeddings.ts
-```
-
-If you visit the Xata UI now, you should see the data loaded, together with the embeddings.
-
-';
-
-dotenvConfig({ export: true });
-
-const openAIConfig = new Configuration({
- apiKey: Deno.env.get('OPENAI_API_KEY')
-});
-const openAI = new OpenAIApi(openAIConfig);
-const xata = getXataClient();
-
-if (Deno.args.length !== 1) {
- console.log('Please provide a search query');
- console.log("Example: deno run --allow-net --allow-env search.ts 'the quick brown fox'");
- Deno.exit(1);
-}
-
-const query = Deno.args[0];
-const resp = await openAI.createEmbedding({
- input: query,
- model: 'text-embedding-ada-002'
-});
-const [{ embedding }] = resp.data.data;
-
-const results = await xata.db.Sentences.vectorSearch('embedding', embedding);
-
-for (const result of results) {
- console.log(result.getMetadata().score, '|', result.sentence);
-}
-```
-
-Here is whatās going on in the script:
-
-- The beginning is similar as for the previous script, using `dotenv` to load the `.env` file and then initializing the client libraries for OpenAI and Xata
-- Read the query as the first argument passed to the script
-- Use the [OpenAI embeddings API](https://platform.openai.com/docs/guides/embeddings) to create embeddings for the query
-- Run a vector search using the Xata [Vector Search API.](/docs/sdk/vector-search) This finds vectors that are similar to the provided embedding
-- Print the results, together with the similarity score
-
-To run the script, execute it like this:
-
-```sh
-$ deno run --allow-net --allow-env --allow-read --allow-run \\
- ./search.ts 'sample text in latin'
-
-1.8154079 | Lorem ipsum dolor sit amet, consectetur adipiscing elit
-1.7424928 | The quick brown fox jumps over the lazy dog story
-1.7360129 | The cat growled towards the dog
-1.7311659 | The sunset painted the sky with vibrant colors
-1.7038174 | The vehicle collided with the tree
-```
-
-As you can see, searching for āsample text in latinā results in the āLorem ipsumā text as we hoped. You can also try some variations, for example, āsample sentenceā still brings the āLorem ipsumā one as the top result:
-
-```sh
-$ deno run --allow-net --allow-env --allow-read --allow-run \\
- ./search.ts 'sample sentence'
-
-1.805396 | Lorem ipsum dolor sit amet, consectetur adipiscing elit
-1.7715557 | The quick brown fox jumps over the lazy dog story
-1.7608802 | The sunset painted the sky with vibrant colors
-1.7573793 | The cat growled towards the dog
-1.7493906 | The vehicle collided with the tree
-```
-
-The scores on the left are numbers between 0 and 2 which indicate how close each sentence is to the provided query. If you run with a sentence that exits in the data, youāll get a score very close to 2:
-
-```sh
-$ deno run --allow-net --allow-env --allow-read --allow-run \\
- ./search.ts 'The quick brown fox jumps over the lazy dog story'
-
-1.9999993 | The quick brown fox jumps over the lazy dog story
-1.8063612 | The cat growled towards the dog
-1.769694 | Lorem ipsum dolor sit amet, consectetur adipiscing elit
-1.7673006 | The vehicle collided with the tree
-1.7605586 | The sunset painted the sky with vibrant colors
-
-```
-
-Now letās try the āvanilla skyā query:
-
-```sh
-$ deno run --allow-net --allow-env --allow-read --allow-run \\
- ./search.ts 'vanilla sky'
-
-1.8137007 | The sunset painted the sky with vibrant colors
-1.7584264 | Lorem ipsum dolor sit amet, consectetur adipiscing elit
-1.7579571 | The quick brown fox jumps over the lazy dog story
-1.7505519 | The vehicle collided with the tree
-1.738231 | The cat growled towards the dog
-```
-
-Bingo, top result matches what we expected.
-
-Another one to try:
-
-```sh
-$ deno run --allow-net --allow-env --allow-read --allow-run \\
- ./search.ts 'The car crashed into the oak.'
-
-1.907266 | The vehicle collided with the tree
-1.7763984 | The cat growled towards the dog
-1.7755028 | The quick brown fox jumps over the lazy dog story
-1.7745116 | The sunset painted the sky with vibrant colors
-1.7570261 | Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
-```
-
-Again, the sentence with the same meaning shows up at the top with a score close to 2.
-
-## Conclusion
-
-The large-language-models are powerful tools that open up new use cases. Semantic search is one of these use cases, and weāve seen how the Xata vector search can be used to implement it. You can also use it to build recommendation engines, or finding similar entries in a knowledge-base, or questions in a Q\&A website.
-
-If youāre running this tutorial, please join us on the Xata [Discord](https://xata.io/discord) and let us know what you are building!
diff --git a/server-actions-databases-data-handling.mdx b/server-actions-databases-data-handling.mdx
deleted file mode 100644
index fe7e53b6..00000000
--- a/server-actions-databases-data-handling.mdx
+++ /dev/null
@@ -1,180 +0,0 @@
----
-title: 'Server Actions, databases, and the future of data handling'
-description: 'Check out how Xata is improving data handling in modern apps using React advancements'
-image:
- src: https://raw.githubusercontent.com/xataio/mdx-blog/main/images/server-actions-data-handling.png
- alt: 'Server Actions, databases, and the future of data handling'
-author: Atila Fassina
-date: 06-21-2023
-tags: ['serverless', 'server']
-published: true
-slug: server-actions-data-handling
----
-
-At Xata we're focused on improving how modern applications handle data. So naturally, we're excited about the future of React. As a result of Concurrency in React gaining momentum and React Server Components becoming more widely understood, the data fetching story has made significant strides in terms of improvement.
-
-As developers, we're experiencing an exciting shift in how data integrates into our applications. Using the "Fetching then Rendering" pattern in our components provides a more enjoyable experience for developers and makes it easier to bring data into an application, resulting in a smoother overall experience.
-
-Notice we're querying the database straight from the component rendering function. That's amazing! On top of that, we can even wrap our components into a [suspense boundary](https://react.dev/reference/react/Suspense#usage) and let data stream as necessary.
-
-```tsx
-export async function Movie({ slug }) {
- const movie = await xata.db.movies.filter({ id: slug }).getFirst();
-
- return (
- <>
-
- {movie.title}
-
-
-
-
- );
-}
-```
-
-Check out the above code snippet in our [XMDB template](https://xata.io/docs/examples/xmdb)
-
-```tsx
-// app/page.tsx
-async function SERP() {
- searchParams
-}) => {
- return (
-
-
- )
-}
-```
-
-While inside `SearchResult`, we can fetch, await, and render. Additionally, we can even pass the pending promise as a `prop`. The [data-fetching story](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#static-data-fetching) is extremely versatile and can adapt to business logic instead of writing logic to contort framework specific rules, abstractions, and conventions. We write our logic and we can make it perform in the best way possible without much of a workaround.
-
-## Acting on server
-
-One could argue that apart from the granularity of performing data-fetching on a per-component basis, the story was well defined before. We had similar capabilities previously (albeit with the integration of additional libraries or tools), but we could achieve the same results. The missing piece, however, was having this functionality within the framework, which unlocks the mutation story. This aspect has varied greatly between different tech stacks and poses an important decision that teams must make, with plenty of room for mistakes.
-
-Remix tackles the mutation story on a per-view basis, using action functions that allow for the co-location of fetching and posting data with the render logic like never seen before. The framework astutely determines user intentions based on the HTTP method (usually `GET` or `POST`, but it also fully supports others). All we need to do is export the appropriate method in our page and set the correct method within our `
- Notes:
- {loading ? (
-
- Loading...
-
- ) : (
- notes.length === 0 && No notes found
- )}
-
- {!loading && (
-
- {notes.map((note) => (
-
-
- {capitalizeWords(note.trip?.city)}
- {note.name}
- Rating: {note.rating}/5
-
-
-
- ))}
-
-
- New Note +
-
-
-
- )}
-
- );
-}
-```
-
-In the code snippets above, the same principles apply to how the [Display the trips](#display-the-trips) is carried out.
-
-
-
-## Query and show a single note
-
-The display of a single note is possible by using the ID of each record information in the notes table. Create a new file called `filter.js` in the utils directory:
-
-```js
-// File: utils/filter.js
-'use server';
-
-import { getXataClient } from '@/src/xata';
-
-const xata = getXataClient();
-
-export async function filter(params) {
- const record = await xata.db.notes.read({ id: params.id });
-
- return { record };
-}
-```
-
-In the code above, the `.read()` method is used to query and destructure the id from the params object to retrieve a single record in the database.
-
-Next, create a page display and render the UI content for a single note record in `app/(custom)/dashboard/note/[id]/page.js`:
-
-```js
-// File: app/(custom)/dashboard/note/[id]/page.js
-import Header from '@/components/Heading';
-import Image from 'next/image';
-import { capitalizeWords } from '@/utils/capitalizeWords';
-import { filter } from '@/utils/filter';
-import BtnDel from '@/components/BtnDel';
-
-export default async function NoteDetail({ params }) {
- const { record } = await filter(params);
-
- const noteInfo = (
-
-
- {capitalizeWords(record.name)}
-
-
- Description:
- {record.description.split('\n').map((paragraph, index) => (
-
- {paragraph}
-
- ))}
-
-
- Type: {record.type}
-
-
- Rating: {record.rating}/5
-
-
-
- Notes:
-
- {notes.map((note) => (
-
-
-
- {capitalizeWords(note.name)}
- Rating: {note.rating}/5
-
-
-
-
- ))}
- ā¦
-
-
-
- );
-}
-```
-
-For this code block, import the Xata client and the component handling, deleting both the trip and note detail at the same time where the id is passed as a property, `().create();
-
-const isAuthed = t.middleware(({ next, ctx }) => {
- if (ctx.user === null) {
- throw new TRPCError({ code: 'UNAUTHORIZED' });
- }
-
- return next({
- ctx: {
- user: ctx.user
- }
- });
-});
-
-export const router = t.router;
-export const publicProcedure = t.procedure;
-export const protectedProcedure = t.procedure.use(isAuthed);
-```
-
-This is where everything starts, we are exposing two procedures, one for public routes and one with auth. All the clerk logic lives in `server/context.ts`, and the context is injected `pages/api/trpc/[trpc].ts`.
-
-The idea is quite simple, if Clerk has some information about the user, itās injected in the `context`, checking if the user is here, we canāt filter authenticate users. Letās take `todo/list` as an example:
-
-```tsx
-// server/routers/todo.ts
-import { protectedProcedure, router } from '../trpc';
-import { z } from 'zod';
-import { getXataClient } from '../../utils/xata';
-import { TRPCError } from '@trpc/server';
-
-export const todoRouter = router({
- /**
- * List user todo items.
- */
- list: protectedProcedure.query(({ ctx }) => {
- const userId = ctx.user.id; // here `ctx.user` is typed as `User`
- const xata = getXataClient();
-
- return xata.db.items.filter({ userId }).getAll();
- })
- /* ... */
-});
-```
-
-Here are using `protectedProcedure` since we need the user information for our database query. The entire function is type-safe, I have access to all userās data in this function and we are simply using the `user.id` as a filter. Please note that we donāt have any types annotation as so ever and just returning raw Xata response.
-
-Looking at `pages/index.ts`, we can look at how to use this route in our application.
-
-
- The Workers experiment was a great learning experience for us, but we've decided to deprecate it in favor of
- strengthening Xata's integrations with full-stack frameworks and their server-side data fetching capabilities. You can
- check out our public [Roadmap](https://xata.io/roadmap) and get in touch via [Discord](https://xata.io/discord), or
- [Contact Support](https://support.xata.io/hc/en-us/requests/new) if you have any questions.
-
-
-In the last few years, there's been a rise of Jamstack, and new ways of thinking about the cloud that some people call serverless or edge computing. Instead of maintaining dedicated servers to run a single service, these architectures split applications in smaller services or functions.
-
-By simplifying the state and context of our applications, we can benefit from external providers deploying these functions in dozens of servers across the globe. This architecture benefits the developer and user experience alike. Developers don't have to manage servers, and users don't have to experience latency. Your application simply scales, even if you receive hundreds of thousands of unexpected visitors.
-
-When it comes to databases though, we still struggle with the complexity of orchestrating replication, failover and high availability. Traditional databases are difficult to scale horizontally and usually require a lot of infrastructure maintenance or learning complex database optimization concepts.
-
-At Xata, we are building a modern data platform designed for scalable applications. It allows you to focus on your application logic, instead of having to worry about how the data is stored.
-
-## Making databases accessible to everyone
-
-We started Xata with the mission of helping developers build their applications and forget about maintaining the underlying infrastructure.
-
-With that mission in mind, we asked ourselves: how can we make databases accessible to everyone? How can we provide a delightful experience for a frontend engineer or designer using a database?
-
-To begin with, we built an appealing web dashboard, that any developer --- no matter their experience --- can be comfortable using to work with their data.
-
-Whether they're defining or refining their schema, viewing or adding records, fine-tuning search results with query boosters, or getting code snippets to speed up development with our SDK. We believe that only the best user experience can provide the best development experience.
-
-We identified a major challenge amongst our user base early on. Many front-end developers want to access their database from client-side code.
-
-Allowing access to a database from client-side code comes with several security risks if not done properly. For example, someone could inspect the code, find the credentials, and if they weren't scoped to a single operation, potentially query or modify other parts of the database. Unfortunately, this is a common reason for data leaks and security breaches.
-
-It was a hard problem to solve, and after plenty of brainstorming, we agreed on two potential ways forward: implementing row-level access rules or writing API routes that talked to the database from server code.
-
-Row-level access rules are a good way to solve this, but they would have required us to define our own opinionated language. For our users, it would have been hard to migrate away when they outgrow this solution. Instead, we preferred to focus on making serverless functions easier for our users.
-
-Typically, serverless functions require you to either choose a full-stack framework or manually write, compile, deploy and use them. This generally adds a lot of cognitive overhead even to choose the right solution. We wanted to simplify accessing the database from the frontend without sacrificing flexibility for developers. This is why we decided to build Xata Workers.
-
-## Xata Workers
-
-A Xata Worker is a function that a developer can write in JavaScript or TypeScript as client-side code. Rather than being executed client-side, it will actually be executed on Cloudflare's global network.
-
-You can think of a Xata Worker as a `getServerSideProps` function in Next.js or a `loader` function in Remix. You write your server logic in a function and our tooling takes care of deploying and running it server-side for you (yes, it's that easy).
-
-The main difference with other alternatives is that Xata Workers are, by design, agnostic to a framework or hosting provider. You can use them to build any kind of application or website, and even upload it as static HTML in a service like GitHub Pages or S3. You don't need a full-stack web framework to use Xata Workers.
-
-With our command line tool, we handle the build and deployment process. When the function is invoked, the Xata Worker actually makes a request to a serverless function over the network.
-
-```tsx
-import { useQuery } from '@tanstack/react-query';
-import { xataWorker } from '~/xata';
-
-const listProducts = xataWorker('listProducts', async ({ xata }) => {
- return await xata.db.products.sort('popularity', 'desc').getMany();
-});
-
-export const Home = () => {
- const { data = [] } = useQuery(['products'], listProducts);
-
- return (
-
- {data.map((product) => (
-
- );
-};
-```
-
-In the code snippet above, you can see a React component that connects to an e-commerce database with products on sale. Inside the UI component, with a popular client-side data fetching library, data is retrieved from the serverless function and for each product it renders another component in a grid.
-
-As you can see a Xata Worker is a function that wraps any user-defined code and receives an instance of our SDK as a parameter. This instance has access to the database and, given that the code doesn't run on the browser anymore, your secrets are not exposed for malicious usage.
-
-When using a Xata Worker in TypeScript, our command line tool also generates custom types based on your schema. These types offer type-safety for your queries or mutations, and improve your developer experience by adding extra intellisense to your IDE.
-
-