mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-02 05:42:41 +02:00
Add frontend courses page
This commit is contained in:
Kamran Ahmed
77
src/components/courses/CourseStep.astro
Normal file
77
src/components/courses/CourseStep.astro
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<div class='flex flex-col'>
|
||||||
|
<p
|
||||||
|
class='-ml-[27.6px] mb-3 flex items-center text-sm leading-none text-gray-400'
|
||||||
|
>
|
||||||
|
<span class='h-3 w-3 rounded-full bg-black'></span>
|
||||||
|
<span class='h-[1px] w-[15px] bg-black'></span>
|
||||||
|
<span class='rounded-md border border-black bg-black px-3 py-2 text-white'>
|
||||||
|
Learn the absolute basics i.e. HTML and CSS
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class='mb-2 text-sm text-gray-500'>
|
||||||
|
Purchase and watch one of the following <span
|
||||||
|
class='font-medium text-black'>premium courses</span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class='rounded-lg border p-3'>
|
||||||
|
<ul class='flex flex-col gap-1 text-sm'>
|
||||||
|
<li>
|
||||||
|
<a href='#' class='group font-medium text-gray-800 hover:text-black'>
|
||||||
|
<span
|
||||||
|
class='mr-1.5 inline-block rounded bg-green-300 text-black px-1.5 py-0.5 text-xs uppercase no-underline'
|
||||||
|
>
|
||||||
|
Course
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class='underline underline-offset-1'
|
||||||
|
>HTML and CSS with Mosh</span
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href='#' class='group font-medium text-gray-800 hover:text-black'>
|
||||||
|
<span
|
||||||
|
class='mr-1.5 inline-block rounded bg-green-300 text-black px-1.5 py-0.5 text-xs uppercase no-underline'
|
||||||
|
>
|
||||||
|
Course
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class='underline underline-offset-1'
|
||||||
|
>Learn HTML with 50 Projects</span
|
||||||
|
>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class='mt-3 text-sm text-gray-500'>
|
||||||
|
Once done, build the <span class='font-medium text-black'
|
||||||
|
>following projects</span
|
||||||
|
> to test and practice your skills
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class='mt-3 flex flex-col gap-1'>
|
||||||
|
<a
|
||||||
|
href='/projects/task-tracker'
|
||||||
|
class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
|
||||||
|
>
|
||||||
|
Build a login page for a website.
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href='/projects/task-tracker'
|
||||||
|
class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
|
||||||
|
>
|
||||||
|
Create a landing page for an e-commerce website.
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href='/projects/task-tracker'
|
||||||
|
class='flex items-center gap-3 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
|
||||||
|
>
|
||||||
|
Create a responsive website for a restaurant.
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
108
src/pages/[roadmapId]/courses.astro
Normal file
108
src/pages/[roadmapId]/courses.astro
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
---
|
||||||
|
import { EditorRoadmap } from '../../components/EditorRoadmap/EditorRoadmap';
|
||||||
|
import FAQs, { type FAQType } from '../../components/FAQs/FAQs.astro';
|
||||||
|
import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
|
||||||
|
import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro';
|
||||||
|
import RoadmapHeader from '../../components/RoadmapHeader.astro';
|
||||||
|
import { FolderKanbanIcon } from 'lucide-react';
|
||||||
|
import { EmptyProjects } from '../../components/Projects/EmptyProjects';
|
||||||
|
import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
|
||||||
|
import { TopicDetail } from '../../components/TopicDetail/TopicDetail';
|
||||||
|
import { UserProgressModal } from '../../components/UserProgress/UserProgressModal';
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import { getProjectsByRoadmapId } from '../../lib/project';
|
||||||
|
import {
|
||||||
|
generateArticleSchema,
|
||||||
|
generateFAQSchema,
|
||||||
|
} from '../../lib/jsonld-schema';
|
||||||
|
import { getOpenGraphImageUrl } from '../../lib/open-graph';
|
||||||
|
import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
|
||||||
|
import RoadmapNote from '../../components/RoadmapNote.astro';
|
||||||
|
import { RoadmapTitleQuestion } from '../../components/RoadmapTitleQuestion';
|
||||||
|
import ResourceProgressStats from '../../components/ResourceProgressStats.astro';
|
||||||
|
import AstroIcon from '../../components/AstroIcon.astro';
|
||||||
|
import CourseStep from "../../components/courses/CourseStep.astro";
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const roadmapIds = await getRoadmapIds();
|
||||||
|
|
||||||
|
return roadmapIds.map((roadmapId) => ({
|
||||||
|
params: { roadmapId },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Params extends Record<string, string | undefined> {
|
||||||
|
roadmapId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { roadmapId } = Astro.params as Params;
|
||||||
|
const roadmapFile = await import(
|
||||||
|
`../../data/roadmaps/${roadmapId}/${roadmapId}.md`
|
||||||
|
);
|
||||||
|
|
||||||
|
const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter;
|
||||||
|
|
||||||
|
// update og for projects
|
||||||
|
const ogImageUrl =
|
||||||
|
roadmapData?.seo?.ogImageUrl ||
|
||||||
|
getOpenGraphImageUrl({
|
||||||
|
group: 'roadmap',
|
||||||
|
resourceId: roadmapId,
|
||||||
|
});
|
||||||
|
|
||||||
|
const descriptionNoun = {
|
||||||
|
'AI and Data Scientist': 'AI and Data Science',
|
||||||
|
'Game Developer': 'Game Development',
|
||||||
|
'Technical Writer': 'Technical Writing',
|
||||||
|
'Product Manager': 'Product Management',
|
||||||
|
};
|
||||||
|
|
||||||
|
const title = `${roadmapData.briefTitle} Courses`;
|
||||||
|
const description = `Courses and project driven path to help you master ${descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle}`;
|
||||||
|
|
||||||
|
const seoTitle = `${roadmapData.briefTitle} Courses`;
|
||||||
|
const nounTitle =
|
||||||
|
descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle;
|
||||||
|
const seoDescription = `Seeking ${nounTitle.toLowerCase()} courses to enhance your skills? Explore our top free and paid courses to help you become a ${nounTitle} expert!`;
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
permalink={`/${roadmapId}`}
|
||||||
|
title={seoTitle}
|
||||||
|
description={seoDescription}
|
||||||
|
briefTitle={roadmapData.briefTitle}
|
||||||
|
ogImageUrl={ogImageUrl}
|
||||||
|
keywords={roadmapData.seo.keywords}
|
||||||
|
resourceId={roadmapId}
|
||||||
|
resourceType='roadmap'
|
||||||
|
noIndex={true}
|
||||||
|
>
|
||||||
|
<div class='bg-gray-50'>
|
||||||
|
<RoadmapHeader
|
||||||
|
title={title}
|
||||||
|
description={description}
|
||||||
|
note={roadmapData.note}
|
||||||
|
tnsBannerLink={roadmapData.tnsBannerLink}
|
||||||
|
roadmapId={roadmapId}
|
||||||
|
hasTopics={roadmapData.hasTopics}
|
||||||
|
isUpcoming={roadmapData.isUpcoming}
|
||||||
|
isForkable={roadmapData.isForkable}
|
||||||
|
question={roadmapData.question}
|
||||||
|
activeTab='courses'
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class='container'>
|
||||||
|
<div class='relative my-3 rounded-lg border bg-white px-12 py-8'>
|
||||||
|
|
||||||
|
<span class='absolute inset-y-0 left-[26.3px] w-[1px] bg-black'></span>
|
||||||
|
|
||||||
|
<!--Step content curator-->
|
||||||
|
<CourseStep />
|
||||||
|
<div class="mt-8"></div>
|
||||||
|
<CourseStep />
|
||||||
|
<div class="mt-8"></div>
|
||||||
|
<CourseStep />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
Reference in New Issue
Block a user