Skip to content

Commit 851c52a

Browse files
ashwinimanojashwinimanoj
authored
Merge pull request #77 from infraspecdev/feat/add-blog-caraousel
Add blog caraousel on home page
2 parents fcd22fc + a4b6da3 commit 851c52a

File tree

9 files changed

+112
-19
lines changed

9 files changed

+112
-19
lines changed

‎assets/scss/components/_blog-carousel.scss‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
.carousel-control-prev,
2+
.carousel-control-next {
3+
background-color: rgba(255, 255, 255, 0);
4+
border-radius: 50%;
5+
padding: 10px;
6+
}
7+
8+
.carousel-control-prev-icon,
9+
.carousel-control-next-icon {
10+
filter: invert(1);
11+
}
12+
13+
.card {
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
min-height: 300px;
18+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.1);
19+
text-align: center;
20+
flex-direction: column;
21+
}
22+
23+
.row.g-0 {
24+
margin-left: 0;
25+
margin-right: 0;
26+
}
27+
28+
.blog-carousel-title {
29+
display: flex;
30+
justify-content: center;
31+
align-items: center;
32+
min-height: 300px;
33+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.1);
34+
text-align: center;
35+
flex-direction: column;
36+
background-color: #0d4365;
37+
color: $white;
38+
}

‎assets/scss/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ $sub-footer-text-color: $white;
5252
@import 'components/strip';
5353
@import 'components/feature';
5454
@import 'components/social';
55+
@import 'components/blog-carousel';
5556

5657
// Pages
5758
@import 'pages/home';

‎config.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ enableRobotsTXT = false
6464
[menu]
6565
# Main Menu
6666
[[menu.main]]
67-
name = "Blog"
67+
name = "Blog Posts"
6868
url = "/blog/"
6969
weight = 1
7070
paginate = 6

‎content/blog/_index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: 'Blog'
2+
title: 'Blog Posts'
33
description: 'Sharing our learnings from our work'
44
---
55

6-
# Infraspec Blog
6+
# Infraspec Blog Posts
77

88
Sharing our learnings from our work

‎layouts/_default/baseof.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta http-equiv="x-ua-compatible" content="ie=edge">
77
<meta name="keywords" content="{{ .Site.Params.seo.meta_keywords }}">
88
<title>{{ block "title" . }}{{ .Params.meta_title | default (printf "%s - %s" .Title .Site.Title) }}{{ end }}</title>
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
910
<link rel="canonical" href="https://www.infraspec.dev/" />
1011
<meta name="description" content="{{ .Params.meta_description | default .Site.Params.seo.meta_description }}">
1112
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -85,6 +86,8 @@
8586

8687
{{ partialCached "google-tag-manager.html" . }}
8788
{{ partialCached "google-analytics.html" . }}
89+
90+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
8891
</body>
8992

9093
</html>

‎layouts/blog/meta.html‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
1-
{{ if .Params.AuthorId }}
2-
{{ $authorId := .Params.AuthorId }}
3-
{{ $authorDetails := (index .Site.Data.team $authorId) }}
4-
{{ $author := $authorDetails.name }}
5-
{{ $image := $authorDetails.image }}
6-
71
<div class="d-flex flex-row mb-2 align-items-center">
8-
<div class="mr-2">
9-
<img class="rounded-circle" width="48" height="48" alt="{{ .Params.Author }}" src="{{ $image | relURL }}" />
10-
</div>
11-
<div>
12-
<div>{{ $author }}</div>
13-
<div>{{ time.Format "Jan 2, 2006" .Params.Date }}</div>
14-
</div>
15-
16-
</div>
17-
{{ end }}
2+
{{ partial "blog-meta.html" . }}
3+
</div>

‎layouts/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,20 @@ <h2 class="mb-3">Testimonials</h2>
8787
</div>
8888
</div>
8989

90+
<div class="strip strip-grey">
91+
<div class="container-fluid py-5 m-0">
92+
<div class="row g-0">
93+
<div class="col-12 col-md-2 rounded-left roun p-0 d-flex align-items-center justify-content-center blog-carousel-title">
94+
<h2 class="text-center">Our Latest <br> Posts</h2>
95+
</div>
96+
<div class="col-12 col-md-10 rounded-right p-0">
97+
<div>
98+
{{ partial "blog-carousel.html" . }}
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
90104

91105
{{ end }}
92106

‎layouts/partials/blog-carousel.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div id="blog-carousel" class="carousel slide carousel-container" data-bs-ride="carousel">
2+
<div class="carousel-inner">
3+
{{ $posts := where .Site.Pages "Section" "blog" }}
4+
{{ range $index, $page := $posts }}
5+
{{ if .Params.authorId }}
6+
<div class="carousel-item {{ if eq $index 0 }}active{{ end }}">
7+
<div class="card">
8+
<div class="card-body card-body-shadow">
9+
<div class="d-flex justify-content-center">
10+
<div class="carousel-content text-center">
11+
<p class="carousel-description">{{ .Render "summary" }}</p>
12+
<div class="d-flex justify-content-end">
13+
{{ partial "blog-meta.html" . }}
14+
</div>
15+
</div>
16+
</div>
17+
</div>
18+
</div>
19+
</div>
20+
{{ end }}
21+
{{ end }}
22+
</div>
23+
24+
<!-- Previous button -->
25+
<button class="carousel-control-prev" type="button" data-bs-target="#blog-carousel" data-bs-slide="prev">
26+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
27+
<span class="visually-hidden">Previous</span>
28+
</button>
29+
30+
<!-- Next button -->
31+
<button class="carousel-control-next" type="button" data-bs-target="#blog-carousel" data-bs-slide="next">
32+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
33+
<span class="visually-hidden">Next</span>
34+
</button>
35+
</div>

‎layouts/partials/blog-meta.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{{ if .Params.AuthorId }}
2+
{{ $authorId := .Params.AuthorId }}
3+
{{ $authorDetails := (index .Site.Data.team $authorId) }}
4+
{{ $author := $authorDetails.name }}
5+
{{ $image := $authorDetails.image }}
6+
7+
<div class="d-flex flex-row mb-2 align-items-center">
8+
<div class="mr-2">
9+
<img class="rounded-circle" width="48" height="48" alt="{{ .Params.Author }}" src="{{ $image | relURL }}" />
10+
</div>
11+
<div>
12+
<div>{{ $author }}</div>
13+
<div>{{ time.Format "Jan 2, 2006" .Params.Date }}</div>
14+
</div>
15+
</div>
16+
{{ end }}

0 commit comments

Comments
 (0)