mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-03-15 12:49:43 +01:00
Add featured roadmaps on homepage
This commit is contained in:
parent
796f66698b
commit
29dbc0a968
56
src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro
Normal file
56
src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
---
|
||||||
|
import type { RoadmapFileType } from '../../lib/roadmap';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
roadmap: RoadmapFileType;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { roadmap } = Astro.props;
|
||||||
|
const frontmatter = roadmap.frontmatter;
|
||||||
|
|
||||||
|
let roadmapTitle = frontmatter.featuredTitle;
|
||||||
|
|
||||||
|
// Lighthouse considers "Go" as a non-descriptive text such as "Submit" etc.
|
||||||
|
// Adding "Roadmap" as a postfix to make it not complain ¯\_(ツ)_/¯
|
||||||
|
if (roadmapTitle === 'Go') {
|
||||||
|
roadmapTitle = 'Go Roadmap';
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<a
|
||||||
|
class:list={[
|
||||||
|
'group border border-slate-800 bg-slate-900 p-2.5 sm:p-3.5 block no-underline rounded-lg relative text-slate-400 font-regular text-md hover:border-slate-600 hover:text-slate-100',
|
||||||
|
{
|
||||||
|
'opacity-50': roadmap.frontmatter.isUpcoming,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
href={`/${roadmap.id}`}
|
||||||
|
>
|
||||||
|
<span class="text-slate-400">
|
||||||
|
{roadmapTitle}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{
|
||||||
|
frontmatter.isNew && (
|
||||||
|
<span class="absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-purple-300 flex items-center">
|
||||||
|
<span class="flex h-2 w-2 mr-1.5">
|
||||||
|
<span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-purple-400 opacity-75" />
|
||||||
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-purple-500" />
|
||||||
|
</span>
|
||||||
|
New
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
frontmatter.isUpcoming && (
|
||||||
|
<span class="absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-slate-500 flex items-center">
|
||||||
|
<span class="flex h-2 w-2 mr-1.5">
|
||||||
|
<span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-slate-500 opacity-75" />
|
||||||
|
<span class="relative inline-flex rounded-full h-2 w-2 bg-slate-600" />
|
||||||
|
</span>
|
||||||
|
Upcoming
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</a>
|
31
src/components/FeaturedRoadmaps/FeaturedRoadmaps.astro
Normal file
31
src/components/FeaturedRoadmaps/FeaturedRoadmaps.astro
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
---
|
||||||
|
import type { RoadmapFileType } from '../../lib/roadmap';
|
||||||
|
import FeaturedRoadmapItem from './FeaturedRoadmapItem.astro';
|
||||||
|
|
||||||
|
export interface Props {
|
||||||
|
roadmaps: RoadmapFileType[];
|
||||||
|
heading: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { roadmaps, heading } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="py-4 sm:py-14 border-b border-b-slate-900 relative">
|
||||||
|
<div class="container">
|
||||||
|
<h2
|
||||||
|
class="hidden sm:flex absolute rounded-lg -top-[17px] left-1/2 -translate-x-1/2 bg-slate-900 py-1 px-3 border border-slate-900 text-md text-slate-400 font-regular"
|
||||||
|
>
|
||||||
|
{heading}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
|
||||||
|
{
|
||||||
|
roadmaps.map((roadmap) => (
|
||||||
|
<li>
|
||||||
|
<FeaturedRoadmapItem roadmap={roadmap} />
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -14,6 +14,7 @@ export interface RoadmapFrontmatter {
|
|||||||
description: string;
|
description: string;
|
||||||
hasTopics: boolean;
|
hasTopics: boolean;
|
||||||
isNew: boolean;
|
isNew: boolean;
|
||||||
|
isUpcoming: boolean;
|
||||||
dimensions: {
|
dimensions: {
|
||||||
width: number;
|
width: number;
|
||||||
height: number;
|
height: number;
|
||||||
|
@ -1,23 +1,38 @@
|
|||||||
---
|
---
|
||||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
import FeaturedRoadmaps from '../components/FeaturedRoadmaps/FeaturedRoadmaps.astro';
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
import { getRoadmapsByTag } from '../lib/roadmap';
|
||||||
|
|
||||||
|
const roleRoadmaps = await getRoadmapsByTag('role-roadmap');
|
||||||
|
const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout title="Developer Roadmaps">
|
<BaseLayout title="Developer Roadmaps">
|
||||||
<div class='bg-gradient-to-b from-slate-900 to-black'>
|
<div class="bg-gradient-to-b from-slate-900 to-black">
|
||||||
<div class='border-b border-b-slate-900'>
|
<div class="border-b border-b-slate-900">
|
||||||
<div class='container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0'>
|
<div
|
||||||
<h1 class='text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text'>
|
class="container text-left sm:text-center py-6 sm:py-20 px-6 sm:px-0"
|
||||||
|
>
|
||||||
|
<h1
|
||||||
|
class="text-2xl sm:text-5xl mb-2 sm:mb-4 font-bold bg-gradient-to-b from-amber-50 to-purple-500 text-transparent bg-clip-text"
|
||||||
|
>
|
||||||
Developer Roadmaps
|
Developer Roadmaps
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<p class='hidden sm:block text-gray-400 text-lg px-4'>
|
<p class="hidden sm:block text-gray-400 text-lg px-4">
|
||||||
<span class='font-medium text-gray-400'>roadmap.sh</span> is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.
|
<span class="font-medium text-gray-400">roadmap.sh</span> is a community
|
||||||
|
effort to create roadmaps, guides and other educational content to help
|
||||||
|
guide the developers in picking up the path and guide their learnings.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p class='block sm:hidden text-gray-400 text-md px-0'>
|
<p class="block sm:hidden text-gray-400 text-md px-0">
|
||||||
Community created roadmaps, guides and articles to help developers grow in their career.
|
Community created roadmaps, guides and articles to help developers
|
||||||
|
grow in their career.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<FeaturedRoadmaps heading="Role based Roadmaps" roadmaps={roleRoadmaps} />
|
||||||
|
<FeaturedRoadmaps heading="Skill based Roadmaps" roadmaps={skillRoadmaps} />
|
||||||
</div>
|
</div>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
Loading…
x
Reference in New Issue
Block a user