---
import BaseLayout from "../layouts/BaseLayout.astro"
import Tile from "../layouts/Tile.astro"
import MoreTile from "../layouts/MoreTile.astro"
const allPosts = await Astro.glob("../pages/posts/*.md")
const Blogs = await Astro.glob("../pages/posts/blogs/**/*.md")
allPosts.sort(
  (a, b) =>
    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate),
)

Blogs.sort(
  (a, b) =>
    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate),
)
---

  <BaseLayout>
    <section class="every-day-feed">
      <div class="section-content pt-12">
        <ul role="list" class="section-tiles">
          {
          // tile-hero
            allPosts.slice(0, 1).map((post) => {
              return (
                <Tile
                  title={post.frontmatter.title}
                  href={post.url}
                  date={post.frontmatter.pubDate}
                  tags={post.frontmatter.tags}
                  cover={post.frontmatter.cover}
                  level="1"
                />
              )
            })
          }

          {
          // tile-2up
            allPosts.slice(1, 5).map((post) => {
              return (
                <Tile
                  title={post.frontmatter.title}
                  href={post.url}
                  date={post.frontmatter.pubDate}
                  tags={post.frontmatter.tags}
                  cover={post.frontmatter.cover}
                  level="2"
                />
              )
            })
          }

          {
          // tile-3up
            allPosts.slice(5, 11).map((post) => {
              return (
                <Tile
                  title={post.frontmatter.title}
                  href={post.url}
                  date={post.frontmatter.pubDate}
                  tags={post.frontmatter.tags}
                  cover={post.frontmatter.cover}
                  level="3"
                />
              )
            })
          }
        </ul>
      </div>
    </section>

    <section class="more-from-newsroom">
      <div class="section-content">
        <h2 class="section-head">更多文章</h2>

        <ul role="list" class="section-tiles">
          {
          // tile-2up
            allPosts.slice(12, 18).map((post) => {
              return (
                <MoreTile
                  title={post.frontmatter.title}
                  href={post.url}
                  date={post.frontmatter.pubDate}
                  tags={post.frontmatter.tags}
                  cover={post.frontmatter.cover}
                />
              )
            })
          }
          {
            Blogs.slice(0, 4).map((post) => {
              return (
                <MoreTile
                  title={post.frontmatter.title}
                  href={post.url}
                  date={post.frontmatter.pubDate}
                  tags={post.frontmatter.tags}
                  cover={post.frontmatter.cover}
                />
              )
            })
          }
        </ul>
        <div class="view-archive-wrapper">
          <a
            href="/archive"
            class="cta-primary-light"
            data-analytics-region="router"
            data-analytics-title="view archive"
          >
            阅读历史文章
          </a>
        </div>
      </div>
    </section>

    <script is:inline>
    document.addEventListener("DOMContentLoaded", function () {
      const script = document.createElement("script")
      script.src = "/static/js/animation.js"
      document.head.appendChild(script)

      script.onload = function () {
        console.log("LazyLoad.js loaded")
        // when layout is loaded, load the images
        // eslint-disable-next-line no-undef
        initImage()
      }
    })
    </script>
  </BaseLayout>