Skip to content

Commit dee86e1

Browse files
wappon28devwappon28dev
committed
feat: チェックポイント
1 parent 5bd37d8 commit dee86e1

7 files changed

Lines changed: 157 additions & 314 deletions

File tree

‎astro.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ export default defineConfig({
6969
link: "/",
7070
},
7171
{
72-
label: "困ったときは",
73-
autogenerate: { directory: "help/" },
72+
label: "執筆者向け",
73+
autogenerate: { directory: "for-writers/" },
7474
},
7575
],
7676
},

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@
4444
"starlight-scroll-to-top": "^0.1.1",
4545
"starlight-sidebar-topics": "^0.6.0"
4646
},
47+
"optionalDependencies": {
48+
"@rollup/rollup-linux-x64-gnu": "4.6.1"
49+
},
4750
"devDependencies": {
4851
"@antfu/eslint-config": "^4.16.2",
4952
"@css-modules-kit/codegen": "^0.4.1",
@@ -66,8 +69,5 @@
6669
"typescript": "^5.8.3",
6770
"typescript-eslint": "^8.35.1",
6871
"unplugin-icons": "^22.1.0"
69-
},
70-
"optionalDependencies": {
71-
"@rollup/rollup-linux-x64-gnu": "4.6.1"
7272
}
7373
}

‎src/components/Checkpoint.astro‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
import Checklist from "~icons/material-symbols/checklist";
3+
---
4+
5+
<script>
6+
document.addEventListener("DOMContentLoaded", () => {
7+
const checkpointElems = document.querySelectorAll<HTMLElement>(".comp-checkpoint");
8+
9+
checkpointElems.forEach((elem, elemIdx) => {
10+
const listItems = elem.querySelectorAll<HTMLLIElement>("ul > li");
11+
12+
listItems.forEach((item, itemIdx) => {
13+
const checkbox = item.querySelector<HTMLInputElement>("input[type=\"checkbox\"]");
14+
if (checkbox == null) {
15+
return;
16+
}
17+
18+
checkbox.disabled = false;
19+
const uniqueId = `checkpoint-${elemIdx}-${itemIdx}`;
20+
checkbox.id = uniqueId;
21+
22+
const label = document.createElement("label");
23+
label.htmlFor = uniqueId;
24+
25+
const nodesToWrap: ChildNode[] = [checkbox];
26+
let next = checkbox.nextSibling;
27+
28+
// 後続のノードがテキストか、インライン要素である限り収集を続ける
29+
while (next != null && next.nodeName !== 'UL' && next.nodeName !== 'P' && next.nodeName !== 'DIV') {
30+
nodesToWrap.push(next);
31+
next = next.nextSibling;
32+
}
33+
34+
nodesToWrap.forEach(node => label.appendChild(node));
35+
item.prepend(label);
36+
});
37+
});
38+
});
39+
</script>
40+
41+
<div class="container comp-checkpoint">
42+
<div class="title">
43+
<Checklist height="100%" width="100%" />
44+
<p>チェックポイント！</p>
45+
</div>
46+
<slot />
47+
</div>
48+
49+
<style>
50+
.container {
51+
padding: 1rem;
52+
border-radius: 10px;
53+
background-color: var(--sl-color-green-low);
54+
display: flex;
55+
flex-direction: column;
56+
gap: 1rem;
57+
58+
& .title {
59+
display: grid;
60+
grid-template-columns: 2rem 1fr;
61+
align-items: center;
62+
gap: 0.5rem;
63+
64+
& > p {
65+
font-size: var(--sl-text-3xl);
66+
font-weight: bold;
67+
margin: 0;
68+
}
69+
}
70+
}
71+
72+
:global(.comp-checkpoint ul) {
73+
margin-top: 0 !important; /* comes from star-light */
74+
}
75+
76+
:global(.comp-checkpoint > ul) {
77+
list-style: none;
78+
padding-inline: 1rem;
79+
padding-block-end: 1rem;
80+
81+
& :global(> li > label) {
82+
margin-bottom: 0 !important; /* comes from star-light */
83+
cursor: pointer;
84+
display: grid;
85+
grid-template-columns: 1.5rem 1fr;
86+
align-items: start;
87+
gap: 1rem;
88+
89+
& :global(> input[type="checkbox"]) {
90+
accent-color: var(--sl-color-green);
91+
height: 1.5rem;
92+
width: 1.5rem;
93+
border: 1px solid #8b98a5;
94+
border-radius: 4px;
95+
96+
& :checked {
97+
border: 1px solid #8b98a5;
98+
background-color: var(--sl-color-green);
99+
}
100+
}
101+
102+
@media (width <= 30rem) {
103+
grid-template-columns: 1rem 1fr;
104+
gap: 0.5rem;
105+
106+
& :global(> input[type="checkbox"]) {
107+
height: 1rem;
108+
width: 1rem;
109+
margin-top: 0.25rem;
110+
}
111+
}
112+
}
113+
}
114+
115+
</style>

‎src/components/Quiz.astro‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
---
3+
4+
<div class="quize-area">
5+
<h3>問題</h3>
6+
<slot />
7+
</div>
8+
9+
10+
<style>
11+
.quize-area {
12+
box-shadow: ;
13+
padding: 1rem;
14+
border-radius: 8px;
15+
border: 1.5px solid #3498db;
16+
}
17+
</style>

‎src/components/starlight/PageTitle.astro‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ type Props = ComponentProps<typeof Default>;
1010

1111
<Default {...Astro.props} />
1212
{description && (
13-
<div class="page-title__description">
13+
<div class="container">
1414
<Book4Spark height="100%" width="100%" />
1515
<p>{description}</p>
1616
</div>
1717
)}
1818

1919
<style>
2020

21-
.page-title__description {
21+
.container {
2222
width: 100%;
2323
border-radius: 10px;
2424
padding: 1rem;
@@ -28,7 +28,6 @@ type Props = ComponentProps<typeof Default>;
2828
grid-template-columns: 1.5rem 1fr;
2929
gap: 0.5rem;
3030
align-items: center;
31-
justify-content: space-between;
3231
margin-top: 1rem;
3332
}
3433
</style>

‎src/content/docs/for-writers/components.mdx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: コンポーネント
3+
description: Markdown についての基本的な情報を学びます！
4+
---
5+
6+
import Checkpoint from '@/components/Checkpoint.astro';
7+
8+
<Checkpoint>
9+
10+
- [ ] Webプログラミング演習の内容を確認したよ〜ん
11+
→ asdf
12+
- [ ] Webプログラミング演習の内容を確認した
13+
- asdf
14+
- [ ] Webプログラミング演習の内容を確認した
15+
16+
</Checkpoint>
17+
18+

0 commit comments

Comments
 (0)