---
export const prerender = false;

import Base from "/components/Base.astro";
import Blog from "/components/home/Blog.astro";
import Feed from "/components/home/feeds/Feed.astro";
import Landing from "/components/home/Landing.astro";
import NowPlaying from "/components/home/playing/NowPlaying.astro";
// start the sdk setup while other components and requests are ongoing
// so that the sdk is ready or closer to being ready when needed
import { sdk } from "/components/home/playing/spotify";
// prevent treeshaking
sdk;
---

<Base
  graph={{
    description: "My website!",
    url: "https://vielle.dev/",
  }}
>
  <main>
    <!-- landing -->
    <Landing />
    <!-- now playing -->
    <NowPlaying />
    <!-- feeds -->
    <Feed />
    <!-- blog -->
    <Blog />
  </main>

  <style>
    :global(body) {
      display: grid;
      grid-template: "header" auto "main" 1fr / 1fr;
      width: 100%;

      > :global(header) {
        grid-area: header;
      }

      > main {
        grid-area: main;
      }
    }

    main {
      display: grid;
      grid-template:
        ". landing feed blog ." min-content
        ". playing feed blog ." 1fr
        / auto minmax(25ch, 50ch) 40ch 30ch auto;
      max-width: 100%;
      gap: 20px;

      @media (max-width: 110ch) {
        grid-template:
          ". landing ." min-content
          "playing playing playing" min-content
          ". feed ." 1fr
          / auto minmax(30ch, 50ch) auto;

        & :global(.blog) {
          display: none;
        }
      }

      & :global(.landing) {
        grid-area: landing;
      }

      & :global(.playing) {
        grid-area: playing;
      }

      & :global(.feed) {
        grid-area: feed;
      }

      & :global(.blog) {
        grid-area: blog;
      }
    }
  </style>
</Base>