@tutorialkit-rb/astro 0.1.7 → 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/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/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';
@@ -44,4 +45,6 @@ meta.description ??= 'A TutorialKit interactive lesson';
 
     <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/package.json

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