
import RenderWithoutJS from "@/components/RenderWithoutJS";
import Sidebar from "@/components/Sidebar";
import index from "@/styles/Index.module.sass"
import Lanyard from "@/components/Lanyard"
import listFiles from "@/lib/listFiles";
import getFrontmatter from "@/lib/getFrontmatter";
import PostList from "@/components/PostList";
import Head from "next/head"

const IndexPage = (props: { posts: [{ title: string, date: string, link: string }] }) => {
    return (<RenderWithoutJS>
        <main id={index.layout}>
            <Head>
                <title>lio's blog</title>
            </Head>
            <Sidebar />
            <section id={index.blogMain}>
                <h1>blog</h1>
                <PostList posts={props.posts} />
            </section>
            <Lanyard />
            {/* <Copyright /> */}
        </main>
    </RenderWithoutJS>)
};

export default IndexPage

export async function getStaticProps() {
    let blogPath = './src/blog'
    let posts = listFiles(blogPath) //
    let frontmatter = posts.map(post => {
        let matter = getFrontmatter(post).data
        // @ts-ignore
        let date = new Date(matter.date)
        return {
            ...matter,
            sort_date: date.toDateString(),
            date: `${date.toLocaleDateString()}`,
            link: post.replace(blogPath, "/blog").replace('.md', "").replace('.mdx', "")
        }
    })
        .filter((v, i) => { return !v.hidden })
        .filter((v, i) => { return !v.draft })
        .sort((a, b) => {
            // @ts-ignore
            return new Date(b.sort_date) - new Date(a.sort_date)
        })
    return {
        props: {
            posts: frontmatter
        }
    }
}