Skip to content

Commit 41e42af

Browse files
stijnvanderlaanstijnvanderlaan
committed
Fix @stringtale/next/client import
1 parent ae472f7 commit 41e42af

File tree

2 files changed

+146
-149
lines changed

2 files changed

+146
-149
lines changed

‎src/content/docs/back-end/next-js-app-router.mdx‎

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Next.js - App router
33
description: Implementation guide for using Stringtale with Next.js when using the app router
44
---
55

6-
import { Tabs, TabItem } from "@astrojs/starlight/components";
6+
import { Tabs, TabItem } from "@astrojs/starlight/components"
77

88
## App router
99

@@ -16,58 +16,56 @@ To use Stringtale in your Next.js application with the app router you can either
1616
execute the following steps manually.
1717

1818
1. Install the `@stringtale/next` and `@stringtale/react` package in your project using your package manager.
19+
1920
<Tabs>
2021
<TabItem label="npm">
21-
```bash
22-
npm install @stringtale/next @stringtale/react
23-
```
22+
```bash npm install @stringtale/next @stringtale/react ```
2423
</TabItem>
2524
<TabItem label="Yarn">
26-
```bash
27-
# If you're using a monorepo with workspaces, add it to the right workspace
28-
yarn add @stringtale/next @stringtale/react
29-
```
30-
</TabItem>
25+
```bash # If you're using a monorepo with workspaces, add it to the right
26+
workspace yarn add @stringtale/next @stringtale/react ```
27+
</TabItem>
3128
<TabItem label="pnpm">
32-
```bash
33-
pnpm install @stringtale/next @stringtale/react
34-
```
35-
</TabItem>
29+
```bash pnpm install @stringtale/next @stringtale/react ```
30+
</TabItem>
3631
</Tabs>
3732
3833
2. Create a new file `app/api/stringtale.ts` and add the following content:
3934
40-
```tsx
41-
import { setupRoute } from '@stringtale/next/server'
35+
```tsx
36+
import { setupRoute } from "@stringtale/next/server"
37+
38+
export default setupRoute({
39+
apiKey: process.env.STRINGTALE_API_KEY!,
40+
})
41+
```
4242
43-
export default setupRoute({
44-
apiKey: process.env.STRINGTALE_API_KEY!,
45-
})
46-
```
4743
3. Add `STRINGTALE_API_KEY` to your `.env.local` file. This token can be obtained from the [Stringtale Dashboard](https://stringtale.com/app).
48-
```
49-
STRINGTALE_API_KEY=YOUR_API_KEY
50-
```
44+
```
45+
STRINGTALE_API_KEY=YOUR_API_KEY
46+
```
5147
_For more information on how to obtain a token, please refer to the [obtaining a token](/usage/obtaining-token) guide._
5248
4. Add `<StringtaleProvider>` and Stringtale's CSS to your `RootLayout` in `app/layout.tsx` as such:
5349
5450
```tsx
55-
import { StringtaleProvider } from "@stringtale/next/client"
56-
import "@stringtale/react/styles.css"
51+
import { StringtaleProvider } from "@stringtale/next"
52+
import "@stringtale/react/styles.css"
53+
54+
export default async function RootLayout({
55+
children,
56+
}: {
57+
children: React.ReactNode
58+
}) {
59+
return (
60+
<html>
61+
<body>
62+
<StringtaleProvider>{children}</StringtaleProvider>
63+
</body>
64+
</html>
65+
)
66+
}
67+
```
68+
69+
For more information about RootLayout see the [NextJS documentation](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
5770
58-
export default async function RootLayout({
59-
children,
60-
}: {
61-
children: React.ReactNode
62-
}) {
63-
return (
64-
<html>
65-
<body>
66-
<StringtaleProvider>{children}</StringtaleProvider>
67-
</body>
68-
</html>
69-
)
70-
}
71-
```
72-
For more information about RootLayout see the [NextJS documentation](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
7371
5. You're now ready to use Stringtale in your project. For more information on how to use Stringtale with React see our [React documentation](/front-end/react).

‎src/content/docs/guides/getting-started.mdx‎

Lines changed: 109 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ description: A guide to get started with Stringtale
44
---
55

66
import { Tabs, TabItem } from "@astrojs/starlight/components"
7-
import { Aside } from "@astrojs/starlight/components";
7+
import { Aside } from "@astrojs/starlight/components"
88

9-
import { Image } from 'astro:assets';
10-
import step24 from '../../../assets/images/workflow/step-2-4.png'
11-
import step25 from '../../../assets/images/workflow/step-2-5.png'
9+
import { Image } from "astro:assets"
10+
import step24 from "../../../assets/images/workflow/step-2-4.png"
11+
import step25 from "../../../assets/images/workflow/step-2-5.png"
1212

1313
Looking to integrate Stringtale into your (existing) project? You've come to the right place! This guide will lead
1414
you through the required steps and get you up and running in minutes.
1515

1616
## Before getting started
1717

1818
### Introduction of components
19+
1920
Understanding the different components of Stringtale up front will aid your integration. Here's a run down of the
2021
components.
2122

22-
2323
- JavaScript libraries (for integration with the front- and back-end of your project)
2424
- Command Line Utility (CLI) (for easier integration and local usage)
2525
- Dashboard (for creating and managing projects, users as well as billing)
@@ -43,109 +43,106 @@ The fastest way to get started is to use our CLI for semi-automatic integration.
4343
please refer to the documentation for your back-end framework. Our automatic integration is suited for both new
4444
and existing project. To use the CLI, follow the steps below.
4545

46-
1. Install the **Stringtale CLI** globally:
47-
<Tabs>
48-
<TabItem label="npm">
49-
```bash
50-
npm install -g @stringtale/cli
51-
```
52-
</TabItem>
53-
<TabItem label="Yarn">
54-
```bash
55-
yarn global add @stringtale/cli
56-
```
46+
1. Install the **Stringtale CLI** globally:
47+
<Tabs>
48+
<TabItem label="npm">```bash npm install -g @stringtale/cli ```</TabItem>
49+
<TabItem label="Yarn">
50+
```bash yarn global add @stringtale/cli ```
5751
</TabItem>
58-
<TabItem label="pnpm">
59-
```bash
60-
pnpm install -g @stringtale/cli
61-
```
52+
<TabItem label="pnpm">
53+
```bash pnpm install -g @stringtale/cli ```
6254
</TabItem>
63-
</Tabs>
64-
2. Login using with your Stringtale credentials `stringtale login`
65-
3. Run `stringtale init`, and follow the prompts.
66-
1. Select your language (Typescript or JavaScript).
67-
2. Select which Stringtale project should be assigned to this project.
68-
3. Select which back-end framework you use (Next.js or Express.js).
69-
4. The CLI will then generate a `stringtale.config.json` for your project.
70-
5. Depending on the selected back-end the CLI will perform the following steps:
71-
<Tabs>
72-
<TabItem label="Next.js (app router)">
73-
1. Attempt to locate your `next.config.js` to detect the root of your project or prompt you if it can't find the correct one.
74-
2. Create `app/api/stringtale.ts` to enable `/api/stringtale`.
75-
3. Add the required dependencies for your project.
76-
5. Instruct you to add `<StringtaleProvider>` and Stringtale's CSS to your `RootLayout` in `app/layout.tsx` as such:
77-
```tsx
78-
import { StringtaleProvider } from "@stringtale/next/client"
79-
import "@stringtale/react/styles.css"
80-
81-
export default async function RootLayout({
82-
children,
83-
}: {
84-
children: React.ReactNode
85-
}) {
86-
return (
87-
<html>
88-
<body>
89-
<StringtaleProvider>{children}</StringtaleProvider>
90-
</body>
91-
</html>
92-
)
93-
}
94-
```
95-
For more information about `RootLayout` see the [NextJS documentation](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
96-
</TabItem>
97-
<TabItem label="Next.js (pages router)">
98-
1. Attempt to locate your `next.config.js` to detect the root of your project or prompt you if it can't find the correct one.
99-
2. Create `<PROJECT_DIRECTORY>/pages/api/stringtale.ts` to enable `/api/stringtale`.
100-
3. Add the required dependencies for your project.
101-
5. It will instruct you to customize your App component in `_app.tsx` and add the `<StringtaleProvider>`
102-
```tsx
103-
import type { AppProps } from 'next/app'
104-
import { StringTaleProvider } from "@stringtale/next"
105-
106-
export default function MyApp({ Component, pageProps }: AppProps) {
107-
return (
108-
<StringtaleProvider>
109-
<Component {...pageProps} />
110-
</StringtaleProvider>
111-
)
112-
}
113-
```
114-
For more information about customizing the `App` component see the [NextJS documentation](https://nextjs.org/docs/pages/building-your-application/routing/custom-app).
115-
</TabItem>
116-
<TabItem label="Express.js">
117-
1. Add the required dependencies for your project.
118-
2. Instruct you to add the `/api/stringtale` route. Because of how Express handles routing, we don't add this automatically. Example:
119-
```tsx
120-
import express from 'express'
121-
import { setupRoute } from "@stringtale/express"
122-
const app = express()
123-
124-
app.all('/api/stringtale', setupRoute({
125-
apiKey: process.env.STRINGTALE_API_KEY!
126-
}))
127-
```
128-
3. Instruct you to add the `<StringtaleProvider>` with `apiRoute` attribute to App component in `app.js` / `app.tsx`. Example:
129-
```tsx
130-
import { StringtaleProvider } from "@stringtale/react"
131-
import "@stringtale/react/styles.css"
132-
133-
function App() {
134-
return (
135-
<StringtaleProvider apiRoute="https://www.example.com/api/stringtale">
136-
<div className="App" />
137-
</StringtaleProvider>
138-
)
139-
}
140-
141-
export default App
142-
```
143-
</TabItem>
144-
</Tabs>
145-
146-
5. Once `stringtale init` has finished, it's integrated with your back-end. To start using Stringtale in your front-end,
55+
</Tabs>
56+
2. Login using with your Stringtale credentials `stringtale login`
57+
3. Run `stringtale init`, and follow the prompts.
58+
59+
1. Select your language (Typescript or JavaScript).
60+
2. Select which Stringtale project should be assigned to this project.
61+
3. Select which back-end framework you use (Next.js or Express.js).
62+
4. The CLI will then generate a `stringtale.config.json` for your project.
63+
5. Depending on the selected back-end the CLI will perform the following steps:
64+
65+
<Tabs>
66+
<TabItem label="Next.js (app router)">
67+
1. Attempt to locate your `next.config.js` to detect the root of your project or prompt you if it can't find the correct one.
68+
2. Create `app/api/stringtale.ts` to enable `/api/stringtale`.
69+
3. Add the required dependencies for your project.
70+
5. Instruct you to add `<StringtaleProvider>` and Stringtale's CSS to your `RootLayout` in `app/layout.tsx` as such:
71+
```tsx
72+
import { StringtaleProvider } from "@stringtale/next"
73+
import "@stringtale/react/styles.css"
74+
75+
export default async function RootLayout({
76+
children,
77+
}: {
78+
children: React.ReactNode
79+
}) {
80+
return (
81+
<html>
82+
<body>
83+
<StringtaleProvider>{children}</StringtaleProvider>
84+
</body>
85+
</html>
86+
)
87+
}
88+
```
89+
For more information about `RootLayout` see the [NextJS documentation](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required).
90+
91+
</TabItem>
92+
<TabItem label="Next.js (pages router)">
93+
1. Attempt to locate your `next.config.js` to detect the root of your project or prompt you if it can't find the correct one.
94+
2. Create `<PROJECT_DIRECTORY>/pages/api/stringtale.ts` to enable `/api/stringtale`.
95+
3. Add the required dependencies for your project.
96+
5. It will instruct you to customize your App component in `_app.tsx` and add the `<StringtaleProvider>`
97+
```tsx
98+
import type { AppProps } from 'next/app'
99+
import { StringTaleProvider } from "@stringtale/next"
100+
101+
export default function MyApp({ Component, pageProps }: AppProps) {
102+
return (
103+
<StringtaleProvider>
104+
<Component {...pageProps} />
105+
</StringtaleProvider>
106+
)
107+
}
108+
```
109+
For more information about customizing the `App` component see the [NextJS documentation](https://nextjs.org/docs/pages/building-your-application/routing/custom-app).
110+
111+
</TabItem>
112+
<TabItem label="Express.js">
113+
1. Add the required dependencies for your project.
114+
2. Instruct you to add the `/api/stringtale` route. Because of how Express handles routing, we don't add this automatically. Example:
115+
```tsx
116+
import express from 'express'
117+
import { setupRoute } from "@stringtale/express"
118+
const app = express()
119+
120+
app.all('/api/stringtale', setupRoute({
121+
apiKey: process.env.STRINGTALE_API_KEY!
122+
}))
123+
```
124+
3. Instruct you to add the `<StringtaleProvider>` with `apiRoute` attribute to App component in `app.js` / `app.tsx`. Example:
125+
```tsx
126+
import { StringtaleProvider } from "@stringtale/react"
127+
import "@stringtale/react/styles.css"
128+
129+
function App() {
130+
return (
131+
<StringtaleProvider apiRoute="https://www.example.com/api/stringtale">
132+
<div className="App" />
133+
</StringtaleProvider>
134+
)
135+
}
136+
137+
export default App
138+
```
139+
140+
</TabItem>
141+
</Tabs>
142+
143+
4. Once `stringtale init` has finished, it's integrated with your back-end. To start using Stringtale in your front-end,
147144
check out the next section.
148-
145+
149146
### Integrating Stringtale on your front-end
150147

151148
In order to integrate Stringtale in your React front-end you can either start wrapping your strings manually,
@@ -164,22 +161,24 @@ To start using Stringtale on a subset of your strings, please refer to the docum
164161

165162
Deploying Stringtale to your test environment is very straight forward. Just deploy your application as usual, add `STRINGTALE_API_KEY` to your
166163
environment variables and you're good to go. To obtain the `STRINGTALE_API_KEY` you can follow the steps below:
164+
167165
1. Go to the [Stringtale Dashboard](https://stringtale.com/app).
168166
2. Go to [Projects](https://stringtale.com/app/projects)
169167
3. Open the project (or click on Edit project settings) you want to deploy to your test / preview environment.
170168
4. Scroll down to `Tokens`
171169
5. Click on `Add Token` and create a new token
172-
<Image src={step24} alt="Tokens section of Stringtale project" />
170+
<Image src={step24} alt="Tokens section of Stringtale project" />
173171
6. Save the token somewhere safe, you'll need it later.
174-
<Image src={step25} alt="Example of a token" width="564px" />
172+
<Image src={step25} alt="Example of a token" width="564px" />
175173
7. Enable 'Write' permissions for the newly created token by checking the checkbox for 'Can write'.
176174

177175
Now you can deploy your application and add `STRINGTALE_API_KEY` to your environment variables. You can start using Stringtale by adding `?stringtale` to the URL or by using our [browser extension](/usage/browser-extension).
178176

179177
For more information on how to use Stringtale once you've deployed it, checkout the [workflow](/guides/workflow) documentation.
180178

181179
<Aside type="caution">
182-
It's highly recommended you lock down your test / preview environment through some form authentication (i.e. basic auth),
183-
as there's no user authentication for text edits in Stringtale at this moment. This means that without authentication,
184-
anyone would be able to edit text on your website.
180+
It's highly recommended you lock down your test / preview environment through
181+
some form authentication (i.e. basic auth), as there's no user authentication
182+
for text edits in Stringtale at this moment. This means that without
183+
authentication, anyone would be able to edit text on your website.
185184
</Aside>

0 commit comments

Comments
 (0)