Kamran Ahmed
1 year ago
parent
5c57a84e82
commit
7e0ce7246a
77 changed files with 465 additions and 1055 deletions
File diff suppressed because it is too large
Load Diff
@ -1,44 +0,0 @@ |
||||
--- |
||||
import type { BreadcrumbItem } from '../lib/roadmap-topic'; |
||||
|
||||
export interface Props { |
||||
breadcrumbs: BreadcrumbItem[]; |
||||
roadmapId: string; |
||||
} |
||||
|
||||
const { breadcrumbs, roadmapId } = Astro.props; |
||||
--- |
||||
|
||||
<div class='py-7 pb-6'> |
||||
<!-- Desktop breadcrumbs --> |
||||
<p class='text-gray-500 container hidden sm:block'> |
||||
{ |
||||
breadcrumbs.map((breadcrumb, counter) => { |
||||
const isLast = counter === breadcrumbs.length - 1; |
||||
|
||||
if (!isLast) { |
||||
return ( |
||||
<> |
||||
<a class='hover:text-gray-800' href={`${breadcrumb.url}`}> |
||||
{breadcrumb.title} |
||||
</a> |
||||
<span> · </span> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
return <span class='text-gray-400'>{breadcrumb.title}</span>; |
||||
}) |
||||
} |
||||
</p> |
||||
|
||||
<!-- Mobile breadcrums --> |
||||
<p class='container block sm:hidden'> |
||||
<a |
||||
class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600' |
||||
href={`/${roadmapId}`} |
||||
> |
||||
← Back to Topics List |
||||
</a> |
||||
</p> |
||||
</div> |
||||
@ -1,71 +0,0 @@ |
||||
--- |
||||
import RoadmapHeader from '../../components/RoadmapHeader.astro'; |
||||
import BaseLayout from '../../layouts/BaseLayout.astro'; |
||||
import { getRoadmapIds, RoadmapFrontmatter } from '../../lib/roadmap'; |
||||
import { getTopicsByRoadmapId } from '../../lib/roadmap-topic'; |
||||
|
||||
interface Params extends Record<string, string | undefined> { |
||||
roadmapId: string; |
||||
} |
||||
|
||||
export async function getStaticPaths() { |
||||
const roadmapIds = await getRoadmapIds(); |
||||
|
||||
return roadmapIds.map((roadmapId) => ({ |
||||
params: { roadmapId }, |
||||
})); |
||||
} |
||||
|
||||
const { roadmapId } = Astro.params as Params; |
||||
const topics = await getTopicsByRoadmapId(roadmapId); |
||||
const roadmapFile = await import(`../../data/roadmaps/${roadmapId}/${roadmapId}.md`); |
||||
const roadmapData = roadmapFile.frontmatter as RoadmapFrontmatter; |
||||
--- |
||||
|
||||
<BaseLayout |
||||
title={`${roadmapData.title} Topics`} |
||||
description={roadmapData.seo.description} |
||||
keywords={roadmapData.seo.keywords} |
||||
permalink={`/${roadmapId}/topics`} |
||||
> |
||||
<RoadmapHeader |
||||
description={roadmapData.description} |
||||
title={`${roadmapData.briefTitle} Topics`} |
||||
roadmapId={roadmapId} |
||||
hasSearch={true} |
||||
hasTopics={false} |
||||
/> |
||||
|
||||
<div class='bg-gray-50 pt-5 pb-8 sm:pt-10 sm:pb-16'> |
||||
<div class='container'> |
||||
{ |
||||
topics.map((topic) => { |
||||
// Breadcrumbs have three additional items e.g. |
||||
// |
||||
// Roadmaps / Frontend / Topics / Internet / HTTP |
||||
// ---^----------^---------^---- |
||||
// |
||||
// Subtracting 3 to get the total parent count |
||||
const totalParentCount = topic.breadcrumbs.length - 3; |
||||
|
||||
return ( |
||||
<a |
||||
data-topic={topic.heading.toLowerCase()} |
||||
class:list={[ |
||||
'cursor-pointer text-sm sm:text-md border-gray-200 border py-1.5 px-2 sm:py-2 sm:px-2.5 rounded-md block mb-0.5 sm:mb-1', |
||||
{ |
||||
'bg-gray-400 hover:bg-gray-500': totalParentCount === 1, |
||||
'bg-gray-300 hover:bg-gray-400': totalParentCount === 2, |
||||
'bg-gray-100 hover:bg-gray-300': totalParentCount === 3, |
||||
}, |
||||
]} |
||||
href={`${topic.url}`} |
||||
> |
||||
{topic.heading} |
||||
</a> |
||||
); |
||||
}) |
||||
} |
||||
</div> |
||||
</div> |
||||
</BaseLayout> |
||||
@ -1,6 +1,7 @@ |
||||
{ |
||||
"extends": "astro/tsconfigs/strict", |
||||
"compilerOptions": { |
||||
"moduleResolution": "node", |
||||
"jsx": "react-jsx", |
||||
"jsxImportSource": "react" |
||||
} |
||||
|
||||
Loading…
Reference in new issue