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
1
---
2
2
import Base from "/components/Base.astro";
3
+
import Landing from "/components/home/Landing.astro";
3
4
---
4
5
5
6
<Base>
6
7
<main>
7
8
<!-- landing -->
8
-
<section class="landing">landing</section>
9
+
<Landing />
9
10
<!-- now playing -->
10
11
<section class="playing">playing</section>
11
12
<!-- feeds -->
···
24
25
min-height: 50vh;
25
26
max-width: 100%;
26
27
27
-
& section {
28
+
& :global(section) {
28
29
border: 1px solid red;
29
30
}
30
31
31
-
& .landing {
32
+
& :global(.landing) {
32
33
grid-area: landing;
33
34
}
34
35
35
-
& .playing {
36
+
& :global(.playing) {
36
37
grid-area: playing;
37
38
}
38
39
39
-
& .feeds {
40
+
& :global(.feeds) {
40
41
grid-area: feeds;
41
42
}
42
43
43
-
& .blog {
44
+
& :global(.blog) {
44
45
grid-area: blog;
45
46
}
46
47
}