Skip to content

Commit 654b848

Browse files
nikoshellnikoshell
committed
Add job board with example data.
1 parent 4c0eb68 commit 654b848

File tree

18 files changed

+596
-1
lines changed

18 files changed

+596
-1
lines changed

‎public/logos/eplogo.png‎

32.4 KB
Loading

‎public/logos/eps.svg‎

Lines changed: 27 additions & 0 deletions
Loading

‎src/components/CompanyCard.astro‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
import { type CollectionEntry, getEntry } from "astro:content";
3+
import { marked } from 'marked';
4+
5+
6+
const { company } = Astro.props;
7+
const { title, logo, website, location, industry, description, socials } = company.data;
8+
9+
const jobFiles = import.meta.glob('../content/companies/*/!(index).md');
10+
const companiesJobsMap = {};
11+
12+
for (const path in jobFiles) {
13+
const match = path.match(/\.\.\/content\/companies\/([^/]+)\/([^/]+)\.md$/);
14+
if (match) {
15+
const companyId = match[1];
16+
if (!companiesJobsMap[companyId]) companiesJobsMap[companyId] = [];
17+
companiesJobsMap[companyId].push(await getEntry('jobs', `${companyId}/${match[2]}`));
18+
}
19+
}
20+
21+
const jobs = companiesJobsMap[company.id];
22+
23+
const isCompanyPage = Astro.url.pathname == `/company/${company.id}`;
24+
25+
const html = marked.parse(company.body);
26+
27+
---
28+
29+
<div class="max-w-[400px] flex flex-col gap-6 p-6 rounded-lg shadow-md bg-white text-black">
30+
<div class="w-full flex justify-center items-center md:items-center ">
31+
<img src={logo} alt={title + " Logo"} class="max-h-[200px] object-contain" />
32+
</div>
33+
<div class="flex-1">
34+
<h2 class="text-2xl font-bold mb-2">
35+
{ isCompanyPage ?
36+
<>{title}</> :
37+
<a href={`/company/${company.id}`}>{title}</a>
38+
}
39+
</h2>
40+
<p class="text-gray-600 mb-2">{industry} — {location}</p>
41+
<p class="mb-4">{description}</p>
42+
43+
<div class="flex space-x-4 mb-4">
44+
{socials?.linkedin && <a href={socials.linkedin} target="_blank">LinkedIn</a>}
45+
{socials?.twitter && <a href={socials.twitter} target="_blank">Twitter</a>}
46+
</div>
47+
48+
<a href={website} target="_blank" class="text-blue-600 underline">Visit Website</a>
49+
50+
{ jobs && (
51+
<div class="mt-4">
52+
<h3 class="font-semibold">Open Positions:</h3>
53+
<ul class="list-disc list-inside">
54+
{Object.values(jobs).map(job => (
55+
<li><a href={`/company/${job.id}`}>{job.data.title}</a></li>
56+
))}
57+
</ul>
58+
</div>
59+
)}
60+
61+
{ !isCompanyPage && <a class="btn btn-primary mt-6 inline-block" href={`/company/${company.id}`}>Who We Are</a>}
62+
</div>
63+
64+
</div>

‎src/components/CompanyCardBody.astro‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
import { type CollectionEntry, getEntry } from "astro:content";
3+
import { marked } from 'marked';
4+
5+
6+
const { company, full=false, openings=false } = Astro.props;
7+
const { title, logo, website, location, industry, description, socials } = company.data;
8+
9+
const jobFiles = import.meta.glob('../content/companies/*/!(index).md');
10+
const jobs: CollectionEntry<'jobs'>[] = [];
11+
12+
for (const path in jobFiles) {
13+
const match = path.match(/\.\.\/content\/companies\/([^/]+)\/([^/]+)\.md$/);
14+
if (match) {
15+
const companyId = company.id;
16+
const entry = await getEntry('jobs', `${companyId}/${match[2]}`);
17+
if (entry) {
18+
jobs.push(entry);
19+
}
20+
}
21+
}
22+
23+
const html = marked.parse(company.body);
24+
25+
---
26+
27+
<div class="mb-4 prose prose-xl prose-li:m-0 prose-ul:m-0 prose-ul:mb-4 prose-a:underline prose-h1:text-text prose-headings:font-title prose-headings:text-text prose-a:text-text hover:prose-a:text-primary-hover prose-strong:text-text prose-strong:font-bold prose-li:marker:text-text mx-auto pb-12 px-6">
28+
<article set:html={html} />
29+
</div>

‎src/components/JobCard.astro‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
const { job } = Astro.props;
3+
const { title, company, location, type, level, salary, tags, description, responsibilities, requirements, benefits, apply_link } = job.data;
4+
---
5+
6+
<div class="mb-6 last:mb-0">
7+
<div class="flex-1 p-6 rounded-lg shadow-md bg-white">
8+
<a href={`/company/${job.id}`}>
9+
<h2 class="text-3xl font-bold mb-2">{title}</h2>
10+
</a>
11+
<p class="text-gray-600 mb-2">{level} • {type} • {location}</p>
12+
<p class="text-gray-700 mb-4">{salary}</p>
13+
<p class="mb-6">{description}</p>
14+
15+
<h3 class="text-xl font-semibold mb-2">Responsibilities</h3>
16+
<ul class="list-disc list-inside mb-4">
17+
{responsibilities && responsibilities.map(item => <li>{item}</li>)}
18+
</ul>
19+
20+
<h3 class="text-xl font-semibold mb-2">Requirements</h3>
21+
<ul class="list-disc list-inside mb-4">
22+
{requirements && requirements.map(item => <li>{item}</li>)}
23+
</ul>
24+
25+
<h3 class="text-xl font-semibold mb-2">Benefits</h3>
26+
<ul class="list-disc list-inside mb-6">
27+
{benefits && benefits.map(item => <li>{item}</li>)}
28+
</ul>
29+
30+
<a
31+
href={apply_link}
32+
target="_blank"
33+
class="inline-block bg-button hover:bg-button-hover text-text-inverted font-semibold py-2 px-4 rounded-lg shadow transition-colors duration-200"
34+
>
35+
Apply Now
36+
</a>
37+
</div>
38+
</div>

‎src/content/companies/acme-corp/index.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: "Acme Corp"
3+
logo: "/logos/eplogo.png"
4+
website: "https://www.acmecorp.com"
5+
location: "New York, USA"
6+
industry: "Technology & Innovation"
7+
description:
8+
"Acme Corp is a leading innovator in tech gadgets and solutions for a smarter
9+
world."
10+
socials:
11+
linkedin: "https://linkedin.com/company/acmecorp"
12+
twitter: "https://twitter.com/acmecorp"
13+
---
14+
15+
## About Acme Corp
16+
17+
Acme Corp is at the forefront of technological advancement, pioneering
18+
cutting-edge solutions in smart devices, automation, and AI-driven platforms.
19+
Headquartered in New York, USA, Acme has a global presence and a reputation for
20+
building products that shape the future.
21+
22+
## Our Mission
23+
24+
To make everyday life simpler, more efficient, and connected through intelligent
25+
technology that enhances how people live, work, and interact.
26+
27+
## What We Do
28+
29+
We specialize in:
30+
31+
- Smart home devices and IoT systems
32+
- AI-powered personal assistants
33+
- Innovative consumer electronics
34+
- Custom enterprise automation solutions
35+
36+
Our products are designed with a user-first mindset, combining seamless
37+
functionality with elegant design.
38+
39+
## Our Culture
40+
41+
At Acme Corp, innovation is in our DNA. We value:
42+
43+
- **Collaboration** – We work as one team, across all departments and regions.
44+
- **Creativity** – We foster a culture that encourages bold ideas and
45+
experimentation.
46+
- **Sustainability** – We are committed to responsible tech and minimizing our
47+
environmental impact.
48+
49+
## Careers
50+
51+
We're always on the lookout for passionate innovators to join our mission.
52+
Whether you're a developer, designer, or data scientist, there's a place for you
53+
at Acme Corp.
54+
55+
👉 [View open roles](https://www.acmecorp.com/careers)
56+
57+
## Connect With Us
58+
59+
- 🌐 Website: [acmecorp.com](https://www.acmecorp.com)
60+
- 💼 LinkedIn:
61+
[linkedin.com/company/acmecorp](https://linkedin.com/company/acmecorp)
62+
- 🐦 Twitter: [@acmecorp](https://twitter.com/acmecorp)

‎src/content/companies/acme-corp/product-manager.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: "Product Manager"
3+
location: "Remote / New York, USA"
4+
type: "Full-Time"
5+
level: "Senior"
6+
salary: "$90,000 - $120,000 USD"
7+
tags:
8+
- "React"
9+
- "TypeScript"
10+
- "TailwindCSS"
11+
description: |
12+
Acme Corp is looking for a Senior Frontend Developer to help build cutting-edge web applications. Join our dynamic team and work on exciting projects that impact millions.
13+
responsibilities:
14+
- "Develop and maintain web applications using React and TypeScript."
15+
- "Collaborate with cross-functional teams including designers and backend
16+
engineers."
17+
- "Optimize applications for maximum speed and scalability."
18+
requirements:
19+
- "5+ years experience with modern frontend technologies."
20+
- "Strong proficiency in React and TypeScript."
21+
- "Experience with TailwindCSS and responsive design."
22+
benefits:
23+
- "Remote-friendly environment."
24+
- "Health, dental, and vision insurance."
25+
- "Learning and development budget."
26+
apply_link: "https://careers.acmecorp.com/frontend-developer"
27+
---

‎src/content/companies/acme-corp/senior-frontend-developer.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: "Senior Frontend Developer"
3+
location: "Remote / New York, USA"
4+
type: "Full-Time"
5+
level: "Senior"
6+
salary: "$90,000 - $120,000 USD"
7+
tags:
8+
- "React"
9+
- "TypeScript"
10+
- "TailwindCSS"
11+
description: |
12+
Acme Corp is looking for a Senior Frontend Developer to help build cutting-edge web applications. Join our dynamic team and work on exciting projects that impact millions.
13+
responsibilities:
14+
- "Develop and maintain web applications using React and TypeScript."
15+
- "Collaborate with cross-functional teams including designers and backend
16+
engineers."
17+
- "Optimize applications for maximum speed and scalability."
18+
requirements:
19+
- "5+ years experience with modern frontend technologies."
20+
- "Strong proficiency in React and TypeScript."
21+
- "Experience with TailwindCSS and responsive design."
22+
benefits:
23+
- "Remote-friendly environment."
24+
- "Health, dental, and vision insurance."
25+
- "Learning and development budget."
26+
apply_link: "https://careers.acmecorp.com/frontend-developer"
27+
---

‎src/content/companies/acme-corp2/index.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: "Acme Corp 2"
3+
logo: "/logos/eps.svg"
4+
website: "https://www.acmecorp.com"
5+
location: "New York, USA"
6+
industry: "Technology & Innovation"
7+
description:
8+
"Acme Corp is a leading innovator in tech gadgets and solutions for a smarter
9+
world."
10+
socials:
11+
linkedin: "https://linkedin.com/company/acmecorp"
12+
twitter: "https://twitter.com/acmecorp"
13+
---
14+
15+
## About Acme Corp
16+
17+
Acme Corp is at the forefront of technological advancement, pioneering
18+
cutting-edge solutions in smart devices, automation, and AI-driven platforms.
19+
Headquartered in New York, USA, Acme has a global presence and a reputation for
20+
building products that shape the future.
21+
22+
## Our Mission
23+
24+
To make everyday life simpler, more efficient, and connected through intelligent
25+
technology that enhances how people live, work, and interact.
26+
27+
## What We Do
28+
29+
We specialize in:
30+
31+
- Smart home devices and IoT systems
32+
- AI-powered personal assistants
33+
- Innovative consumer electronics
34+
- Custom enterprise automation solutions
35+
36+
Our products are designed with a user-first mindset, combining seamless
37+
functionality with elegant design.
38+
39+
## Our Culture
40+
41+
At Acme Corp, innovation is in our DNA. We value:
42+
43+
- **Collaboration** – We work as one team, across all departments and regions.
44+
- **Creativity** – We foster a culture that encourages bold ideas and
45+
experimentation.
46+
- **Sustainability** – We are committed to responsible tech and minimizing our
47+
environmental impact.
48+
49+
## Careers
50+
51+
We're always on the lookout for passionate innovators to join our mission.
52+
Whether you're a developer, designer, or data scientist, there's a place for you
53+
at Acme Corp.
54+
55+
👉 [View open roles](https://www.acmecorp.com/careers)
56+
57+
## Connect With Us
58+
59+
- 🌐 Website: [acmecorp.com](https://www.acmecorp.com)
60+
- 💼 LinkedIn:
61+
[linkedin.com/company/acmecorp](https://linkedin.com/company/acmecorp)
62+
- 🐦 Twitter: [@acmecorp](https://twitter.com/acmecorp)

‎src/content/companies/acme-corp2/product-manager.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: "Product Manager"
3+
location: "Remote / New York, USA"
4+
type: "Full-Time"
5+
level: "Senior"
6+
salary: "$90,000 - $120,000 USD"
7+
tags:
8+
- "React"
9+
- "TypeScript"
10+
- "TailwindCSS"
11+
description: |
12+
Acme Corp is looking for a Senior Frontend Developer to help build cutting-edge web applications. Join our dynamic team and work on exciting projects that impact millions.
13+
responsibilities:
14+
- "Develop and maintain web applications using React and TypeScript."
15+
- "Collaborate with cross-functional teams including designers and backend
16+
engineers."
17+
- "Optimize applications for maximum speed and scalability."
18+
requirements:
19+
- "5+ years experience with modern frontend technologies."
20+
- "Strong proficiency in React and TypeScript."
21+
- "Experience with TailwindCSS and responsive design."
22+
benefits:
23+
- "Remote-friendly environment."
24+
- "Health, dental, and vision insurance."
25+
- "Learning and development budget."
26+
apply_link: "https://careers.acmecorp.com/frontend-developer"
27+
---

0 commit comments

Comments
 (0)