@tutorialkit-rb/astro 1.5.2-rb.0.1.0

package/README.md

@@ -0,0 +1,14 @@
+# @tutorialkit/astro
+
+This **[Astro integration][astro-integration]** adds [TutorialKit](https://tutorialkit.dev/) to your project so that you can use TutorialKit's tutorial format for your astro content.
+
+This integration adds routes to serve your tutorial. It uses `@tutorialkit/react` for the dynamic part of the experience.
+
+## License
+
+MIT
+
+Copyright (c) 2023–present [StackBlitz][stackblitz]
+
+[stackblitz]: https://stackblitz.com/
+[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/

package/dist/default/components/DownloadButton.tsx

@@ -0,0 +1,44 @@
+import { tutorialStore, webcontainer as webcontainerPromise } from './webcontainer.js';
+
+export function DownloadButton() {
+  return (
+    <button
+      title="Download lesson as zip-file"
+      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"
+      onClick={onClick}
+    >
+      <div className="i-ph-download-simple" />
+    </button>
+  );
+}
+
+async function onClick() {
+  const lesson = tutorialStore.lesson;
+
+  if (!lesson) {
+    throw new Error('Missing lesson');
+  }
+
+  const webcontainer = await webcontainerPromise;
+  const data = await webcontainer.export('/home/tutorial', { format: 'zip', excludes: ['node_modules'] });
+
+  let filename =
+    typeof lesson.data.downloadAsZip === 'object'
+      ? lesson.data.downloadAsZip.filename
+      : [lesson.part?.id, lesson.chapter?.id, lesson.id].filter(Boolean).join('-');
+
+  if (!filename.endsWith('.zip')) {
+    filename += '.zip';
+  }
+
+  const link = document.createElement('a');
+  link.style.display = 'none';
+  link.download = filename;
+  link.href = URL.createObjectURL(new Blob([data], { type: 'application/zip' }));
+
+  document.body.appendChild(link);
+  link.click();
+
+  document.body.removeChild(link);
+  URL.revokeObjectURL(link.href);
+}

package/dist/default/components/HeadTags.astro

@@ -0,0 +1,3 @@
+<slot name="title" />
+<slot name="links" />
+<slot name="meta" />

package/dist/default/components/LoginButton.tsx

@@ -0,0 +1,55 @@
+import { useStore } from '@nanostores/react';
+import { Button } from '@tutorialkit-rb/react';
+import { useEffect, useRef, useState } from 'react';
+import { authStore } from '../stores/auth-store';
+import { login, logout } from './webcontainer';
+
+export function LoginButton() {
+  // using any because @types/node are included in that context although they shouldn't
+  const timeoutId = useRef<any>(0);
+  const authStatus = useStore(authStore);
+
+  // using an indirect state so that there's no hydratation errors
+  const [showLogin, setShowLogin] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+
+  function onClick() {
+    if (showLogin) {
+      setDisabled(true);
+      clearTimeout(timeoutId.current);
+
+      /**
+       * Re-enable the button in case the login failed because the popup got stuck in an error or
+       * was closed before the authorization step was completed.
+       */
+      timeoutId.current = setTimeout(() => {
+        setDisabled(false);
+      }, 1000);
+
+      login().then(() => {
+        authStore.set({ status: 'authorized' });
+      });
+    } else {
+      logout();
+    }
+  }
+
+  useEffect(() => {
+    setShowLogin(authStatus.status !== 'authorized');
+
+    // if authentication failed we invite the user to try again
+    setDisabled((disabled) => {
+      if (disabled && authStatus.status === 'auth-failed') {
+        return false;
+      }
+
+      return disabled;
+    });
+  }, [authStatus.status]);
+
+  return (
+    <Button className="ml-2" variant={showLogin ? 'primary' : 'secondary'} disabled={disabled} onClick={onClick}>
+      {showLogin ? 'Login' : 'Logout'}
+    </Button>
+  );
+}

package/dist/default/components/Logo.astro

@@ -0,0 +1,30 @@
+---
+import { LOGO_EXTENSIONS } from '../utils/constants';
+import { readLogoFile } from '../utils/logo';
+
+interface Props {
+  logoLink: string;
+}
+
+const { logoLink } = Astro.props;
+
+const logo = readLogoFile('logo');
+const logoDark = readLogoFile('logo-dark') ?? logo;
+
+if (!logo) {
+  console.warn(
+    [
+      `No logo found in public/. Supported filenames are: logo.(${LOGO_EXTENSIONS.join('|')}). `,
+      `You can overwrite the logo for dark mode by providing a logo-dark.(${LOGO_EXTENSIONS.join('|')}).`,
+    ].join(''),
+  );
+}
+---
+
+<a
+  href={logoLink}
+  class="flex items-center text-tk-elements-topBar-logo-color hover:text-tk-elements-topBar-logo-colorHover"
+>
+  {logo && <img class="h-5 w-auto dark:hidden" src={logo} />}
+  {logo && <img class="h-5 w-auto hidden dark:inline-block" src={logoDark} />}
+</a>

package/dist/default/components/MainContainer.astro

@@ -0,0 +1,86 @@
+---
+import { NavWrapper as Nav } from './NavWrapper';
+import { WorkspacePanelWrapper as WorkspacePanel } from './WorkspacePanelWrapper';
+import TutorialContent from './TutorialContent.astro';
+import ResizablePanel from './ResizablePanel.astro';
+import MobileContentToggle from './MobileContentToggle.astro';
+import { RESIZABLE_PANELS } from '../utils/constants';
+import type { Lesson, NavList } from '@tutorialkit-rb/types';
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
+import { hasWorkspace } from '../utils/workspace';
+
+interface Props {
+  lesson: Lesson<AstroComponentFactory>;
+  navList: NavList;
+}
+
+const { lesson, navList } = Astro.props;
+
+const showWorkspacePanel = hasWorkspace(lesson);
+---
+
+<ResizablePanel
+  class="h-full overflow-hidden"
+  id={RESIZABLE_PANELS.Main}
+  type="horizontal"
+  min="30%"
+  pos="40%"
+  max="60%"
+>
+  <div
+    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} />
+    <TutorialContent lesson={lesson} />
+  </div>
+  <div
+    class="h-full sm:border-l transition-theme border-tk-elements-app-borderColor"
+    slot={showWorkspacePanel ? 'b' : 'hide'}
+  >
+    <WorkspacePanel lesson={lesson} client:load transition:persist />
+  </div>
+</ResizablePanel>
+<MobileContentToggle />
+<script>
+  import { viewStore } from '../stores/view-store';
+  import { RESIZABLE_PANELS } from '../utils/constants';
+  import type { IResizablePanel } from './ResizablePanel.astro';
+
+  const DEFAULT_PANEL_CLASS_LIST = ['sm:transition-none', 'sm:translate-x-0', 'absolute', 'inset-0', 'sm:static'];
+
+  let subscriber: (() => void) | undefined;
+
+  document.addEventListener('astro:page-load', () => {
+    subscriber?.();
+
+    const resizablePanel = document.querySelector(`[data-id=${RESIZABLE_PANELS.Main}]`) as unknown as IResizablePanel;
+    const contentPanel = resizablePanel.mainPanel();
+    const editorPanel = resizablePanel.sidePanel();
+    const divider = resizablePanel.divider();
+
+    if (!editorPanel) {
+      subscriber = undefined;
+      return;
+    }
+
+    contentPanel.classList.add(...DEFAULT_PANEL_CLASS_LIST);
+    editorPanel.classList.add(...DEFAULT_PANEL_CLASS_LIST);
+    divider?.classList.add('hidden', 'sm:block');
+
+    subscriber = viewStore.subscribe((value) => {
+      if (value === 'content') {
+        contentPanel.classList.remove('-translate-x-full');
+        editorPanel.classList.add('translate-x-full');
+      } else {
+        contentPanel.classList.add('-translate-x-full');
+        editorPanel.classList.remove('translate-x-full');
+      }
+    });
+
+    requestAnimationFrame(() => {
+      contentPanel.classList.add('transition-transform');
+      editorPanel.classList.add('transition-transform');
+    });
+  });
+</script>

package/dist/default/components/MetaTags.astro

@@ -0,0 +1,44 @@
+---
+import type { MetaTagsConfig } from '@tutorialkit-rb/types';
+import { readLogoFile } from '../utils/logo';
+import { readPublicAsset } from '../utils/publicAsset';
+
+interface Props {
+  meta?: MetaTagsConfig;
+}
+
+const DEFAULT_OG_IMAGE = 'https://tutorialkit.dev/tutorialkit-opengraph.png';
+
+const { meta = {} } = Astro.props;
+let imageUrl = meta.image;
+
+// Resolve relative paths to /public folder
+if (imageUrl?.startsWith('/') || imageUrl?.startsWith('.')) {
+  imageUrl = readPublicAsset(imageUrl, true);
+
+  if (!imageUrl) {
+    console.warn(`\nImage ${meta.image} not found in "/public" folder`);
+  }
+}
+
+imageUrl ??= DEFAULT_OG_IMAGE;
+
+if (imageUrl?.endsWith('.svg')) {
+  console.warn(
+    `\nUsing a SVG open graph image "${imageUrl}". This is not supported by most social platforms. You should rather set "meta.image" to a raster image (PNG, WEBP).`,
+  );
+}
+---
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width" />
+<meta name="generator" content={Astro.generator} />
+{meta.description ? <meta name="description" content={meta.description} /> : null}
+{/* open graph */}
+{meta.title ? <meta name="og:title" content={meta.title} /> : null}
+{meta.description ? <meta name="og:description" content={meta.description} /> : null}
+{imageUrl ? <meta name="og:image" content={imageUrl} /> : null}
+{/* twitter */}
+{meta.title ? <meta name="twitter:title" content={meta.title} /> : null}
+{meta.description ? <meta name="twitter:description" content={meta.description} /> : null}
+{imageUrl ? <meta name="twitter:image" content={imageUrl} /> : null}

package/dist/default/components/MobileContentToggle.astro

@@ -0,0 +1,44 @@
+<div class="h-12 sm:hidden"></div>
+<view-toggle
+  class="fixed sm:hidden h-12 bottom-0 w-full transition-theme bg-tk-elements-app-backgroundColor border-t border-tk-elements-app-borderColor flex justify-center items-center z-60 text-tk-elements-app-textColor"
+>
+  <button>Tutorial</button>
+  <button class="rounded-full w-8 h-4 p-0.5 bg-gray-4 dark:bg-gray-6 mx-2 relative">
+    <span class="inline-block transition-all absolute top-0.5 left-0.5 rounded-full bg-white dark:bg-gray-2 w-3 h-3"
+    ></span>
+  </button>
+  <button>Editor</button>
+</view-toggle>
+<script>
+  import { viewStore, type View } from '../stores/view-store';
+
+  class ViewToggle extends HTMLElement {
+    constructor() {
+      super();
+
+      const [tutorialBtn, toggleButton, editorButton] = this.querySelectorAll(':scope > button' as 'button');
+
+      const toggle = toggleButton.querySelector('span')!;
+
+      tutorialBtn.onclick = () => setView('content');
+      editorButton.onclick = () => setView('editor');
+      toggleButton.onclick = () => setView(viewStore.get() === 'content' ? 'editor' : 'content');
+
+      setView(viewStore.get());
+
+      function setView(view: View) {
+        viewStore.set(view);
+
+        if (view === 'editor') {
+          toggle.classList.remove('left-0.5');
+          toggle.classList.add('left-[calc(100%-0.75rem-0.125rem)]');
+        } else {
+          toggle.classList.add('left-0.5');
+          toggle.classList.remove('left-[calc(100%-0.75rem-0.125rem)]');
+        }
+      }
+    }
+  }
+
+  customElements.define('view-toggle', ViewToggle);
+</script>

package/dist/default/components/NavCard.astro

@@ -0,0 +1,23 @@
+---
+import type { LessonLink } from '@tutorialkit-rb/types';
+
+interface Props {
+  lesson: LessonLink;
+  type: 'next' | 'prev';
+}
+
+const { lesson, type } = Astro.props;
+---
+
+<a
+  class:list={[
+    'content-nav-card group flex flex-col transition-theme bg-tk-elements-navCard-backgroundColor hover:bg-tk-elements-navCard-backgroundColorHover flex-1 p-4 border border-tk-elements-navCard-borderColor hover:border-tk-elements-navCard-borderColorHover text-tk-elements-navCard-textColor hover:text-tk-elements-navCard-textColorHover rounded-md cursor-pointer',
+    { 'text-right items-end': type === 'next' },
+  ]}
+  href={lesson.href}
+>
+  <span
+    class=`icon text-tk-elements-navCard-iconColor ${type === 'prev' ? 'i-ph-arrow-left' : 'i-ph-arrow-right' } pointer-events-none h-7 w-7 mb-2 group-hover:text-tk-elements-navCard-iconColorHover`
+  ></span>
+  <span class="line-clamp-2">{lesson.title}</span>
+</a>

package/dist/default/components/NavWrapper.tsx

@@ -0,0 +1,11 @@
+import { Nav } from '@tutorialkit-rb/react';
+import type { Lesson, NavList } from '@tutorialkit-rb/types';
+
+interface Props {
+  lesson: Lesson;
+  navList: NavList;
+}
+
+export function NavWrapper(props: Props) {
+  return <Nav {...props} />;
+}

package/dist/default/components/OpenInStackblitzLink.tsx

@@ -0,0 +1,37 @@
+import StackBlitzSDK from '@stackblitz/sdk';
+import { tutorialStore } from './webcontainer.js';
+
+export function OpenInStackblitzLink() {
+  return (
+    <button
+      title="Open in StackBlitz"
+      className="flex items-center font-size-3.5 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"
+      onClick={onClick}
+    >
+      <svg viewBox="0 0 28 28" aria-hidden="true" height="24" width="24">
+        <path
+          fill="currentColor"
+          d="M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z"
+        ></path>
+      </svg>
+    </button>
+  );
+}
+
+function onClick() {
+  const lesson = tutorialStore.lesson;
+
+  if (!lesson) {
+    throw new Error('Missing lesson');
+  }
+
+  const snapshot = tutorialStore.takeSnapshot();
+  const options = typeof lesson.data.openInStackBlitz === 'object' ? lesson.data.openInStackBlitz : {};
+
+  StackBlitzSDK.openProject({
+    title: options.projectTitle || 'Project generated by TutorialKit',
+    description: options.projectDescription,
+    template: options.projectTemplate || 'node',
+    files: snapshot.files,
+  });
+}

package/dist/default/components/PageLoadingIndicator.astro

@@ -0,0 +1,66 @@
+<div
+  data-id="page-loading-progress"
+  class="fixed transition-all top-0 z-90 h-[2px] opacity-100 pointer-events-none bg-tk-elements-pageLoadingIndicator-backgroundColor"
+>
+  <div
+    class="absolute right-0 w-24 h-full shadow-[0px_0px_10px_0px] shadow-tk-elements-pageLoadingIndicator-shadowColor"
+  >
+  </div>
+</div>
+<script>
+  const progressEl = document.querySelector('div[data-id="page-loading-progress"]' as 'div')!;
+  const storageKey = 'tk_plid';
+  const maxDurationWithoutProgressBar = 500;
+
+  let expectedDuration = parseFloat(localStorage.getItem(storageKey) || `${maxDurationWithoutProgressBar}`);
+
+  let intervalId: ReturnType<typeof setInterval> | undefined;
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+  let startTime = Date.now();
+
+  function start() {
+    clearTimeout(timeoutId);
+
+    startTime = Date.now();
+
+    progressEl.style.width = '0%';
+    progressEl.style.opacity = '0';
+
+    intervalId = setInterval(() => {
+      const elapsedTime = Date.now() - startTime;
+
+      // we're past the 500ms mark and we're about to make the bar visible, extend the expectedDuration a bit
+      if (elapsedTime > maxDurationWithoutProgressBar && expectedDuration <= maxDurationWithoutProgressBar) {
+        // this a bit arbitrary to make it look "good"
+        expectedDuration += 2 * maxDurationWithoutProgressBar;
+      }
+
+      // if expected duration is less we don't show anything
+      if (expectedDuration < maxDurationWithoutProgressBar) {
+        return;
+      }
+
+      progressEl.style.opacity = '1';
+      progressEl.style.width = `${Math.min(elapsedTime / expectedDuration, 1) * 100}%`;
+    }, 100);
+  }
+
+  function done() {
+    clearInterval(intervalId);
+    progressEl.style.width = '100%';
+
+    expectedDuration = Date.now() - startTime;
+    localStorage.setItem(storageKey, expectedDuration.toString());
+
+    timeoutId = setTimeout(() => {
+      progressEl.style.opacity = '0';
+
+      timeoutId = setTimeout(() => {
+        progressEl.style.width = '0%';
+      }, 100);
+    }, 200);
+  }
+
+  document.addEventListener('astro:before-preparation', start);
+  document.addEventListener('astro:after-swap', done);
+</script>