Skip to content

Commit e11a094

Browse files
Copilotmikebarkmin
Copilot
and
mikebarkmin
committed
Apply Concert One font and add Edit/Learn buttons to featured maps, update ShareDialog with separate links
Co-authored-by: mikebarkmin <2592379+mikebarkmin@users.noreply.github.com>
1 parent 5e2b17c commit e11a094

4 files changed

Lines changed: 181 additions & 43 deletions

File tree

‎packages/learningmap/src/ShareDialog.tsx‎

Lines changed: 104 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { useEditorStore } from "./editorStore";
55
import { useJsonStore } from "./useJsonStore";
66

77
export function ShareDialog() {
8-
const [copied, setCopied] = useState(false);
8+
const [copiedEdit, setCopiedEdit] = useState(false);
9+
const [copiedLearn, setCopiedLearn] = useState(false);
910

1011
// Get state from store
1112
const open = useEditorStore(state => state.shareDialogOpen);
@@ -20,11 +21,25 @@ export function ShareDialog() {
2021

2122
if (!open) return null;
2223

23-
const handleCopyLink = async () => {
24+
// Generate both edit and learn links
25+
const editLink = shareLink;
26+
const learnLink = shareLink.replace(/(#json=.+)/, '/learn$1');
27+
28+
const handleCopyEditLink = async () => {
29+
try {
30+
await navigator.clipboard.writeText(editLink);
31+
setCopiedEdit(true);
32+
setTimeout(() => setCopiedEdit(false), 2000);
33+
} catch (err) {
34+
console.error("Failed to copy link:", err);
35+
}
36+
};
37+
38+
const handleCopyLearnLink = async () => {
2439
try {
25-
await navigator.clipboard.writeText(shareLink);
26-
setCopied(true);
27-
setTimeout(() => setCopied(false), 2000);
40+
await navigator.clipboard.writeText(learnLink);
41+
setCopiedLearn(true);
42+
setTimeout(() => setCopiedLearn(false), 2000);
2843
} catch (err) {
2944
console.error("Failed to copy link:", err);
3045
}
@@ -41,46 +56,93 @@ export function ShareDialog() {
4156
</button>
4257
</header>
4358
<div className="drawer-content">
44-
<p style={{ marginBottom: 16 }}>{t.shareLink}</p>
45-
<div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
46-
<input
47-
type="text"
48-
value={shareLink}
49-
readOnly
59+
<div style={{ marginBottom: 24 }}>
60+
<h3 style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>Edit Link</h3>
61+
<p style={{ fontSize: 13, color: '#666', marginBottom: 12 }}>Share this link to allow others to edit the map</p>
62+
<div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
63+
<input
64+
type="text"
65+
value={editLink}
66+
readOnly
67+
style={{
68+
flex: 1,
69+
padding: "8px 12px",
70+
border: "1px solid #d1d5db",
71+
borderRadius: 4,
72+
fontSize: 14,
73+
fontFamily: "monospace",
74+
}}
75+
onClick={(e) => e.currentTarget.select()}
76+
/>
77+
</div>
78+
<button
79+
onClick={handleCopyEditLink}
80+
className="drawer-button"
5081
style={{
51-
flex: 1,
52-
padding: "8px 12px",
53-
border: "1px solid #d1d5db",
54-
borderRadius: 4,
55-
fontSize: 14,
56-
fontFamily: "monospace",
82+
width: "100%",
83+
display: "flex",
84+
alignItems: "center",
85+
justifyContent: "center",
86+
gap: 8,
5787
}}
58-
onClick={(e) => e.currentTarget.select()}
59-
/>
88+
>
89+
{copiedEdit ? (
90+
<>
91+
<Check size={16} />
92+
{t.linkCopied}
93+
</>
94+
) : (
95+
<>
96+
<Link2 size={16} />
97+
Copy Edit Link
98+
</>
99+
)}
100+
</button>
101+
</div>
102+
103+
<div>
104+
<h3 style={{ fontSize: 14, fontWeight: 600, marginBottom: 8 }}>Learn Link</h3>
105+
<p style={{ fontSize: 13, color: '#666', marginBottom: 12 }}>Share this link for others to learn from the map</p>
106+
<div style={{ display: "flex", gap: 8, marginBottom: 8 }}>
107+
<input
108+
type="text"
109+
value={learnLink}
110+
readOnly
111+
style={{
112+
flex: 1,
113+
padding: "8px 12px",
114+
border: "1px solid #d1d5db",
115+
borderRadius: 4,
116+
fontSize: 14,
117+
fontFamily: "monospace",
118+
}}
119+
onClick={(e) => e.currentTarget.select()}
120+
/>
121+
</div>
122+
<button
123+
onClick={handleCopyLearnLink}
124+
className="drawer-button"
125+
style={{
126+
width: "100%",
127+
display: "flex",
128+
alignItems: "center",
129+
justifyContent: "center",
130+
gap: 8,
131+
}}
132+
>
133+
{copiedLearn ? (
134+
<>
135+
<Check size={16} />
136+
{t.linkCopied}
137+
</>
138+
) : (
139+
<>
140+
<Link2 size={16} />
141+
Copy Learn Link
142+
</>
143+
)}
144+
</button>
60145
</div>
61-
<button
62-
onClick={handleCopyLink}
63-
className="drawer-button"
64-
style={{
65-
width: "100%",
66-
display: "flex",
67-
alignItems: "center",
68-
justifyContent: "center",
69-
gap: 8,
70-
}}
71-
>
72-
{copied ? (
73-
<>
74-
<Check size={16} />
75-
{t.linkCopied}
76-
</>
77-
) : (
78-
<>
79-
<Link2 size={16} />
80-
{t.copyLink}
81-
</>
82-
)}
83-
</button>
84146
</div>
85147
</div>
86148
</>

‎platforms/web/public/concert_one_latin.woff2‎

23.6 KB
Binary file not shown.

‎platforms/web/src/Landing.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
/* Import Concert One font */
2+
@font-face {
3+
font-family: 'Concert One';
4+
font-style: normal;
5+
font-weight: 400;
6+
font-display: swap;
7+
src: url(/concert_one_latin.woff2) format('woff2');
8+
}
9+
110
.landing-container {
211
min-height: 100vh;
312
display: flex;
@@ -38,6 +47,7 @@
3847
font-size: 1.5rem;
3948
font-weight: 600;
4049
color: #333;
50+
font-family: 'Concert One', cursive;
4151
}
4252

4353
.nav-links {
@@ -80,6 +90,7 @@
8090
color: #1a1a1a;
8191
line-height: 1.2;
8292
margin-bottom: 1rem;
93+
font-family: 'Concert One', cursive;
8394
}
8495

8596
.hero-subtitle {
@@ -156,6 +167,7 @@
156167
font-size: 2rem;
157168
color: #1a1a1a;
158169
margin-bottom: 1rem;
170+
font-family: 'Concert One', cursive;
159171
}
160172

161173
.use-case-content p {
@@ -176,6 +188,7 @@
176188
color: #1a1a1a;
177189
text-align: center;
178190
margin-bottom: 0.5rem;
191+
font-family: 'Concert One', cursive;
179192
}
180193

181194
.featured-subtitle {
@@ -222,6 +235,7 @@
222235
font-size: 1.3rem;
223236
color: #1a1a1a;
224237
margin-bottom: 0.75rem;
238+
font-family: 'Concert One', cursive;
225239
}
226240

227241
.card-description {
@@ -234,11 +248,54 @@
234248

235249
.card-footer {
236250
display: flex;
251+
gap: 0.5rem;
237252
justify-content: center;
238253
padding-top: 1rem;
239254
border-top: 1px solid #f0f0f0;
240255
}
241256

257+
.card-button {
258+
padding: 0.5rem 1rem;
259+
font-size: 0.9rem;
260+
font-weight: 600;
261+
border: none;
262+
border-radius: 6px;
263+
cursor: pointer;
264+
transition: all 0.2s ease;
265+
flex: 1;
266+
}
267+
268+
.card-button-edit {
269+
background-color: #4a90e2;
270+
color: white;
271+
}
272+
273+
.card-button-edit:hover {
274+
background-color: #357abd;
275+
transform: translateY(-1px);
276+
}
277+
278+
.card-button-edit:focus {
279+
outline: 2px solid #4a90e2;
280+
outline-offset: 2px;
281+
}
282+
283+
.card-button-learn {
284+
background-color: white;
285+
color: #4a90e2;
286+
border: 2px solid #4a90e2;
287+
}
288+
289+
.card-button-learn:hover {
290+
background-color: #f0f7ff;
291+
transform: translateY(-1px);
292+
}
293+
294+
.card-button-learn:focus {
295+
outline: 2px solid #4a90e2;
296+
outline-offset: 2px;
297+
}
298+
242299
.card-badge {
243300
display: inline-block;
244301
padding: 0.4rem 0.8rem;

‎platforms/web/src/Landing.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,24 @@ function Landing() {
1212
title: 'Getting Started with Programming',
1313
description: 'A comprehensive guide to learning programming fundamentals, from variables to functions.',
1414
thumbnail: '📚',
15+
editUrl: '/create',
16+
learnUrl: '/learn',
1517
},
1618
{
1719
id: 'example-2',
1820
title: 'Web Development Basics',
1921
description: 'Learn HTML, CSS, and JavaScript to build your first website step by step.',
2022
thumbnail: '🌐',
23+
editUrl: '/create',
24+
learnUrl: '/learn',
2125
},
2226
{
2327
id: 'example-3',
2428
title: 'Data Science Journey',
2529
description: 'Explore data analysis, visualization, and machine learning concepts progressively.',
2630
thumbnail: '📊',
31+
editUrl: '/create',
32+
learnUrl: '/learn',
2733
},
2834
];
2935

@@ -89,7 +95,20 @@ function Landing() {
8995
<h3 className="card-title">{map.title}</h3>
9096
<p className="card-description">{map.description}</p>
9197
<div className="card-footer">
92-
<span className="card-badge">Featured LearningMap</span>
98+
<button
99+
onClick={() => navigate(map.editUrl)}
100+
className="card-button card-button-edit"
101+
aria-label={`Edit ${map.title}`}
102+
>
103+
Edit
104+
</button>
105+
<button
106+
onClick={() => navigate(map.learnUrl)}
107+
className="card-button card-button-learn"
108+
aria-label={`Learn ${map.title}`}
109+
>
110+
Learn
111+
</button>
93112
</div>
94113
</div>
95114
))}

0 commit comments

Comments
 (0)