Skip to content

Commit

Permalink
Create authors page
Browse files Browse the repository at this point in the history
  • Loading branch information
cp-sumi-k committed Feb 20, 2024
1 parent 11d4783 commit b623d3a
Show file tree
Hide file tree
Showing 36 changed files with 3,252 additions and 1,958 deletions.
8 changes: 4 additions & 4 deletions nuxt-frontend/components/Blog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ const status = computed(() => store.status);
let postLimit = config.POST_PAGINATION_LIMIT;
await useAsyncData("blogs", () =>
store.loadResources(config.SHOW_DRAFT_POSTS, isResource.value, 0, postLimit),
store.loadResources(config.SHOW_DRAFT_POSTS, isResource.value, 0, postLimit)
);
if (status.value === config.SUCCESS) {
Expand All @@ -74,12 +74,12 @@ const handleScroll = () => {
config.SHOW_DRAFT_POSTS,
isResource.value,
posts.value.length,
postLimit,
),
postLimit
)
).then(() => {
posts.value.push(...resources.value);
posts.value = Array.from(new Set(posts.value.map(JSON.stringify))).map(
JSON.parse,
JSON.parse
);
});
}
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/components/contact/NewContactForm.vue
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ export default {
});
localStorage.setItem(
"client-name",
JSON.stringify(formData.name),
JSON.stringify(formData.name)
);
this.resetForm();
})
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/components/contributions/DesignExplore.vue
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ export default {
found = true;
styles[i].innerText = styles[i].innerText.replaceAll(
this.lastWidth,
width,
width
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/components/contributions/WhatsTrending.vue
Original file line number Diff line number Diff line change
Expand Up @@ -352,7 +352,7 @@ export default {
found = true;
element.innerText = element.innerText.replaceAll(
this.lastWidth,
width,
width
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/components/home-new/BlogSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ const resources = computed(() => store.items);
const status = computed(() => store.status);
await useAsyncData("blogs", () =>
store.loadResources(config.SHOW_DRAFT_POSTS, false, 0, 3),
store.loadResources(config.SHOW_DRAFT_POSTS, false, 0, 3)
);
if (status.value === config.SUCCESS) {
Expand Down
32 changes: 16 additions & 16 deletions nuxt-frontend/components/home-new/HomeIndex.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,29 +21,29 @@ import LandingSection from "@/components/home-new/LandingSection.vue";
import { elementInViewPort } from "@/utils.js";
import { defineAsyncComponent } from "vue";
const CaseStudy = defineAsyncComponent(
() => import("@/components/home-new/CaseStudy.vue"),
const CaseStudy = defineAsyncComponent(() =>
import("@/components/home-new/CaseStudy.vue")
);
const ServiceSection = defineAsyncComponent(
() => import("@/components/home-new/ServiceSection.vue"),
const ServiceSection = defineAsyncComponent(() =>
import("@/components/home-new/ServiceSection.vue")
);
const ServiceSectionMobile = defineAsyncComponent(
() => import("@/components/home-new/ServiceSectionMobile.vue"),
const ServiceSectionMobile = defineAsyncComponent(() =>
import("@/components/home-new/ServiceSectionMobile.vue")
);
const ContributionSection = defineAsyncComponent(
() => import("@/components/home-new/ContributionSection.vue"),
const ContributionSection = defineAsyncComponent(() =>
import("@/components/home-new/ContributionSection.vue")
);
const ClientReview = defineAsyncComponent(
() => import("@/components/home-new/ClientReviewSection.vue"),
const ClientReview = defineAsyncComponent(() =>
import("@/components/home-new/ClientReviewSection.vue")
);
const CTASection = defineAsyncComponent(
() => import("@/components/mobile-app-development/CTASection2.vue"),
const CTASection = defineAsyncComponent(() =>
import("@/components/mobile-app-development/CTASection2.vue")
);
const BlogSection = defineAsyncComponent(
() => import("@/components/home-new/BlogSection.vue"),
const BlogSection = defineAsyncComponent(() =>
import("@/components/home-new/BlogSection.vue")
);
const NewFooter = defineAsyncComponent(
() => import("@/components/partials/NewFooter.vue"),
const NewFooter = defineAsyncComponent(() =>
import("@/components/partials/NewFooter.vue")
);
export default {
Expand Down
4 changes: 2 additions & 2 deletions nuxt-frontend/components/home-new/UserReview.vue
Original file line number Diff line number Diff line change
Expand Up @@ -197,8 +197,8 @@ export default {
};
},
components: {
LottieAnimation: defineAsyncComponent(
() => import("@/components/utils/LottieAnimation.vue"),
LottieAnimation: defineAsyncComponent(() =>
import("@/components/utils/LottieAnimation.vue")
),
Swiper,
SwiperSlide,
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/components/jobs/VirtuesView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
class="flex flex-col items-center my-5 mx-auto py-0 px-10 sm:my-2 sm:px-0 lg:my-10"
>
<div
class="image rounded-full bg-white relative h-0 w-1/2 pb-[50%] mb-5 sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
class="rounded-full bg-white relative h-0 w-1/2 pb-[50%] mb-5 sm:w-[30%] sm:pb-[30%] lg:w-1/2 lg:pb-[50%]"
>
<img
class="absolute w-[95%] h-[95%] left-0"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ export default {
setTimeout(function () {
window.open(
portfolio.url,
portfolio.target ? portfolio.target : "_self",
portfolio.target ? portfolio.target : "_self"
);
}, 200);
this.$mixpanel.track(portfolio.event);
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/components/portfolio/UserReviewSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export default {
found = true;
element.innerText = element.innerText.replaceAll(
this.lastWidth,
width,
width
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/components/services/WhatWeOfferDesktop.vue
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export default {
const elementIdx = elementInViewPort(this.$refs);
if (elementIdx) {
const index = parseInt(
elementIdx ? elementIdx.charAt(elementIdx.length - 1) : 0,
elementIdx ? elementIdx.charAt(elementIdx.length - 1) : 0
);
if (this.prevIndex != index) {
Expand Down
14 changes: 4 additions & 10 deletions nuxt-frontend/components/utils/LottieAnimation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -88,16 +88,10 @@ export default {
},
executeLoop() {
this.anim.play();
setTimeout(
() => {
this.anim.stop();
this.executeLoop();
},
this.getRandomInt(
this.loopDelayMin,
this.loopDelayMax == 0 ? this.loopDelayMin : this.loopDelayMax,
),
);
setTimeout(() => {
this.anim.stop();
this.executeLoop();
}, this.getRandomInt(this.loopDelayMin, this.loopDelayMax == 0 ? this.loopDelayMin : this.loopDelayMax));
},
},
watch: {
Expand Down
24 changes: 12 additions & 12 deletions nuxt-frontend/pages/about.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,23 @@ import config from "@/config.js";
import { elementInViewPort } from "@/utils.js";
import { defineAsyncComponent } from "vue";
const HowItAllStartedSectionMobile = defineAsyncComponent(
() => import("@/components/about/HowItAllStartedSectionMobile.vue"),
const HowItAllStartedSectionMobile = defineAsyncComponent(() =>
import("@/components/about/HowItAllStartedSectionMobile.vue")
);
const AboutusVirtue = defineAsyncComponent(
() => import("@/components/about/AboutusVirtue.vue"),
const AboutusVirtue = defineAsyncComponent(() =>
import("@/components/about/AboutusVirtue.vue")
);
const WithCanopasSection = defineAsyncComponent(
() => import("@/components/about/WithCanopas.vue"),
const WithCanopasSection = defineAsyncComponent(() =>
import("@/components/about/WithCanopas.vue")
);
const ClientReviewSection = defineAsyncComponent(
() => import("@/components/home-new/ClientReviewSection.vue"),
const ClientReviewSection = defineAsyncComponent(() =>
import("@/components/home-new/ClientReviewSection.vue")
);
const CTASection = defineAsyncComponent(
() => import("@/components/about/CTASection.vue"),
const CTASection = defineAsyncComponent(() =>
import("@/components/about/CTASection.vue")
);
const NewFooter = defineAsyncComponent(
() => import("@/components/partials/NewFooter.vue"),
const NewFooter = defineAsyncComponent(() =>
import("@/components/partials/NewFooter.vue")
);
const { $mixpanel } = useNuxtApp();
Expand Down
36 changes: 18 additions & 18 deletions nuxt-frontend/pages/android-app-development.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,32 +23,32 @@ import LandingSection from "@/components/android-app-development/LandingSection.
import { elementInViewPort } from "@/utils.js";
import { defineAsyncComponent } from "vue";
const DevelopmentSection = defineAsyncComponent(
() => import("@/components/android-app-development/DevelopmentSection.vue"),
const DevelopmentSection = defineAsyncComponent(() =>
import("@/components/android-app-development/DevelopmentSection.vue")
);
const CaseStudy = defineAsyncComponent(
() => import("@/components/android-app-development/CaseStudySection.vue"),
const CaseStudy = defineAsyncComponent(() =>
import("@/components/android-app-development/CaseStudySection.vue")
);
const SuccessStorySection = defineAsyncComponent(
() => import("@/components/android-app-development/SuccessStorySection.vue"),
const SuccessStorySection = defineAsyncComponent(() =>
import("@/components/android-app-development/SuccessStorySection.vue")
);
const FaqSection = defineAsyncComponent(
() => import("@/components/android-app-development/FaqSection.vue"),
const FaqSection = defineAsyncComponent(() =>
import("@/components/android-app-development/FaqSection.vue")
);
const PinkCtaSection = defineAsyncComponent(
() => import("@/components/android-app-development/PinkCtaSection.vue"),
const PinkCtaSection = defineAsyncComponent(() =>
import("@/components/android-app-development/PinkCtaSection.vue")
);
const CtaSection = defineAsyncComponent(
() => import("@/components/android-app-development/CtaSection.vue"),
const CtaSection = defineAsyncComponent(() =>
import("@/components/android-app-development/CtaSection.vue")
);
const BlackCtaSection = defineAsyncComponent(
() => import("@/components/android-app-development/BlackCtaSection.vue"),
const BlackCtaSection = defineAsyncComponent(() =>
import("@/components/android-app-development/BlackCtaSection.vue")
);
const BlogSection = defineAsyncComponent(
() => import("@/components/android-app-development/BlogSection.vue"),
const BlogSection = defineAsyncComponent(() =>
import("@/components/android-app-development/BlogSection.vue")
);
const NewFooter = defineAsyncComponent(
() => import("@/components/partials/NewFooter.vue"),
const NewFooter = defineAsyncComponent(() =>
import("@/components/partials/NewFooter.vue")
);
const { $mixpanel } = useNuxtApp();
Expand Down
104 changes: 104 additions & 0 deletions nuxt-frontend/pages/author/[slug].vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
<template>
<div>
<Header />
<section v-if="slug !== ''" class="container min-h-[50vh]">
<div class="md:mx-8 xl:mx-20">
<nuxt-link :to="'/author/' + slug" class="flex space-x-4 items-center">
<div class="w-8 h-8 md:w-9 md:h-9">
<Icon
name="fa6-solid:user"
class="w-full h-full"
v-if="posts[0].authorImage == null"
/>
<img
v-else
:src="posts[0].authorImage"
:alt="slug"
class="w-full h-full rounded-full"
/>
</div>

<h1
class="my-6 md:my-10 text-2xl md:text-3xl xl:text-4xl leading-7 tracking-none capitalize font-inter-semibold"
>
{{ posts[0].authorName }}
</h1>
</nuxt-link>
<div class="mb-6 md:mb-10">
<AuthorPosts :posts="posts" :mixpanel="mixpanel" />
</div>
</div>
</section>
<BlogFooter
:mixpanel="$mixpanel"
:socialMediaData="config.SOCIAL_MEDIA_DATA"
:apiUrl="config.STRAPI_URL"
:companyName="config.COMPANY_NAME"
/>
</div>
</template>

<script setup>
import Header from "@/components/partials/NewHeader.vue";
import { useRoute } from "vue-router";
import config from "@/config";
import { useAuthorListStore } from "@/stores/author";
const { $mixpanel } = useNuxtApp();
const route = useRoute();
const slug = ref(route.params.slug);
const posts = ref([]);
const store = useAuthorListStore();
const resources = computed(() => store.items);
const count = computed(() => store.totalPosts);
const status = computed(() => store.status);
let postLimit = 10;
await useAsyncData("authors", () =>
store.loadAuthorBlogs(config.SHOW_DRAFT_POSTS, slug.value, 0, postLimit)
);
posts.value = resources.value?.slice(0, postLimit);
const handleScroll = () => {
if (
window.innerHeight + document.documentElement.scrollTop >=
document.documentElement.offsetHeight - 100
) {
const oldCount = postLimit;
postLimit += 2;
posts.value.push(...resources.value.slice(oldCount, postLimit));
}
};
onMounted(() => {
window.addEventListener("scroll", handleScroll);
});
onUnmounted(() => {
window.removeEventListener("scroll", handleScroll);
});
if (status.value !== config.SUCCESS) {
navigateTo({
name: "Error404Page",
params: { pathMatch: ["author", slug.value] },
});
}
useSeoMeta({
title: "Stories by " + slug.value + " | Canopas",
ogTitle: "Stories by " + slug.value + " | Canopas",
ogImage: config.BASE_URL + "/apple-touch-icon.png",
ogUrl: config.BASE_URL + "/author/" + slug.value,
twitterTitle: "Stories by " + slug.value + " | Canopas",
twitterSite: "https://canopas.com/",
twitterCard: "summary_large_image",
twitterCta: "Read on Canopas",
keywords: slug,
twitterImageSrc: config.BASE_URL + "/apple-touch-icon.png",
twitterTileImage: config.BASE_URL + "/apple-touch-icon.png",
ogSite_name: "Canopas",
author: "canopas",
});
</script>
Loading

0 comments on commit b623d3a

Please sign in to comment.