Blog Components

Welcome to the blog-components library, a component library for canopas blogs website.

About

The blog-components is an open-source library developed and maintained by Canopas. Crafted using vue.js and tailwindcss a lightweight and highly efficient CSS platform on top of Nuxt 3 framework, showcasing a commitment to robust and advanced web development practices. For preview visit canopas blogs page .

Showcase

Blogs List UI

Blogs Detail UI

Prerequisites

Prior to integrating blog-components into your project, please ensure that tailwindcss is installed and properly configured within your project environment.

Quick Setup

1. Add blog-components dependency to your project .

Using yarn :

yarn add --dev @canopassoftware/blog-components

Using npm :

npm install --save-dev @canopassoftware/blog-components

2. Add blog-components to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@canopassoftware/blog-components"],
});

That's it! You can now use module in your Nuxt app ✨

Here are the examples,

Blog list

Blog list component to show all blogs.

  <BlogList
      :posts="posts"
      :featurePosts="featurePosts"
      :count="count"
      :status="status"
    />

• :posts="posts"

  • required
  • posts to be dispayed

• :featurePosts="featuredPosts"

  • featured blog posts

• :count="count"

  • Number of posts for UI adjustment

• :status="status"

  • status of API response

Blog list by tag

Tag list component to show posts by given tag.

  <TagList
    :slug="slug"
    :posts="posts"
  />

• :slug:"slug"
  • required
  • tag name
• :posts="posts"
  • required
  • posts by given tag

Blog details

Component to show blog detail by slug

  <BlogDetail
      :slug="slug"
      :post="post"
      :recommandedPosts="recommandedPosts"
      :websiteUrl="your-website-url"
      :contactApiUrl="your-contact-api-url"
    />

• :post="post"

  • required
  • slug of post

• :post="post"

  • required
  • post detail of given slug

• :recommandedPosts="recommandedPosts"

  • recommanded posts, which are similar to given post

• :websiteUrl="websiteUrl"

  • For sharing on social media, you can pass your website's url

• :contactApiUrl="contactApiUrl"

  • This api is used for CTA forms. It is not required, if you don't want to add CTAs.

Blog footer

Footer component

    <BlogFooter
      :socialMediaData="socialMediaData"
      :apiUrl="subscription-api-url"
      :companyName="your-company-name"
    />

• :socialMediaData="socialMediaData"

  • required
  • JSON object of your social media handles

    const socialMediaData = {
        facebook: your-facebook-url,
        instagram: your-instagram-url,
        twitter: your-twitter-url,
        blog: your-blog-url,
        linkedin: your-linkedin-url,
        youtube: your-youtube-url,
    };

• :apiUrl="subscription-api-url"

  • required
  • Subscription api url

• :companyName="companyName"

  • your companyName

LICENSE

This repository licenced under MIT.