Add: extend the common page layout with capability to change the top iconset

Issue: #146

Other Changes:
- Update start development server command in readme.md

Author: Mohit Khandelwal

README.md

@@ -24,7 +24,7 @@ This repository contains the source code for the PyCon India 2025 website, built
 
 3. Start the development server:
    ```sh
-   npm run serve
+   make deploy-dev-server
    ```
 
 4. Open your browser and visit `http://localhost:8080`
@@ -103,6 +103,27 @@ We use a component-based approach with Nunjucks templates:
 {{ componentName("value1", "value2") }}
 ```
 
+#### Custom Icons for Page Layouts
+
+You can add icons to your page by specifying an `iconset` key in the frontmatter.
+
+Only one iconset is allowed per page. Each iconset maps to one or more images based on a predefined list in the layout.
+
+```markdown
+---
+title: Contact Us
+description: |
+    PyCon India 2025 is a purely volunteer community conference, driven by people passionate about Python.
+layout: page.njk
+iconset: question
+---
+```
+This will display the "Question Mark" icon near the top of the page.
+
+If you want to use a new combination of icons, you must:
+1. Add the new iconset and its image mapping to the [src/_data/icon_map.json](https://github.com/pythonindia/inpycon2025/blob/main/src/_data_/icon_map.json).
+2. Use the new key in your page frontmatter.
+
 ### 5. Styling Guidelines
 
 We use Tailwind CSS for styling:

src/_data/icon_map.json

@@ -0,0 +1,17 @@
+{
+    "announce": [{ "src": "img/assets/announce.svg", "alt": "Announcement" }],
+    "bulb": [{ "src": "img/assets/bulb.svg", "alt": "Lightbulb for ideas" }],
+    "calendar": [{ "src": "img/assets/calendar.svg", "alt": "Calendar" }],
+    "checklist": [{ "src": "img/assets/notepad.svg", "alt": "Checklist" }],
+    "childcare": [{ "src": "img/assets/child-care.svg", "alt": "Child playing with mother" }],
+    "coffee": [{ "src": "img/assets/filter-coffee.svg", "alt": "Filter Coffee" }],
+    "laptop": [{ "src": "img/assets/laptop.svg", "alt": "Laptop" }],
+    "question": [{ "src": "img/assets/question-mark.svg", "alt": "Question mark" }],
+    "spacecraft": [{ "src": "img/assets/spacecraft.svg", "alt": "Spacecraft" }],
+    "sponsors": [{ "src": "img/assets/sponsors.svg", "alt": "Partnership" }],
+    "team": [{ "src": "img/assets/team.svg", "alt": "Team members" }],
+    "laptop-coffee": [
+        { "src": "img/assets/laptop.svg", "alt": "Laptop" },
+        { "src": "img/assets/filter-coffee.svg", "alt": "Filter Coffee" }
+    ]
+}

src/_layouts/page.njk

@@ -10,6 +10,9 @@ layout: base.njk
 
 {% from "components/button.njk" import button %}
 
+{% set icons = icon_map[iconset] or icon_map["laptop-coffee"] %}
+
+
 <div class="w-full h-auto bg-pycon-blue -mb-24 px-[6%] flex flex-col md:flex-row">
     <div class="pt-32 pb-8 md:pb-32 w-full lg:w-[70%]">
         <div class="black-han-sans-regular font-normal text-3xl md:text-5xl md:text-center text-[#FFFFFF] text-center lg:text-left">
@@ -20,8 +23,14 @@ layout: base.njk
         </div>
     </div>
     <div class="lg:w-[30%] w-[80%] lg:mt-60 flex items-center justify-center mx-auto">
-        <img src="{{ env.baseUrl }}img/assets/laptop.svg" alt="Guide" class="w-[40%] lg:w-[60%] transition-transform duration-100" style="animation: floating 2s ease-in-out infinite;">
-        <img src="{{ env.baseUrl }}img/assets/filter-coffee.svg" alt="Guide" class="w-[40%] lg:w-[60%] transition-transform duration-100" style="animation: floating 2s ease-in-out infinite;">
+        {% for icon in icons %}
+            <img 
+                src="{{ env.baseUrl ~ icon.src }}" 
+                alt="{{ icon.alt or icon.src | filenameToAlt }}" 
+                class="w-[40%] lg:w-[60%] transition-transform duration-100" 
+                style="animation: floating 2s ease-in-out infinite;"
+            >
+        {% endfor %}
     </div>
 </div>