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 e5fc461
Show file tree
Hide file tree
Showing 11 changed files with 1,677 additions and 1,480 deletions.
6 changes: 3 additions & 3 deletions .github/workflows/deploy-frontend-dev.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ on:
workflows: ["DeployBackendDev"]
types:
- completed
branches:
branches:
- "master"

jobs:
Expand Down Expand Up @@ -51,5 +51,5 @@ jobs:
timeout-in-minutes: "10"
no-fail-on-empty-changeset: "1"
parameter-overrides: >-
EnvName=dev,
ZipFileName=canopas_website_SSR_dev_${{ github.sha }}-${{ github.run_attempt }}.zip
EnvName=dev,
ZipFileName=canopas_website_SSR_dev_${{ github.sha }}-${{ github.run_attempt }}.zip
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
21 changes: 21 additions & 0 deletions nuxt-frontend/nuxt.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,27 @@ export default defineNuxtConfig({
});
},
},
routeRules: {
"/blog": { isr: true },
"/resources": { isr: true },
"/tag/**": { isr: true },
"/author/**": { isr: true },
"/jobs/**": { isr: true },
"/": { prerender: true },
"/services": { prerender: true },
"/portfolio": { prerender: true },
"/contributions": { prerender: true },
"/about": { prerender: true },
"/contact": { prerender: true },
"/android-app-development": { prerender: true },
"/ios-app-development": { prerender: true },
"/mobile-app-development": { prerender: true },
"/backend-app-development": { prerender: true },
"/flutter-app-development": { prerender: true },
"/frontend-development": { prerender: true },
"/thank-you": { prerender: true },
"/unsubscribe": { prerender: true },
},
nitro: {
compressPublicAssets: true,
preset: "aws-lambda",
Expand Down
2 changes: 1 addition & 1 deletion nuxt-frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
},
"devDependencies": {
"@babel/eslint-parser": "^7.22.15",
"@canopassoftware/blog-components": "^1.1.9",
"@canopassoftware/blog-components": "^1.2.2",
"@ivanv/vue-collapse-transition": "^1.0.2",
"@nuxt/devtools": "latest",
"@types/lozad": "^1.16.4",
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>
2 changes: 1 addition & 1 deletion nuxt-frontend/pages/tag/[slug].vue
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
</h1>
</div>
<div class="mt-4 md:mt-6 xl:mt-8">
<PostList :data="posts" :slug="slug" :mixpanel="mixpanel" />
<PostList :posts="posts" :slug="slug" :mixpanel="mixpanel" />
</div>
</div>
</section>
Expand Down
59 changes: 59 additions & 0 deletions nuxt-frontend/stores/author/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { defineStore } from "pinia";
import axios from "axios";
import config from "~/config";
import { setPostFields } from "~/utils";

export const useAuthorListStore = defineStore("authors", {
state: () => {
return {
items: null,
status: 0,
error: null,
isLoading: false,
};
},
actions: {
async loadAuthorBlogs(showDrafts, slug, start, limit) {
return new Promise((resolve) => {
this.isLoading = true;
this.error = null;

let published = showDrafts
? "&publicationState=preview"
: "&publicationState=live";

const limitQuery = limit
? "&pagination[start]=" + start + "&pagination[limit]=" + limit
: "";

let url =
config.STRAPI_URL +
"/v1/paginate?populate=deep" +
published +
"&filters[author][username]=" +
slug +
"&fields[0]=title&fields[1]=slug&fields[2]=published_on&fields[3]=summary&fields[4]=reading_time&fields[5]=tags" +
limitQuery;

axios
.get(url)
.then((response) => {
let posts = [];
response.data.data.forEach((post) => {
posts.push(setPostFields(post));
});
this.items = posts;
this.isLoading = false;
this.status = posts.length > 0 ? response.status : config.NOT_FOUND;
resolve();
})
.catch((error) => {
this.error = error;
this.isLoading = false;
this.status = config.NOT_FOUND;
resolve();
});
});
},
},
});
4 changes: 2 additions & 2 deletions nuxt-frontend/stores/resources/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const useBlogListStore = defineStore("blog-list", {
published +
"&filters[is_resource]=" +
resources +
"&fields[0]=title&fields[1]=slug&fields[2]=published_on&fields[3]=summary&fields[4]=reading_time" +
"&fields[0]=title&fields[1]=slug&fields[2]=published_on&fields[3]=summary&fields[4]=reading_time&fields[5]=is_published" +
limitQuery;

axios
Expand Down Expand Up @@ -92,7 +92,7 @@ export const useBlogListStore = defineStore("blog-list", {
published +
"&filters[is_resource]=" +
resources +
"&fields[0]=title&fields[1]=slug&fields[2]=published_on&fields[3]=summary&fields[4]=reading_time" +
"&fields[0]=title&fields[1]=slug&fields[2]=published_on&fields[3]=summary&fields[4]=reading_time&fields[5]=is_published" +
limitQuery;

axios
Expand Down
3 changes: 2 additions & 1 deletion nuxt-frontend/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,12 +127,13 @@ function setPostFields(post, slug) {
? author?.image.data?.attributes
: author?.image;

post.authorSlug = author ? author.username : "";
post.authorImage = authorImg?.url || Avatar;
post.authorAltText = author ? author.username + " image" : "author";
post.authorBio = author?.bio || "";
post.authorRole = author?.role || "Editor for Canopas";

if (slug && post.tags[0]) {
if (slug && post.tags && post.tags[0]) {
post.tags.map((tag) => {
if (tag.slug == slug) {
post.tagName = tag.name;
Expand Down
Loading

0 comments on commit e5fc461

Please sign in to comment.