@tutorialkit-rb/astro 0.1.5 → 0.1.7

package/dist/default/components/MainContainer.astro

@@ -12,9 +12,10 @@ import { hasWorkspace } from '../utils/workspace';
 interface Props {
   lesson: Lesson<AstroComponentFactory>;
   navList: NavList;
+  showNav?: boolean;
 }
 
-const { lesson, navList } = Astro.props;
+const { lesson, navList, showNav = true } = Astro.props;
 
 const showWorkspacePanel = hasWorkspace(lesson);
 ---
@@ -31,7 +32,7 @@ const showWorkspacePanel = hasWorkspace(lesson);
     class="h-full flex flex-col transition-theme bg-tk-elements-app-backgroundColor text-tk-elements-app-textColor"
     slot="a"
   >
-    <Nav client:load lesson={lesson} navList={navList} />
+    {showNav && <Nav client:load lesson={lesson} navList={navList} />}
     <TutorialContent lesson={lesson} />
   </div>
   <div

package/dist/default/layouts/Layout.astro

@@ -37,6 +37,7 @@ const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toStri
     <ViewTransitions />
     <script is:inline>
       setTutorialKitTheme();
+      setTutorialKitEmbed();
 
       function setTutorialKitTheme() {
         let theme = localStorage.getItem('tk_theme');
@@ -47,12 +48,19 @@ const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toStri
 
         document.querySelector('html')?.setAttribute('data-theme', theme);
       }
+
+      function setTutorialKitEmbed() {
+        if (new URLSearchParams(window.location.search).get('embed') === 'true') {
+          document.querySelector('html')?.setAttribute('data-embed', 'true');
+        }
+      }
     </script>
     <script>
       import { swapFunctions as builtInSwap } from 'astro:transitions/client';
 
       declare global {
         function setTutorialKitTheme(): void;
+        function setTutorialKitEmbed(): void;
       }
 
       document.addEventListener('astro:before-swap', (event) => {
@@ -63,6 +71,7 @@ const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toStri
           builtInSwap.swapRootAttributes(newDocument);
 
           setTutorialKitTheme();
+          setTutorialKitEmbed();
 
           /**
            * Keep the dynamically injected style sheet from Codemirror on all transitions.

package/dist/default/pages/[...slug].astro

@@ -15,6 +15,12 @@ export async function getStaticPaths() {
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;
 
 const { lesson, logoLink, navList, title } = Astro.props as Props;
+
+// Embed mode configuration
+const embedMode = Astro.url.searchParams.get('embed') === 'true';
+const showTopBar = !embedMode;
+const showNav = !embedMode;
+
 const meta = lesson.data?.meta ?? {};
 
 // use lesson's default title and a default description for SEO metadata
@@ -28,12 +34,14 @@ meta.description ??= 'A TutorialKit interactive lesson';
   <div id="previews-container" style="display: none;"></div>
 
   <main class="max-w-full flex flex-col h-full overflow-hidden" data-swap-root>
-    <TopBarWrapper
-      logoLink={logoLink ?? '/'}
-      openInStackBlitz={lesson.data.openInStackBlitz}
-      downloadAsZip={lesson.data.downloadAsZip}
-    />
-
-    <MainContainer lesson={lesson} navList={navList} />
+    {showTopBar && (
+      <TopBarWrapper
+        logoLink={logoLink ?? '/'}
+        openInStackBlitz={lesson.data.openInStackBlitz}
+        downloadAsZip={lesson.data.downloadAsZip}
+      />
+    )}
+
+    <MainContainer lesson={lesson} navList={navList} showNav={showNav} />
   </main>
 </Layout>

package/dist/default/styles/base.css

@@ -9,3 +9,12 @@ body {
   font-style: normal;
   font-variation-settings: 'slnt' 0;
 }
+
+/* Embed mode: hide top bar and navigation */
+html[data-embed='true'] main[data-swap-root] > nav {
+  display: none;
+}
+
+html[data-embed='true'] main[data-swap-root] header {
+  display: none;
+}

package/dist/default/utils/content.ts

@@ -87,6 +87,7 @@ export async function getTutorial(): Promise<Tutorial> {
       ...squash(sources, [
         'mainCommand',
         'prepareCommands',
+        'terminalBlockingPrepareCommandsCount',
         'previews',
         'autoReload',
         'template',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit-rb/astro",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "TutorialKit integration for Astro (https://astro.build)",
   "author": "StackBlitz Inc.",
   "type": "module",
@@ -54,10 +54,10 @@
     "unist-util-visit": "^5.0.0",
     "unocss": "^0.59.4",
     "zod": "3.23.8",
-    "@tutorialkit-rb/runtime": "0.1.5",
-    "@tutorialkit-rb/types": "0.1.5",
-    "@tutorialkit-rb/react": "0.1.5",
-    "@tutorialkit-rb/theme": "0.1.5"
+    "@tutorialkit-rb/react": "0.1.7",
+    "@tutorialkit-rb/runtime": "0.1.7",
+    "@tutorialkit-rb/theme": "0.1.7",
+    "@tutorialkit-rb/types": "0.1.7"
   },
   "devDependencies": {
     "@types/mdast": "^4.0.4",
@@ -67,7 +67,7 @@
     "typescript": "^5.4.5",
     "vite-plugin-inspect": "0.8.4",
     "vitest": "^3.0.5",
-    "@tutorialkit-rb/types": "0.1.5"
+    "@tutorialkit-rb/types": "0.1.7"
   },
   "peerDependencies": {
     "astro": "^4.15.0"