Skip to content

Latest commit

 

History

History
352 lines (231 loc) · 8.4 KB

COMPONENTS.md

File metadata and controls

352 lines (231 loc) · 8.4 KB

All components provided by this library

Fields of post object

Note: * fields are required

  • id* : Id of post
  • slug* : Unique identifier with dashed format of post title(i.e. this-is-post-slug)
  • title* : Title of post
  • summary* : Summary of Post
  • content* : Content of Post in HTML format
  • toc : Table of Content in HTML format
  • reading_time* : Total reading time in minutes
  • published_on* : Published date of post
  • is_published : Post is considered as Draft, if this field is false.
  • image_url* : ImageUrl of post
  • alternative_text : Alternative text of Image
  • author* : Author details of post 
    {
  username
  name
  bio
  image
  alt_text
}
  • recommended_posts : List of recommended posts if any
  • tag : List of tags 
    {
  slug
  name
}

Table of contents

Alert

This component is used for showing alerts. In this library it is used by BlogDetailHeader

Properties

  • :message="message" (required): Message to be shown on alert

Example

  <Alert :message="message" />

Author detail

This component shows detail of author

Properties

  • :author="author" (required): Object of author containing author's fields from post's object

Example

  <AuthorDetail :author="author" />

Blog content

This component will render blog's content

Properties

  • :content="content"(required): Content in html format.

Note: If you want to use this component directly, you should do some html refactoring for UI. You can take reference from blog detail component.

Example

    <BlogContent :content="content" />

Blog detail

This component contains a whole blog detail page including BlogHeader, TableOfContents, RecommendedPosts, Tags, AuthorDetails, CTA and Footer

Properties

  • :post="post"(required): Post details
  • :websiteUrl="websiteUrl": For sharing on social media, you can pass your website's url. Required for Header and Footer
  • :contact-api-url="your-contact-api-url": Required if you want to add CTA form component in your blog detail.
  • :recaptcha-key="recaptcha-key": Requried for protecting CTA forms from malicious requests.

Example

  <BlogDetail
      :post="post"
      :websiteUrl="your-website-url"
      :contact-api-url="your-contact-api-url"
      :recaptcha-key="recaptcha-key"
    />

Blog detail header

This component contains Blog's prior details along with social media sharing.

Properties

  • :post="post"(required): Post details
  • :websiteUrl="websiteUrl": For sharing on social media, you can pass your website's url.

Example

    <BlogDetailHeader :post="post" :websiteUrl="your-website-url" />

Blog footer

Properties

  • :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

Example

    <BlogFooter
      :social-media-data="socialMediaData"
      :api-url="subscription-api-url"
      :company-name="your-company-name"
    />

Blog list

Properties

  • :posts="posts" (required): posts to be displayed

  • :featurePosts="featuredPosts": featured blog posts showing on the top of page

  • :count="count": Number of posts for UI adjustment

  • :status="status": Status of API response

Example

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

Blog tile

Single blog card

Properties

  • :post="post"(required): Post details
  • :count="count": Total number of posts. Default value is 1.
  • :index="index": blog index from for loop. Default is 0.

Example

    <BlogTile :post="post" :count="count" :index="index" />

Featured blog tile

Single featured blog card

Properties

  • :post="post"(required): Featured post details

Example

    <FeaturedBlogTile :post="post" />

Post list for tag and author UI

Tags list

Authors list

Properties

  • :slug="slug"(required for PostList): Slug or id of tag
  • :posts="posts"(required): List of posts for given tag or author

Example

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

  <AuthorPosts :posts="posts" />

Recommended posts

Properties

  • :posts="posts"(required): Recommended posts list

Example

    <RecommendedPosts :posts="posts" />

Table of contents

Properties

  • :index-content="newIndexContent"(required): Index content in HTML form.
  • :header-height="headerHeight": Height of the top header. Required for scrolling behaviour if this component is used with BlogContent. Default is 0.
  • :content-ref="contentRef": Reference of blog content. Required for scrolling behaviour if this component is used with BlogContent.

Note: If you want to use this component directly, you should do some html refactoring for UI. You can take reference from blog detail component.

Example

    <TableOfContents
        :index-content="newIndexContent"
        :header-height="headerHeight"
        :content-ref="contentRef"
    />

Tags

Properties

  • :tags="tags"(required): Tag list

Example

    <TagSection :tags="tags" />

Unsubscribe

This component contains email tempalate of Unsubscription.

Properties

  • :company-title="your-company-name"(required): Your company's name
  • :api-url="unsubscribe-api-url": API url to unsubscribe

Example

    <Unsubscribe :company-title="your-company-name" :api-url="unsubscribe-api-url" />