Skip to content

Commit

Permalink
feat : Blog Section for backend page
Browse files Browse the repository at this point in the history
  • Loading branch information
cp-ashish-k committed Dec 25, 2023
1 parent 0ef94b7 commit 1cf4fa4
Showing 18 changed files with 203 additions and 4 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/deploy-frontend-dev.yml
Original file line number Diff line number Diff line change
@@ -2,8 +2,8 @@ name: DeployFrontendDev

on:
push:
branches:
- "master"
# branches:
# - "master"

jobs:
deploy-frontend-dev:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
194 changes: 194 additions & 0 deletions nuxt-frontend/components/backend-development/BlogSection.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<template>
<section class="mb-16 lg:mb-60 3xl:outer-container">
<h2 class="text-center mobile-header-2 lg:desk-header-2 text-black-87">
Our blogs
</h2>
<!-- Mobile UI start -->
<div class="mt-4 lg:hidden">
<swiper
:grabCursor="true"
:effect="'creative'"
:centeredSlides="true"
:loop="false"
:creativeEffect="{
limitProgress: 5,
loop: false,
next: {
translate: [400, 0, 0],
},
prev: {
translate: [0, 0, -10],
},
}"
:slidesPerView="1"
:spaceBetween="10"
:modules="modules"
>
<swiper-slide v-for="(blog, index) in blogs" :key="index" class="my-8">
<div
:class="blog.className"
class="w-80 drop-shadow-md bg-white text-left cursor-pointer mx-auto"
>
<img
:src="blog.image"
:srcset="`${blog.image} 400w`"
:alt="blog.title"
class="h-44 w-80 object-cover"
loading="lazy"
@click.native="openBlog(blog.link, 'tap_backend_blog_section')"
/>
<div
class="w-80 p-4 flex flex-col gap-3"
@click.native="openBlog(blog.link, 'tap_backend_blog_section')"
>
<span class="text-black-87 sub-h3-medium">{{ blog.title }}</span>
<span class="text-black-60 sub-h4-medium">{{
blog.readTime
}}</span>
</div>
</div></swiper-slide
>
</swiper>
</div>
<!-- Mobile UI ends -->
<!-- Desktop UI start -->
<div class="hidden lg:block mt-[4.5rem] xll:container">
<swiper
:slidesPerView="3"
:centeredSlides="true"
:loop="true"
:autoplay="{
delay: 2000,
disableOnInteraction: false,
}"
:speed="2000"
:spaceBetween="10"
:modules="modules"
:navigation="true"
class="swiper-container"
:breakpoints="{
'992': {
slidesPerView: 2,
},
'1200': {
slidesPerView: 2.5,
},
'1400': {
slidesPerView: 3,
},
'2400': {
slidesPerView: 2.5,
},
}"
>
<swiper-slide
v-for="(blog, index) in backendblog"
:key="index"
class="cursor-pointer flex-flex-col pl-8"
>
<div class="h-full w-full">
<img
@click="openBlog(blog.link, 'tap_backend_blog_section')"
:src="blog.deskImage[0]"
:srcset="`${blog.deskImage[0]} 800w,${blog.deskImage[1]} 1200w`"
:alt="blog.title"
class="h-full w-full object-cover rounded-xl"
loading="lazy"
/>
</div>
<div class="mt-6 flex flex-col gap-6">
<span
@click="openBlog(blog.link, 'tap_backend_blog_section')"
class="desk-header-3 text-black-87"
>
{{ blog.title }}
</span>
<span class="sub-h1-regular text-black-60">
{{ blog.readTime }}
</span>
</div></swiper-slide
>
</swiper>
</div>
<!-- Desktop UI ends -->
</section>
</template>
<script setup>
import { EffectCreative, Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import { openBlog } from "@/utils.js";
import mobile_blog1_400w from "@/assets/images/backend-development/blogs/p1-400w.webp";
import mobile_blog2_400w from "@/assets/images/backend-development/blogs/p2-400w.webp";
import mobile_blog3_400w from "@/assets/images/backend-development/blogs/p3-400w.webp";
import mobile_blog4_400w from "@/assets/images/backend-development/blogs/p4-400w.webp";
import mobile_blog5_400w from "@/assets/images/backend-development/blogs/p5-400w.webp";
import dektop_blog1_800w from "@/assets/images/backend-development/blogs/desktop/p1-800w.webp";
import dektop_blog1_1200w from "@/assets/images/backend-development/blogs/desktop/p1-800w.webp";
import dektop_blog2_800w from "@/assets/images/backend-development/blogs/desktop/p2-800w.webp";
import dektop_blog2_1200w from "@/assets/images/backend-development/blogs/desktop/p2-800w.webp";
import dektop_blog3_800w from "@/assets/images/backend-development/blogs/desktop/p3-800w.webp";
import dektop_blog3_1200w from "@/assets/images/backend-development/blogs/desktop/p3-1200w.webp";
import dektop_blog4_800w from "@/assets/images/backend-development/blogs/desktop/p4-800w.webp";
import dektop_blog4_1200w from "@/assets/images/backend-development/blogs/desktop/p4-1200w.webp";
import dektop_blog5_800w from "@/assets/images/backend-development/blogs/desktop/p5-800w.webp";
import dektop_blog5_1200w from "@/assets/images/backend-development/blogs/desktop/p5-1200w.webp";
const modules = [Autoplay, EffectCreative];
const blogs = [
{
title:
"Scaling with Confidence — The Backend Strategies Every Startup Needs",
image: mobile_blog1_400w,
readTime: "13 min read",
deskImage: [dektop_blog1_800w, dektop_blog1_1200w],
link: "https://canopas.com/scaling-with-confidence-the-backend-strategies-every-startup-needs-8449426557",
},
{
title: "What is Backend Development & Its Role in Mobile App Development?",
image: mobile_blog2_400w,
readTime: "7 min read",
deskImage: [dektop_blog2_800w, dektop_blog2_1200w],
link: "https://canopas.com/what-is-backend-development-its-role-in-mobile-app-development-6114455770",
className: "-rotate-6",
},
{
title: "Serverless Microservices using AWS lambda and API Gateway",
image: mobile_blog3_400w,
readTime: "4 min read",
deskImage: [dektop_blog3_800w, dektop_blog3_1200w],
link: "https://blog.canopas.com/serverless-microservices-aws-lambda-and-api-gateway-d23f9346f0b6",
className: "rotate-6",
},
{
title:
"Simplified Your Deployment: GitHub Workflow with EC2, ECR, and Docker",
image: mobile_blog4_400w,
readTime: "8 min read",
deskImage: [dektop_blog4_800w, dektop_blog4_1200w],
link: "https://blog.canopas.com/simplified-your-deployment-github-workflow-with-ec2-ecr-and-docker-4c9c392d238d",
className: "-rotate-6",
},
{
title: "Golang: Serverless deployment using AWS Cloudformation",
image: mobile_blog5_400w,
readTime: "9 min read",
deskImage: [dektop_blog5_800w, dektop_blog5_1200w],
link: "https://blog.canopas.com/golang-serverless-deployment-using-aws-cloudformation-4dee745cbf28",
className: "rotate-6",
},
];
const backendblog = computed(() => Array(50).fill(blogs).flat());
</script>
<style lang="postcss" scoped>
@import "swiper/css";
@import "swiper/css/effect-creative";
.swiper-slide {
@apply !overflow-visible;
}
.swiper-wrapper {
@apply !items-start;
}
</style>
9 changes: 7 additions & 2 deletions nuxt-frontend/pages/backend-development.vue
Original file line number Diff line number Diff line change
@@ -5,7 +5,8 @@
<CaseStudySection />
<PartnerWithUsSection />
<SuccessStorySection />
<NewFooter class="-mt-4 md:mt-0" />
<BlogSection />
<NewFooter />
</div>
</template>
<script>
@@ -23,9 +24,13 @@ const PartnerWithUsSection = defineAsyncComponent(
const SuccessStorySection = defineAsyncComponent(
() => import("@/components/backend-development/SuccessStorySection.vue"),
);
const BlogSection = defineAsyncComponent(
() => import("@/components/backend-development/BlogSection.vue"),
);
const NewFooter = defineAsyncComponent(
() => import("@/components/partials/NewFooter.vue"),
);
const { $mixpanel } = useNuxtApp();
export default {
beforeRouteEnter(to, from, next) {
@@ -44,10 +49,10 @@ export default {
CaseStudySection,
PartnerWithUsSection,
SuccessStorySection,
BlogSection,
NewFooter,
},
setup() {
const { $mixpanel } = useNuxtApp();
const footer = ref(null);
const seoData = config.BACKEND_DEVELOPMENT_SEO_META_DATA;
useSeoMeta({

0 comments on commit 1cf4fa4

Please sign in to comment.