Skip to content

Commit eda5f4e

Browse files
098orin098orin
committed
worksを更新
1 parent a2634c8 commit eda5f4e

File tree

2 files changed

+145
-1
lines changed

2 files changed

+145
-1
lines changed

‎tools/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,4 +38,5 @@ <h1>Tools</h1>
3838
<p>WebTools</p>
3939
<ul>
4040
</ul>
41+
</main>
4142
</html>

‎works/index.html‎

Lines changed: 144 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,81 @@
2222
gtag('config', 'G-JE7CQLY5RL');
2323
</script>
2424
<!-- end Google tag (gtag.js) -->
25+
<style>
26+
.work-card {
27+
position: relative;
28+
border: 1px solid #ddd;
29+
border-radius: 12px;
30+
padding: 15px;
31+
margin: 15px 0;
32+
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
33+
background: #323246;
34+
transition: transform 0.2s;
35+
}
36+
37+
.work-card:hover {
38+
transform: translateY(-3px);
39+
}
40+
41+
.work-readme {
42+
max-height: 200px;
43+
overflow-y: auto;
44+
border-top: 1px solid #eee;
45+
padding-top: 10px;
46+
margin-top: 10px;
47+
position: relative;
48+
z-index: 1;
49+
}
50+
51+
.read-more-button {
52+
display: inline-block;
53+
padding: 6px 12px;
54+
margin-top: 10px;
55+
background-color: #0366d6;
56+
color: #fff;
57+
border-radius: 6px;
58+
cursor: pointer;
59+
text-decoration: none;
60+
font-size: 0.9rem;
61+
}
62+
63+
.read-more-button:hover {
64+
background-color: #024ea2;
65+
}
66+
67+
/* 半透明オーバーレイ全文 */
68+
.read-more-overlay {
69+
position: absolute;
70+
top: 0; left: 0;
71+
width: 100%;
72+
height: 100%;
73+
background: rgba(19, 15, 33, 0.95);
74+
overflow-y: auto;
75+
padding: 15px;
76+
box-sizing: border-box;
77+
border-radius: 12px;
78+
display: none;
79+
z-index: 10;
80+
}
81+
82+
.read-more-overlay .close-button {
83+
display: inline-block;
84+
margin-bottom: 10px;
85+
padding: 4px 10px;
86+
background-color: #0366d6;
87+
color: #fff;
88+
border-radius: 6px;
89+
cursor: pointer;
90+
text-decoration: none;
91+
font-size: 0.9rem;
92+
}
93+
94+
.read-more-overlay .close-button:hover {
95+
background-color: #024ea2;
96+
}
97+
</style>
98+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
99+
25100
</head>
26101
<body>
27102
<nav class="main-nav">
@@ -36,5 +111,73 @@
36111
<h1>Works</h1>
37112
<p>私のプロジェクト</p>
38113
<h3>GitHub</h3>
39-
<a href="https://github.com/098orin/tw-extensions" target="_blank" rel="noopener noreferrer">TurboWarp extensions</a>
114+
<div class="work-card">
115+
<h4>TurboWarp extensions</h4>
116+
<a href="https://github.com/098orin/tw-extensions" target="_blank" rel="noopener noreferrer">
117+
https://github.com/098orin/tw-extensions
118+
</a>
119+
<div class="work-readme" data-repo="tw-extensions"></div>
120+
</div>
121+
122+
<script>
123+
async function fetchReadme(user, repo, container, maxLines = 3) {
124+
const url = `https://api.github.com/repos/${user}/${repo}/readme`;
125+
126+
try {
127+
const res = await fetch(url, {
128+
headers: { Accept: 'application/vnd.github.v3.raw' }
129+
});
130+
131+
if (!res.ok) {
132+
container.innerText = 'README が取得できませんでした';
133+
return;
134+
}
135+
136+
const md = await res.text();
137+
const fullHtml = marked.parse(md);
138+
139+
const lines = md.split('\n');
140+
const previewMd = lines.slice(0, maxLines).join('\n');
141+
const previewHtml = marked.parse(previewMd);
142+
143+
// オーバーレイ用要素作成
144+
const overlay = document.createElement('div');
145+
overlay.className = 'read-more-overlay';
146+
overlay.innerHTML = `<a href="#" class="close-button">閉じる</a>${fullHtml}`;
147+
container.parentElement.appendChild(overlay);
148+
149+
// ボタンを追加
150+
const btn = document.createElement('a');
151+
btn.href = '#';
152+
btn.className = 'read-more-button';
153+
btn.innerText = '続きを見る';
154+
container.appendChild(btn);
155+
156+
// ボタンクリックでオーバーレイ表示
157+
btn.addEventListener('click', e => {
158+
e.preventDefault();
159+
overlay.style.display = 'block';
160+
});
161+
162+
// 閉じるボタンクリックで非表示
163+
overlay.querySelector('.close-button').addEventListener('click', e => {
164+
e.preventDefault();
165+
overlay.style.display = 'none';
166+
});
167+
168+
container.innerHTML = previewHtml;
169+
container.appendChild(btn);
170+
171+
} catch (e) {
172+
container.innerText = 'エラーが発生しました';
173+
}
174+
}
175+
176+
// 全ての .work-readme に対して処理
177+
document.querySelectorAll('.work-readme').forEach(div => {
178+
const repo = div.dataset.repo;
179+
fetchReadme('098orin', repo, div);
180+
});
181+
</script>
182+
</main>
40183
</html>

0 commit comments

Comments
 (0)