forked from bbs-archive/bbs-archive.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
thread.html
104 lines (93 loc) · 3.56 KB
/
thread.html
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
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Theard View</title>
<link rel="stylesheet" href="style.css">
<style>
#loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
display: none;
}
#slot {
min-height: calc(100vh - 1.2rem);
overflow-x: visible;
margin: 0 auto;
padding: 20px 42px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
border-radius: 0.8rem;
}
@media only screen and (max-width: 768px) {
#slot {
max-width: 100%;
padding: 20px;
}
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
#slot {
max-width: 90%;
}
}
@media only screen and (min-width: 1025px) {
#slot {
max-width: 80%;
}
}
</style>
</head>
<body>
<div class="bg"></div>
<div id="loading" style="display: flex; flex-direction: column;text-align: center;justify-content: center;">
<div class="loading-icon" style="margin-left: auto;margin-right: auto; margin-bottom: 10px;"></div>
加载中...<br>因为 jsdelivr CDN 受到神秘力量干涉<br>最好使用魔法方式连接
</div>
<div id="slot"></div>
<script>
(async () => {
const protocal = 'https';
// https://cdn.jsdelivr.net/gh/bbs-archive/mcbbs@main/thread/<tid>.html
const upstream = 'cdn.jsdelivr.net';
const upstreamPath = '/gh/bbs-archive/mcbbs@main/thread/';
const extractTitle = /<title>(?<title>.+)<\/title>/;
const extractContent = /<body[^>]*>(?<content>(.|[\n\r])*)<\/body>/im;
const urlParams = new URLSearchParams(document.location.search);
const fileName = `${urlParams.get('t')}.html`;
const fullpath = `${protocal}://${upstream}${upstreamPath}${fileName}`;
document.getElementById('loading').style.display = 'block';
try {
const res = await fetch(fullpath);
if (res.status === 403 || res.status === 404) {
throw `404: 找不到页面 ${fileName}`;
} else if (!res.ok) {
throw `${response.status}: ${response.statusText}`
}
const text = await res.text();
const content = extractContent.exec(text).groups.content;
const title = extractTitle.exec(text).groups.title;
document.title = title;
document.querySelector('#slot').innerHTML = content;
} catch (err) {
document.querySelector('#slot').textContent = err;
}
document.getElementById('loading').style.display = 'none';
const h1 = document.querySelector('#slot h1');
h1.style.cursor = 'pointer';
h1.addEventListener('click', () => {
window.history.back();
})
})();
</script>
</body>
</html>