@tutorialkit-rb/astro 0.1.6 → 0.2.0

package/dist/default/components/ActivateOverlay.tsx

@@ -0,0 +1,39 @@
+import { useStore } from '@nanostores/react';
+import { isDeferred, isActivated, activateText, activate } from '../stores/deferred-store.js';
+
+export default function ActivateOverlay() {
+  const activated = useStore(isActivated);
+
+  if (!isDeferred || activated) {
+    return null;
+  }
+
+  const displayText = (activateText ?? 'Start Tutorial').replace(/\b\w/g, (c) => c.toUpperCase());
+
+  return (
+    <div className="fixed inset-0 z-50 flex flex-col justify-center items-center backdrop-blur-md" style={{ backgroundColor: 'rgba(255, 255, 255, 0.1)' }}>
+      <button
+        onClick={activate}
+        className="inline-flex items-center font-500 text-sm rounded-md cursor-pointer transition-all duration-150"
+        style={{
+          padding: '0.5rem 1rem',
+          backgroundColor: '#4f46e5',
+          borderColor: '#4f46e5',
+          border: '1px solid #4f46e5',
+          color: '#ffffff',
+          borderRadius: '0.375rem',
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = '#4338ca';
+          e.currentTarget.style.borderColor = '#4338ca';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = '#4f46e5';
+          e.currentTarget.style.borderColor = '#4f46e5';
+        }}
+      >
+        {displayText}
+      </button>
+    </div>
+  );
+}

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/components/webcontainer.ts

@@ -4,6 +4,7 @@ import { useAuth } from './setup.js';
 import { safeBoot, TutorialStore } from '@tutorialkit-rb/runtime';
 import { auth, WebContainer } from '@webcontainer/api';
 import { joinPaths } from '../utils/url.js';
+import { activationPromise } from '../stores/deferred-store.js';
 
 interface WebContainerContext {
   readonly useAuth: boolean;
@@ -16,7 +17,9 @@ export let webcontainer: Promise<WebContainer> = new Promise(() => {
 });
 
 if (!import.meta.env.SSR) {
-  webcontainer = Promise.resolve(useAuth ? auth.loggedIn() : null).then(() => safeBoot({ workdirName: 'tutorial' }));
+  webcontainer = activationPromise
+    .then(() => (useAuth ? auth.loggedIn() : null))
+    .then(() => safeBoot({ workdirName: 'tutorial' }));
 
   webcontainer.then(() => {
     webcontainerContext.loaded = true;

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

@@ -3,6 +3,7 @@ import type { InferGetStaticPropsType } from 'astro';
 import TopBarWrapper from '../components/TopBarWrapper.astro';
 import MainContainer from '../components/MainContainer.astro';
 import PageLoadingIndicator from '../components/PageLoadingIndicator.astro';
+import ActivateOverlay from '../components/ActivateOverlay.tsx';
 import Layout from '../layouts/Layout.astro';
 import '../styles/base.css';
 import '@tutorialkit/custom.css';
@@ -15,6 +16,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 +35,16 @@ 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>
+
+  <ActivateOverlay client:load />
 </Layout>

package/dist/default/stores/deferred-store.ts

@@ -0,0 +1,32 @@
+import { atom } from 'nanostores';
+
+function getActivateText(): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const value = new URLSearchParams(window.location.search).get('activate');
+
+  if (value === null || value === '') {
+    return null;
+  }
+
+  return value;
+}
+
+export const activateText = getActivateText();
+export const isDeferred = activateText !== null;
+export const isActivated = atom<boolean>(!isDeferred);
+
+let _resolveActivation: (() => void) | undefined;
+
+export const activationPromise: Promise<void> = isDeferred
+  ? new Promise<void>((resolve) => {
+      _resolveActivation = resolve;
+    })
+  : Promise.resolve();
+
+export function activate() {
+  isActivated.set(true);
+  _resolveActivation?.();
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutorialkit-rb/astro",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "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/react": "0.1.6",
-    "@tutorialkit-rb/runtime": "0.1.6",
-    "@tutorialkit-rb/theme": "0.1.6",
-    "@tutorialkit-rb/types": "0.1.6"
+    "@tutorialkit-rb/runtime": "0.2.0",
+    "@tutorialkit-rb/theme": "0.2.0",
+    "@tutorialkit-rb/react": "0.2.0",
+    "@tutorialkit-rb/types": "0.2.0"
   },
   "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.6"
+    "@tutorialkit-rb/types": "0.2.0"
   },
   "peerDependencies": {
     "astro": "^4.15.0"