How does Next-Blog-AI generate content?

Next-Blog-AI uses advanced natural language processing to create original, high-quality content based on your specified topics and keywords. Our AI models are trained on diverse, high-quality sources to ensure relevant and valuable blog posts for your audience.

Will the content be unique and pass plagiarism checks?

Yes, all content generated by Next-Blog-AI is original and will pass plagiarism checks. Each article is created specifically for your site based on your configuration and keywords.

How customizable is the content?

Very, you can edit any post at any time in your dashboard.

Does using an AI content tool affect SEO?

Our AI-generated content is designed to be valuable to readers and follows all best practices for SEO. The content is optimized for search engines with proper semantic structure, relevant keywords, and engaging writing that helps improve rankings.

How does the pricing work with the npm package?

Our pricing is based on the number of websites and monthly posts per website. You can manage all your websites from a single dashboard, with options to upgrade, downgrade, or cancel your subscription at any time.

Customizing Styles | Next-Blog-AI Documentation

Name: Next-Blog-AI
Availability: InStock
Rating: 4.8 (24 reviews)
Author: Next-Blog-AI

Overview

Next-Blog-AI provides a comprehensive styling system that allows you to customize the appearance of your blog content and listings. The package includes sensible default styles, but you can override them with your own custom CSS to match your application's design system.

When using the json format for content, you'll need to implement your own styling since you're doing the rendering yourself. This guide focuses on styling HTML content returned by the API.

CSS Classes Structure

To effectively customize the styling, it's important to understand the CSS class structure used by Next-Blog-AI:

Blog Content Classes

.next-blog-ai-contentMain container for blog post content
.next-blog-ai-commentsContainer for comments section
.next-blog-ai-commentIndividual comment container
.next-blog-ai-comment-formComment submission form

Blog List Classes

.next-blog-ai-listContainer for blog list
.next-blog-ai-list.grid-viewApplied when using grid display format
.next-blog-ai-list.list-viewApplied when using list display format
.next-blog-ai-post-cardIndividual post card in the list
.next-blog-ai-paginationPagination controls container

Setting Custom Styles

There are two ways to set custom styles for your Next-Blog-AI content:

1. At Initialization

You can provide custom styles when creating the Next-Blog-AI client:

import { createNextBlogAIForNextJs } from 'next-blog-ai';

// Next.js only: use createNextBlogAIForNextJs for all integrations
// Example:
// const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  // Add your custom styles
  styles: {
    blogContent: `
      .next-blog-ai-content {
        max-width: 800px;
        margin: 0 auto;
        font-family: 'Georgia', serif;
      }
      
      .next-blog-ai-content h1 {
        color: #0070f3;
      }
    `,
    blogList: `
      .next-blog-ai-list {
        gap: 2rem;
      }
      
      .next-blog-ai-post-card {
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    `
  }
});

2. Using the setStyles Method

You can update the styles after creating the client using the setStyles method:

// Update styles after client creation
const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    .next-blog-ai-content {
      /* Your custom styles */
    }
  `,
  blogList: `
    .next-blog-ai-list {
      /* Your custom styles */
    }
  `
});

Extending Default Styles

Rather than replacing the default styles completely, you can extend them by importing the default style constants and adding your customizations:

import {
  
  DEFAULT_BLOG_STYLES,
  DEFAULT_BLOG_LIST_STYLES
} from 'next-blog-ai';

// Extend the default styles
const customBlogContentStyles = `
  ${DEFAULT_BLOG_STYLES}
  
  /* Add your custom styles */
  .next-blog-ai-content h1 {
    color: #0070f3;
  }
`;

const customBlogListStyles = `
  ${DEFAULT_BLOG_LIST_STYLES}
  
  /* Add your custom styles */
  .next-blog-ai-post-card {
    border-radius: 8px;
  }
`;

// Use the extended styles
// Next.js only: use createNextBlogAIForNextJs for all integrations
// Example:
// const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
  apiKey: process.env.NEXT_BLOG_AI_API_KEY!,
  styles: {
    blogContent: customBlogContentStyles,
    blogList: customBlogListStyles
  }
});

Styling Blog Content

The .next-blog-ai-content container includes the main blog post content with standard HTML elements like headings, paragraphs, lists, and images. You can style these elements using standard CSS selectors:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    /* Typography */
    .next-blog-ai-content {
      font-family: 'Inter', sans-serif;
      line-height: 1.7;
      color: #333;
    }
    
    /* Headings */
    .next-blog-ai-content h1 {
      font-size: 2.5rem;
      color: #0070f3;
      margin-bottom: 1.5rem;
    }
    
    .next-blog-ai-content h2 {
      font-size: 2rem;
      color: #0070f3;
      margin-top: 2.5rem;
      margin-bottom: 1rem;
    }
    
    /* Links */
    .next-blog-ai-content a {
      color: #0070f3;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s;
    }
    
    .next-blog-ai-content a:hover {
      border-color: #0070f3;
    }
    
    /* Images */
    .next-blog-ai-content img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 2rem 0;
    }
    
    /* Code blocks */
    .next-blog-ai-content pre {
      background-color: #f7f7f7;
      padding: 1rem;
      border-radius: 4px;
      overflow-x: auto;
    }
    
    .next-blog-ai-content code {
      font-family: 'Fira Code', monospace;
      font-size: 0.9rem;
    }
  `
});

Styling Blog Lists

The .next-blog-ai-list container includes blog post cards arranged in either a grid or list layout. You can style the container and cards using these selectors:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogList: `
    /* Grid layout */
    .next-blog-ai-list.grid-view {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
    }
    
    /* List layout */
    .next-blog-ai-list.list-view {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    
    /* Post cards */
    .next-blog-ai-post-card {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .next-blog-ai-post-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    }
    
    /* Post card elements */
    .next-blog-ai-post-card-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    
    .next-blog-ai-post-card-content {
      padding: 1.5rem;
    }
    
    .next-blog-ai-post-card-title {
      font-size: 1.5rem;
      color: #333;
      margin-bottom: 0.5rem;
    }
    
    .next-blog-ai-post-card-date {
      font-size: 0.875rem;
      color: #666;
      margin-bottom: 1rem;
    }
    
    .next-blog-ai-post-card-excerpt {
      color: #444;
      margin-bottom: 1.5rem;
    }
    
    .next-blog-ai-post-card-link {
      display: inline-block;
      color: #0070f3;
      font-weight: 500;
      text-decoration: none;
    }
    
    /* Pagination */
    .next-blog-ai-pagination {
      display: flex;
      justify-content: center;
      margin-top: 3rem;
      gap: 0.5rem;
    }
    
    .next-blog-ai-pagination-button {
      padding: 0.5rem 1rem;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 4px;
      cursor: pointer;
    }
    
    .next-blog-ai-pagination-button.active {
      background-color: #0070f3;
      color: white;
      border-color: #0070f3;
    }
  `
});

Styling for Dark Mode

You can add styles that detect and respond to dark mode using CSS media queries:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogContent: `
    .next-blog-ai-content {
      color: #333;
    }
    
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
      .next-blog-ai-content {
        color: #e1e1e1;
      }
      
      .next-blog-ai-content h1, 
      .next-blog-ai-content h2, 
      .next-blog-ai-content h3 {
        color: #61dafb;
      }
      
      .next-blog-ai-content a {
        color: #61dafb;
      }
      
      .next-blog-ai-content pre {
        background-color: #2d2d2d;
      }
      
      .next-blog-ai-content code {
        color: #e1e1e1;
      }
    }
  `
});

Responsive Styling

Add responsive styles to make your blog look great on all screen sizes:

const { setStyles } = createNextBlogAIForNextJs(process.env.NEXT_BLOG_AI_API_KEY!);
setStyles({
  blogList: `
    /* Default (mobile) */
    .next-blog-ai-list.grid-view {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    
    /* Tablet */
    @media (min-width: 640px) {
      .next-blog-ai-list.grid-view {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    
    /* Desktop */
    @media (min-width: 1024px) {
      .next-blog-ai-list.grid-view {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  `
});