Add shortcode support

src/components/Guide/GuideContent.astro

@@ -2,6 +2,7 @@
 import { getGuideTableOfContent, type GuideFileType } from '../../lib/guide';
 import MarkdownFile from '../MarkdownFile.astro';
 import { TableOfContent } from '../TableOfContent/TableOfContent';
+import { replaceVariables } from '../../lib/markdown';
 
 interface Props {
   guide: GuideFileType;
@@ -26,18 +27,21 @@ const { frontmatter: guideFrontmatter, author } = guide;
   }
 
   <div
-    class:list={['col-start-2 col-end-3 row-start-1 mx-auto max-w-[700px] py-5 sm:py-10', {
+    class:list={[
-      'lg:border-r': showTableOfContent
+      'col-start-2 col-end-3 row-start-1 mx-auto max-w-[700px] py-5 sm:py-10',
-    }]}
+      {
+        'lg:border-r': showTableOfContent,
+      },
+    ]}
   >
     <MarkdownFile>
-      <h1 class='text-balance text-4xl mb-3 font-bold'>{guideFrontmatter.title}</h1>
+      <h1 class='mb-3 text-balance text-4xl font-bold'>
-      <p
+        {replaceVariables(guideFrontmatter.title)}
-        class='flex items-center justify-start text-sm text-gray-400 my-0'
+      </h1>
-      >
+      <p class='my-0 flex items-center justify-start text-sm text-gray-400'>
         <a
           href={`/authors/${author.id}`}
-          class='inline-flex items-center font-medium hover:text-gray-600 hover:underline underline-offset-2'
+          class='inline-flex items-center font-medium underline-offset-2 hover:text-gray-600 hover:underline'
         >
           <img
             alt={author.frontmatter.name}
@@ -48,7 +52,7 @@ const { frontmatter: guideFrontmatter, author } = guide;
         </a>
         <span class='mx-2 hidden sm:inline'>&middot;</span>
         <a
-          class='hover:text-gray-600 underline-offset-2 hidden sm:inline'
+          class='hidden underline-offset-2 hover:text-gray-600 sm:inline'
           href={`https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/guides/${guide.id}.md`}
           target='_blank'
         >

src/components/GuideHeader.astro

@@ -1,5 +1,6 @@
 ---
 import type { GuideFileType } from '../lib/guide';
+import { replaceVariables } from '../lib/markdown';
 
 export interface Props {
   guide: GuideFileType;
@@ -42,11 +43,11 @@ return undefined;
         target='_blank'>Improve this Guide</a
       >
     </p>
-    <h1 class='my-0 text-2xl font-bold sm:my-3.5 sm:text-5xl text-balance'>
+    <h1 class='my-0 text-balance text-2xl font-bold sm:my-3.5 sm:text-5xl'>
-      {frontmatter.title}
+      {replaceVariables(frontmatter.title)}
     </h1>
     <p class='hidden text-xl text-gray-400 sm:block'>
-      {frontmatter.description}
+      {replaceVariables(frontmatter.description)}
     </p>
   </div>
 </div>

src/components/GuideListItem.astro

@@ -1,5 +1,6 @@
 ---
 import type { GuideFileType } from '../lib/guide';
+import { replaceVariables } from '../lib/markdown';
 
 export interface Props {
   guide: GuideFileType;
@@ -20,7 +21,7 @@ const { frontmatter, id } = guide;
   <span
     class='text-sm transition-transform group-hover:translate-x-2 md:text-base'
   >
-    {frontmatter.title}
+    {replaceVariables(frontmatter.title)}
 
     {
       frontmatter.isNew && (

src/data/guides/backend-developer-tools.md

@@ -1,10 +1,10 @@
 ---
-title: '25 Essential Backend Development Tools for 2024'
+title: '25 Essential Backend Development Tools for @currentYear@'
 description: 'Elevate your development process with these 25 essential backend developer tools.'
 authorId: fernando
 excludedBySlug: '/backend/developer-tools'
 seo:
-  title: '25 Essential Backend Development Tools for 2024'
+  title: '25 Essential Backend Development Tools for @currentYear@'
   description: 'Elevate your coding with backend developer tools that bring efficiency, scalability, and innovation to your projects. Improve your development process today!'
 isNew: true
 type: 'textual'

src/data/guides/backend-languages.md

@@ -1,10 +1,10 @@
 ---
-title: 'The 5 Best Backend Development Languages to Master (2024)'
+title: 'The 5 Best Backend Development Languages to Master (@currentYear@)'
-description: 'Discover the best backend development languages to master in 2024.'
+description: 'Discover the best backend development languages to master in @currentYear@.'
 authorId: fernando
 excludedBySlug: '/backend/languages'
 seo:
-  title: 'The 5 Best Backend Development Languages to Master (2024)'
+  title: 'The 5 Best Backend Development Languages to Master (@currentYear@)'
   description: 'Discover the best backend development languages to learn right now for career development, with practical tips from an experienced developer.'
 isNew: false
 type: 'textual'

src/lib/markdown.ts

@@ -1,6 +1,21 @@
 // @ts-ignore
 import MarkdownIt from 'markdown-it';
 
+// replaces @variableName@ with the value of the variable
+export function replaceVariables(
+  markdown: string,
+  variables: Record<string, string> = {},
+): string {
+  const allVariables: Record<string, string> = {
+    ...variables,
+    currentYear: new Date().getFullYear().toString(),
+  };
+
+  return markdown.replace(/@([^@]+)@/g, (match, p1) => {
+    return allVariables[p1] || match;
+  });
+}
+
 export function markdownToHtml(markdown: string, isInline = true): string {
   try {
     const md = new MarkdownIt({

src/pages/backend/developer-skills.astro

@@ -4,6 +4,7 @@ import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import {replaceVariables} from "../../lib/markdown";
 
 const guideId = 'backend-developer-skills';
 const guide = await getGuideById(guideId);
@@ -17,8 +18,8 @@ const ogImageUrl = getOpenGraphImageUrl({
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={replaceVariables(guideData.seo.title)}
-  description={guideData.seo.description}
+  description={replaceVariables(guideData.seo.description)}
   permalink={`/backend/developer-skills`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}

src/pages/backend/developer-tools.astro

@@ -4,6 +4,7 @@ import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { replaceVariables } from '../../lib/markdown';
 
 const guideId = 'backend-developer-tools';
 const guide = await getGuideById(guideId);
@@ -17,8 +18,8 @@ const ogImageUrl = getOpenGraphImageUrl({
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={replaceVariables(guideData.seo.title)}
-  description={guideData.seo.description}
+  description={replaceVariables(guideData.seo.description)}
   permalink={`/backend/developer-tools`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}

src/pages/backend/languages.astro

@@ -4,6 +4,7 @@ import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getGuideById } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { replaceVariables } from '../../lib/markdown';
 
 const guideId = 'backend-languages';
 const guide = await getGuideById(guideId).catch(() => null);
@@ -20,8 +21,8 @@ const ogImageUrl = getOpenGraphImageUrl({
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={replaceVariables(guideData.seo.title)}
-  description={guideData.seo.description}
+  description={replaceVariables(guideData.seo.description)}
   permalink={`/backend/languages`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}

src/pages/guides/[guideId].astro

@@ -4,6 +4,7 @@ import GuideHeader from '../../components/GuideHeader.astro';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getAllGuides, type GuideFileType } from '../../lib/guide';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
+import { replaceVariables } from '../../lib/markdown';
 
 export interface Props {
   guide: GuideFileType;
@@ -33,8 +34,8 @@ const ogImageUrl =
 ---
 
 <BaseLayout
-  title={guideData.seo.title}
+  title={replaceVariables(guideData.seo.title)}
-  description={guideData.seo.description}
+  description={replaceVariables(guideData.seo.description)}
   permalink={`/guides/${guideId}`}
   canonicalUrl={guideData.canonicalUrl}
   ogImageUrl={ogImageUrl}