Skip to content

Commit 21c1d1a

Browse files
committed
add readme, sample env
1 parent 4ca0d02 commit 21c1d1a

File tree

3 files changed

+24
-57
lines changed

3 files changed

+24
-57
lines changed

.env.sample

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
NUXT_PUBLIC_KNOCK_USER_ID=
2+
NUXT_PUBLIC_KNOCK_FEED_CHANNEL_ID=
3+
NUXT_PUBLIC_KNOCK_PUBLIC_API_KEY=

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@ logs
2020

2121
# Local env files
2222
.env
23-
.env.*
23+
.env.local
2424
!.env.example

README.md

Lines changed: 20 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,39 @@
1-
# Nuxt 3 Minimal Starter
1+
# Nuxt & Vue Feed Example
22

3-
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
3+
![notion-style feed example](./images/activity-feed.png)
44

5-
## Setup
5+
## Getting Started
66

7-
Make sure to install the dependencies:
7+
This is a custom activity feed modeled after Notion and built using the [Knock JavaScript SDK](https://docs.knock.app/sdks/javascript/quick-start). It's purpose is to show you how to build custom feed implementations using other UI libraries or your own design system. This example uses Nuxt, Vue, and [shadcn/vue](https://www.shadcn-vue.com/).
88

9-
```bash
10-
# npm
11-
npm install
12-
13-
# pnpm
14-
pnpm install
15-
16-
# yarn
17-
yarn install
18-
19-
# bun
20-
bun install
21-
```
22-
23-
## Development Server
24-
25-
Start the development server on `http://localhost:3000`:
9+
To clone the repository locally, run this command:
2610

2711
```bash
28-
# npm
29-
npm run dev
30-
31-
# pnpm
32-
pnpm run dev
33-
34-
# yarn
35-
yarn dev
36-
37-
# bun
38-
bun run dev
12+
git clone https://github.com/knocklabs/notion-feed-example.git
3913
```
4014

41-
## Production
42-
43-
Build the application for production:
15+
Then create a new `.env.local` file from the sample with this command:
4416

4517
```bash
46-
# npm
47-
npm run build
18+
cp .env.sample .env.local
19+
```
4820

49-
# pnpm
50-
pnpm run build
21+
To use this example, you'll need [an account on Knock](https://dashboard.knock.app/), as well as an in-app feed channel with a workflow that produces in-app feed messages.
5122

52-
# yarn
53-
yarn build
23+
You'll also need:
5424

55-
# bun
56-
bun run build
57-
```
25+
- A public API key for the Knock environment (set as NEXT_PUBLIC_KNOCK_PUBLIC_API_KEY)
26+
- The channel ID for the in-app feed (set as NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID)
27+
- A Knock user ID (set as NEXT_PUBLIC_KNOCK_USER_ID)
5828

59-
Locally preview production build:
29+
Once you've added those values and environment variables, you can run the project locally on `http://localhost:3000`:
6030

6131
```bash
62-
# npm
63-
npm run preview
64-
65-
# pnpm
66-
pnpm run preview
32+
npm run dev
33+
```
6734

68-
# yarn
69-
yarn preview
35+
## Tutorials
7036

71-
# bun
72-
bun run preview
73-
```
37+
You can reference the following resources as you get started. We created blog posts and videos for creating both the base feed experience and integrating toasts.
7438

75-
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
39+
### Create a Notion-style feed

0 commit comments

Comments
 (0)