Skip to content

Job Posting Section #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Job Posting Section #120

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1fb035f
Jobs Board Section
Astraxx04 Jun 24, 2025
0329f3e
Merge branch 'main' into job_board_section
Astraxx04 Jun 24, 2025
46eee84
Jobs Board -> Job Board
anistark Jun 24, 2025
995e1da
Merge branch 'pythonindia:main' into job_board_section
Astraxx04 Jul 3, 2025
f3f9930
brought back data fetching during build
Astraxx04 Jul 3, 2025
53693a9
Merge branch 'main' into job_board_section
Astraxx04 Aug 16, 2025
c43dbee
Update sheet details
Astraxx04 Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/_includes/components/button.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
{% set bg_class = "bg-pycon-lime hover:bg-pycon-lime/90" %}
{% set text_class = "text-black" %}
{% else %}
{% set bg_class = "bg-transparent border-pycon-lime" %}
{% set text_class = "text-pycon-lime" %}
{% set bg_class = "bg-pycon-purple hover:bg-pycon-purple/90" %}
{% set text_class = "text-black" %}
{% endif %}

<a
Expand Down
3 changes: 2 additions & 1 deletion src/_includes/navbar.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@
"name": "About",
"hasSubmenu": true,
"submenu": [
{"name": "FAQ's", "link": "about/faqs"}
{"name": "FAQ's", "link": "about/faqs"},
{"name": "Jobs Board", "link": "about/job"}
]
},
{
Expand Down
110 changes: 110 additions & 0 deletions src/about/job/guidelines.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
---
title: Job Board - Rules and Guildelines
description: PyCon India 2025 Job Board
layout: base.njk
---

<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">
Job Board - Rules and Guidelines
</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/notepad.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/book-stars.svg" alt="Guide" class="w-[40%] lg:w-[60%] transition-transform duration-100" style="animation: floating 2s ease-in-out infinite;">
</div>
</div>


<div class="main-container pt-16 md:pt-48 bg-lavender w-full h-auto px-[6%]">
<div class="pb-40 md:pb-60 lg:pb-[20%] w-full text-justify lg:w-[70%]">
<div class="text-md lg:text-xl font-light">
<div class="pt-8">
<p class="text-2xl font-bold flex items-center"><span><img src="{{ env.baseUrl }}img/assets/square-lime.svg" alt="Bullet Icon" class="w-5 mr-2"></span>Job Submission & Approval:</p>
<ul class="list-none pt-4 space-y-4">
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>We do not impose any restrictions on the industry/technology of the submitted jobs. Any jobs that are helpful to the community are welcome.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>After successful job submission, each job will undergo a verification process by the PyCon India 2025 team to ensure there are no spam postings.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>The approval process may take approximately 2-3 hours.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>Approved jobs will be made visible on the job board once they pass the verification process.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-1">
<span>Submissions that do not meet the guidelines may be rejected.</span>
</li>
</ul>
</div>

<div class="pt-8">
<p class="text-2xl font-bold flex items-center"><span><img src="{{ env.baseUrl }}img/assets/square-lime.svg" alt="Bullet Icon" class="w-5 mr-2"></span>Job Posts Order:</p>
<ul class="list-none pt-4 space-y-4">
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>Job posts are sorted based on the timestamp they are submitted. The first job submitted will be visible first, followed by subsequent submissions in chronological order.</span>
</li>
</ul>
</div>

<div class="pt-8">
<p class="text-2xl font-bold flex items-center"><span><img src="{{ env.baseUrl }}img/assets/square-lime.svg" alt="Bullet Icon" class="w-5 mr-2"></span>Transparency:</p>
<ul class="list-none pt-4 space-y-4">
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>After successful job submission, each job will undergo a verification process by the PyCon India 2025 team to ensure there are no spam postings.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>Job seekers and companies are encouraged to communicate directly with each other for job-related inquiries, applications, and hiring decisions.</span>
</li>
</ul>
</div>

<div class="pt-8">
<p class="text-2xl font-bold flex items-center"><span><img src="{{ env.baseUrl }}img/assets/square-lime.svg" alt="Bullet Icon" class="w-5 mr-2"></span>Content Moderation:</p>
<ul class="list-none pt-4 space-y-4">
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>PyCon India 2025 reserves the right to moderate and remove job posts that violate submission guidelines or community standards.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>Users are encouraged to report any inappropriate content or issues with job posts for review to our team at <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer" class="underline">[email protected]</a>.</span>
</li>
</ul>
</div>

<div class="pt-8">
<p class="text-2xl font-bold flex items-center"><span><img src="{{ env.baseUrl }}img/assets/square-lime.svg" alt="Bullet Icon" class="w-5 mr-2"></span>Respect and Inclusivity:</p>
<ul class="list-none pt-4 space-y-4">
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>Users are expected to maintain a respectful and inclusive environment when interacting with job listings or other users on the platform.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>Any kind of disrespectful, discriminatory, or offensive behavior against any party will not be tolerated.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>Please make sure to follow PyCon India's <a href="{{ env.baseUrl }}coc/guidelines" class="underline text-pycon-blue">Code of Conduct</a>.</span>
</li>
<li class="flex">
<img src="{{ env.baseUrl }}img/assets/circle-purple.svg" alt="Bullet Icon" class="w-4 h-4 mr-2 mt-2">
<span>If you feel unsafe during any of the interactions, or feel like someone is violating the rules, please <a href="{{ env.baseUrl }}coc/reporting" class="underline text-pycon-blue">report the incident to the CoC Workgroup</a>.</span>
</li>
</ul>
</div>
</div>
</div>
</div>
147 changes: 147 additions & 0 deletions src/about/job/job.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
---
title: Job Board - Pycon India 2025
description: PyCon India 2025 Job Board
layout: base.njk
---

{% from "components/flat-card.njk" import flatCard %}
{% from "components/button.njk" import button %}

<div class="w-full h-auto bg-pycon-blue px-[6%] pb-32 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-4xl md:text-5xl md:text-center text-[#FFFFFF] text-center lg:text-left">
Job Board
</div>
<div class="pt-10 font-light text-lg md:text-2xl md:text-center text-white text-center lg:text-left">
<p class="mb-0">Submit your job posting <a href="https://docs.google.com/forms/d/e/1FAIpQLSce8d2wOm976llzPUlF3NXzfx4K7zPamnxHSGWup1HDKMA-3g/viewform?usp=dialog" target="_blank" rel="noopener noreferrer" class="underline">here</a></p>
<p>Check out the <a href="{{ env.baseUrl }}about/job/guidelines/" class="underline">rules and guidelines</a> </p>
</div>
</div>
<div class="lg:w-[30%] w-[80%] lg:mt-40 flex items-center justify-center mx-auto">
<img src="/img/assets/abstract-obj.svg" alt="Guide" class="w-[40%] lg:w-[60%] transition-transform duration-100" style="animation: floating 2s ease-in-out infinite;">
<img src="/img/assets/star-lime-vector.svg" alt="Guide" class="w-[10%] lg:w-[10%] transition-transform duration-100" style="animation: floating 2s ease-in-out infinite;">
</div>
</div>

<div class="job-container bg-lavender w-full h-auto -pt-20 px-[6%] pb-72 md:pb-40 relative">
<div id="job-postings-grid" class="flex flex-wrap -mt-24 -mx-4">
<div class="w-full lg:w-1/3 px-4 flex flex-col gap-8" id="column-0"></div>
<div class="w-full pt-8 lg:pt-16 lg:w-1/3 px-4 flex flex-col gap-8" id="column-1"></div>
<div class="w-full pt-8 lg:pt-0 lg:w-1/3 px-4 flex flex-col gap-8" id="column-2"></div>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", async () => {
const baseUrl = "{{ env.baseUrl }}";

const SPREADSHEET_ID = "1oyMFGGKmR6u5JVpd691iYD_6TuDi3pbvyaajAZfGkGw";
const URL = `https://docs.google.com/spreadsheets/d/${SPREADSHEET_ID}/gviz/tq?tqx=out:json`;

const columnIds = ["column-0", "column-1", "column-2"];
const columns = columnIds.map((id) => document.getElementById(id));

columns[0].innerHTML = '<p class="text-white">Loading job postings...</p>';

const renderJobCard = (job_post, index) => {
const bg_color = (index % 2 === 1) ? 'bg-pycon-lime' : 'bg-pycon-purple';
const button_color = bg_color === "bg-pycon-purple" ? "bg-pycon-lime" : "bg-pycon-purple";

return `
<div class="relative group w-full max-w-full border border-black ${bg_color} p-8">
<div class="text-3xl font-semibold">${job_post.title}</div>
<div class="pt-4">
<span class="text-2xl">
<a href="${job_post.company_website}" target="_blank" class="underline">
${job_post.company}
</a>
</span>
<p class="pt-8 flex items-center gap-x-2 mb-0">
<i class="fa-solid fa-briefcase text-xl text-[#475569]"></i>
<span>${job_post.job_type}</span>
<i class="fa-solid fa-location-dot text-xl text-[#475569]"></i>
<span>${job_post.location}</span>
</p>
</div>
<div class="pt-2 text-gray-700">
<p class="text-justify">${job_post.description}</p>
</div>
<div class="pt-4">
<a
href="${job_post.link_to_apply || '#'}"
target="_blank"
class="group no-underline inline-flex items-center gap-2 px-4 py-2 ${
bg_color === 'bg-pycon-purple' ? 'bg-pycon-lime hover:bg-pycon-lime/90' : 'bg-pycon-purple hover:bg-pycon-purple/90'
} rounded-full border border-black hover:-translate-y-0.5 hover:shadow-md transition-all duration-300 focus:outline-2 focus:outline-offset-2"
>
<span class="font-['Acid_Grotesk'] text-lg ${
bg_color === 'bg-pycon-purple' ? 'text-black' : 'text-black'
} leading-relaxed whitespace-nowrap group-hover:-translate-x-1 transition-transform duration-200">
Apply
</span>
<div class="flex justify-center items-center w-8 h-8 bg-white rounded-full border border-black group-hover:rotate-40 transition-transform duration-300">
<img src="${baseUrl}img/assets/arrow-vector.svg" alt="Arrow" class="w-4 h-3 group-hover:scale-110 transition-transform duration-300" />
</div>
</a>
</div>
</div>
`;
};

try {
const response = await fetch(URL);
const text = await response.text();

const jsonString = text.substring(47).slice(0, -2);
const json = JSON.parse(jsonString);
const rows = json.table.rows;

const ensureHttps = (url) => {
if (!/^https?:\/\//.test(url)) {
return `https://${url}`;
}
return url;
};

const isValidUrl = (url) => {
const pattern = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?(\/.*)?$/;
return pattern.test(url);
};

const jobPostings = rows.map((row) => ({
title: row.c[1]?.v || "No title",
company: row.c[2]?.v || "Unknown",
company_website: ensureHttps(row.c[3]?.v) || "#",
job_type: row.c[4]?.v || "N/A",
location: row.c[5]?.v || "Unknown",
description: row.c[6]?.v || "No description available",
link_to_apply: ensureHttps(row.c[7]?.v) || "#",
}))
.filter((job_post) =>
isValidUrl(job_post.company_website) &&
isValidUrl(job_post.link_to_apply)
);

columns[0].innerHTML = "";

if (jobPostings.length === 0) {
columns[0].innerHTML = `
<p class="text-white">
No available jobs at the moment. Please check back later.
</p>`;
} else {
jobPostings.forEach((job_post, index) => {
const columnIndex = index % 3;
if (columns[columnIndex]) {
columns[columnIndex].innerHTML += renderJobCard(job_post, index);
}
});
}
} catch (error) {
console.error("Error fetching job data:", error);
columns.forEach((col) => {
col.innerHTML = '<p class="text-red-500 text-center">Failed to load job postings. Please try again later.</p>';
});
}
});
</script>
15 changes: 15 additions & 0 deletions src/static/img/assets/abstract-obj.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.