mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-03-15 12:49:43 +01:00
Add frontend courses page
This commit is contained in:
Kamran Ahmed
parent
6c61244a14
commit
7e884c6593
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>
|
||||
Loading…
x
Reference in New Issue
Block a user