diff --git a/src/components/courses/CourseStep.astro b/src/components/courses/CourseStep.astro new file mode 100644 index 000000000..24aaf95ed --- /dev/null +++ b/src/components/courses/CourseStep.astro @@ -0,0 +1,77 @@ +
+

+ + + + Learn the absolute basics i.e. HTML and CSS + +

+ +

+ Purchase and watch one of the following premium courses +

+ +
+ +
+ +

+ Once done, build the following projects to test and practice your skills +

+ +
+ + Build a login page for a website. + + + + Create a landing page for an e-commerce website. + + + + Create a responsive website for a restaurant. + +
+
diff --git a/src/pages/[roadmapId]/courses.astro b/src/pages/[roadmapId]/courses.astro new file mode 100644 index 000000000..a3c2b9b14 --- /dev/null +++ b/src/pages/[roadmapId]/courses.astro @@ -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 { + 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!`; +--- + + +
+ + +
+
+ + + + + +
+ +
+ +
+
+
+