Personal Site
1---
2export const prerender = false;
3
4import Base from "/components/Base.astro";
5import Blog from "/components/home/Blog.astro";
6import Feed from "/components/home/feeds/Feed.astro";
7import Landing from "/components/home/Landing.astro";
8import NowPlaying from "/components/home/playing/NowPlaying.astro";
9// start the sdk setup while other components and requests are ongoing
10// so that the sdk is ready or closer to being ready when needed
11import { sdk } from "/components/home/playing/spotify";
12// prevent treeshaking
13sdk;
14---
15
16<Base
17 graph={{
18 description: "My website!",
19 url: "https://vielle.dev/",
20 }}
21>
22 <main>
23 <!-- landing -->
24 <Landing />
25 <!-- now playing -->
26 <NowPlaying />
27 <!-- feeds -->
28 <Feed />
29 <!-- blog -->
30 <Blog />
31 </main>
32
33 <style>
34 :global(body) {
35 display: grid;
36 grid-template: "header" auto "main" 1fr / 1fr;
37 width: 100%;
38
39 > :global(header) {
40 grid-area: header;
41 }
42
43 > main {
44 grid-area: main;
45 }
46 }
47
48 main {
49 display: grid;
50 grid-template:
51 ". landing feed blog ." min-content
52 ". playing feed blog ." 1fr
53 / auto minmax(25ch, 50ch) 40ch 30ch auto;
54 max-width: 100%;
55 gap: 20px;
56
57 @media (max-width: 110ch) {
58 grid-template:
59 ". landing ." min-content
60 "playing playing playing" min-content
61 ". feed ." 1fr
62 / auto minmax(30ch, 50ch) auto;
63
64 & :global(.blog) {
65 display: none;
66 }
67 }
68
69 & :global(.landing) {
70 grid-area: landing;
71 }
72
73 & :global(.playing) {
74 grid-area: playing;
75 }
76
77 & :global(.feed) {
78 grid-area: feed;
79 }
80
81 & :global(.blog) {
82 grid-area: blog;
83 }
84 }
85 </style>
86</Base>