Merge pull request #36 from jokester/reduce-pages

remove /local page
jokester · Apr 12, 2024 · daebd31 · daebd31
2 parents 65f2a80 + 35d0fb9
commit daebd31
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 109 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,6 @@ npm run dev
 /                       site root
 /gist/owner/gist        for gist URLs
 /markdown               for inline markdown or unknown external URL
-/local                  for local file
 /about                  about
 /github/owner/repo/...  TODO: for github repo URLs
 /_player                TODO: a remote-controllable player, with content and progress sync

diff --git a/package-lock.json b/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -22,7 +22,7 @@
     "@cloudflare/workers-types": "4.20240320.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@jokester/ts-commonutil": "^0.5.0",
+    "@jokester/ts-commonutil": "^0.6.0",
     "@mui/icons-material": "^5.15.0",
     "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.0",

diff --git a/web/pages/index.tsx b/web/pages/index.tsx
@@ -50,14 +50,18 @@ function IndexPageContent() {
           </Box>
           <TabPanel value="0">{openTabContent}</TabPanel>
           <TabPanel value="1">
-            <Link href={'/local'}>
-              <Button variant="outlined">Open file</Button>
+            <Link href={'/markdown'}>
+              <Button variant="outlined">Open local file</Button>
             </Link>
           </TabPanel>
-          <TabPanel value="2">
+          <TabPanel value="2" className="space-x-2">
             <Link href={'/markdown'}>
               <Button variant="outlined">Input Text</Button>
             </Link>
+            &nbsp; or
+            <Link href={'/markdown?markdownUrl=example'}>
+              <Button variant="outlined">Load Example Text</Button>
+            </Link>
           </TabPanel>
         </TabContext>
       </div>

diff --git a/web/pages/local.tsx b/web/pages/local.tsx
diff --git a/web/pages/markdown.tsx b/web/pages/markdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { DefaultMeta } from '../src/components/meta/default-meta';
 import { defaultSlideText } from '../src/markdown/markdown-form';
 import { PageContainer, PageHeader } from '../src/layouts';
@@ -11,7 +11,7 @@ import { useRouter } from 'next/router';
 import { SlideBundle } from '../src/core/SlideBundle';
 import { RevealSlidePlayer } from '../src/player/reveal-slide-player';
 import { Button } from '@mui/material';
-import { ClearButton, MarkdownTextarea, StartPlaybackButton } from '../src/markdown/markdown-textarea';
+import { ClearButton, MarkdownTextarea, OpenFileButton, StartPlaybackButton } from '../src/markdown/markdown-textarea';
 import clsx from 'clsx';
 
 const logger = debug('pages:markdown');
@@ -32,21 +32,27 @@ export default function RemoteMarkdownPage() {
       setText(newText);
     }
   };
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const onStartPlayback = () => {
     setPlayback({
       slideText: text,
     });
   };
-  useTextInitialize((initialValue) => {
-    logger('externalText', initialValue);
-    setText(initialValue);
+  useTextInitialize({
+    onFetchedSrc(initialValue) {
+      logger('externalText', initialValue);
+      setText(initialValue);
+    },
+    onLoadExample() {
+      setText(defaultSlideText);
+    },
   });
 
   if (!playback) {
     return (
       <>
-        <DefaultMeta title="Open URL | slides.ihate.work" />
+        <DefaultMeta title="slides.ihate.work" />
         <PageContainer>
           <PageHeader />
           <div className={clsx('flex justify-center my-4 items-center', { ['space-x-12']: text })}>
@@ -57,7 +63,9 @@ export default function RemoteMarkdownPage() {
               </>
             ) : (
               <>
-                Type some markdown text to start , or &nbsp;
+                Type some markdown text to start or &nbsp;
+                <OpenFileButton inputRef={fileInputRef} onInput={(v) => setText(v.slideText)} />
+                &nbsp; or &nbsp;
                 <Button variant="outlined" onClick={() => setText(defaultSlideText)}>
                   Load example slides
                 </Button>
@@ -80,7 +88,7 @@ export default function RemoteMarkdownPage() {
 /**
  * handle `?markdownUrl=...` query
  */
-export function useTextInitialize(onRawFetched: (x: string) => void) {
+function useTextInitialize(callbacks: { onFetchedSrc(text: string): void; onLoadExample(): void }) {
   const router = useRouter();
   useAsyncEffect(
     async (running) => {
@@ -89,30 +97,27 @@ export function useTextInitialize(onRawFetched: (x: string) => void) {
         return;
       }
       const markdownUrl = router.query.markdownUrl as string | undefined;
-      if (!markdownUrl) {
-        return;
-      }
-      if (!isUrl(markdownUrl)) {
-        alert('Invalid URL');
-        return;
-      }
-      const redirect = rewriteUrlToRoute(markdownUrl);
-      if (redirect instanceof Error) {
-        alert(redirect.message);
-        return;
-      }
-      if (redirect) {
-        router.push(redirect);
-        return;
-      }
-      try {
-        const externalAsset = await fetch(markdownUrl).then((res) => res.text());
-        if (running.current) {
-          onRawFetched(externalAsset);
+      if (isUrl(markdownUrl)) {
+        const redirect = rewriteUrlToRoute(markdownUrl);
+        if (redirect instanceof Error) {
+          alert(redirect.message);
+          return;
+        }
+        if (redirect) {
+          router.push(redirect);
+          return;
+        }
+        try {
+          const externalAsset = await fetch(markdownUrl).then((res) => res.text());
+          if (running.current) {
+            callbacks.onFetchedSrc(externalAsset);
+          }
+        } catch (e: unknown) {
+          console.error(e);
+          alert(extractErrorMessage(e));
         }
-      } catch (e: unknown) {
-        console.error(e);
-        alert(extractErrorMessage(e));
+      } else if (markdownUrl === 'example') {
+        callbacks.onLoadExample();
       }
     },
     [router],

diff --git a/web/src/markdown/markdown-textarea.tsx b/web/src/markdown/markdown-textarea.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import { Button } from '@mui/material';
 import { FileOpen, PlayCircle, Clear } from '@mui/icons-material';
-import { ChangeEvent, RefObject, useState } from 'react';
+import { ChangeEvent, MutableRefObject, RefObject, useState } from 'react';
 import { SlideBundle } from '../core/SlideBundle';
 import { PropsOf } from '@emotion/react';
 
@@ -47,7 +47,11 @@ export function useSlideFileInput(inputRef?: RefObject<HTMLInputElement>) {
   } as const;
 }
 
-export function OpenFileButton(props: { className?: string; onInput?(value: SlideBundle): void }) {
+export function OpenFileButton(props: {
+  className?: string;
+  onInput?(value: SlideBundle): void;
+  inputRef?: RefObject<HTMLInputElement>;
+}) {
   const handler = useSlideFileInput();
 
   const onFileChange = (ev: ChangeEvent<HTMLInputElement>) => {
@@ -57,7 +61,13 @@ export function OpenFileButton(props: { className?: string; onInput?(value: Slid
   return (
     <Button component="label" variant="outlined" startIcon={<FileOpen />}>
       Open file
-      <input className="hidden" type="file" onChange={onFileChange} accept=".md,.markdown,.txt,text/*" />
+      <input
+        className="hidden"
+        type="file"
+        ref={props.inputRef}
+        onChange={onFileChange}
+        accept=".md,.markdown,.txt,text/*"
+      />
     </Button>
   );
 }

diff --git a/web/src/player/reveal-slide-player.tsx b/web/src/player/reveal-slide-player.tsx
@@ -90,15 +90,11 @@ function _RevealSlidePlayer(props: PropsWithChildren<MarkdownSlideProps>, ref: R
   useImperativeHandle(ref, () => handle, []);
   useDoubleClickEsc(props);
 
-  useAsyncEffect(
-    async (running, released) => {
-      await handle.init();
-      await released;
-      await handle.destroy();
-    },
-    [],
-    true,
-  );
+  useAsyncEffect(async (running, released) => {
+    await handle.init();
+    await released;
+    await handle.destroy();
+  }, []);
   const options = {
     'data-separator': '^\n---\n$',
     'data-separator-vertical': '^\n--\n$',

diff --git a/web/src/player/use-reveal-preload.ts b/web/src/player/use-reveal-preload.ts
@@ -1,11 +1,7 @@
 import { useAsyncEffect } from '@jokester/ts-commonutil/lib/react/hook/use-async-effect';
 
 export function useRevealPreload() {
-  useAsyncEffect(
-    async () => {
-      await import('./reveal-init');
-    },
-    [],
-    true,
-  );
+  useAsyncEffect(async () => {
+    await import('./reveal-init');
+  }, []);
 }