UI optimizations

README.md

@@ -14,8 +14,10 @@ npm run dev
 
 ```
 /                       site root
-/markdown               for inline markdown input
-/gist/username/...      for gist
-/github/owner/repo/...  TODO: for github
-
+/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
 ```

core/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@ihate-work/slides-core",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package.json

@@ -7,18 +7,22 @@
   "description": "https://slides.ihate.work",
   "scripts": {
     "wrangler": "wrangler",
+    "dev": "npm run --workspace=web dev",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "engines": {
     "node": "^18 || ^20"
   },
   "dependencies": {},
   "devDependencies": {
+    "@types/jest": "^29",
     "@types/node": "^20",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "gts": "^5.2.0",
+    "jest": "^29",
+    "ts-jest": "^29",
     "typescript": "^5.4",
     "wrangler": "^3.36.0"
   },

web/jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: 'ts-jest/presets/js-with-ts',
   roots: ['src', 'test'],
-  transformIgnorePatterns: ['<rootDir>/node_modules/.*\\.js', '<rootDir>/build/.*\\.js'],
+  transformIgnorePatterns: ['node_modules/.*\\.js', '<rootDir>/build/.*\\.js'],
   testMatch: ['**/*\\.(spec|test)\\.(ts|js|tsx|jsx)'],
   collectCoverageFrom: ['src/**/*.(ts|tsx)', '!out/', '!build/', '!**/node_modules', '!/coverage'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
@@ -11,11 +11,20 @@ module.exports = {
       '<rootDir>/test/mocks/resolves-to-path.json',
     '\\.(css|less|scss|sass)$': '<rootDir>/test/mocks/resolves-to-path.json',
   },
-  globals: {
-    'ts-jest': {
-      tsconfig: {
-        jsx: 'react',
+  transform: {
+    '^.+\\.(ts|tsx)$': [
+      'ts-jest',
+      {
+        'ts-jest': {
+          tsconfig: {
+            isolatedModules: true,
+            jsx: 'react',
+            diagnostics: {
+              exclude: ['**'],
+            },
+          },
+        },
       },
-    },
+    ],
   },
 };

web/package.json

@@ -24,6 +24,7 @@
     "@emotion/styled": "^11.11.0",
     "@jokester/ts-commonutil": "^0.5.0",
     "@mui/icons-material": "^5.15.0",
+    "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.0",
     "@next/eslint-plugin-next": "^14.0.4",
     "@octokit/core": "^5.1.0",
@@ -50,19 +51,19 @@
   "devDependencies": {
     "@next/bundle-analyzer": "^14",
     "@types/debug": "^4.1.12",
-    "@types/jest": "^29",
+    "@types/jest": "*",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "*",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
     "@types/reveal.js": "^5.0.1",
     "autoprefixer": "^10",
     "gts": "*",
-    "jest": "^29",
+    "jest": "*",
     "postcss": "^8.4.32",
     "sass": "^1.69.5",
     "tailwindcss": "^3.3.6",
-    "ts-jest": "^29",
+    "ts-jest": "*",
     "typescript": "*",
     "vercel": "^33.6",
     "wrangler": "*"

web/pages/404.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
+import { PageContainer, PageHeader } from '../src/layouts';
 
 export default function NotFoundPage() {
   const router = useRouter();
@@ -9,5 +10,10 @@ export default function NotFoundPage() {
     }, 5e3);
     return () => clearTimeout(timer);
   }, [router]);
-  return <div>Page not found. You will be redirected to site root shortly.</div>;
+  return (
+    <PageContainer>
+      <PageHeader />
+      <div>Page not found. You will be redirected to site root shortly.</div>
+    </PageContainer>
+  );
 }

web/pages/_app.tsx

@@ -5,6 +5,8 @@ import { DefaultMeta } from '../src/components/meta/default-meta';
 import { SnackbarProvider } from 'notistack';
 import Head from 'next/head';
 import { useRevealPreload } from '../src/player/use-reveal-preload';
+import { ThemeProvider } from '@mui/material';
+import { globalTheme } from '../src/layouts/theme';
 
 const CustomApp: React.FC<AppProps> & Partial<Pick<typeof App, 'getInitialProps'>> = (props) => {
   useRevealPreload();
@@ -15,12 +17,14 @@ const CustomApp: React.FC<AppProps> & Partial<Pick<typeof App, 'getInitialProps'
         <meta
           key="meta-viewport"
           name="viewport"
-          content="width=device-width, initial-scale=1,maximum-scale=1.5,minimum-scale=1"
+          content="width=device-width, initial-scale=1,maximum-scale=3,minimum-scale=1"
         />
       </Head>
       <DefaultMeta />
-      <SnackbarProvider />
-      <Component {...pageProps} />
+      <ThemeProvider theme={globalTheme}>
+        <SnackbarProvider />
+        <Component {...pageProps} />
+      </ThemeProvider>
     </>
   );
 };

web/pages/_document.tsx

@@ -16,18 +16,16 @@ const stylesheetPreloads = [
   ),
 ];
 
-const defaultStyleSheets = [
-  // <link key="font-material-icons" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />,
-] as const;
-
 export default function CustomDocument(): React.ReactElement {
   return (
     <Html>
       <Head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
         <link
           key="font-roboto"
           rel="stylesheet"
-          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
           crossOrigin="anonymous"
         />
         {stylesheetPreloads}