From 6090fc0a36fa39d1893fe6d3be5f46dd83d8ab6a Mon Sep 17 00:00:00 2001 From: Julian Benegas Date: Tue, 12 Nov 2024 19:23:14 -0300 Subject: [PATCH 1/6] wip basehub docs --- docs/cms/basehub.mdx | 112 ++++++++++++++++++++++++++++++++++++++++++ docs/cms/overview.mdx | 8 +++ 2 files changed, 120 insertions(+) create mode 100644 docs/cms/basehub.mdx create mode 100644 docs/cms/overview.mdx diff --git a/docs/cms/basehub.mdx b/docs/cms/basehub.mdx new file mode 100644 index 00000000..3cdc1285 --- /dev/null +++ b/docs/cms/basehub.mdx @@ -0,0 +1,112 @@ +--- +title: Switch to BaseHub +description: How to change the CMS provider from to BaseHub. +--- + +Here's how to switch from `` to [BaseHub](https://basehub.com). + +## 1. Fork the [`basehub/next-forge`](https://basehub.com/basehub/next-forge) template + +You'll be forking a BaseHub repository which contains the next-forge compatible content schema. + +Once you fork the repository, you'll need to get your Read Token from the Connect page: + +``` +https://basehub.com///dev/main/dev:connect +``` + +The token will look something like this: + +``` +bshb_pk_ +``` + +Keep this connection string handy, you will need it in the next step. + +## 2. Update your environment variables + +Update your environment variables to use the new BaseHub token: + +```js apps/web/.env +BASEHUB_TOKEN="" +``` + +## 3. Install `basehub` + +```sh Terminal +pnpm add basehub --filter web +``` + +## 4. Update `package.json` scripts + +Run `basehub dev` in parallel to your existing dev script, and `basehub build` before your existing build script: + +```ts apps/web/package.json +{ + "scripts": { + "dev": "concurrently \"basehub dev\" \"next dev -p 3001\"", + "build": "basehub build && next build", + } +} +``` + +Both of these scripts generate the type-safe SDK, but they do so in different ways: + +- `basehub dev` generates the SDK by targeting your repo's Draft API. Additionally, it will watch for schema changes and update the types accordingly. +- `basehub build` generates the SDK by targeting your repo's Production API. + +## 5. Update the queries + +In `apps/web/cms.ts`, you'll need to update the queries to use the new BaseHub SDK. + +```ts apps/web/cms.ts +import { basehub, fragmentOn } from 'basehub'; + +const imageFragment = fragmentOn('BlockImage', { + url: true, + width: true, + height: true, + alt: true, +}); + +const postMetaFragment = fragmentOn('PostsItem', { + _id: true, + _slug: true, + _title: true, + date: true, + description: true, + image: imageFragment, + authors: { _title: true, avatar: imageFragment }, +}) + +export const getPost = async (slug: string) => { + const data = await basehub().query({ + blog: { + posts: { + __args: { + filter: { + _sys_slug: { eq: slug } + } + }, + items: { + ...postMetaFragment, + body: { + readingTime: true, + json: { content: true } + } + } + } + } + }); + return data.blog.posts.items[0]; +}; + +export const getPosts = async () => { + const data = await basehub().query({ + blog: { posts: { items: postMetaFragment } }, + }); + return data.blog.posts.items; +}; +``` + +Learn more about BaseHub in their [docs](https://docs.basehub.com). \ No newline at end of file diff --git a/docs/cms/overview.mdx b/docs/cms/overview.mdx new file mode 100644 index 00000000..99d4f948 --- /dev/null +++ b/docs/cms/overview.mdx @@ -0,0 +1,8 @@ +--- +title: Overview +description: How is the CMS configured in next-forge. +--- + +next-forge comes with a CMS configured out of the box. + +// TODO \ No newline at end of file From afa5e602215e47d9975d64ecfb66ba55bebc1a0d Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Fri, 15 Nov 2024 12:18:27 -0500 Subject: [PATCH 2/6] Update basehub.mdx --- docs/cms/basehub.mdx | 80 ++++++++++++++++++++++++++------------------ 1 file changed, 48 insertions(+), 32 deletions(-) diff --git a/docs/cms/basehub.mdx b/docs/cms/basehub.mdx index 3cdc1285..536fbc68 100644 --- a/docs/cms/basehub.mdx +++ b/docs/cms/basehub.mdx @@ -1,9 +1,9 @@ --- -title: Switch to BaseHub -description: How to change the CMS provider from to BaseHub. +title: Implement BaseHub +description: How to implement BaseHub as your CMS. --- -Here's how to switch from `` to [BaseHub](https://basehub.com). +Here's how to implement [BaseHub](https://basehub.com) as your CMS. Learn more about BaseHub in their [docs](https://docs.basehub.com). ## 1. Fork the [`basehub/next-forge`](https://basehub.com/basehub/next-forge) template @@ -25,14 +25,16 @@ Keep this connection string handy, you will need it in the next step. ## 2. Update your environment variables -Update your environment variables to use the new BaseHub token: +Update your [environment variables](/env) to use the new BaseHub token. For example: -```js apps/web/.env +```ts apps/web/.env BASEHUB_TOKEN="" ``` ## 3. Install `basehub` +Install the `basehub` package in the `web` app: + ```sh Terminal pnpm add basehub --filter web ``` @@ -41,7 +43,7 @@ pnpm add basehub --filter web Run `basehub dev` in parallel to your existing dev script, and `basehub build` before your existing build script: -```ts apps/web/package.json +```ts apps/web/package.json {3-4} { "scripts": { "dev": "concurrently \"basehub dev\" \"next dev -p 3001\"", @@ -55,9 +57,9 @@ Both of these scripts generate the type-safe SDK, but they do so in different wa - `basehub dev` generates the SDK by targeting your repo's Draft API. Additionally, it will watch for schema changes and update the types accordingly. - `basehub build` generates the SDK by targeting your repo's Production API. -## 5. Update the queries +## 5. Create your queries -In `apps/web/cms.ts`, you'll need to update the queries to use the new BaseHub SDK. +Create a new file called `apps/web/cms.ts` and add the queries to use the new BaseHub SDK. ```ts apps/web/cms.ts import { basehub, fragmentOn } from 'basehub'; @@ -70,43 +72,57 @@ const imageFragment = fragmentOn('BlockImage', { }); const postMetaFragment = fragmentOn('PostsItem', { - _id: true, - _slug: true, - _title: true, - date: true, - description: true, - image: imageFragment, - authors: { _title: true, avatar: imageFragment }, + _id: true, + _slug: true, + _title: true, + date: true, + description: true, + image: imageFragment, + authors: { _title: true, avatar: imageFragment }, }) export const getPost = async (slug: string) => { const data = await basehub().query({ blog: { - posts: { - __args: { - filter: { - _sys_slug: { eq: slug } - } - }, - items: { - ...postMetaFragment, - body: { - readingTime: true, - json: { content: true } - } - } + posts: { + __args: { + filter: { + _sys_slug: { eq: slug } + } + }, + items: { + ...postMetaFragment, + body: { + readingTime: true, + json: { content: true } + } } + } } }); + return data.blog.posts.items[0]; }; export const getPosts = async () => { - const data = await basehub().query({ - blog: { posts: { items: postMetaFragment } }, - }); + const data = await basehub().query({ + blog: { posts: { items: postMetaFragment } }, + }); + return data.blog.posts.items; }; ``` -Learn more about BaseHub in their [docs](https://docs.basehub.com). \ No newline at end of file +## 6. Use the queries in your app + +Now you can use the `getPost` and `getPosts` queries in your app, like so: + +```tsx apps/web/pages/blog/[slug].tsx +import { getPost } from '../cms'; + +export default async function BlogPost({ params }: { params: { slug: string } }) { + const post = await getPost(params.slug); + + return
{post._title}
; +} +``` From a1ff68e8e5ea2df231164388968e1d48139356ab Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Fri, 15 Nov 2024 12:18:29 -0500 Subject: [PATCH 3/6] Update overview.mdx --- docs/cms/overview.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/cms/overview.mdx b/docs/cms/overview.mdx index 99d4f948..0e316321 100644 --- a/docs/cms/overview.mdx +++ b/docs/cms/overview.mdx @@ -3,6 +3,6 @@ title: Overview description: How is the CMS configured in next-forge. --- -next-forge comes with a CMS configured out of the box. +next-forge does not come with a CMS configured out of the box. However, it is designed to be easily integrated with any content management system you want. -// TODO \ No newline at end of file +Check out some of our guides to see how to integrate with some popular CMSs! \ No newline at end of file From 6a9ceb471eded8a4d5d0bb2b33622becfbab2ebc Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Fri, 15 Nov 2024 12:18:31 -0500 Subject: [PATCH 4/6] Update mint.json --- docs/mint.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/mint.json b/docs/mint.json index 689f4077..a97c8fe0 100644 --- a/docs/mint.json +++ b/docs/mint.json @@ -69,6 +69,10 @@ "authentication", "blog", "bundle-analysis", + { + "group": "CMS", + "pages": ["cms/overview", "cms/basehub"] + }, "cron", { "group": "Database and ORM", From 57bf14b11f0e61a488bbce2a228e9b6f0e2f5a94 Mon Sep 17 00:00:00 2001 From: Hayden Bleasel Date: Fri, 15 Nov 2024 12:19:43 -0500 Subject: [PATCH 5/6] Update drizzle.mdx --- docs/database/drizzle.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/database/drizzle.mdx b/docs/database/drizzle.mdx index fe174644..1dec9dbe 100644 --- a/docs/database/drizzle.mdx +++ b/docs/database/drizzle.mdx @@ -46,7 +46,6 @@ Delete everything in `@repo/database/index.ts` and replace it with the following ```ts packages/database/index.ts import 'server-only'; -import { neon } from '@neondatabase/serverless'; import { drizzle } from 'drizzle-orm/neon-http'; import { env } from '@repo/env'; From c65eb8003cf4e1ba3743a877a855904901392769 Mon Sep 17 00:00:00 2001 From: Julian Benegas Date: Sat, 16 Nov 2024 18:05:49 -0300 Subject: [PATCH 6/6] update basehub post --- docs/cms/basehub.mdx | 86 ++++++++++++++++++++++++++++++++++++++------ 1 file changed, 76 insertions(+), 10 deletions(-) diff --git a/docs/cms/basehub.mdx b/docs/cms/basehub.mdx index 536fbc68..8b2aaa6b 100644 --- a/docs/cms/basehub.mdx +++ b/docs/cms/basehub.mdx @@ -57,7 +57,18 @@ Both of these scripts generate the type-safe SDK, but they do so in different wa - `basehub dev` generates the SDK by targeting your repo's Draft API. Additionally, it will watch for schema changes and update the types accordingly. - `basehub build` generates the SDK by targeting your repo's Production API. -## 5. Create your queries +## 5. Add `assets.basehub.com` as a valid image host + +```ts apps/web/next.config.ts +nextConfig.images?.remotePatterns?.push({ + protocol: 'https', + hostname: 'assets.basehub.com', +}); + +// Note: you can either push it to the existing array, or modify `packages/next-config/index.ts` +``` + +## 6. Create your queries Create a new file called `apps/web/cms.ts` and add the queries to use the new BaseHub SDK. @@ -65,10 +76,11 @@ Create a new file called `apps/web/cms.ts` and add the queries to use the new Ba import { basehub, fragmentOn } from 'basehub'; const imageFragment = fragmentOn('BlockImage', { - url: true, - width: true, - height: true, - alt: true, + url: true, + width: true, + height: true, + alt: true, + blurDataURL: true, }); const postMetaFragment = fragmentOn('PostsItem', { @@ -113,16 +125,70 @@ export const getPosts = async () => { }; ``` -## 6. Use the queries in your app +## 7. Use the queries in your app Now you can use the `getPost` and `getPosts` queries in your app, like so: +```tsx apps/web/pages/blog/page.tsx +import { getPosts } from '../../cms'; + +const BlogIndex = async () => { + const allPosts = await getPosts(); + + // ... rest of the page omitted for brevity + + return ( + <> + {allPosts.map((post) => ( + +
{post._title}
+ + ))} + + ); +}; +``` + ```tsx apps/web/pages/blog/[slug].tsx -import { getPost } from '../cms'; +import { getPost } from '../../../cms'; + +const BlogPost = async ({ params }: BlogPostProperties) => { + const { slug } = await params; + const post = await getPost(slug); + + // ... rest of the page omitted for brevity -export default async function BlogPost({ params }: { params: { slug: string } }) { - const post = await getPost(params.slug); - return
{post._title}
; } ``` + +## 8. Bonus: `Toolbar` + +Mount the `Toolbar` component in your `apps/web/app/layout.tsx` file to ensure [Automatic On-Demand Revalidation](https://docs.basehub.com/documentation/nextjs-integration/environments-and-caching#on-demand-revalidation-recommended) works as expected, and Preview Links from the BaseHub Dashboard do so as well. + +```tsx apps/web/app/layout.tsx {11} +import { Toolbar } from 'basehub/next-toolbar'; + +const RootLayout = ({ children }: RootLayoutProperties) => ( + + + +
+ {children} +