Skip to content

Commit

Permalink
feat(blogs): external news on blogs page (#579)
Browse files Browse the repository at this point in the history 
* added external news on blogs page and created community page

* fixed blog page not loading

* fixed images height

* Fixed Image Issue

* feat(ui): cleanup

---------

Co-authored-by: YannC <[email protected]>
  • Loading branch information
@mageexcel @Skraye
mageexcel and Skraye authored Oct 17, 2023
1 parent cbfda71 commit e4111d2
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 79 deletions.
6 changes: 5 additions & 1 deletion components/blogs/BlogCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="mb-5 mt-1" role="button">
<NuxtLink class="text-dark" :href="blog._path">
<NuxtImg width="512" loading="lazy" format="webp" quality="80" densities="x1 x2" :alt="blog.image" :src="blog.image" class="w-100 rounded-3" />
<NuxtImg loading="lazy" format="webp" quality="80" densities="x1 x2" :alt="blog.image" :src="blog.image" class="card-image w-100 rounded-3" />
<div class="mt-3">
<span class="small-text category">{{ blog.category }}</span>
<h6 class="mt-2">{{ blog.title }}</h6>
Expand Down Expand Up @@ -38,4 +38,8 @@
color: var(--bs-primary);
font-size: $font-size-sm;
}
.card-image {
max-height: 220px;
}
</style>
116 changes: 75 additions & 41 deletions components/blogs/BlogsList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,61 @@
<template>
<div class="mt-5">
<p class="top-breadcrumb" data-aos="fade-right">
Blog
</p>
<h1 data-aos="fade-left">All things Kestra</h1>
<h5 data-aos="fade-right">Company news, product updates, and engineering deep dives.</h5>
<div class="grid gap-3 mt-5" data-aos="fade-left">
<button
:class="filter === cat.name ? 'active': ''"
@click="setFilterBlogs(cat.name)"
class="rounded-button m-1"
v-for="cat in categories">
{{ cat.name }}
</button>
<div class="mt-5 mb-2">
<DocsBreadcrumb :slug="slug" :page-list="pageList" />
<div v-if="slug === '/blogs/community'">
<h2 data-aos="fade-left">Community’s News</h2>
<div class="row mt-5">
<div v-for="news in externalNews" :key="news.id" class="col-lg-4 col-md-6 col-12">
<BlogsBlogCard :blog="news" data-aos="zoom-in" />
</div>
</div>
</div>
<HighlightBlogCard v-if="highlightBlog" :blog="highlightBlog" class="mt-5" data-aos="fade-left" />
<div class="row mt-5">
<div v-for="blog in blogsList" class="col-lg-4 col-md-6">
<BlogCard :blog="blog" data-aos="zoom-in" />
<div class="row" v-else>
<div class="pe-5 col-12 col-md-8">
<h1 data-aos="fade-left">All things Kestra</h1>
<h4 data-aos="fade-right" class="fw-normal">Company news, product updates, and engineering deep dives.</h4>
<ul class="nav nav-tabs mt-3" id="myTab" role="tablist">
<li v-for="cat in categories" :key="cat.name" class="nav-item" role="presentation" @click="setFilterBlogs(cat.name)">
<button class="nav-link" :class="{ 'active': filter === cat.name }" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">{{ cat.name }}</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div v-for="cat in categories" :key="cat.name" class="tab-pane fade" :class="{ 'show active': filter === cat.name }" :id="cat.name" role="tabpanel" :aria-labelledby="`${cat.name}-tab`">
<BlogsHighlightBlogCard :blog="getHighlightBlog(cat.name)" class="mt-5" />
</div>
</div>
<div class="row mt-5">
<div v-for="blog in blogsList" :key="blog._path" class="col-lg-6 col-md-6">
<BlogsBlogCard :blog="blog" data-aos="zoom-in" />
</div>
</div>
</div>
<div class="right-side-bar rounded-3 col-12 col-md-4 col-lg-3">
<h5 class="heading mb-4">Last Community’s News</h5>
<div v-for="news in externalNews" :key="news.id">
<BlogsBlogCard :blog="news" data-aos="zoom-in" />
</div>
<NuxtLink href="/blogs/community">
<button class="btn btn-light w-100">
More news
</button>
</NuxtLink>
</div>
</div>
</div>
</template>

<script>
import HighlightBlogCard from "./HighlightBlogCard.vue";
import BlogCard from "./BlogCard.vue";
export default {
name: "BlogsList",
components: {BlogCard, HighlightBlogCard},
props: {
blogs: {
type: Array,
required: true,
},
externalNews: {
type: Array,
required: true
}
},
data() {
return {
Expand All @@ -53,21 +74,28 @@
name: 'Solutions'
},
],
slug: "",
pageList: []
}
},
computed: {
highlightBlog() {
const blogs = this.blogs.filter(e => e.category === this.filter || this.filter === 'All news')
return blogs[blogs.length - 1];
},
blogsList() {
const blogs = this.blogs.filter(e => e.category === this.filter || this.filter === 'All news')
return blogs.filter(e => e.category === this.filter || this.filter === 'All news').slice(0, blogs.length - 1).reverse();
},
},
created() {
this.slug = "/blogs/" + (this.$route.params.slug instanceof Array ? this.$route.params.slug.join('/') : this.$route.params.slug);
const breadcrumbs = [...new Set(this.slug.split("/").filter(r => r !== ""))]
this.pageList = breadcrumbs.map((___, index) => "/" + breadcrumbs.slice(0, index + 1).join("/"))
},
methods: {
setFilterBlogs(id) {
this.filter = id;
},
getHighlightBlog(filter) {
const blogs = this.blogs.filter(e => e.category === filter || filter === 'All news')
return blogs[blogs.length - 1];
}
}
}
Expand All @@ -76,23 +104,29 @@
<style lang="scss" scoped>
@import "../../assets/styles/variable";
h5 {
font-weight: 300;
}
.right-side-bar {
background-color: $purple-17;
height: fit-content;
padding: 2.25rem 2rem;
.rounded-button {
border-radius: 2rem;
padding: calc($spacer / 2) calc($spacer / 1);
margin-right: calc($spacer / 2);
background-color: var(--bs-white);
color: $purple;
border: 0.05rem solid $purple;
font-weight: lighter;
.heading {
line-height: 1.875rem;
}
.btn {
border: 1px solid $purple-13;
--bs-btn-bg: #fff;
}
}
&.active {
background-color: var(--bs-primary);
color: var(--bs-white);
font-weight: bold;
.nav-item {
.nav-link {
color: $black;
}
.active {
color: $indigo;
border: none;
border-bottom: 2px solid $primary;
}
}
</style>
33 changes: 9 additions & 24 deletions components/blogs/HighlightBlogCard.vue
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
<template>
<div class="d-md-flex flex-row justify-content-between" role="button">
<NuxtLink class="text-dark" :href="blog._path">
<div class="row g-0">
<div class="col-md-6">
<NuxtImg width="512" loading="lazy" format="webp" quality="80" densities="x1 x2" class="col-md-12 rounded-3 img-fluid" :alt="blog.image" :src="blog.image" />
</div>
<div class="col-md-6 description">
<span class="small-text category">{{ blog.category }}</span>
<h3>
{{ blog.title }}
</h3>
<p>{{ blog.description }}</p>
<BlogCardDetails :name="blog.author.name" :date="blog.date"/>
</div>
<NuxtImg width="512" loading="lazy" format="webp" quality="80" densities="x1 x2" class="col-md-12 rounded-3 img-fluid" :alt="blog.image" :src="blog.image" />
<div class="description mt-4">
<span class="small-text category">{{ blog.category }}</span>
<h3>
{{ blog.title }}
</h3>
<p>{{ blog.description }}</p>
<BlogCardDetails :name="blog.author.name" :date="blog.date"/>
</div>
</NuxtLink>
</div>
Expand All @@ -36,22 +32,11 @@
<style lang="scss" scoped>
@import '../../assets/styles/_variable.scss';
.row {
.description {
span {
color: var(--bs-primary);
font-size: $font-size-sm;
}
.description {
@include media-breakpoint-up(md) {
padding: 0 0 0 4rem;
}
@include media-breakpoint-up(lg) {
padding: 0 6rem 0 4rem;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion components/layout/Newsletter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</div>

<div class="col-12">
<button type="submit" class="btn btn-primary">Subscribe</button>
<button type="submit" class="btn btn-dark">Subscribe</button>
</div>
</form>

Expand Down
48 changes: 36 additions & 12 deletions pages/blogs/[...slug].vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="container">
<BlogsList v-if="slug === '/blogs/'" :blogs="page"/>
<BlogsList v-if="slug === '/blogs/' || slug === '/blogs/community'" :blogs="page" :external-news="externalNews"/>

<div v-else class="container bd-gutter bd-layout margin">
<article class="bd-main order-1" v-if="page" :class="{'full': page.rightBar === false}">
Expand All @@ -19,7 +19,7 @@
</NavToc>

<div class="bd-content">
<NuxtImg loading="lazy" format="webp" quality="80" densities="x1 x2" data-aos="fade-right" class="mb-5 rounded-3" :alt="page.title" :src="page.image"/>
<NuxtImg loading="lazy" format="webp" quality="80" densities="x1 x2" data-aos="fade-right" class="mb-5 rounded-3 " :alt="page.title" :src="page.image" fit="inside"/>

<ContentRendererMarkdown
data-aos="fade-zoom"
Expand All @@ -34,7 +34,7 @@
</div>

<div class="bottom">
<LayoutBlogs v-if="slug !== '/blogs/'" />
<LayoutBlogs v-if="slug !== '/blogs/' && slug !== '/blogs/community'" />
<LayoutNewsletter />
</div>
</div>
Expand All @@ -46,20 +46,41 @@
const route = useRoute()
const slug = "/blogs/" + (route.params.slug instanceof Array ? route.params.slug.join('/') : route.params.slug);
let page;
if (slug === "/blogs/") {
const {data} = await useAsyncData(
`Blog-Page-List`,
() => queryContent("/blogs/").find()
);
const externalNews = ref()
const page = ref([]);
if (slug === "/blogs/" || slug === '/blogs/community') {
page = data;
if(slug === "/blogs/") {
const {data: pageData} = await useAsyncData(
`Blog-Page-List`,
() => queryContent("/blogs/").find()
);
page.value = pageData.value;
}
const {data: externalNewsData} = await useAsyncData(`blog-external-news`, () => {
return $fetch(`https://api.kestra.io/v1/external-blogs${slug === '/blogs/' ? '?size=4' : ''}`)
});
externalNews.value = externalNewsData.value.results.map((data) => {
return {
id: data.id,
_path: data.link,
image: data.image,
category: data.media,
author: { name: data.author },
title: data.title,
date: data.publicationDate
}
})
useHead({
title: "Insights & News on Data Orchestration",
description: "Explore the Kestra Blog for the latest articles, insights, product updates & engineering deep dives."
})
} else {
}
else {
const {data, error} = await useAsyncData(`Blog-Page-Item-${slug}`, () => {
try {
return queryContent(slug).findOne();
Expand All @@ -72,7 +93,7 @@
throw error.value;
}
page = data;
page.value = data.value;
useContentHead(page)
}
Expand All @@ -82,6 +103,9 @@
@import "../../assets/styles/variable";
@import '../../assets/styles/docs.scss';
:deep(.slug) {
margin-left: 0;
}
.bd-layout {
display: block;
Expand Down

0 comments on commit e4111d2

Please sign in to comment.