Blog Template for Astro

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

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

<Blog
    layout={layout}
    hero={{ ... }} {/* Your Hero section */}
    tilesTitle="Explore" {/* Set the title to your tiles section */}
    tiles={[ ... ]} {/* Set your category tiles with icons */}
    postsTitle="Latest Articles" {/* Set the title to your latest articles section */}
    posts={[ ... ]} {/* Set your latest articles */}
    recommendedTitle="Recommended" {/* Set the title of your recommended articles section */}
    recommended={[ ... ]} {/* Set your recommended articles */}
    authorTitle="About the Author" {/* Set the title of your author block */}
    author={{ ... }} {/* Set your author */}
>
    <p>Here you can specify additional content on the page.</p>
</Blog>

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

// Your layout, including menu and footer
const layout = {
    seo: {
        title: 'Blog Template - Webcore',
        url: 'https://webcoreui.dev/',
        description: 'A versatile and easy to use template for blogs.',
        faviconUrl: '/logo.svg'
    },
    menu: {
        logo: {
            html: logo
        },
        items: [
            { name: 'Categories', href: '/categories' }
        ]
    },
    footer: {
        logo: {
            html: logo
        },
        columns: [
            {
                title: 'Sitemap',
                items: [
                    { name: 'Latest', href: '' },
                    { name: 'Contact', href: '' },
                    { name: 'RSS', href: '' }
                ]
            },
            {
                title: 'Social',
                items: [
                    { name: 'LinkedIn', href: '' },
                    { name: 'Medium', href: '' },
                    { name: 'X', href: '' }
                ]
            }
        ],
        subText: `© ${new Date().getFullYear()} Webcore. All Rights Reserved.`
    }
}

// Your hero section
const hero = {
    heading: 'Brand New Array Methods',
    subHeading: 'What\'s new in the latest version of JavaScript',
    buttons: [{ text: 'Read More' }],
    badge: {
        rounded: true,
        theme: theme as ButtonProps['theme'],
        text: 'in JavaScript'
    },
    image: {
        src: '/img/hero.png',
        alt: 'Hero',
        width: 500,
        height: 300
    }
}

// Category tiles
const tiles = {
    columns: 3 as TilesProps['columns'],
    items: [
        { icon: astroIcon, label: 'Roadmaps', href: '#' },
        { icon: copyIcon, label: 'Categories', href: '#' },
        { icon: githubIcon, label: 'Projects', href: '#' },
        { icon: rocketIcon, label: 'Product launches', href: '#' },
        { icon: terminalIcon, label: 'Playgrounds', href: '#' },
        { icon: discordIcon, label: 'Community', href: '#' }
    ]
}

// Latest articles
const posts = [{
    href: '#',
    img: {
        src: '/img/post.png',
        alt: 'img',
        width: 200,
        height: 150
    },
    title: 'Latest Post #1',
    text: `Jan 01, ${new Date().getFullYear()} • 1 min read`
}]

// Recommended posts
const recommended = [{
    href: '#',
    img: {
        src: '/img/recommended.png',
        alt: 'img',
        width: 200,
        height: 150
    },
    title: 'Recommended Post #1',
    text: `Jan 01, ${new Date().getFullYear()} • 1 min read`,
    secondary: true
}]

// Author bio
const author = {
    img: {
        src: '/img/avatar.png',
        alt: 'Jake Brown',
        size: 50
    },
    name: 'Jake Brown',
    role: 'Astro developer',
    description: 'A short description about the author.',
    secondary: true,
    socials: {
        links: [
            'https://linkedin.com',
            'https://medium.com',
            'https://twitter.com'
        ]
    }
}
---

<Blog
    layout={layout}
    hero={hero}
    tiles={tiles}
    posts={posts}
    recommended={recommended}
    author={author}
/>