1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<script lang="ts">
//// import
import { onMount } from "svelte";
//// var
const portraits = [
"/images/netopwibby/01.jpg",
"/images/netopwibby/02.jpg",
"/images/netopwibby/03.jpg",
"/images/netopwibby/04.jpg",
"/images/netopwibby/05.jpg",
"/images/netopwibby/06.jpg",
"/images/netopwibby/07.jpg",
"/images/netopwibby/08.jpg",
"/images/netopwibby/09.jpg",
"/images/netopwibby/10.jpg",
"/images/netopwibby/11.jpg",
"/images/netopwibby/12.jpg",
"/images/netopwibby/13.jpg",
"/images/netopwibby/14.jpg",
"/images/netopwibby/15.jpg"
];
let about = "";
let selfie = "";
//// function
function randomPortrait() {
return portraits[Math.floor(Math.random() * portraits.length)];
}
async function showContent() {
let aboutContent = "";
try {
const response = await fetch("/api/about.json", {
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
method: "POST"
});
const { content } = await response.json();
aboutContent = content;
} catch(error) {
console.error(error);
}
return aboutContent;
}
onMount(async() => {
about = await showContent();
selfie = randomPortrait();
});
</script>
<style lang="scss">
:root {
--about-padding: calc(var(--padding) * 2);
}
h2 {
margin: 0 0 var(--about-padding); padding: var(--padding) var(--about-padding);
background-color: var(--color-border);
color: var(--uchu-yin-7);
font-size: 1rem;
line-height: inherit;
position: sticky;
top: 0;
z-index: 1;
}
figure {
margin-top: var(--about-padding);
padding: 0 var(--about-padding) var(--about-padding) var(--about-padding);
img {
margin: 0;
}
figcaption {
padding-top: var(--about-padding);
text-align: center;
}
}
.content {
line-height: 1.55;
overflow-x: hidden;
padding-left: var(--about-padding);
padding-right: var(--about-padding);
position: relative;
text-overflow: ellipsis;
white-space: break-spaces;
&.loading {
padding-bottom: var(--about-padding);
}
}
</style>
<h2>
<a href="https://about.webb.page" target="_blank">about.webb.page</a>
</h2>
{#if about === ""}
<div class="content loading">Loading content…</div>
{:else}
<div class="content">
{@html about}
</div>
{/if}
{#if selfie === ""}
<div class="content loading">
<p>Loading portrait…</p>
</div>
{:else}
<figure>
<img alt="selfie" src={selfie}/>
<figcaption>the most fantabulous</figcaption>
</figure>
{/if}
|