github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Rename featured roadmap item

Browse Source
pull/3333/head
Kamran Ahmed 2 years ago
parent a28204c908
commit 8b32a3a831
5 changed files with 114 additions and 99 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 50
      src/components/FeaturedItems/FeaturedItem.astro
  2. 35
      src/components/FeaturedItems/FeaturedItems.astro
  3. 56
      src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro
  4. 31
      src/components/FeaturedRoadmaps/FeaturedRoadmaps.astro
  5. 41
      src/pages/index.astro

50
src/components/FeaturedItems/FeaturedItem.astro
Unescape View 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
Unescape View 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>

56
src/components/FeaturedRoadmaps/FeaturedRoadmapItem.astro
Unescape View File

@ -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>

31
src/components/FeaturedRoadmaps/FeaturedRoadmaps.astro
Unescape View File

@ -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>

41
src/pages/index.astro
Unescape View File

@ -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)} />

Write Preview
Loading…
Cancel
Save