Kamran Ahmed
2 years ago
parent
16f48a1958
commit
a5874bd057
9 changed files with 163 additions and 9 deletions
Binary file not shown.
@ -0,0 +1,11 @@ |
|||||||
|
--- |
||||||
|
import "./InteractiveRoadmap.css"; |
||||||
|
|
||||||
|
export interface Props { |
||||||
|
jsonUrl: string; |
||||||
|
} |
||||||
|
|
||||||
|
const { jsonUrl } = Astro.props; |
||||||
|
--- |
||||||
|
|
||||||
|
<link rel="preload" href="/fonts/balsamiq.woff2" as="font" type="font/woff2" crossorigin slot="after-header" /> |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
svg text tspan { |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
text-rendering: optimizeSpeed; |
||||||
|
} |
||||||
|
|
||||||
|
code { |
||||||
|
background: #1e1e3f; |
||||||
|
color: #9efeff; |
||||||
|
padding: 3px 5px; |
||||||
|
font-size: 14px; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
|
||||||
|
svg .clickable-group { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
svg .clickable-group:hover > [fill='rgb(65,53,214)'] { |
||||||
|
fill: #232381; |
||||||
|
stroke: #232381; |
||||||
|
} |
||||||
|
|
||||||
|
svg .clickable-group:hover > [fill='rgb(255,255,0)'] { |
||||||
|
fill: #d6d700; |
||||||
|
} |
||||||
|
|
||||||
|
svg .clickable-group:hover > [fill='rgb(255,229,153)'] { |
||||||
|
fill: #f3c950; |
||||||
|
} |
||||||
|
|
||||||
|
svg .clickable-group:hover > [fill='rgb(153,153,153)'] { |
||||||
|
fill: #646464; |
||||||
|
} |
||||||
|
|
||||||
|
svg .clickable-group:hover > [fill='rgb(255,255,255)'] { |
||||||
|
fill: #d7d7d7; |
||||||
|
} |
||||||
|
|
||||||
|
svg .clickable-group:hover > [fill='rgb(255,255,221)'] { |
||||||
|
fill: #e5e5be; |
||||||
|
} |
||||||
|
|
||||||
|
svg .clickable-group:hover > [fill='rgb(255,217,102)'] { |
||||||
|
fill: #d9b443; |
||||||
|
} |
||||||
|
|
||||||
|
svg .done rect { |
||||||
|
fill: #cbcbcb !important; |
||||||
|
} |
||||||
|
|
||||||
|
svg .done text { |
||||||
|
text-decoration: line-through; |
||||||
|
} |
||||||
|
|
||||||
|
/************************************ |
||||||
|
Aspect ratio implementation |
||||||
|
*************************************/ |
||||||
|
[style*="--aspect-ratio"] > :first-child { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
[style*="--aspect-ratio"] > img { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
@supports (--custom:property) { |
||||||
|
[style*="--aspect-ratio"] { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
[style*="--aspect-ratio"]::before { |
||||||
|
content: ""; |
||||||
|
display: block; |
||||||
|
/*noinspection CssUnresolvedCustomProperty*/ |
||||||
|
padding-bottom: calc(100% / (var(--aspect-ratio))); |
||||||
|
} |
||||||
|
|
||||||
|
[style*="--aspect-ratio"] > :first-child { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,38 @@ |
|||||||
|
export interface RoadmapFrontmatter { |
||||||
|
id: string; |
||||||
|
jsonUrl: string; |
||||||
|
pdfUrl: string; |
||||||
|
order: number; |
||||||
|
featuredTitle: string; |
||||||
|
featuredDescription: string; |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
hasTopics: boolean; |
||||||
|
dimensions: { |
||||||
|
width: number; |
||||||
|
height: number; |
||||||
|
}; |
||||||
|
seo: { |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
keywords: string[]; |
||||||
|
}; |
||||||
|
relatedRoadmaps: string[]; |
||||||
|
sitemap: { |
||||||
|
priority: number; |
||||||
|
changefreq: string; |
||||||
|
}; |
||||||
|
tags: string[]; |
||||||
|
}; |
||||||
|
|
||||||
|
export async function getRoadmapIds() { |
||||||
|
const roadmapFiles = await import.meta.glob<string>('/src/roadmaps/*/*.md', { |
||||||
|
eager: true, |
||||||
|
}); |
||||||
|
|
||||||
|
return Object.keys(roadmapFiles).map(filePath => { |
||||||
|
const fileName = filePath.split('/').pop() || ''; |
||||||
|
|
||||||
|
return fileName.replace('.md', ''); |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
--- |
||||||
|
import InteractiveRoadamp from "../components/InteractiveRoadmap/InteractiveRoadmap.astro"; |
||||||
|
import BaseLayout from "../layouts/BaseLayout.astro"; |
||||||
|
import { getRoadmapIds, RoadmapFrontmatter } from "../lib/roadmap"; |
||||||
|
|
||||||
|
export async function getStaticPaths() { |
||||||
|
const roadmapIds = await getRoadmapIds(); |
||||||
|
|
||||||
|
return roadmapIds.map(roadmapId => ({ |
||||||
|
params: { roadmapId } |
||||||
|
})); |
||||||
|
} |
||||||
|
|
||||||
|
const { roadmapId } = Astro.params; |
||||||
|
const file = await import(`../roadmaps/${roadmapId}/${roadmapId}.md`); |
||||||
|
const frontmatter = file.frontmatter as RoadmapFrontmatter; |
||||||
|
--- |
||||||
|
|
||||||
|
<BaseLayout title=""> |
||||||
|
{frontmatter.jsonUrl && <InteractiveRoadamp jsonUrl={frontmatter.jsonUrl} />} |
||||||
|
</BaseLayout> |
||||||
Loading…
Reference in new issue