mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-13 20:54:16 +02:00
Refactor markdown content
This commit is contained in:
@@ -1,8 +1,6 @@
|
|||||||
---
|
---
|
||||||
import DownloadPopup from '../DownloadPopup.astro';
|
|
||||||
import Loader from '../Loader.astro';
|
import Loader from '../Loader.astro';
|
||||||
import ShareIcons from '../ShareIcons.astro';
|
import ShareIcons from '../ShareIcons.astro';
|
||||||
import SubscribePopup from '../SubscribePopup.astro';
|
|
||||||
import TopicOverlay from '../TopicOverlay.astro';
|
import TopicOverlay from '../TopicOverlay.astro';
|
||||||
import './InteractiveRoadmap.css';
|
import './InteractiveRoadmap.css';
|
||||||
|
|
||||||
@@ -34,8 +32,6 @@ const { roadmapId, jsonUrl, dimensions = null, description } = Astro.props;
|
|||||||
description={description}
|
description={description}
|
||||||
pageUrl={`https://roadmap.sh/${roadmapId}`}
|
pageUrl={`https://roadmap.sh/${roadmapId}`}
|
||||||
/>
|
/>
|
||||||
<DownloadPopup />
|
|
||||||
<SubscribePopup />
|
|
||||||
<TopicOverlay roadmapId={roadmapId} />
|
<TopicOverlay roadmapId={roadmapId} />
|
||||||
<div
|
<div
|
||||||
id='roadmap-svg'
|
id='roadmap-svg'
|
||||||
|
7
src/components/MarkdownFile.astro
Normal file
7
src/components/MarkdownFile.astro
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<div class='bg-gray-50 py-2'>
|
||||||
|
<div
|
||||||
|
class='container prose-blockquote:font-normal prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
@@ -1,22 +0,0 @@
|
|||||||
---
|
|
||||||
import DownloadPopup from './DownloadPopup.astro';
|
|
||||||
import SubscribePopup from './SubscribePopup.astro';
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
roadmapId: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { roadmapId, description } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class='bg-gray-50 py-2'>
|
|
||||||
<div
|
|
||||||
class='container prose prose-headings:mt-4 prose-headings:mb-2 prose-p:mb-0.5 relative prose-code:text-white'
|
|
||||||
>
|
|
||||||
<DownloadPopup />
|
|
||||||
<SubscribePopup />
|
|
||||||
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
@@ -1,7 +1,9 @@
|
|||||||
---
|
---
|
||||||
|
import DownloadPopup from './DownloadPopup.astro';
|
||||||
import Icon from './Icon.astro';
|
import Icon from './Icon.astro';
|
||||||
import ResourcesAlert from './ResourcesAlert.astro';
|
import ResourcesAlert from './ResourcesAlert.astro';
|
||||||
import RoadmapNote from './RoadmapNote.astro';
|
import RoadmapNote from './RoadmapNote.astro';
|
||||||
|
import SubscribePopup from './SubscribePopup.astro';
|
||||||
import TopicSearch from './TopicSearch/TopicSearch.astro';
|
import TopicSearch from './TopicSearch/TopicSearch.astro';
|
||||||
import YouTubeAlert from './YouTubeAlert.astro';
|
import YouTubeAlert from './YouTubeAlert.astro';
|
||||||
|
|
||||||
@@ -20,6 +22,9 @@ const { title, description, roadmapId, isUpcoming = false, hasSearch = false, no
|
|||||||
const isRoadmapReady = !isUpcoming;
|
const isRoadmapReady = !isUpcoming;
|
||||||
---
|
---
|
||||||
|
|
||||||
|
<DownloadPopup />
|
||||||
|
<SubscribePopup />
|
||||||
|
|
||||||
<div class='border-b'>
|
<div class='border-b'>
|
||||||
<div class='py-5 sm:py-12 container relative'>
|
<div class='py-5 sm:py-12 container relative'>
|
||||||
<YouTubeAlert />
|
<YouTubeAlert />
|
||||||
|
@@ -2,6 +2,7 @@
|
|||||||
import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
|
import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
|
||||||
import FAQs from '../../components/FAQs/FAQs.astro';
|
import FAQs from '../../components/FAQs/FAQs.astro';
|
||||||
import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
|
import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
|
||||||
|
import MarkdownFile from '../../components/MarkdownFile.astro';
|
||||||
import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
|
import MarkdownRoadmap from '../../components/MarkdownRoadmap.astro';
|
||||||
import RoadmapHeader from '../../components/RoadmapHeader.astro';
|
import RoadmapHeader from '../../components/RoadmapHeader.astro';
|
||||||
import UpcomingRoadmap from '../../components/UpcomingRoadmap.astro';
|
import UpcomingRoadmap from '../../components/UpcomingRoadmap.astro';
|
||||||
@@ -78,9 +79,11 @@ if (roadmapFAQs.length) {
|
|||||||
|
|
||||||
{
|
{
|
||||||
!roadmapData.isUpcoming && !roadmapData.jsonUrl && (
|
!roadmapData.isUpcoming && !roadmapData.jsonUrl && (
|
||||||
<MarkdownRoadmap roadmapId={roadmapId} description={roadmapData.description}>
|
<div class='pt-5 bg-gray-50'>
|
||||||
|
<MarkdownFile>
|
||||||
<roadmapFile.Content />
|
<roadmapFile.Content />
|
||||||
</MarkdownRoadmap>
|
</MarkdownFile>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
86
src/pages/best-practices/[bestPracticeId].astro
Normal file
86
src/pages/best-practices/[bestPracticeId].astro
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
---
|
||||||
|
import CaptchaScripts from '../../components/Captcha/CaptchaScripts.astro';
|
||||||
|
import FAQs from '../../components/FAQs/FAQs.astro';
|
||||||
|
import InteractiveRoadmap from '../../components/InteractiveRoadmap/InteractiveRoadmap.astro';
|
||||||
|
import MarkdownFile from '../../components/MarkdownFile.astro';
|
||||||
|
import RoadmapHeader from '../../components/RoadmapHeader.astro';
|
||||||
|
import UpcomingRoadmap from '../../components/UpcomingRoadmap.astro';
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import { BestPracticeFrontmatter,getBestPracticeIds } from '../../lib/best-pratice';
|
||||||
|
import { generateArticleSchema } from '../../lib/jsonld-schema';
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const bestPracticeIds = await getBestPracticeIds();
|
||||||
|
|
||||||
|
return bestPracticeIds.map((bestPracticeId) => ({
|
||||||
|
params: { bestPracticeId },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Params extends Record<string, string | undefined> {
|
||||||
|
bestPracticeId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { bestPracticeId } = Astro.params as Params;
|
||||||
|
const bestPracticeFile = await import(`../../best-practices/${bestPracticeId}/${bestPracticeId}.md`);
|
||||||
|
const { faqs: roadmapFAQs = [] } = await import(`../../roadmaps/${bestPracticeId}/faqs.astro`);
|
||||||
|
const bestPracticeData = bestPracticeFile.frontmatter as BestPracticeFrontmatter;
|
||||||
|
|
||||||
|
let jsonLdSchema = [];
|
||||||
|
|
||||||
|
if (bestPracticeData.schema) {
|
||||||
|
const bestPracticeSchema = bestPracticeData.schema;
|
||||||
|
jsonLdSchema.push(
|
||||||
|
generateArticleSchema({
|
||||||
|
url: `https://roadmap.sh/best-practices/${bestPracticeId}`,
|
||||||
|
headline: bestPracticeSchema.headline,
|
||||||
|
description: bestPracticeSchema.description,
|
||||||
|
datePublished: bestPracticeSchema.datePublished,
|
||||||
|
dateModified: bestPracticeSchema.dateModified,
|
||||||
|
imageUrl: bestPracticeSchema.imageUrl,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout
|
||||||
|
permalink={`/best-practices/${bestPracticeId}`}
|
||||||
|
title={bestPracticeData?.seo?.title}
|
||||||
|
description={bestPracticeData.seo.description}
|
||||||
|
keywords={bestPracticeData.seo.keywords}
|
||||||
|
sponsor={bestPracticeData.sponsor}
|
||||||
|
noIndex={bestPracticeData.isUpcoming}
|
||||||
|
jsonLd={jsonLdSchema}
|
||||||
|
>
|
||||||
|
<RoadmapHeader
|
||||||
|
title={bestPracticeData.title}
|
||||||
|
description={bestPracticeData.description}
|
||||||
|
roadmapId={bestPracticeId}
|
||||||
|
isUpcoming={bestPracticeData.isUpcoming}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{
|
||||||
|
!bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
|
||||||
|
<InteractiveRoadmap
|
||||||
|
roadmapId={bestPracticeId}
|
||||||
|
description={bestPracticeData.description}
|
||||||
|
jsonUrl={bestPracticeData.jsonUrl}
|
||||||
|
dimensions={bestPracticeData.dimensions}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
{
|
||||||
|
!bestPracticeData.isUpcoming && !bestPracticeData.jsonUrl && (
|
||||||
|
<MarkdownFile>
|
||||||
|
<bestPracticeFile.Content />
|
||||||
|
</MarkdownFile>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
{bestPracticeData.isUpcoming && <UpcomingRoadmap />}
|
||||||
|
|
||||||
|
<FAQs faqs={roadmapFAQs} />
|
||||||
|
|
||||||
|
<CaptchaScripts slot='after-footer' />
|
||||||
|
</BaseLayout>
|
@@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
import GuideHeader from '../../components/GuideHeader.astro';
|
import GuideHeader from '../../components/GuideHeader.astro';
|
||||||
|
import MarkdownFile from '../../components/MarkdownFile.astro';
|
||||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
import { getAllGuides, GuideFileType } from '../../lib/guide';
|
import { getAllGuides, GuideFileType } from '../../lib/guide';
|
||||||
|
|
||||||
@@ -30,10 +31,8 @@ const { frontmatter: guideData } = guide;
|
|||||||
<GuideHeader guide={guide} />
|
<GuideHeader guide={guide} />
|
||||||
|
|
||||||
<div class='bg-gray-50 py-5 sm:py-10'>
|
<div class='bg-gray-50 py-5 sm:py-10'>
|
||||||
<div
|
<MarkdownFile>
|
||||||
class='container prose-blockquote:font-normal prose prose-code:bg-transparent prose-h2:text-3xl prose-h2:mt-4 prose-h2:mb-2 prose-h3:mt-2 prose-img:mt-1'
|
|
||||||
>
|
|
||||||
<guide.Content />
|
<guide.Content />
|
||||||
</div>
|
</MarkdownFile>
|
||||||
</div>
|
</div>
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
|
Reference in New Issue
Block a user