Skip to content

Commit

Permalink
feat: start landing page update
Browse files Browse the repository at this point in the history
  • Loading branch information
tufstraka committed Jun 14, 2024
1 parent b379048 commit 48c762d
Showing 6 changed files with 266 additions and 103 deletions.
45 changes: 45 additions & 0 deletions src/components/FeaturedCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template>
<div class="featured-card">
<img :src="post.image" alt="Post Image" class="post-image"/>
<h2>{{ post.title }}</h2>
<p>{{ post.excerpt }}</p>
</div>
</template>

<script>
export default {
name: "FeaturedCard",
props: {
post: Object
}
};
</script>

<style lang="scss" scoped>
.featured-card {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center;
padding: 20px;
.post-image {
width: 100%;
height: 200px;
object-fit: cover;
}
h2 {
font-size: 24px;
margin: 10px 0;
color: #34495e;
}
p {
font-size: 16px;
color: #7f8c8d;
}
}
</style>

47 changes: 47 additions & 0 deletions src/components/ReviewerCard.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<template>
<div class="reviewer-card">
<img :src="reviewer.avatar" alt="Reviewer Avatar" class="reviewer-avatar"/>
<h3>{{ reviewer.name }}</h3>
<p>{{ reviewer.bio }}</p>
</div>
</template>

<script>
export default {
name: "ReviewerCard",
props: {
reviewer: Object
}
};
</script>

<style lang="scss" scoped>
.reviewer-card {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
text-align: center;
padding: 20px;
.reviewer-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 10px;
}
h3 {
font-size: 20px;
margin: 10px 0;
color: #34495e;
}
p {
font-size: 16px;
color: #7f8c8d;
}
}
</style>

41 changes: 41 additions & 0 deletions src/components/WelcomeSection.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>
<div class="welcome-section">
<img :src="post.photo" alt="Welcome Image" class="welcome-image"/>
<h1>{{ post.title }}</h1>
<p>{{ post.blogPost }}</p>
</div>
</template>

<script>
export default {
name: "WelcomeSection",
props: {
post: Object
}
};
</script>

<style lang="scss" scoped>
.welcome-section {
text-align: center;
margin: 20px 0;
.welcome-image {
width: 100%;
max-height: 400px;
object-fit: cover;
}
h1 {
font-size: 36px;
margin: 20px 0;
color: #2c3e50;
}
p {
font-size: 18px;
color: #7f8c8d;
}
}
</style>

53 changes: 19 additions & 34 deletions src/store/index.js
Original file line number Diff line number Diff line change
@@ -30,19 +30,25 @@ export default new Vuex.Store({
blogPostsFeed(state) {
return state.blogPosts.slice(0, 1);
},

blogPostsCards(state) {
return state.blogPosts.slice(0, 4);
},

featuredPosts(state) {
return state.blogPosts.filter(post => post.isFeatured).slice(0, 4);
},
topReviewers() {
return [
{ id: 1, name: "John Doe", bio: "Movie enthusiast and critic", avatar: "path/to/avatar1.jpg" },
{ id: 2, name: "Jane Smith", bio: "Cinema lover and reviewer", avatar: "path/to/avatar2.jpg" },
// Add more reviewers as needed
];
},
cartTotal(state) {
return state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
},

cartItemCount(state) {
return state.cartItems.reduce((count, item) => count + item.quantity, 0);
},

cartItems(state) {
return state.cartItems;
}
@@ -51,72 +57,57 @@ export default new Vuex.Store({
createFileURL(state, payload) {
state.blogPhotoFileURL = payload;
},

openPhotoPreview(state) {
state.blogPhotoPreview = !state.blogPhotoPreview;
},

fileNameChange(state, payload) {
state.blogPhotoName = payload;
},

newBlogPost(state, payload) {
state.blogHTML = payload;
},

updateBlogTitle(state, payload) {
state.blogTitle = payload;
},

toggleEditPost(state, payload) {
state.editPost = payload;
},

filterBlogPost(state, payload) {
state.blogPosts = state.blogPosts.filter((post) => post.blogID !== payload);
},

setProfileAdmin(state, payload) {
state.profileAdmin = payload;
},

setBlogState(state, payload) {
state.blogTitle = payload.blogTitle;
state.blogHTML = payload.blogHTML;
state.blogPhotoFileURL = payload.blogCoverPhoto;
state.blogPhotoName = payload.blogCoverPhotoName;
},

updateUser(state, payload) {
state.user = payload;
state.user = payload;
},

setProfileInfo(state, doc) {
state.profileId = doc.id;
state.profileEmail = doc.data().email;
state.profileFirstName = doc.data().firstName;
state.profileLastName = doc.data().lastName;
state.profileUsername = doc.data().userName;
},

setProfileInitials(state) {
state.profileInitials =
state.profileInitials =
state.profileFirstName.match(/(\b\S)?/g).join("") +
state.profileLastName.match(/(\b\S)?/g).join("");
state.profileLastName.match(/(\b\S)?/g).join("");
},

changeFirstName(state, payload) {
state.profileFirstName = payload;
},

changeLastName(state, payload) {
state.profileLastName = payload;
},

changeUsername(state, payload) {
state.profileUsername = payload;
},

// Cart mutations
addToCart(state, product) {
const existingProduct = state.cartItems.find(item => item.id === product.id);
@@ -127,12 +118,10 @@ export default new Vuex.Store({
}
localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
},

removeFromCart(state, product) {
state.cartItems = state.cartItems.filter(item => item.id !== product.id);
localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
},

updateCartQuantity(state, { product, quantity }) {
const cartItem = state.cartItems.find(item => item.id === product.id);
if (cartItem) {
@@ -156,37 +145,34 @@ export default new Vuex.Store({
const admin = await token.claims.admin;
commit('setProfileAdmin', admin);
},

async getPost({ state }) {
const dataBase = await db.collection('blogPosts').orderBy('date', 'desc');
const dbResults = await dataBase.get();
dbResults.forEach((doc) => {
if (!state.blogPosts.some(post => post.blogID == doc.id)) {
if (!state.blogPosts.some(post => post.blogID === doc.id)) {
const data = {
blogID: doc.data().blogID,
blogHTML: doc.data().blogHTML,
blogCoverPhoto: doc.data().blogCoverPhoto,
blogTitle: doc.data().blogTitle,
blogDate: doc.data().date,
blogCoverPhotoName: doc.data().blogCoverPhotoName,
isFeatured: doc.data().isFeatured // Ensure you have this field in your Firestore document
};
state.blogPosts.push(data);
}
});
state.postLoaded = true;
},

async deletePost({ commit }, payload) {
const getPost = await db.collection("blogPosts").doc(payload);
await getPost.delete();
commit("filterBlogPost", payload);
},

async updatePost({ commit, dispatch }, payload) {
commit("filterBlogPost", payload);
await dispatch("getPost");
},

async updateUserSettings({ commit, state }) {
const dataBase = await db.collection('users').doc(state.profileId);
await dataBase.update({
@@ -196,21 +182,20 @@ export default new Vuex.Store({
});
commit("setProfileInitials");
},

// Cart actions
addToCart({ commit }, product) {
commit('addToCart', product);
},

removeFromCart({ commit }, product) {
commit('removeFromCart', product);
},

updateCartQuantity({ commit }, payload) {
commit('updateCartQuantity', payload);
}
},
modules: {
// if needed
// Add modules if needed
}
})
});


Loading

0 comments on commit 48c762d

Please sign in to comment.