feat: mobile support

packages/astro/src/default/components/MainContainer.astro

@@ -0,0 +1,80 @@
+---
+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/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 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 border-l 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>

packages/astro/src/default/components/MobileContentToggle.astro

@@ -0,0 +1,50 @@
+---
+
+---
+
+<div class="h-12 sm:hidden"></div>
+<view-toggle
+  class="fixed sm:hidden h-12 bottom-0 w-full 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 aria-hidden="true">Tutorial</button>
+  <button aria-pressed="true" 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 aria-hidden="true">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 NodeListOf<HTMLButtonElement>;
+
+      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>

packages/astro/src/default/components/ResizablePanel.astro

@@ -8,11 +8,25 @@ interface Props {
   pos?: string;
   min?: string;
   max?: string;
-  priority?: 'min' | 'max';
-  classList?: string;
+  class?: string;
+  sidePanelClass?: string;
 }
 
-let { id, type = 'horizontal', min = '0%', pos = '50%', max = '100%', priority = 'min', classList } = Astro.props;
+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');
@@ -23,18 +37,16 @@ if (!hasSidePanel) {
   min = '100%';
   max = '100%';
 }
+
+const panelClass = `overflow-hidden ${type === 'horizontal' ? 'h-full' : ''}`;
 ---
 
-<resizable-panel
-  class={classList ?? ''}
-  data-id={id}
-  data-type={type}
-  data-pos={pos}
-  data-min={min}
-  data-priority={priority}
-  data-max={max}
->
-  <div class=`container max-w-full ${type}` style=`--pos: ${pos}`>
+<resizable-panel class={className} data-id={id} data-type={type} data-pos={pos} data-min={min} data-max={max}>
+  <div
+    data-id="container"
+    class=`sm:grid relative w-full h-full max-w-full ${type === 'horizontal' ? 'sm:grid-cols-[var(--pos)_1fr]' : 'sm:grid-rows-[var(--pos)_1fr]'}`
+    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) {
@@ -44,36 +56,38 @@ if (!hasSidePanel) {
 
       const sessionStorageKey = `tk_resizable_panel_${id}`;
 
-      const $container = document.querySelector(`resizable-panel[data-id="${id}"] > .container`);
+      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="panel">
+    <div class={panelClass}>
       <slot name="a" />
     </div>
     {
       hasSidePanel && (
         <>
-          <div class="panel">
+          <div class={`${panelClass} ${sidePanelClass}`}>
             <slot name="b" />
           </div>
-          <div class="divider" />
+          <div
+            data-id="divider"
+            class={`absolute z-90 transition-colors hover:bg-gray-500/13 ${type === 'horizontal' ? 'w-0 h-full left-[var(--pos)] cursor-ew-resize p-0 px-1.5 -translate-x-1/2' : 'w-full h-0 top-[var(--pos)] cursor-ns-resize p-0 py-2 -translate-y-1/2'}`}
+          />
         </>
       )
     }
   </div>
 </resizable-panel>
 
 <script>
-  import type { Priority, Type } from './ResizablePanel.astro';
+  import type { Type, IResizablePanel } from './ResizablePanel.astro';
 
-  class ResizablePanel extends HTMLElement {
+  class ResizablePanel extends HTMLElement implements IResizablePanel {
     readonly #id = this.dataset.id as string;
     readonly #type = this.dataset.type as Type;
-    readonly #priority = this.dataset.min as Priority;
     readonly #min = this.dataset.min as string;
     readonly #max = this.dataset.max as string;
 
@@ -88,8 +102,8 @@ if (!hasSidePanel) {
     constructor() {
       super();
 
-      this.#container = this.querySelector(':scope > .container') as HTMLElement;
-      this.#divider = this.#container.querySelector(':scope > .divider') as HTMLElement | undefined;
+      this.#container = this.querySelector(':scope > [data-id="container"]') as HTMLElement;
+      this.#divider = this.#container.querySelector(':scope > [data-id="divider"]') as HTMLElement | undefined;
 
       this.#width = this.#container.clientWidth;
       this.#height = this.#container.clientHeight;
@@ -111,6 +125,18 @@ if (!hasSidePanel) {
       }
     }
 
+    mainPanel(): HTMLElement {
+      return this.#container.children[1] as HTMLElement;
+    }
+
+    sidePanel(): HTMLElement | undefined {
+      return this.#container.children[2] as HTMLElement | undefined;
+    }
+
+    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 });
@@ -179,7 +205,6 @@ if (!hasSidePanel) {
     }
 
     #setPosition(pos: string) {
-      const priority = this.#priority;
       const size = this.#type === 'horizontal' ? this.#width : this.#height;
 
       let minPx = parseFloat(this.#min);
@@ -198,7 +223,7 @@ if (!hasSidePanel) {
         maxPx += size;
       }
 
-      posPx = priority === 'min' ? Math.max(minPx, Math.min(maxPx, posPx)) : Math.min(maxPx, Math.max(minPx, posPx));
+      posPx = Math.max(minPx, Math.min(maxPx, posPx));
 
       this.#pos = `${(100 * posPx) / size}%`;
 
@@ -208,89 +233,3 @@ if (!hasSidePanel) {
 
   customElements.define('resizable-panel', ResizablePanel);
 </script>
-
-<style>
-  .container {
-    --divider-thickness: var(--thickness, 10px);
-    --divider-after-size: 10px;
-
-    display: grid;
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .container .panel {
-    overflow: hidden;
-  }
-
-  .container > .divider:hover {
-    background-color: #8882;
-  }
-
-  .container.horizontal > .panel {
-    height: 100%;
-  }
-
-  .container.vertical {
-    grid-template-rows: var(--pos) 1fr;
-  }
-
-  .container.horizontal {
-    grid-template-columns: var(--pos) 1fr;
-  }
-
-  .divider {
-    position: absolute;
-    z-index: 999;
-  }
-
-  .divider::after {
-    content: '';
-    position: absolute;
-    background-color: transparent;
-    transition: background-color 0.2s ease;
-  }
-
-  .horizontal > .divider {
-    width: 0;
-    height: 100%;
-    left: var(--pos);
-    cursor: ew-resize;
-    padding: 0 calc(0.5 * var(--divider-thickness));
-    transform: translate(calc(-0.5 * var(--divider-thickness)), 0);
-  }
-
-  .vertical > .divider {
-    width: 100%;
-    height: 0;
-    top: var(--pos);
-    cursor: ns-resize;
-    padding: calc(0.5 * var(--divider-thickness)) 0;
-    transform: translate(0, calc(-0.5 * var(--divider-thickness)));
-  }
-
-  .horizontal > .divider::after {
-    left: 50%;
-    top: 0;
-    width: 0px;
-    height: 100%;
-  }
-
-  .vertical > .divider::after {
-    top: 50%;
-    left: 0;
-    width: 100%;
-    height: 1px;
-  }
-
-  .horizontal > .divider:hover:after {
-    left: calc(50% - var(--divider-after-size) / 2);
-    width: var(--divider-after-size);
-  }
-
-  .vertical > .divider:hover:after {
-    top: calc(50% - var(--divider-after-size) / 2);
-    height: var(--divider-after-size);
-  }
-</style>