vielle.dev
Personal Site
Add vague layout of landing element and make section styles :global
+43
src/components/home/Landing.astro
+43
src/components/home/Landing.astro
···
···
1
+
---
2
+
import { socials } from "/site-config";
3
+
4
+
const avatar = await fetch(
5
+
"https://api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=" +
6
+
socials.atproto,
7
+
)
8
+
.then((x) => {
9
+
if (!x.ok) {
10
+
throw x;
11
+
}
12
+
return x;
13
+
})
14
+
.then((x) => x.json())
15
+
.then((x) => x.avatar)
16
+
.catch((e) => {
17
+
console.error("Got error", e);
18
+
return undefined;
19
+
});
20
+
console.log(avatar);
21
+
---
22
+
23
+
<section class="landing">
24
+
<h2>Hello World 🏳️⚧️</h2>
25
+
<img src={avatar ?? "http://undefined"} alt="" />
26
+
<p>
27
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque distinctio,
28
+
minima nam ipsum mollitia eum est et similique repudiandae a assumenda
29
+
numquam fugit qui adipisci quo. Vero accusamus cum qui.
30
+
</p>
31
+
</section>
32
+
33
+
<style>
34
+
img {
35
+
float: right;
36
+
aspect-ratio: 1;
37
+
width: 100px;
38
+
border-radius: 100%;
39
+
shape-outside: circle(50px);
40
+
shape-margin: 10px;
41
+
margin: 10px;
42
+
}
43
+
</style>
+7
-6
src/pages/index.astro
+7
-6
src/pages/index.astro
···
1
---
2
import Base from "/components/Base.astro";
3
---
4
5
<Base>
6
<main>
7
<!-- landing -->
8
-
<section class="landing">landing</section>
9
<!-- now playing -->
10
<section class="playing">playing</section>
11
<!-- feeds -->
···
24
min-height: 50vh;
25
max-width: 100%;
26
27
-
& section {
28
border: 1px solid red;
29
}
30
31
-
& .landing {
32
grid-area: landing;
33
}
34
35
-
& .playing {
36
grid-area: playing;
37
}
38
39
-
& .feeds {
40
grid-area: feeds;
41
}
42
43
-
& .blog {
44
grid-area: blog;
45
}
46
}
···
1
---
2
import Base from "/components/Base.astro";
3
+
import Landing from "/components/home/Landing.astro";
4
---
5
6
<Base>
7
<main>
8
<!-- landing -->
9
+
<Landing />
10
<!-- now playing -->
11
<section class="playing">playing</section>
12
<!-- feeds -->
···
25
min-height: 50vh;
26
max-width: 100%;
27
28
+
& :global(section) {
29
border: 1px solid red;
30
}
31
32
+
& :global(.landing) {
33
grid-area: landing;
34
}
35
36
+
& :global(.playing) {
37
grid-area: playing;
38
}
39
40
+
& :global(.feeds) {
41
grid-area: feeds;
42
}
43
44
+
& :global(.blog) {
45
grid-area: blog;
46
}
47
}