<template>
  <Layout>
    <template #heroInfo="{ text, tagline, style, isFullScreen }">
      <HitokotoBlogHero v-if="text" :text="text" :alt="text" />
    </template>
    <template #heroBg>
      <BingHeroBackground />
    </template>
    <template #content>
      <div class="blog-page-wrapper">
        <main id="main-content" class="vp-blog-main friends round-avatar">
          <DropTransition appear :delay="0.16">
            <div class="theme-hope-content">
              <ProjectPanel :items="friends" />
            </div>
          </DropTransition>
          <DropTransition appear :delay="0.28">
            <MarkdownContent />
          </DropTransition>
        </main>

        <DropTransition appear :delay="0.4">
          <InfoPanel />
        </DropTransition>
      </div>
    </template>
  </Layout>
</template>

<script lang="ts" setup>
import InfoPanel from 'vuepress-theme-hope/components/blog/InfoPanel'
import ProjectPanel from 'vuepress-theme-hope/components/blog/ProjectPanel'
import { ThemeBlogHomeProjectOptions } from 'vuepress-theme-hope'
import DropTransition from 'vuepress-theme-hope/components/transitions/DropTransition'
import Layout from 'vuepress-theme-hope/layouts/base/Layout.js'
import BingHeroBackground from 'vuepress-theme-hope/presets/BingHeroBackground.js'
import HitokotoBlogHero from 'vuepress-theme-hope/presets/HitokotoBlogHero.js'

import MarkdownContent from '../components/MarkdownContent.vue'
import FriendsInfo from '../friends.json' with { type: 'json' }

const friends: ThemeBlogHomeProjectOptions[] = Object.values(FriendsInfo)
</script>

<style lang="scss">
.vp-hero-info {
  flex-direction: column;

  .vp-blog-hero-title {
    text-align: center;
  }
}

main.friends.round-avatar {
  .vp-project-card {
    img.vp-project-icon {
      border-radius: 9999px;
      height: 2em;
    }
    width: calc(50% - 40px);

    @media (max-width: 959px) {
      width: 100%
    }
  }
}
</style>
