Skip to content

Commit ab6a3f0

Browse files
ashwinimanojashwinimanoj
committed
Add blog caraousel on home page
1 parent fcd22fc commit ab6a3f0

File tree

6 files changed

+126
-17
lines changed

6 files changed

+126
-17
lines changed

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
.carousel-inner {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
}
6+
7+
.carousel-item {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
padding: 20px;
12+
background-color: #ffffff;
13+
border-radius: 12px;
14+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
15+
margin: 0 10px;
16+
transition: transform 0.3s ease;
17+
}
18+
19+
.carousel-item.active {
20+
transform: scale(1.05);
21+
}
22+
23+
.icon-wrapper {
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
margin-bottom: 15px;
28+
}
29+
30+
.carousel-icon {
31+
width: 60px;
32+
height: 60px;
33+
border-radius: 50%;
34+
object-fit: cover;
35+
border: 3px solid #fff;
36+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
37+
}
38+
39+
.text-wrapper {
40+
text-align: center;
41+
}
42+
43+
.carousel-title {
44+
font-size: 1.5rem;
45+
font-weight: bold;
46+
color: #333;
47+
margin-bottom: 10px;
48+
}
49+
50+
.carousel-description {
51+
font-size: 1rem;
52+
color: #666;
53+
margin-bottom: 10px;
54+
}
55+
56+
.carousel-author {
57+
font-size: 0.9rem;
58+
color: #999;
59+
font-style: italic;
60+
}
61+
62+
.carousel-control-prev,
63+
.carousel-control-next {
64+
background-color: rgba(0, 0, 0, 0.1);
65+
border-radius: 50%;
66+
padding: 10px;
67+
}
68+
69+
.carousel-control-prev-icon,
70+
.carousel-control-next-icon {
71+
filter: invert(1);
72+
}

‎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: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1 @@
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-
16-
</div>
17-
{{ end }}
1+
{{ partial "blog-meta.html" . }}

‎layouts/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
</div>
2020
</div>
2121

22+
<div class="strip">
23+
{{ partial "blog-carousel.html" . }}
24+
</div>
25+
2226
{{ $services := where (where .Site.RegularPages "Type" "services") ".Params.featured" true }}
2327
{{if gt (len $services) 0}}
2428
<div class="strip">

‎layouts/partials/blog-carousel.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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="d-flex justify-content-center">
8+
<div class="carousel-content text-center">
9+
<p class="carousel-description">{{ .Render "summary" }}</p>
10+
<div class="blog-meta">{{ partial "blog-meta.html" . }}</div>
11+
</div>
12+
</div>
13+
</div>
14+
{{ end }}
15+
{{ end }}
16+
</div>
17+
18+
<!-- Previous button -->
19+
<button class="carousel-control-prev" type="button" data-bs-target="#blog-carousel" data-bs-slide="prev">
20+
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
21+
<span class="visually-hidden">Previous</span>
22+
</button>
23+
24+
<!-- Next button -->
25+
<button class="carousel-control-next" type="button" data-bs-target="#blog-carousel" data-bs-slide="next">
26+
<span class="carousel-control-next-icon" aria-hidden="true"></span>
27+
<span class="visually-hidden">Next</span>
28+
</button>
29+
</div>

‎layouts/partials/blog-meta.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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+
16+
</div>
17+
{{ end }}

0 commit comments

Comments
 (0)