Roadmap Page Template for Astro

---
import Roadmap from '@templates/Roadmap.astro'

const layout = {
    seo: { ... } // Your SEO configuration
    menu: { ... } // Menu configuration
    footer: { ... } // Footer configuration
}
---

<Roadmap
    layout={layout}
    title="Learning Astro" {/* h1 title of your page */}
    subTitle="A step-by-step journey..." {/* An optional subtitle */}
    badge={{ ... }} {/* Badge for further context displayed under the titles */}
    topics={{ ... }} {/* A list of topics rendered with icons */}
    roadmap={{ ... }} {/* The data for the main roadmap */}
    relatedRoadmaps={{ ... }} {/* Related roadmaps under the main roadmap */}
    cardWithCta={{ ... }} {/* Card with call to action */}
    recommended={{ ... }} {/* A list of recommended content */}
>
    <Fragment slot="right-sidebar">
        <h2>About This Roadmap</h2>
        ...
    </Fragment>
</Roadmap>

---
import Roadmap from '@templates/Roadmap.astro'

// Your layout with SEO, including menu and footer
const layout = {
    seo: {
        title: 'Roadmap Template - Webcore',
        url: 'https://webcoreui.dev/',
        description: 'Step-by-step roadmaps for guides, blogs, or products.',
        faviconUrl: '/logo.svg',
        canonical: 'https://webcoreui.dev/',
        prefetchGTAG: true,
        prefetchGA: true,
        meta: [{ name: 'keywords', content: 'roadmap' }]
    },
    menu: {
        logo: {
            html: logo
        },
        items: [
            { name: 'Templates', href: '/templates' }
        ]
    },
    footer: {
        logo: {
            html: logo
        },
        columns: [
            {
                title: 'Sitemap',
                items: [
                    { name: 'Home', href: '/' },
                    { name: 'Roadmaps', href: '/roadmaps' }
                ]
            }
        ],
        subText: `© ${new Date().getFullYear()} Webcore. All Rights Reserved.`
    }
}

// Title and optional subtitle for the page
const title = 'Learning Astro'
const subTitle = 'A step-by-step journey to mastering modern web development with Astro.'

// Badge shown under the title and subtitle
const badge = {
    text: '📚 21 lessons - Beginner to Pro',
    theme: 'outline'
}

// A list of topics, displayed under the children. Defaults to two columns with check icons
const topics = {
    title: 'What is covered?',
    items: [
        { text: 'Astro fundamentals: islands and components' },
        { text: 'Styling with CSS, Sass, and frameworks' }
    ]
}

// The main roadmap items
const roadmap = {
    items: [{
        img: {
            src: '/img/astro-basics.png',
            alt: 'Astro basics illustration',
            width: 150,
            height: 150
        },
        title: 'Getting Started with Astro',
        subTitle: 'Kick off your journey',
        meta: '5 min read',
        text: 'Learn how to set up your Astro project.',
        href: '/basics'
    }]
}

// A list of related roadmaps, displayed right under the main roadmap
const relatedRoadmaps = {
    title: 'Related Roadmaps',
    showPosition: false,
    items: [{
        img: {
            src: '/img/react-roadmap.png',
            alt: 'React roadmap',
            width: 200,
            height: 200,
            lazy: true
        },
        ribbon: {
            text: 'New',
            theme: 'alert'
        },
        title: 'Learning React',
        subTitle: 'From basics to advanced hooks',
        text: 'A structured path to building strong foundations in React.',
        href: '/related-roadmaps'
    }]
}

// A card with a call to action
const cardWithCta = {
    title: 'Take Your Astro Skills to the Next Level',
    children: 'After completing this roadmap, dive deeper into advanced topics.',
    secondary: true,
    img: {
        src: '/img/astro-next.png',
        alt: 'Astro Next Level',
        width: 500,
        height: 150,
        lazy: true
    },
    button: {
        text: 'Explore Advanced Guides ->',
        href: '/explore'
    }
}

// A 3 column layout of recommended cards
const recommended = {
    title: 'Recommended Resources',
    items: [{
        img: {
            src: '/img/astro-vs-next.png',
            alt: 'Astro vs Next.js blog post',
            width: 250,
            height: 150,
            lazy: true
        },
        title: 'Astro vs Next.js',
        text: 'Which one should you pick?',
        href: '/astro-vs-next'
    }]
}
---

<Roadmap
    layout={layout}
    title={title}
    subTitle={subTitle}
    badge={badge}
    topics={topics}
    roadmap={roadmap}
    relatedRoadmaps={relatedRoadmaps}
    cardWithCta={cardWithCta}
    recommended={recommended}
/>

type RoadmapProps = {
    layout: LayoutProps
    title: string
    subTitle?: string
    badge?: {
        text: string
        icon?: IconProps['type'] | string
    } & BadgeProps
    topics?: {
        title?: string
        items: (Omit<IconListProps['items'][number], 'icon'> & {
            icon?: IconListProps['items'][number]['icon']
        })[]
    } & Pick<IconListProps, 'color' | 'columns'>
    roadmap: ToplistProps
    relatedRoadmaps?: { title?: string } & ToplistProps
    cardWithCta?: {
        children: string
    } & CardWithCtaProps
    recommended?: {
        title?: string
        items: BlogCardProps[]
    }
    [key: string]: any
}