jupyter-book · stevejpurves · Jun 19, 2023 · Jun 19, 2023 · Jun 19, 2023 · Jun 19, 2023
diff --git a/apps/demo-react/public/index.html b/apps/demo-react/public/index.html
@@ -3,7 +3,6 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="/thebe_react_128x128.svg" type="image/svg+xml" />
-    <script src="/lite/thebe-lite.min.js"></script>
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"

diff --git a/apps/demo-react/src/App.tsx b/apps/demo-react/src/App.tsx
@@ -4,18 +4,18 @@ import { NavLink, Outlet } from 'react-router-dom';
 import './App.css';
 import { Connect } from './Connect';
 import { ServerMode, ServerModeType } from './ServerMode';
+import { ThebeStatusTray } from './ThebeStatusTray';
 
 function App() {
   const [mode, setMode] = useState<ServerModeType>('local');
 
   const options = useMemo(
     () => ({
-      useBinder: false,
       kernelOptions: {
         name: 'Python 3',
       },
-      savedSessionOptions: {
-        enabled: false,
+      binderOptions: {
+        repo: 'curvenote/binder-base',
       },
     }),
     [],
@@ -45,11 +45,12 @@ function App() {
         <ThebeServerProvider
           connect={false}
           options={options}
-          useBinder={false}
+          useBinder={mode === 'binder'}
           useJupyterLite={mode === 'lite'}
         >
           <ServerMode mode={mode} setMode={setMode} />
           <Connect />
+          <ThebeStatusTray />
           <Outlet />
         </ThebeServerProvider>
       </ThebeBundleLoaderProvider>

diff --git a/apps/demo-react/src/ServerMode.tsx b/apps/demo-react/src/ServerMode.tsx
@@ -1,7 +1,7 @@
 import liteIcon from './lite.png';
 import serverIcon from './server.svg';
 
-export type ServerModeType = 'local' | 'lite';
+export type ServerModeType = 'local' | 'lite' | 'binder';
 
 export function ServerMode({
   mode,
@@ -12,33 +12,68 @@ export function ServerMode({
 }) {
   return (
     <div className="flex justify-center mb-6">
-      <div className="flex items-center space-x-2">
-        <div>
-          <img
-            className={`w-[40px] ${mode === 'local' ? 'animate-pulse' : ''}`}
-            src={serverIcon}
-            alt="Local Server"
-          />
-        </div>
-        <div>
-          <label className="relative inline-flex items-center cursor-pointer">
+      <fieldset>
+        <legend>Choose connection type:</legend>
+        <div className="my-2 flex space-x-3">
+          <div className="flex flex-row cursor-pointer">
+            <input
+              className="cursor-pointer"
+              type="radio"
+              id="local"
+              name="server"
+              value="local"
+              checked={mode === 'local'}
+              onChange={() => setMode('local')}
+            />
+            <label htmlFor="local" className="ml-2 cursor-pointer">
+              <img
+                className={`w-[40px] inline ${mode === 'local' ? 'animate-pulse' : ''}`}
+                src={serverIcon}
+                alt="Local Server"
+              />{' '}
+              Local
+            </label>
+          </div>
+          <div className="flex flex-row cursor-pointer">
             <input
-              type="checkbox"
+              className="cursor-pointer"
+              type="radio"
+              id="lite"
+              name="server"
+              value="lite"
               checked={mode === 'lite'}
-              className="sr-only peer"
-              onChange={(e) => setMode(e.target.checked ? 'lite' : 'local')}
+              onChange={() => setMode('lite')}
             />
-            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-          </label>
-        </div>
-        <div>
-          <img
-            className={`w-[40px] ${mode === 'lite' ? 'animate-pulse' : ''}`}
-            src={liteIcon}
-            alt="Jupyter Lite"
-          />
+            <label htmlFor="lite" className="ml-2 cursor-pointer">
+              <img
+                className={`w-[40px] inline ${mode === 'lite' ? 'animate-pulse' : ''}`}
+                src={liteIcon}
+                alt="Jupyter Lite"
+              />{' '}
+              Lite
+            </label>
+          </div>
+          <div className="flex flex-row cursor-pointer">
+            <input
+              className="cursor-pointer"
+              type="radio"
+              id="binder"
+              name="server"
+              value="binder"
+              checked={mode === 'binder'}
+              onChange={() => setMode('binder')}
+            />
+            <label htmlFor="binder" className="ml-2 cursor-pointer">
+              <img
+                className={`w-[40px] inline ${mode === 'local' ? 'animate-pulse' : ''}`}
+                src={serverIcon}
+                alt="Local Server"
+              />{' '}
+              Binder
+            </label>
+          </div>
         </div>
-      </div>
+      </fieldset>
     </div>
   );
 }
diff --git a/apps/demo-react/src/ThebeStatusTray.tsx b/apps/demo-react/src/ThebeStatusTray.tsx
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+import { ThebeEventData, ThebeEventType } from 'thebe-core';
+import { useThebeServer } from 'thebe-react';
+
+export function ThebeStatusTray() {
+  const { connecting, error, events } = useThebeServer();
+  const [subscribed, setSubscribed] = useState<boolean>(false);
+  const [status, setStatus] = useState<ThebeEventData | null>(null);
+
+  useEffect(() => {
+    if (!events || subscribed) return;
+    setSubscribed(true);
+    events?.on('status' as ThebeEventType, (event: any, data: ThebeEventData) => {
+      console.log('EVENTS', 'status' as ThebeEventType, event, data);
+      setStatus(data);
+    });
+  }, [events, subscribed]);
+
+  return (
+    <div className="mono not-prose max-w-[80%] m-auto">
+      {connecting && <div className="text-orange-500">connecting to server...</div>}
+      {error && <div className="text-red-500">connection error: {error}</div>}
+      {status && (
+        <details className="mono text-center flex justify-center">
+          <summary>last status: {`[${status.subject}] ${status.status}`}</summary>
+          <div className="text-xs whitespace-pre-wrap">{status.message}</div>
+        </details>
+      )}
+      <div></div>
+    </div>
+  );
+}
diff --git a/packages/core/src/options.ts b/packages/core/src/options.ts
@@ -12,8 +12,8 @@ import { RepoProvider } from './types';
 
 export function makeBinderOptions(opts: BinderOptions) {
   return {
-    repo: 'binder-examples/requirements',
-    ref: 'master',
+    repo: 'executablebooks/thebe-binder-base',
+    ref: 'HEAD',
     binderUrl: 'https://mybinder.org',
     repoProvider: RepoProvider.github,
     ...opts,

diff --git a/packages/core/tests/config.spec.ts b/packages/core/tests/config.spec.ts
@@ -15,8 +15,8 @@ describe('config', () => {
     });
     test('binder', () => {
       expect(config.binder).toEqual({
-        repo: 'binder-examples/requirements',
-        ref: 'master',
+        repo: 'executablebooks/thebe-binder-base',
+        ref: 'HEAD',
         binderUrl: 'https://mybinder.org',
         repoProvider: RepoProvider.github,
       });

diff --git a/packages/core/tests/connect.binder.spec.ts b/packages/core/tests/connect.binder.spec.ts
@@ -8,37 +8,37 @@ describe('connect.binder', () => {
   describe('urls', () => {
     test('git', () => {
       expect(makeGitUrl(makeBinderOptions({ binderUrl, repoProvider: RepoProvider.git }))).toEqual(
-        'https://binder.curvenote.dev/build/git/binder-examples%2Frequirements/master',
+        'https://binder.curvenote.dev/build/git/executablebooks%2Fthebe-binder-base/HEAD',
       );
       expect(
         makeGitUrl(makeBinderOptions({ binderUrl, repoProvider: RepoProvider.git, ref: 'main' })),
-      ).toEqual('https://binder.curvenote.dev/build/git/binder-examples%2Frequirements/main');
+      ).toEqual('https://binder.curvenote.dev/build/git/executablebooks%2Fthebe-binder-base/main');
       expect(() =>
         makeGitUrl(makeBinderOptions({ binderUrl, repoProvider: RepoProvider.github })),
       ).toThrow();
     });
     test('github', () => {
       expect(
         makeGitHubUrl(makeBinderOptions({ binderUrl, repoProvider: RepoProvider.github })),
-      ).toEqual('https://binder.curvenote.dev/build/gh/binder-examples/requirements/master');
+      ).toEqual('https://binder.curvenote.dev/build/gh/executablebooks/thebe-binder-base/HEAD');
       expect(
         makeGitHubUrl(
           makeBinderOptions({ binderUrl, repoProvider: RepoProvider.github, ref: 'main' }),
         ),
-      ).toEqual('https://binder.curvenote.dev/build/gh/binder-examples/requirements/main');
+      ).toEqual('https://binder.curvenote.dev/build/gh/executablebooks/thebe-binder-base/main');
       expect(() =>
         makeGitHubUrl(makeBinderOptions({ binderUrl, repoProvider: RepoProvider.git })),
       ).toThrow();
     });
     test('gitlab', () => {
       expect(
         makeGitLabUrl(makeBinderOptions({ binderUrl, repoProvider: RepoProvider.gitlab })),
-      ).toEqual('https://binder.curvenote.dev/build/gl/binder-examples%2Frequirements/master');
+      ).toEqual('https://binder.curvenote.dev/build/gl/executablebooks%2Fthebe-binder-base/HEAD');
       expect(
         makeGitLabUrl(
           makeBinderOptions({ binderUrl, repoProvider: RepoProvider.gitlab, ref: 'main' }),
         ),
-      ).toEqual('https://binder.curvenote.dev/build/gl/binder-examples%2Frequirements/main');
+      ).toEqual('https://binder.curvenote.dev/build/gl/executablebooks%2Fthebe-binder-base/main');
       expect(() =>
         makeGitLabUrl(makeBinderOptions({ binderUrl, repoProvider: RepoProvider.git })),
       ).toThrow();

diff --git a/packages/core/tests/options.spec.ts b/packages/core/tests/options.spec.ts
@@ -10,8 +10,8 @@ describe('options', () => {
   describe('binder', () => {
     test('defaults', () => {
       expect(makeBinderOptions({})).toEqual({
-        repo: 'binder-examples/requirements',
-        ref: 'master',
+        repo: 'executablebooks/thebe-binder-base',
+        ref: 'HEAD',
         binderUrl: 'https://mybinder.org',
         repoProvider: RepoProvider.github,
       });