Skip to content

Commit 845f34e

Browse files
committed
feat: add "Edit this page" link
1 parent ef50b2b commit 845f34e

File tree

7 files changed

+66
-4
lines changed

7 files changed

+66
-4
lines changed

packages/astro/src/default/components/TutorialContent.astro

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,28 @@ interface Props {
88
}
99
1010
const { lesson } = Astro.props;
11-
const { Markdown, prev, next } = lesson;
11+
const { Markdown, editPageLink, prev, next } = lesson;
1212
---
1313

1414
<div class="h-full overflow-auto scrollbar-transparent p-8">
1515
<div class="markdown-content text-tk-elements-content-textColor">
1616
<Markdown />
1717
</div>
18+
19+
{
20+
editPageLink && (
21+
<div class="pb-4 mt-8 border-b border-tk-elements-editPageLink-borderColor">
22+
<a
23+
href={editPageLink}
24+
class="inline-flex flex-items-center text-tk-elements-editPageLink-textColor hover:text-tk-elements-editPageLink-textColorHover hover:underline"
25+
>
26+
<span class="icon i-ph-note-pencil pointer-events-none h-5 w-5 mr-2 text-tk-elements-editPageLink-iconColor group-hover:text-tk-elements-editPageLink-iconColorHover" />
27+
<span>Edit this page</span>
28+
</a>
29+
</div>
30+
)
31+
}
32+
1833
<div class="grid grid-cols-[1fr_1fr] gap-4 mt-8">
1934
<div class="flex">
2035
{prev && <NavCard lesson={prev} type="prev" />}

packages/astro/src/default/styles/variables.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,6 +241,13 @@
241241
--tk-elements-navCard-iconColor: var(--tk-elements-app-textColor);
242242
--tk-elements-navCard-iconColorHover: var(--tk-text-accent);
243243

244+
/* Edit Page Link */
245+
--tk-elements-editPageLink-textColor: var(--tk-elements-app-textColor);
246+
--tk-elements-editPageLink-textColorHover: var(--tk-text-active);
247+
--tk-elements-editPageLink-iconColor: var(--tk-elements-app-textColor);
248+
--tk-elements-editPageLink-iconColorHover: var(--tk-text-accent);
249+
--tk-elements-editPageLink-borderColor: var(--tk-border-secondary);
250+
244251
/* Breadcrumb > Nav Button */
245252
--tk-elements-breadcrumbs-navButton-iconColor: var(--tk-text-secondary);
246253
--tk-elements-breadcrumbs-navButton-iconColorHover: var(--tk-text-active);

packages/astro/src/default/utils/content.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ export async function getTutorial(): Promise<Tutorial> {
8181
const lesson: Lesson = {
8282
data,
8383
id: lessonId,
84+
filepath: id,
8485
order: -1,
8586
part: {
8687
id: partId,
@@ -241,7 +242,17 @@ export async function getTutorial(): Promise<Tutorial> {
241242
lesson.data = {
242243
...pick(
243244
[lesson.data, chapterMetadata, partMetadata, tutorialMetaData],
244-
['mainCommand', 'prepareCommands', 'previews', 'autoReload', 'template', 'terminal', 'editor', 'focus'],
245+
[
246+
'mainCommand',
247+
'prepareCommands',
248+
'previews',
249+
'autoReload',
250+
'template',
251+
'terminal',
252+
'editor',
253+
'focus',
254+
'editPageLink',
255+
],
245256
),
246257
...lesson.data,
247258
};
@@ -265,9 +276,11 @@ export async function getTutorial(): Promise<Tutorial> {
265276
href: joinPaths(baseURL, `/${partSlug}/${chapterSlug}/${nextLesson.slug}`),
266277
};
267278
}
268-
}
269279

270-
// console.log(inspect(_tutorial, undefined, Infinity, true));
280+
if (lesson.data.editPageLink && typeof lesson.data.editPageLink === 'string') {
281+
lesson.editPageLink = lesson.data.editPageLink.replace(':path', lesson.filepath);
282+
}
283+
}
271284

272285
return _tutorial;
273286
}

packages/theme/src/theme.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,13 @@ export const theme = {
248248
iconColor: 'var(--tk-elements-navCard-iconColor)',
249249
iconColorHover: 'var(--tk-elements-navCard-iconColorHover)',
250250
},
251+
editPageLink: {
252+
textColor: 'var(--tk-elements-editPageLink-textColor)',
253+
textColorHover: 'var(--tk-elements-editPageLink-textColorHover)',
254+
iconColor: 'var(--tk-elements-editPageLink-iconColor)',
255+
iconColorHover: 'var(--tk-elements-editPageLink-iconColorHover)',
256+
borderColor: 'var(--tk-elements-editPageLink-borderColor)',
257+
},
251258
breadcrumbs: {
252259
navButton: {
253260
iconColor: 'var(--tk-elements-breadcrumbs-navButton-iconColor)',

packages/types/src/entities/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ export interface Lesson<T = unknown> {
4040
part: { id: string; title: string };
4141
chapter: { id: string; title: string };
4242
slug: string;
43+
filepath: string;
44+
editPageLink?: string;
4345
files: FilesRefList;
4446
solution: FilesRefList;
4547
next?: LessonLink;

packages/types/src/schemas/common.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,6 +154,15 @@ export const webcontainerSchema = commandsSchema.extend({
154154
export const baseSchema = webcontainerSchema.extend({
155155
title: z.string(),
156156
slug: z.string().optional(),
157+
editPageLink: z
158+
.union([
159+
// pattern for creating the URL
160+
z.string(),
161+
162+
// `false` for disabling the edit link
163+
z.boolean(),
164+
])
165+
.optional(),
157166
});
158167

159168
export type BaseSchema = z.infer<typeof baseSchema>;

packages/types/src/schemas/tutorial.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,15 @@ import { webcontainerSchema } from './common.js';
44
export const tutorialSchema = webcontainerSchema.extend({
55
type: z.literal('tutorial'),
66
logoLink: z.string().optional(),
7+
editPageLink: z
8+
.union([
9+
// pattern for creating the URL
10+
z.string(),
11+
12+
// `false` for disabling the edit link
13+
z.boolean(),
14+
])
15+
.optional(),
716
parts: z.array(z.string()).optional(),
817
});
918

0 commit comments

Comments
 (0)