mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-11 19:53:59 +02:00
Rename featured roadmap item
This commit is contained in:
Kamran Ahmed
50
src/components/FeaturedItems/FeaturedItem.astro
Normal file
50
src/components/FeaturedItems/FeaturedItem.astro
Normal file
@@ -0,0 +1,50 @@
|
||||
---
|
||||
export interface FeaturedItemType {
|
||||
isUpcoming?: boolean;
|
||||
isNew?: boolean;
|
||||
url: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export interface Props extends FeaturedItemType {}
|
||||
|
||||
const { isUpcoming = false, isNew = false, text, url } = Astro.props;
|
||||
---
|
||||
|
||||
<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': isUpcoming,
|
||||
},
|
||||
]}
|
||||
href={url}
|
||||
>
|
||||
<span class='text-slate-400'>
|
||||
{text}
|
||||
</span>
|
||||
|
||||
{
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
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>
|
||||
35
src/components/FeaturedItems/FeaturedItems.astro
Normal file
35
src/components/FeaturedItems/FeaturedItems.astro
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
import FeaturedItem, { FeaturedItemType } from './FeaturedItem.astro';
|
||||
|
||||
export interface Props {
|
||||
featuredItems: FeaturedItemType[];
|
||||
heading: string;
|
||||
}
|
||||
|
||||
const { featuredItems, 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'>
|
||||
{
|
||||
featuredItems.map((featuredItem) => (
|
||||
<li>
|
||||
<FeaturedItem
|
||||
text={featuredItem.text}
|
||||
url={featuredItem.url}
|
||||
isNew={featuredItem.isNew}
|
||||
isUpcoming={featuredItem.isUpcoming}
|
||||
/>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,56 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import FeaturedGuides from '../components/FeaturedGuides.astro';
|
||||
import FeaturedRoadmaps from '../components/FeaturedRoadmaps/FeaturedRoadmaps.astro';
|
||||
import FeaturedItems from '../components/FeaturedItems/FeaturedItems.astro';
|
||||
import FeaturedVideos from '../components/FeaturedVideos.astro';
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import { getAllGuides } from '../lib/guide';
|
||||
@@ -13,12 +13,14 @@ const guides = await getAllGuides();
|
||||
const videos = await getAllVideos();
|
||||
---
|
||||
|
||||
<BaseLayout title='Developer Roadmaps - roadmap.sh' description={"Community driven roadmaps, articles and guides for developers to grow in their career."} permalink={'/'}>
|
||||
<BaseLayout
|
||||
title='Developer Roadmaps - roadmap.sh'
|
||||
description={'Community driven roadmaps, articles and guides for developers to grow in their career.'}
|
||||
permalink={'/'}
|
||||
>
|
||||
<div class='bg-gradient-to-b from-slate-900 to-black'>
|
||||
<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 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'
|
||||
>
|
||||
@@ -26,20 +28,35 @@ const videos = await getAllVideos();
|
||||
</h1>
|
||||
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<FeaturedRoadmaps heading='Role based Roadmaps' roadmaps={roleRoadmaps} />
|
||||
<FeaturedRoadmaps heading='Skill based Roadmaps' roadmaps={skillRoadmaps} />
|
||||
<FeaturedItems
|
||||
heading='Role based Roadmaps'
|
||||
featuredItems={roleRoadmaps.map((roadmapItem) => ({
|
||||
text: roadmapItem.frontmatter.featuredTitle,
|
||||
url: `/${roadmapItem.id}/`,
|
||||
isNew: roadmapItem.frontmatter.isNew,
|
||||
isUpcoming: roadmapItem.frontmatter.isUpcoming,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<FeaturedItems
|
||||
heading='Skill based Roadmaps'
|
||||
featuredItems={skillRoadmaps.map((roadmapItem) => ({
|
||||
text: roadmapItem.frontmatter.featuredTitle === 'Go' ? 'Go Roadmap' : roadmapItem.frontmatter.featuredTitle,
|
||||
url: `/${roadmapItem.id}/`,
|
||||
isNew: roadmapItem.frontmatter.isNew,
|
||||
isUpcoming: roadmapItem.frontmatter.isUpcoming,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<div class='grid grid-cols-1 gap-7 sm:gap-16 bg-gray-50 py-7 sm:py-16'>
|
||||
<FeaturedGuides heading='Guides' guides={guides.slice(0, 7)} />
|
||||
|
||||
Reference in New Issue
Block a user