fix: code review

Author: AriPerkkio

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

@@ -53,7 +53,7 @@ type I18nText = {
    *
    * @default 'Edit this page'
    */
-  editPage?: string
+  editPageText?: string
 
   /**
    * Text shown when there are no previews or steps to show in the prepare environment section.
@@ -179,12 +179,12 @@ Specified which folder from the `src/templates/` directory should be used as the
 
 #### `editPageLink`
 Display a link in lesson for editing the page content.
-The value is a URL pattern where `:path` is replaced with the lesson's location relative to the `src/content/tutorial`.
+The value is a URL pattern where `${path}` is replaced with the lesson's location relative to the `src/content/tutorial`.
 
 <PropertyTable inherited type="string|false" />
 
 ```yaml
-editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/:path
+editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/${path}
 ```
 
 The inherited value can be disabled in specific parts using `false`.
@@ -198,8 +198,8 @@ Note that Github will try to automatically render the `.md` files when linked to
 You can instruct Github to show the source code instead by adding `plain=1` query parameter.
 
 ```diff
--editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/:path
-+editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/:path?plain=1
+-editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/${path}
++editPageLink: https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/${path}?plain=1
 ```
 
 :::

docs/tutorialkit.dev/src/content/docs/reference/theming.mdx

@@ -318,7 +318,7 @@ The navigation cards are the cards at the bottom of a lesson to navigate to the
 
 ### Edit Page Link
 
-The edit page link is shown above the navigation cards when configured by [`editPageLink` option](../configuration/#editpagelink).
+The edit page link is shown above the navigation cards when configured by [`editPageLink` option](/reference/configuration/#editpagelink).
 
 ![Edit Page Link](./images/theming-editpagelink.png)
 

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

@@ -24,7 +24,7 @@ const { Markdown, editPageLink, prev, next } = lesson;
           class="inline-flex flex-items-center text-tk-elements-editPageLink-textColor hover:text-tk-elements-editPageLink-textColorHover hover:underline"
         >
           <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" />
-          <span>{lesson.data.i18n!.editPage}</span>
+          <span>{lesson.data.i18n!.editPageText}</span>
         </a>
       </div>
     )

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

@@ -7,7 +7,7 @@ import type {
   Tutorial,
   TutorialSchema,
 } from '@tutorialkit/types';
-import { folderPathToFilesRef } from '@tutorialkit/types';
+import { folderPathToFilesRef, interpolateString } from '@tutorialkit/types';
 import { getCollection } from 'astro:content';
 import glob from 'fast-glob';
 import path from 'node:path';
@@ -44,7 +44,7 @@ export async function getTutorial(): Promise<Tutorial> {
           partTemplate: 'Part ${index}: ${title}',
           noPreviewNorStepsText: 'No preview to run nor steps to show',
           startWebContainerText: 'Run this tutorial',
-          editPage: 'Edit this page',
+          editPageText: 'Edit this page',
         } satisfies Lesson['data']['i18n'],
         tutorialMetaData.i18n,
       );
@@ -289,7 +289,7 @@ export async function getTutorial(): Promise<Tutorial> {
     }
 
     if (lesson.data.editPageLink && typeof lesson.data.editPageLink === 'string') {
-      lesson.editPageLink = lesson.data.editPageLink.replace(':path', lesson.filepath);
+      lesson.editPageLink = interpolateString(lesson.data.editPageLink, { path: lesson.filepath });
     }
   }
 

packages/components/react/src/Nav.tsx

@@ -1,11 +1,10 @@
-import type { Lesson, NavItem, NavList } from '@tutorialkit/types';
+import { interpolateString, type Lesson, type NavItem, type NavList } from '@tutorialkit/types';
 import * as Accordion from '@radix-ui/react-accordion';
 import navStyles from './styles/nav.module.css';
 import { classNames } from './utils/classnames.js';
 import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
 import { useCallback, useRef, useState } from 'react';
 import { useOutsideClick } from './hooks/useOutsideClick.js';
-import { interpolateString } from './utils/interpolation.js';
 
 const dropdownEasing = cubicBezier(0.4, 0, 0.2, 1);
 

packages/components/react/src/index.ts

@@ -6,4 +6,3 @@ export * from './Panels/TerminalPanel.js';
 export * from './Panels/WorkspacePanel.js';
 export type * from './core/types.js';
 export * from './utils/classnames.js';
-export * from './utils/interpolation.js';

packages/types/src/index.ts

@@ -1,3 +1,4 @@
 export type * from './entities/index.js';
 export * from './schemas/index.js';
 export * from './files-ref.js';
+export { interpolateString } from './utils/interpolation.js';

packages/types/src/schemas/common.ts

@@ -151,20 +151,18 @@ export const webcontainerSchema = commandsSchema.extend({
     }),
   ]),
   i18n: i18nSchema.optional(),
-});
-
-export const editPageLinkSchema = z.union([
-  // pattern for creating the URL
-  z.string(),
+  editPageLink: z.union([
+    // pattern for creating the URL
+    z.string(),
 
-  // `false` for disabling the edit link
-  z.boolean(),
-]);
+    // `false` for disabling the edit link
+    z.boolean(),
+  ]),
+});
 
 export const baseSchema = webcontainerSchema.extend({
   title: z.string(),
   slug: z.string().optional(),
-  editPageLink: editPageLinkSchema.optional(),
 });
 
 export type BaseSchema = z.infer<typeof baseSchema>;

packages/types/src/schemas/i18n.ts

@@ -13,7 +13,7 @@ export const i18nSchema = z.object({
    *
    * @default 'Edit this page'
    */
-  editPage: z.string().optional(),
+  editPageText: z.string().optional(),
 
   /**
    * Text shown when there are no previews or steps to show in the prepare environment section.

packages/types/src/schemas/tutorial.ts

@@ -1,10 +1,9 @@
 import { z } from 'zod';
-import { webcontainerSchema, editPageLinkSchema } from './common.js';
+import { webcontainerSchema } from './common.js';
 
 export const tutorialSchema = webcontainerSchema.extend({
   type: z.literal('tutorial'),
   logoLink: z.string().optional(),
-  editPageLink: editPageLinkSchema.optional(),
   parts: z.array(z.string()).optional(),
 });
 

packages/components/react/src/utils/interpolation.spec.ts renamed to packages/types/src/utils/interpolation.spec.ts

@@ -9,6 +9,16 @@ describe('interpolateString', () => {
     expect(interpolateString(template, variables)).toBe('Hello, world!');
   });
 
+  it('should interpolate variables inside URL', () => {
+    const template =
+      'https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/${path}?plain=1';
+    const variables = { path: '1-basics/2-foo/1-welcome/content.md' };
+
+    expect(interpolateString(template, variables)).toBe(
+      'https://github.com/stackblitz/tutorialkit/blob/main/packages/template/src/content/tutorial/1-basics/2-foo/1-welcome/content.md?plain=1',
+    );
+  });
+
   it('should interpolate multiple variables', () => {
     const template = 'Part ${index}: ${title}';
     const variables = { index: 5, title: 'Welcome to foo bar' };