Refactor markdown content

best-practices
Kamran Ahmed 2 years ago
parent 16eef91b30
commit 7fee35237a
  1. 4
      src/components/InteractiveRoadmap/InteractiveRoadmap.astro
  2. 7
      src/components/MarkdownFile.astro
  3. 22
      src/components/MarkdownRoadmap.astro
  4. 5
      src/components/RoadmapHeader.astro
  5. 7
      src/pages/[roadmapId]/index.astro
  6. 86
      src/pages/best-practices/[bestPracticeId].astro
  7. 7
      src/pages/guides/[guideId].astro

@ -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'

@ -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>
) )
} }

@ -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>

Loading…
Cancel
Save