@tutorialkit-rb/astro 1.5.2-rb.0.1.0

package/dist/default/components/ResizablePanel.astro

@@ -0,0 +1,247 @@
+---
+import { classNames } from '@tutorialkit-rb/react';
+
+export type Type = 'horizontal' | 'vertical';
+export type Priority = 'min' | 'max';
+
+interface Props {
+  id: string;
+  type?: Type;
+  pos?: string;
+  min?: string;
+  max?: string;
+  class?: string;
+  sidePanelClass?: string;
+}
+
+export interface IResizablePanel {
+  mainPanel(): HTMLElement;
+  sidePanel(): HTMLElement | undefined;
+  divider(): HTMLElement | undefined;
+}
+
+let {
+  id,
+  type = 'horizontal',
+  min = '0%',
+  pos = '50%',
+  max = '100%',
+  class: className = '',
+  sidePanelClass = '',
+} = Astro.props;
+
+// check if there is a `slot` defined with name `b`
+const hasSidePanel = Astro.slots.has('b');
+
+if (!hasSidePanel) {
+  // if we don't have a side panel, we make the first panel full width
+  pos = '100%';
+  min = '100%';
+  max = '100%';
+}
+
+const panelClass = classNames('overflow-hidden', { 'h-full': type === 'horizontal' });
+---
+
+<resizable-panel class={className} data-id={id} data-type={type} data-pos={pos} data-min={min} data-max={max}>
+  <div
+    data-id="container"
+    class={classNames('sm:grid relative w-full h-full max-w-full', {
+      'sm:grid-cols-[var(--pos)_1fr]': type === 'horizontal',
+      'sm:grid-rows-[var(--pos)_1fr]': type !== 'horizontal',
+    })}
+    style=`--pos: ${pos}`
+  >
+    <!-- It's important to keep the inline script here because it restores the position and blocks rendering to avoid flickering -->
+    <script is:inline define:vars={{ id, hasSidePanel }}>
+      if (!hasSidePanel) {
+        // if we don't have a side panel, we don't have to restore the handle
+        return;
+      }
+
+      const sessionStorageKey = `tk_resizable_panel_${id}`;
+
+      const $container = document.querySelector(`resizable-panel[data-id="${id}"] > div`);
+      const pos = sessionStorage.getItem(sessionStorageKey);
+
+      if (pos) {
+        $container.style.setProperty('--pos', pos);
+      }
+    </script>
+    <div class={panelClass} data-id="main-panel">
+      <slot name="a" />
+    </div>
+    {
+      hasSidePanel && (
+        <>
+          <div class={`${panelClass} ${sidePanelClass}`} data-id="side-panel">
+            <slot name="b" />
+          </div>
+          <div
+            data-id="divider"
+            class={classNames('absolute z-90 transition-colors hover:bg-gray-500/13', {
+              'w-0 h-full left-[var(--pos)] cursor-ew-resize p-0 px-1.5 -translate-x-1/2': type === 'horizontal',
+              'h-0 w-full top-[var(--pos)] cursor-ns-resize p-0 py-2 -translate-y-1/2': type !== 'horizontal',
+            })}
+          />
+        </>
+      )
+    }
+  </div>
+</resizable-panel>
+
+<script>
+  import type { Type, IResizablePanel } from './ResizablePanel.astro';
+
+  class ResizablePanel extends HTMLElement implements IResizablePanel {
+    readonly #id = this.dataset.id as string;
+    readonly #type = this.dataset.type as Type;
+    readonly #min = this.dataset.min as string;
+    readonly #max = this.dataset.max as string;
+
+    #pos = this.dataset.pos as string;
+    #width = 0;
+    #height = 0;
+    #dragging = false;
+
+    #container: HTMLElement;
+    #mainPanel: HTMLElement;
+    #sidePanel: HTMLElement | undefined;
+    #divider: HTMLElement | undefined;
+
+    constructor() {
+      super();
+
+      this.#container = this.querySelector(':scope > [data-id="container"]') as HTMLElement;
+      this.#mainPanel = this.#container.querySelector(':scope > [data-id="main-panel"]') as HTMLElement;
+      this.#sidePanel = this.#container.querySelector(':scope > [data-id="side-panel"]') as HTMLElement | undefined;
+      this.#divider = this.#container.querySelector(':scope > [data-id="divider"]') as HTMLElement | undefined;
+
+      this.#width = this.#container.clientWidth;
+      this.#height = this.#container.clientHeight;
+
+      const resizeObserver = new ResizeObserver((entries) => {
+        const { clientWidth, clientHeight } = entries[0].target;
+
+        this.#width = clientWidth;
+        this.#height = clientHeight;
+      });
+
+      resizeObserver.observe(this.#container);
+
+      // only if we have a divider, which means we have a side panel, we restore the position
+      if (this.#divider) {
+        this.#pos = sessionStorage.getItem(`tk_resizable_panel_${this.#id}`) ?? this.#pos;
+
+        this.#setPosition(this.#pos);
+      }
+    }
+
+    mainPanel(): HTMLElement {
+      return this.#mainPanel;
+    }
+
+    sidePanel(): HTMLElement | undefined {
+      return this.#sidePanel;
+    }
+
+    divider(): HTMLElement | undefined {
+      return this.#divider;
+    }
+
+    connectedCallback() {
+      this.#divider?.addEventListener('mousedown', this.#onMouseDown.bind(this));
+      this.#divider?.addEventListener('touchstart', this.#onMouseDown.bind(this), { passive: true });
+    }
+
+    disconnectedCallback() {
+      this.#divider?.removeEventListener('mousedown', this.#onMouseDown.bind(this));
+
+      window.removeEventListener('mouseup', this.#onMouseUp);
+      window.removeEventListener('mousemove', this.#onMouseMove);
+
+      window.removeEventListener('touchend', this.#onMouseUp);
+      window.removeEventListener('touchmove', this.#onTouchMove);
+    }
+
+    #onMouseMove(mouseMoveEvent: MouseEvent) {
+      if (!this.#dragging) {
+        return;
+      }
+
+      this.#updatePosition(mouseMoveEvent.clientX, mouseMoveEvent.clientY);
+    }
+
+    #onTouchMove(event: TouchEvent) {
+      if (!this.#dragging) {
+        return;
+      }
+
+      this.#updatePosition(event.touches[0].clientX, event.touches[0].clientY);
+    }
+
+    #onMouseUp() {
+      this.#dragging = false;
+
+      sessionStorage.setItem(`tk_resizable_panel_${this.#id}`, this.#pos);
+
+      window.removeEventListener('mouseup', this.#onMouseUp);
+      window.removeEventListener('mousemove', this.#onMouseMove);
+    }
+
+    #onMouseDown(event: MouseEvent | TouchEvent) {
+      if ('button' in event && event.button !== 0) {
+        return;
+      }
+
+      event.preventDefault();
+
+      this.#dragging = true;
+
+      window.addEventListener('mousemove', this.#onMouseMove.bind(this));
+      window.addEventListener('mouseup', this.#onMouseUp.bind(this));
+
+      window.addEventListener('touchmove', this.#onTouchMove.bind(this));
+      window.addEventListener('touchend', this.#onMouseUp.bind(this));
+    }
+
+    #updatePosition(x: number, y: number) {
+      const { top, left } = this.#container.getBoundingClientRect();
+
+      const posPx = this.#type === 'horizontal' ? x - left : y - top;
+      const size = this.#type === 'horizontal' ? this.#width : this.#height;
+
+      const pos = `${(100 * posPx) / size}%`;
+
+      this.#setPosition(pos);
+    }
+
+    #setPosition(pos: string) {
+      const size = this.#type === 'horizontal' ? this.#width : this.#height;
+
+      let minPx = parseFloat(this.#min);
+      let maxPx = parseFloat(this.#max);
+      let posPx = parseFloat(pos);
+
+      minPx = (size * minPx) / 100;
+      maxPx = (size * maxPx) / 100;
+      posPx = (size * posPx) / 100;
+
+      if (minPx < 0) {
+        minPx += size;
+      }
+
+      if (maxPx < 0) {
+        maxPx += size;
+      }
+
+      posPx = Math.max(minPx, Math.min(maxPx, posPx));
+
+      this.#pos = `${(100 * posPx) / size}%`;
+
+      this.#container.style.setProperty('--pos', this.#pos);
+    }
+  }
+
+  customElements.define('resizable-panel', ResizablePanel);
+</script>

package/dist/default/components/ThemeSwitch.tsx

@@ -0,0 +1,24 @@
+import { useStore } from '@nanostores/react';
+import { memo, useEffect, useState } from 'react';
+import { themeStore, toggleTheme } from '../stores/theme-store';
+
+export const ThemeSwitch = memo(() => {
+  const theme = useStore(themeStore);
+  const [domLoaded, setDomLoaded] = useState(false);
+
+  useEffect(() => {
+    setDomLoaded(true);
+  }, []);
+
+  return (
+    domLoaded && (
+      <button
+        className="flex items-center text-2xl text-tk-elements-topBar-iconButton-iconColor hover:text-tk-elements-topBar-iconButton-iconColorHover transition-theme bg-tk-elements-topBar-iconButton-backgroundColor hover:bg-tk-elements-topBar-iconButton-backgroundColorHover p-1 rounded-md"
+        title="Toggle Theme"
+        onClick={() => toggleTheme()}
+      >
+        <div className={theme === 'dark' ? 'i-ph-sun-dim-duotone' : 'i-ph-moon-stars-duotone'} />
+      </button>
+    )
+  );
+});

package/dist/default/components/TopBar.astro

@@ -0,0 +1,20 @@
+<nav
+  class="bg-tk-elements-topBar-backgroundColor transition-theme border-b border-tk-elements-app-borderColor flex max-w-full items-center p-3 px-4 min-h-[56px]"
+>
+  <div class="flex flex-1">
+    <slot name="logo" />
+  </div>
+
+  <div class="mr-2">
+    <slot name="download-button" />
+  </div>
+  <div class="mr-2">
+    <slot name="open-in-stackblitz-link" />
+  </div>
+  <div>
+    <slot name="theme-switch" />
+  </div>
+  <div>
+    <slot name="login-button" />
+  </div>
+</nav>

package/dist/default/components/TopBarWrapper.astro

@@ -0,0 +1,30 @@
+---
+import { TopBar } from 'tutorialkit:override-components';
+import type { Lesson } from '@tutorialkit-rb/types';
+import { ThemeSwitch } from './ThemeSwitch';
+import { LoginButton } from './LoginButton';
+import { DownloadButton } from './DownloadButton';
+import { OpenInStackblitzLink } from './OpenInStackblitzLink';
+import Logo from './Logo.astro';
+import { useAuth } from './setup';
+
+interface Props {
+  logoLink: string;
+  openInStackBlitz: Lesson['data']['openInStackBlitz'];
+  downloadAsZip: Lesson['data']['downloadAsZip'];
+}
+
+const { logoLink, openInStackBlitz, downloadAsZip } = Astro.props;
+---
+
+<TopBar>
+  <Logo slot="logo" logoLink={logoLink ?? '/'} />
+
+  {downloadAsZip && <DownloadButton client:load transition:persist slot="download-button" />}
+
+  {openInStackBlitz && <OpenInStackblitzLink client:load transition:persist slot="open-in-stackblitz-link" />}
+
+  <ThemeSwitch client:load transition:persist slot="theme-switch" />
+
+  {useAuth && <LoginButton client:load transition:persist slot="login-button" />}
+</TopBar>

package/dist/default/components/TutorialContent.astro

@@ -0,0 +1,48 @@
+---
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
+import type { Lesson } from '@tutorialkit-rb/types';
+import NavCard from './NavCard.astro';
+
+interface Props {
+  lesson: Lesson<AstroComponentFactory>;
+}
+
+const { lesson } = Astro.props;
+const { Markdown, editPageLink, prev, next } = lesson;
+---
+
+<div class="flex flex-col h-full overflow-auto scrollbar-transparent p-6 sm:p-8">
+  <div class="markdown-content text-tk-elements-content-textColor">
+    <Markdown />
+  </div>
+
+  {
+    editPageLink && (
+      <div class="pb-4 mt-8 border-b border-tk-border-secondary">
+        <a
+          href={editPageLink}
+          class="inline-flex flex-items-center text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover hover:underline"
+        >
+          <span class="icon i-ph-note-pencil pointer-events-none h-5 w-5 mr-2" />
+          <span>{lesson.data.i18n!.editPageText}</span>
+        </a>
+      </div>
+    )
+  }
+
+  <div class="grid grid-cols-[1fr_1fr] gap-4 mt-8 mb-6">
+    <div class="flex">
+      {prev && <NavCard lesson={prev} type="prev" />}
+    </div>
+    <div class="flex">
+      {next && <NavCard lesson={next} type="next" />}
+    </div>
+  </div>
+
+  <a
+    class="inline-block mt-auto font-size-3.5 underline text-tk-elements-link-secondaryColor hover:text-tk-elements-link-secondaryColorHover"
+    href="https://webcontainers.io/"
+  >
+    {lesson.data.i18n!.webcontainerLinkText}
+  </a>
+</div>

package/dist/default/components/WorkspacePanelWrapper.tsx

@@ -0,0 +1,25 @@
+import { useStore } from '@nanostores/react';
+import { WorkspacePanel } from '@tutorialkit-rb/react';
+import type { Lesson } from '@tutorialkit-rb/types';
+import { useEffect } from 'react';
+import { Dialog } from 'tutorialkit:override-components';
+import { themeStore } from '../stores/theme-store.js';
+import { tutorialStore } from './webcontainer.js';
+
+interface Props {
+  lesson: Lesson;
+}
+
+export function WorkspacePanelWrapper({ lesson }: Props) {
+  const theme = useStore(themeStore);
+
+  useEffect(() => {
+    tutorialStore.setLesson(lesson);
+  }, [lesson]);
+
+  if (import.meta.env.SSR || !tutorialStore.lesson) {
+    tutorialStore.setLesson(lesson, { ssr: import.meta.env.SSR });
+  }
+
+  return <WorkspacePanel dialog={Dialog} tutorialStore={tutorialStore} theme={theme} />;
+}

package/dist/default/components/setup.ts

@@ -0,0 +1,20 @@
+/**
+ * This code must be executed before WebContainer boots and be executed as soon as possible.
+ * This ensures that when the authentication flow is complete in a popup, the popup is closed quickly.
+ */
+import { auth } from '@webcontainer/api';
+import { authStore } from '../stores/auth-store.js';
+
+const authConfig = __WC_CONFIG__;
+
+export const useAuth = __ENTERPRISE__ && !!authConfig;
+
+// this condition is here to make sure the branch is removed by esbuild if it evaluates to false
+if (__ENTERPRISE__) {
+  if (authConfig && !import.meta.env.SSR) {
+    authStore.set(auth.init(authConfig));
+
+    auth.on('auth-failed', (reason) => authStore.set({ status: 'auth-failed', ...reason }));
+    auth.on('logged-out', () => authStore.set({ status: 'need-auth' }));
+  }
+}

package/dist/default/components/webcontainer.ts

@@ -0,0 +1,46 @@
+// eslint-disable-next-line -- must be imported first
+import { useAuth } from './setup.js';
+
+import { safeBoot, TutorialStore } from '@tutorialkit-rb/runtime';
+import { auth, WebContainer } from '@webcontainer/api';
+import { joinPaths } from '../utils/url.js';
+
+interface WebContainerContext {
+  readonly useAuth: boolean;
+  loggedIn: () => Promise<void>;
+  loaded: boolean;
+}
+
+export let webcontainer: Promise<WebContainer> = new Promise(() => {
+  // noop for ssr
+});
+
+if (!import.meta.env.SSR) {
+  webcontainer = Promise.resolve(useAuth ? auth.loggedIn() : null).then(() => safeBoot({ workdirName: 'tutorial' }));
+
+  webcontainer.then(() => {
+    webcontainerContext.loaded = true;
+  });
+}
+
+export const tutorialStore = new TutorialStore({
+  webcontainer,
+  useAuth,
+  basePathname: joinPaths(import.meta.env.BASE_URL, '/'),
+});
+
+export async function login() {
+  auth.startAuthFlow({ popup: true });
+
+  await auth.loggedIn();
+}
+
+export function logout() {
+  auth.logout({ ignoreRevokeError: true });
+}
+
+export const webcontainerContext: WebContainerContext = {
+  useAuth,
+  loggedIn: () => auth.loggedIn(),
+  loaded: false,
+};

package/dist/default/env-default.d.ts

@@ -0,0 +1,19 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />
+
+interface WebContainerConfig {
+  editorOrigin: string;
+  clientId: string;
+  scope: string;
+}
+
+declare module 'tutorialkit:override-components' {
+  const topBar: typeof import('./src/default/components/TopBar.astro').default;
+  const headTags: typeof import('./src/default/components/HeadTags.astro').default;
+  const dialog: typeof import('@tutorialkit-rb/react/dialog').default;
+
+  export { topBar as TopBar, dialog as Dialog, headTags as HeadTags };
+}
+
+declare const __ENTERPRISE__: boolean;
+declare const __WC_CONFIG__: WebContainerConfig | undefined;

package/dist/default/layouts/Layout.astro

@@ -0,0 +1,98 @@
+---
+import { HeadTags } from 'tutorialkit:override-components';
+import { ViewTransitions } from 'astro:transitions';
+import type { MetaTagsConfig } from '@tutorialkit-rb/types';
+import MetaTags from '../components/MetaTags.astro';
+import { readPublicAsset } from '../utils/publicAsset';
+
+interface Props {
+  title: string;
+  meta?: MetaTagsConfig;
+}
+const { title, meta } = Astro.props;
+const faviconUrl = readPublicAsset('favicon.svg');
+const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).toString() : null;
+---
+
+<!doctype html>
+<html lang="en" transition:animate="none" class="h-full overflow-hidden">
+  <head>
+    <HeadTags>
+      <title slot="title">{meta?.title || title}</title>
+
+      <Fragment slot="links">
+        {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+        {faviconUrl ? <link rel="icon" type="image/svg+xml" href={faviconUrl} /> : null}
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+          rel="stylesheet"
+        />
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet" />
+      </Fragment>
+
+      <MetaTags slot="meta" meta={meta} />
+    </HeadTags>
+    <ViewTransitions />
+    <script is:inline>
+      setTutorialKitTheme();
+
+      function setTutorialKitTheme() {
+        let theme = localStorage.getItem('tk_theme');
+
+        if (!theme) {
+          theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+
+        document.querySelector('html')?.setAttribute('data-theme', theme);
+      }
+    </script>
+    <script>
+      import { swapFunctions as builtInSwap } from 'astro:transitions/client';
+
+      declare global {
+        function setTutorialKitTheme(): void;
+      }
+
+      document.addEventListener('astro:before-swap', (event) => {
+        event.swap = () => {
+          const { newDocument } = event;
+
+          builtInSwap.deselectScripts(newDocument);
+          builtInSwap.swapRootAttributes(newDocument);
+
+          setTutorialKitTheme();
+
+          /**
+           * Keep the dynamically injected style sheet from Codemirror on all transitions.
+           */
+          const codemirrorStyles = document.head.querySelector('style[data-astro-transition-persist="codemirror"]');
+
+          builtInSwap.swapHeadElements(newDocument);
+
+          if (codemirrorStyles) {
+            document.head.insertAdjacentElement('afterbegin', codemirrorStyles);
+          }
+
+          // only swap the main area of the page so we keep the webcontainer iframe intact
+          const newMain = newDocument.querySelector('main[data-swap-root]');
+          const oldMain = document.querySelector('main[data-swap-root]');
+
+          if (newMain && oldMain) {
+            builtInSwap.swapBodyElement(newMain, oldMain);
+
+            // delete extraneous route announcer
+            document.querySelector('.astro-route-announcer')?.remove();
+          } else {
+            // fallback to built-in body swap semantics
+            builtInSwap.swapBodyElement(newDocument.body, document.body);
+          }
+        };
+      });
+    </script>
+  </head>
+  <body class="h-full text-black relative overflow-hidden">
+    <slot />
+  </body>
+</html>

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

@@ -0,0 +1,39 @@
+---
+import type { InferGetStaticPropsType } from 'astro';
+import TopBarWrapper from '../components/TopBarWrapper.astro';
+import MainContainer from '../components/MainContainer.astro';
+import PageLoadingIndicator from '../components/PageLoadingIndicator.astro';
+import Layout from '../layouts/Layout.astro';
+import '../styles/base.css';
+import '@tutorialkit/custom.css';
+import { generateStaticRoutes } from '../utils/routes';
+
+export async function getStaticPaths() {
+  return generateStaticRoutes();
+}
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { lesson, logoLink, navList, title } = Astro.props as Props;
+const meta = lesson.data?.meta ?? {};
+
+// use lesson's default title and a default description for SEO metadata
+meta.title ??= title;
+meta.description ??= 'A TutorialKit interactive lesson';
+---
+
+<Layout title={title} meta={meta}>
+  <PageLoadingIndicator />
+
+  <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} />
+  </main>
+</Layout>

package/dist/default/pages/index.astro

@@ -0,0 +1,25 @@
+---
+import MetaTags from '../components/MetaTags.astro';
+import { getTutorial } from '../utils/content';
+import { joinPaths } from '../utils/url';
+
+const tutorial = await getTutorial();
+
+const lesson = tutorial.lessons[0];
+const part = lesson.part && tutorial.parts[lesson.part.id];
+const chapter = lesson.chapter && part?.chapters[lesson.chapter.id];
+
+const slug = [part?.slug, chapter?.slug, lesson.slug].filter(Boolean).join('/');
+const meta = lesson.data?.meta ?? {};
+
+meta.title ??= [lesson.part?.title, lesson.chapter?.title, lesson.data.title].filter(Boolean).join(' / ');
+meta.description ??= 'A TutorialKit interactive lesson';
+
+const redirect = joinPaths(import.meta.env.BASE_URL, `/${slug}`);
+---
+
+<!doctype html>
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<title>Redirecting to {redirect}</title>
+<MetaTags slot="meta" meta={meta} />
+<meta http-equiv="refresh" content=`0;url=${redirect}` />

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

@@ -0,0 +1,6 @@
+import type { AuthAPI } from '@webcontainer/api';
+import { atom } from 'nanostores';
+
+type AuthStore = ReturnType<AuthAPI['init']> | { status: 'no-auth' };
+
+export const authStore = atom<AuthStore>({ status: 'no-auth' });