[i18nIgnore] [studio-DB] add studio content to DB guide (#8414)

Co-authored-by: liruifengv <[email protected]> Co-authored-by: pioupia <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]> Co-authored-by: Thomas Bonnet <[email protected]> Co-authored-by: Junseong Park <[email protected]> Co-authored-by: HiDeoo <[email protected]> Co-authored-by: Yan <[email protected]>
withastro · Jun 7, 2024 · 79ca1a6 · 79ca1a6
1 parent eac6db8
commit 79ca1a6
Show file tree

Hide file tree

Showing 33 changed files with 879 additions and 904 deletions.
diff --git a/src/content/docs/en/guides/astro-db.mdx b/src/content/docs/en/guides/astro-db.mdx
@@ -10,7 +10,7 @@ import ReadMore from '~/components/ReadMore.astro';
 import StudioHeading from '~/components/StudioHeading.astro';
 import { Steps } from '@astrojs/starlight/components';
 
-Astro DB is a fully-managed SQL database designed exclusively for Astro. Develop locally or connect to a hosted database managed on our [Astro Studio](/en/recipes/studio/) platform.
+Astro DB is a fully-managed SQL database designed exclusively for Astro. Develop locally or connect to a hosted database managed on our [Astro Studio](#astro-studio) platform.
 
 ## Installation
 
@@ -339,9 +339,134 @@ See the [Drizzle `db.batch()`](https://orm.drizzle.team/docs/batch-api) docs for
 ## Astro Studio
 </StudioHeading>
 
-Astro DB can [connect to the Astro Studio platform](/en/recipes/studio/) to quickly add a hosted database to your project. You can view, manage and deploy new hosted databases all from the Astro Studio dashboard.
+Astro DB can connect to the Astro Studio platform to quickly add a hosted database to your project. You can view, manage and deploy new hosted databases all from the Astro Studio dashboard.
 
-To create a new project, you can use a [ready-made template](https://studio.astro.build) or visit the [Astro Studio guide](/en/recipes/studio/#create-a-new-studio-project).
+The [Astro Studio web portal](http://studio.astro.build) allows you to connect to and manage your remote hosted Astro DB databases through a web interface or using [CLI commands](/en/reference/cli-reference/#astro-studio-cli).
+
+From your Studio dashboard, you have access to account management, help articles and a support message console.
+
+Visit [Astro Studio](http://studio.astro.build) to sign up or log in.
+
+<StudioHeading>
+### Create a new Studio project
+</StudioHeading>
+
+There are two ways to create a project in Astro Studio:
+
+1. [**Use the Astro Studio web UI**](https://studio.astro.build) to create from a new or existing GitHub repository.
+
+    To get started, click the "create project" button in the header and follow the instructions. Astro Studio will connect to your GitHub repository and create a new hosted database for your project.
+
+2. **Use the Astro Studio CLI** to create from any local Astro project. You can run the following commands to get started:
+
+    <PackageManagerTabs>
+    <Fragment slot="npm">
+    ```shell
+    # Log in to Astro Studio with your GitHub account
+    npx astro login
+
+    # Link to a new project by following the prompts
+    npx astro link
+
+    # (Optional) Push your local db configuration to the remote database
+    npx astro db push
+    ```
+    </Fragment>
+    <Fragment slot="pnpm">
+    ```shell
+    # Log in to Astro Studio with your GitHub account
+    pnpm astro login
+
+    # Link to a new project by following the prompts
+    pnpm astro link
+
+    # (Optional) Push your local db configuration to the remote database
+    pnpm astro db push
+    ```
+    </Fragment>
+    <Fragment slot="yarn">
+    ```shell
+    # Log in to Astro Studio with your GitHub account
+    yarn astro login
+
+    # Link to a new project by following the prompts
+    yarn astro link
+
+    # (Optional) Push your local db configuration to the remote database
+    yarn astro db push
+    ```
+    </Fragment>
+    </PackageManagerTabs>
+
+    Once you are logged in and linked successfully, you can run all Astro DB commands to manage your remote database. 
+
+    <ReadMore>See [the Astro DB CLI reference](/en/guides/integrations-guide/db/#astro-db-cli-reference) for all available commands.</ReadMore>
+
+<StudioHeading>
+### Deploy with a Studio connection
+</StudioHeading>
+
+You can deploy your Astro DB project with a live connection to your Studio database. This is possible with any deployment platform using static builds or an [SSR adapter](/en/guides/server-side-rendering/).
+
+First, configure your build command to connect with Studio using the `--remote` flag. This example applies the flag to a `"build"` script in your project's `package.json`. If your deployment platform accepts a build command, ensure this is set to `npm run build`.
+
+```json title="package.json" "--remote"
+{
+  "scripts": {
+    "build": "astro build --remote"
+  }
+}
+```
+<StudioHeading>
+#### Create a Studio app token
+</StudioHeading>
+
+You need to create an app token to access your Studio database from a production deploy. You can create an app token from your Studio project dashboard by navigating to the **Settings** tab and selecting **Tokens**. 
+
+Copy the generated token and apply as an environment variable / environment secret in your deployment platform using the name `ASTRO_STUDIO_APP_TOKEN`. 
+
+<StudioHeading>
+### Set up the GitHub CI Action
+</StudioHeading>
+
+You can automatically push schema changes to your Studio database with the Studio CI action. This verifies changes can be made safely, and keeps your configuration up-to-date whenever you merge to `main`.
+
+[Follow GitHub's documentation](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions#creating-secrets-for-a-repository) to configure a new secret in your repository with the name `ASTRO_STUDIO_APP_TOKEN` and your Studio app token as the value for the secret.
+
+Once your secret is configured, create a new GitHub Actions workflow file in your project's `.github/workflows` directory to checkout the repository and install Node.js as steps, and use the `withastro/action-studio` action to sync schema changes. 
+
+The action will run `astro db verify` on all [event triggers](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows) to ensure schema changes can be applied safely. If you add the **[push](https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#push)** trigger specifically, the action will push those changes to your Studio database.
+
+This example GitHub Action `_studio.yml` pushes changes whenever the `main` branch is updated:
+
+```yaml title=".github/workflows/_studio.yml"
+name: Astro Studio
+
+env:
+  ASTRO_STUDIO_APP_TOKEN: ${{secrets.ASTRO_STUDIO_APP_TOKEN }}
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  DB:
+    permissions:
+      contents: read
+      actions: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: jaid/[email protected]
+      - uses: withastro/action-studio@main
+```
 
 <StudioHeading>
 ### Pushing table schemas
@@ -520,7 +645,7 @@ To use a remote connection, you will need an app token to authenticate with Stud
 
 <ReadMore>
 
-When you're ready to deploy, see our [Deploy with a Studio Connection guide](/en/recipes/studio/#deploy-with-a-studio-connection).
+When you're ready to deploy, see our [Deploy with a Studio Connection guide](#deploy-with-a-studio-connection).
 
 </ReadMore>
 
@@ -604,7 +729,7 @@ Using a database file is an advanced feature, and care should be taken when depl
 
 Additionally, this method will not work in serverless deployments, as the file system is not persisted in those environments.
 
-For a fully managed solution, [connect to databases hosted on the Astro Studio platform](/en/recipes/studio/) instead.
+For a fully managed solution, [connect to databases hosted on the Astro Studio platform](#astro-studio) instead.
 :::
 
 If you are comfortable with the risks, and can manage deployment yourself, you can use a database file instead of connecting to Studio. 

diff --git a/src/content/docs/en/guides/integrations-guide/db.mdx b/src/content/docs/en/guides/integrations-guide/db.mdx
@@ -12,7 +12,7 @@ import ReadMore from '~/components/ReadMore.astro';
 import Badge from '~/components/Badge.astro';
 
 
-Astro DB is a fully-managed SQL database designed for the Astro ecosystem: develop locally in Astro and deploy from your [Astro Studio dashboard](/en/recipes/studio/).
+Astro DB is a fully-managed SQL database designed for the Astro ecosystem: develop locally in Astro and deploy from your [Astro Studio dashboard](/en/guides/astro-db/#astro-studio).
 
 With Astro DB you have a powerful, local, type-safe tool to query and model content as a relational database. View, manage and deploy your hosted remote data through your interactive Studio dashboard.
 
@@ -196,7 +196,7 @@ Each foreign key configuration object accepts the following properties:
 
 ## Astro DB CLI reference
 
-Astro DB includes a set of CLI commands to interact with your hosted project database and your [Astro Studio](/en/recipes/studio/) account. 
+Astro DB includes a set of CLI commands to interact with your hosted project database and your [Astro Studio](/en/guides/astro-db/#astro-studio) account. 
 
 These commands are called automatically when using a GitHub CI action, and can be called manually using the `astro db` CLI. 
 

diff --git a/src/content/docs/en/recipes/studio.mdx b/src/content/docs/en/recipes/studio.mdx