Implement task #78 - blog post page

[brian-ai-assistant[bot]]

To implement the blog post page, we need to make the following changes:

1. Update the Posts component to fetch the blog post data from the backend API using an HTTP request.

2. Create a new PostPreview component to display a single blog post preview.

3. Update the PostPreview component to render the blog post title, date, author information, and the post text.

4. Use the PostPreview component inside the Posts component to show a list of blog post previews.

5. Update the App component to include the Posts component.

Here are the files and their contents needed for the implementation:

frontend/src/components/post-preview.vue:

<template>
  <div>
    <h2>{{ post.title }}</h2>
    <p>Author: {{ post.author }}</p>
    <p>Date: {{ post.date }}</p>
    <p>{{ post.text }}</p>
  </div>
</template>

<script>
export default {
  name: 'PostPreview',
  props: ['post'],
}
</script>

<style scoped>
/* Add component styles here */
</style>

frontend/src/components/posts.vue:

<template>
  <div>
    <PostPreview v-for="post in posts" :key="post.id" :post="post" />
  </div>
</template>

<script>
import PostPreview from './post-preview.vue';

export default {
  name: 'Posts',
  components: {
    PostPreview,
  },
  data() {
    return {
      posts: [],
    }
  },
  mounted() {
    this.fetchPosts();
  },
  methods: {
    fetchPosts() {
      // Make an HTTP request to fetch the blog post data
      // Update the 'posts' data property with the fetched data
    },
  },
}
</script>

<style scoped>
/* Add component styles here */
</style>

frontend/src/App.vue:

<template>
  <div id="app">
    <h1>My Blog</h1>
    <Posts />
  </div>
</template>

<script>
import Posts from './components/posts.vue';

export default {
  name: 'App',
  components: {
    Posts,
  },
}
</script>

<style>
/* Add any custom styles here */
</style>