atpares

Atpares

Publish and keep your site's blog through Atpares, without duplicating content or wiring the API by hand.

The atpares package connects your project to the content managed in Atpares and delivers blog pages, SEO, sitemap and ready components for Nuxt and Next.js. The API client alone can be used in any other project.

What the package delivers

• post index and post pages;
• metadata for SEO and sharing;
• structured data in JSON-LD;
• blog sitemap;
• ready components and styles;
• typed client for a custom integration;
• site key kept on the server.

Requirements

• Node.js 20 or newer;
• a project set up in Atpares;
• a content key created in the panel.

Install

npm install atpares

Pick your framework:

• Nuxt: content resolved at runtime, no new deploy needed;
• Next.js: content loaded during the build and published on the next deploy;
• API client: custom integration, no framework.

Nuxt

Add the Atpares layer and the key to nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['atpares/nuxt'],
  runtimeConfig: {
    atpares: {
      key: process.env.ATPARES_KEY,
      base: process.env.ATPARES_BASE
    },
    public: {
      atpares: {
        origin: 'https://yoursite.com',
        name: 'Site name'
      }
    }
  }
})

Add the address and the key to the environment:

ATPARES_BASE=https://content.atpares.com
ATPARES_KEY=your-content-key

Start the project and open /blog. The integration creates:

• /blog;
• /blog/:slug;
• /blog-sitemap.xml;
• the internal endpoints used to read the content without exposing the key, including the one that reports reading time.

Post pages report a visit and how long the reader stayed. The browser calls the site's own endpoint, which forwards it with the key, so nothing secret reaches the page. Visits and average time show up in Atpares, in the blog list.

With nuxt generate or nitro.preset: 'static' the layer switches mode during the build and adds every post to the prerender routes, so a static site needs no extra setup.

Nuxt options

These go in runtimeConfig.public.atpares:

export default defineNuxtConfig({
  extends: ['atpares/nuxt'],
  runtimeConfig: {
    atpares: {
      key: process.env.ATPARES_KEY,
      base: process.env.ATPARES_BASE,
      timeout: 10_000
    },
    public: {
      atpares: {
        origin: 'https://yoursite.com',
        name: 'Site name',
        logo: '/logo.svg',
        locale: 'pt-BR',
        blog: {
          prefix: '/blog',
          pages: true,
          cache: 300,
          title: 'Blog',
          lede: 'Writing to help you...',
          all: 'All',
          more: 'See more posts',
          empty: 'No posts published yet.'
        }
      }
    }
  }
})

Set blog.pages to false to build your own pages with the composables and components of the package: useAtparesBlog, useAtparesSite, useAtparesPosts, useAtparesPost, useAtparesIndex, and the AtparesBlogList and AtparesBlogPost components.

Next.js

The Next.js support uses the App Router and builds the blog during next build.

1. Set the environment

ATPARES_BASE=https://content.atpares.com
ATPARES_KEY=your-content-key
ATPARES_SITE_NAME=Site name
ATPARES_SITE_ORIGIN=https://yoursite.com

2. Import the styles

// app/layout.tsx
import 'atpares/blog.css'

3. Create the blog index

// app/blog/page.tsx
export {
  blogIndexMetadata as generateMetadata,
  BlogIndexPage as default
} from 'atpares/next/blog'

4. Create the post page

// app/blog/[slug]/page.tsx
export const dynamicParams = false

export {
  blogStaticParams as generateStaticParams,
  blogPostMetadata as generateMetadata,
  BlogPostPage as default
} from 'atpares/next/blog'

5. Receive the reading metrics

// app/api/atpares/view/route.ts
import { blogViewRoute } from 'atpares/next/blog'

export const POST = blogViewRoute()

The post page reports a visit and how long the reader stayed to this route, which forwards it with the key. Visits and average time show up in Atpares, in the blog list. Set ATPARES_VIEW_PATH if the route lives elsewhere. Skip this step to leave the metrics off; nothing else breaks.

6. Add the posts to the sitemap

If the project has no sitemap yet:

// app/sitemap.ts
export { blogSitemap as default } from 'atpares/next/blog'

If it already has one, merge the result of blogSitemap() with the other urls. With output: 'export', app/sitemap.ts also needs export const dynamic = 'force-static'.

Posts are fetched during the build. After publishing or changing a post in Atpares, deploy the site again to put the update live.

Optional Next.js variables

Styling

Import atpares/blog.css and override the variables in your own CSS:

:root {
  --atpares-accent: #c3f53c;
  --atpares-ink: #0e0e10;
  --atpares-ink-soft: #495057;
  --atpares-surface: #ffffff;
  --atpares-line: #e5e7eb;
  --atpares-radius: 16px;
  --atpares-gap: 24px;
  --atpares-measure: 760px;
}

API client

Use atpares/client when you want to own the routes and the interface:

import { createClient } from 'atpares/client'

const client = createClient({
  base: process.env.ATPARES_BASE!,
  key: process.env.ATPARES_KEY!
})

const site = await client.site()
const page = await client.posts({ page: 1, perPage: 12 })
const post = await client.post('post-slug')
const sitemap = await client.sitemap()

await client.view('post-slug', 42)

The client also exports the content types and the articleSchema, breadcrumbSchema and urlOf builders.

Use the key on the server or during the build only. Never expose ATPARES_KEY in the browser.

Import reference

Package development

npm install
npm run check

To publish a new version:

npm run release

License

MIT