Blog Single

VBlogContent

The VBlogContent component is a Vue 3 component that displays the content of a blog post, including the title, subtitle, cover image, and customizable content.

Props

Prop Name	Type	Required	Description
`currentPost`	`IFrontmatter`	Yes	The frontmatter data for the current blog post, including title, subtitle, and image.
`wide`	Boolean	No	A flag to indicate if the content should be displayed in a wide layout.

Example

vue

<script setup lang="ts">
  import VBlogContent from 'UiKit/components/VPage/VBlog/VBlogContent.vue';
  const post = {
    title: 'My Blog Post',
    subTitle: 'An interesting subtitle',
    cover: {
      image: '/images/blog/players.jpeg',
    },
    publishDate: '2024-10-10',
    updateDate: '2024-10-11',
  };
</script>
<VBlogContent :currentPost="post" wide />

My Blog Post

An interesting subtitle

VBlogDisqus

The VBlogDisqus component integrates Disqus comments into the blog page.

Props

Prop Name	Type	Required	Description
`frontendUrl`	String	Yes	The base URL for the frontend application.

Example

vue

<VBlogDisqus :frontend-url="env.FRONTEND_URL" />

VBlogHeader

The VBlogHeader component displays the blog post header, including the author's information and publication date, key tags.

Props

Prop Name	Type	Required	Description
`data`	`IFrontmatter`	Yes	The frontmatter data for the current blog post.
`author`	`IFrontmatter`	Yes	The author data for the blog post.

Example

vue

<script setup lang="ts">
  import VBlogHeader from 'UiKit/components/VPage/VBlog/VBlogHeader.vue';
  const postData = {
  title: 'Understanding Vue 3 Composition API',
  description: 'A comprehensive guide to the Vue 3 Composition API.',
  publishDate: '2024-10-10',
  cover: {
    image: '/images/vue-composition-api.png',
    alt: 'Vue 3 Composition API',
  },
};

const authorData = {
  title: 'Iryna Maksymova',
  cover: {
    image: '/images/blog/iryna-photo.jpg',
  },
};
</script>
<VBlogHeader :data="postData" :author="authorData" />

Iryna Maksymova

October 11, 2024

tag1
tag2
tag3

VBlogReadMore

The VBlogReadMore component displays a list of random blog posts, excluding the current post.

Example

vue

<VBlogReadMore />

15 AUG, 2023

Simple short Best HTML Practice

Examples from my own experience with HTML practices

31 SEP, 2023

4 mistakes in scaling long-running product and how to fix them

Our experience with building and delivering new core functionality into long-running products.

16 OCT, 2023

6 keys for an effective onboarding in small distributive team

How to build effective onboarding in terms of remote culture, rapid team growing and changing without the ability to delegate to personal onboarding buddies?

VBlogShare

The VBlogShare component provides sharing options for the blog post on various social media platforms.

Props

Prop Name	Type	Required	Description
`data`	`IFrontmatter`	Yes	The frontmatter data for the current blog post.

Example

vue

<script setup lang="ts">
  import VBlogShare from 'UiKit/components/VPage/VBlog/VBlogShare.vue';
  const postData = {
  title: 'Understanding Vue 3 Composition API',
  description: 'A comprehensive guide to the Vue 3 Composition API.',
  publishDate: '2024-10-10',
  cover: {
    image: '/images/vue-composition-api.png',
    alt: 'Vue 3 Composition API',
  },
  tags: ['tag1', 'tag2', 'tag3']
};
</script>
<VBlogShare :data="postData" />