Skip to content

Commit ba162cb

Browse files
farhaanbukhshanistark
farhaanbukhsh
authored and
anistark
committed
feat: Adds venueCard to venue
Adds venueCard which uses JSON to render the venue page. Signed-off-by: Farhaan Bukhsh <[email protected]>
1 parent 51bc79a commit ba162cb

File tree

3 files changed

+73
-23
lines changed

3 files changed

+73
-23
lines changed

‎src/_data/venue.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"metro": {
3+
"title": "Via Namma Metro",
4+
"paragraphs": [
5+
"From Green Line: Disembark at South End Circle or Lalbagh metro station. From the station, you can take a short taxi/auto ride to reach NIMHANS Convention Centre.",
6+
"For a list of stations on the Bengaluru Metro Green line, you can refer to <a href=\"https://en.wikipedia.org/wiki/Green_Line_(Namma_Metro)?oldformat=true\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline\">Wikipedia</a>."
7+
],
8+
"button": {
9+
"text":"Green Line",
10+
"url": "https://en.wikipedia.org/wiki/Green_Line_(Namma_Metro)?oldformat=true"
11+
},
12+
"backgroundImage": {
13+
"url": null,
14+
"alt": null
15+
}
16+
},
17+
"bus": {
18+
"title": "Via Bus",
19+
"paragraphs": [
20+
"KIA-5D, get off at Jayanagar bus stand and NIMHANS is a few blocks away.",
21+
"KIA-7 to Kormangala Water Tank which is 8 mins away from NIMHANS.",
22+
"We're excited to welcome you to PyCon India 2025 and hope you have a fantastic experience in Bengaluru! If you have any further inquiries or need assistance, feel free to contact us at <a href=\"mailto:[email protected]\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline\">[email protected]</a>."
23+
],
24+
"button": {
25+
"text":"Bus Timetable",
26+
"url": "https://kia.bengawalk.com/"
27+
},
28+
"backgroundImage": {
29+
"url": null,
30+
"alt": null
31+
}
32+
},
33+
"location": {
34+
"backgroundImage": {
35+
"url": "img/nimhans-convention-center.jpeg",
36+
"alt": "Nimhans Convention Center"
37+
}
38+
}
39+
}

‎src/_includes/components/venueCard.njk

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{% macro venueCard(bg="lime", venueData=null, env=null) %}
2+
{% from "components/button.njk" import button %}
3+
{% if bg == "purple" %}
4+
{% set bg_class = "bg-pycon-purple group-hover:bg-pycon-lime" %}
5+
{% else %}
6+
{% set bg_class = "bg-pycon-lime group-hover:bg-pycon-purple" %}
7+
{% endif %}
8+
9+
<div class="relative group w-full">
10+
<!-- Background Div -->
11+
<div class="absolute top-0 left-0 {{ bg_class }} w-full h-full border-black border-2 duration-300 group-hover:translate-y-[-2px] group-hover:translate-x-[-2px]">
12+
</div>
13+
14+
<!-- Main Card -->
15+
<div class="relative top-[12px] left-[12px] w-full bg-[#FFFFFF] border-black border-2 items-center justify-center duration-300 group-hover:translate-y-[4px] group-hover:translate-x-[4px]">
16+
{% if venueData.backgroundImage and venueData.backgroundImage.url %}
17+
<img src="{{ env.baseUrl }}{{ venueData.backgroundImage.url }}" alt="{{ venueData.backgroundImage.alt }}" class="w-full h-full object-cover">
18+
{% endif %}
19+
{% if venueData.title and venueData.paragraphs and venueData.button %}
20+
<div class="p-8 md:p-16 space-grotesk-regular">
21+
<p class="font-bold text-xl md:text-2xl">{{ venueData["title"] }}</p>
22+
{% for para in venueData.paragraphs %}
23+
<p class="pt-4 font-normal text-sm md:text-xl">{{ para | safe }}</p>
24+
{% endfor %}
25+
<div class="pt-6 md:pt-10">{{ button(text=venueData.button.text, url=venueData.button.url, lime_bg=true, env=env) }}</div>
26+
</div>
27+
{% endif %}
28+
</div>
29+
</div>
30+
{% endmacro %}

‎src/venue.njk

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description: PyCon India 2025 Venue at Nimhans Convention Center
44
layout: base.njk
55
---
66
{% from "components/button.njk" import button %}
7-
{% from "components/card.njk" import card %}
7+
{% from "components/venueCard.njk" import venueCard %}
88

99
<header>
1010
{% set activePage = 'venue' %}
@@ -33,9 +33,7 @@ layout: base.njk
3333
<div class="pt-8">{{ button(text="Find Direction", url="https://maps.app.goo.gl/jwUM4FYX6G35YkYe7?g_st=com.google.maps.preview.copy", lime_bg=true, env = env) }}</div>
3434
</div>
3535
<div class="w-[90%] lg:w-[70%] xl:w-[52%] pt-24 pr-4 mx-auto lg:ml-auto">
36-
{% call card(bg="lime") -%}
37-
<img src="{{ env.baseUrl }}img/nimhans-convention-center.jpeg" alt="Nimhans Convention Center" class="w-full h-full object-cover">
38-
{%- endcall %}
36+
{{ venueCard(bg="lime", venueData=venue.location, env=env) }}
3937
</div>
4038
</div>
4139

@@ -55,32 +53,15 @@ layout: base.njk
5553
<img src="{{ env.baseUrl }}img/assets/train.svg" alt="Train" class="h-10 ml-0 md:h-16 lg:h-28 mx-auto md:mx-0">
5654
</div>
5755
<div class="w-[80%] lg:w-[60%] xl:w-[50%] ml-auto xl:mr-[12%] -mt-20 lg:-mt-40">
58-
{% call card(bg="lime") -%}
59-
<div class="p-8 md:p-16 space-grotesk-regular">
60-
<p class="font-bold text-xl md:text-2xl">Via Namma Metro</p>
61-
<p class="pt-4 font-normal text-sm md:text-xl">From Green Line: Disembark at South End Circle or Lalbagh metro station. From the station, you can take a short taxi/auto ride to reach NIMHANS Convention Centre.</p>
62-
<p class="pt-4 font-normal text-sm md:text-xl">For a list of stations on the Bengaluru Metro Green line, you can refer to <a href="https://en.wikipedia.org/wiki/Green_Line_(Namma_Metro)?oldformat=true" target="_blank" rel="noopener noreferrer" class="underline">Wikipedia</a>.</p>
63-
<div class="pt-6 md:pt-10">{{ button(text="Green Line", url="https://en.wikipedia.org/wiki/Green_Line_(Namma_Metro)?oldformat=true", lime_bg=true, env=env) }}</div>
64-
</div>
65-
{%- endcall %}
56+
{{ venueCard(bg="lime", venueData=venue.metro, env=env) }}
6657
</div>
6758
</div>
6859
</div>
6960

7061
<div class="pt-24 relative flex flex-col md:flex-row">
7162
<div class="flex-grow">
7263
<div class="w-[80%] lg:w-[60%] xl:w-[60%] flex-shrink-0">
73-
{% call card(bg="purple") -%}
74-
<div class="p-8 md:p-16 space-grotesk-regular z-20">
75-
<p class="font-bold text-xl md:text-2xl">Via Bus</p>
76-
<p class="pt-4 font-normal text-sm md:text-xl">KIA-5D, get off at Jayanagar bus stand and NIMHANS is a few blocks away.</p>
77-
<p class="pt-4 font-normal text-sm md:text-xl">KIA-7 to Kormangala Water Tank which is 8 mins away from NIMHANS.</p>
78-
79-
<p class="pt-4 font-normal text-sm md:text-xl">We're excited to welcome you to PyCon India 2025 and hope you have a fantastic experience in Bengaluru! If you have any further inquiries or need assistance, feel free to contact us at <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer" class="underline">[email protected]</a>.</p>
80-
81-
<div class="pt-6 md:pt-10 z-30">{{ button(text="Bus Timetable", url="https://kia.bengawalk.com/", lime_bg=true, env=env) }}</div>
82-
</div>
83-
{%- endcall %}
64+
{{ venueCard(bg="purple", venueData=venue.bus, env=env) }}
8465
</div>
8566
<div class="mx-auto pl-40 flex items-center justify-center -mt-20 lg:-mt-40 z-10 relative" style="pointer-events: none;">
8667
<img src="{{ env.baseUrl }}img/assets/bus.svg" alt="Bus" class="h-40 lg:h-56">

0 commit comments

Comments
 (0)