Merge pull request #66 from slidr-app/help-page

Add help page

src/Routes.tsx

@@ -13,6 +13,7 @@ const PresentationPreferences = lazy(
 );
 const UserPreferences = lazy(async () => import('./pages/UserPreferences.tsx'));
 const Viewer = lazy(async () => import('./pages/Viewer.tsx'));
+const Help = lazy(async () => import('./pages/Help.tsx'));
 
 const Routes: RouteObject[] = [
   {
@@ -93,6 +94,11 @@ const Routes: RouteObject[] = [
     element: <PresentationPreferences />,
     errorElement: <ErrorPage />,
   },
+  {
+    path: '/help',
+    element: <Help />,
+    errorElement: <ErrorPage />,
+  },
   {
     path: '*',
     element: <ErrorPage />,

src/layouts/DefaultLayout.tsx

@@ -61,14 +61,31 @@ export default function DefaultLayout({
               <button
                 className="hover:children:(nav-active) overflow-hidden pb-2"
                 type="button"
-                title="Speaker view"
+                title="Upload a presentation"
               >
                 <div className="flex flex-col items-center nav-inactive">
                   Upload
                 </div>
               </button>
             </NavLink>
           )}
+          <NavLink
+            end
+            to="/help"
+            className={({isActive}) =>
+              clsx('flex', isActive && 'all-[div]:nav-active')
+            }
+          >
+            <button
+              className="hover:children:(nav-active) overflow-hidden pb-2"
+              type="button"
+              title="Help page"
+            >
+              <div className="flex flex-col items-center nav-inactive">
+                Help
+              </div>
+            </button>
+          </NavLink>
         </div>
         <div className="row-start-1 flex flex-grow flex-shrink" />
         <div className="row-start-2 col-span-full text-3xl flex flex-row items-center justify-center">

src/pages/Help.tsx

@@ -0,0 +1,136 @@
+import DefaultLayout from '../layouts/DefaultLayout';
+import exampleImage from '../assets/example-confetti.gif';
+import cody from '../assets/cody.jpeg';
+// Import navigateHome from '../assets/navigate-home.mp4';
+
+export default function Help() {
+  return (
+    <DefaultLayout title="Help">
+      <div className="px-4 pb-4">
+        <div className="grid grid-cols-2 gap-x-4 gap-y-6 lt-sm:grid-cols-1 max-w-screen-lg w-full mx-auto">
+          <div className="flex flex-col gap-2 self-center">
+            <div className="text-5xl flex-shrink-0 font-bold">
+              What is Slidr?
+            </div>
+            <div>
+              Slidr is an interactive presentation framework that facilitates
+              audiences interacting in realtime with a presenter. Slidr works
+              both live and remote, always focusing on making amazing
+              presentations. Best of all, it&apos;s free!
+            </div>
+          </div>
+          {/* <div>another div</div>
+          <div>another div 1</div> */}
+          <img className="object-cover self-center" src={exampleImage} />
+          <div className="col-span-full text-4xl font-bold text-center mt-20">
+            Getting Started
+          </div>
+          <div className="col-span-full">
+            Here&apos;s how to present your own presentation with Slidr:
+          </div>
+          <ol className="col-span-full flex flex-col gap-6">
+            <li className="flex flex-col">
+              <div className="flex flex-row items-end justify-start gap-3 text-teal">
+                <div className="i-line-md-account text-4rem" />
+                <div className="font-bold align-baseline text-2xl">
+                  Step 1: Sign In
+                </div>
+              </div>
+              <div className="pl-1">
+                By signing in, you automatically create or reconnect to your
+                existing account. Sign-in is easy: enter your email then click
+                the link in your email.
+              </div>
+            </li>
+            <li className="flex flex-col">
+              <div className="flex flex-row items-end justify-start gap-3 text-teal">
+                <div className="i-line-md-uploading-loop text-4rem" />
+                <div className="font-bold align-baseline text-2xl">
+                  Step 2: Upload
+                </div>
+              </div>
+              <div className="pl-1">
+                Once you&apos;re signed in, the upload button will appear in the
+                top right menu. Click on it to upload your pdf presentation.
+                Slidr let&apos;s you bring your own presentation and use
+                whatever tool you already love. Whether you&apos;re using
+                PowerPoint, Google Slides, Keynote, or something else, just be
+                sure to export your presentation with 1 slide per page in PDF.
+                Once the presentation is uploaded and processed, you can give it
+                a meaningful title too.
+              </div>
+            </li>
+            <li className="flex flex-col">
+              <div className="flex flex-row items-end justify-start gap-3 text-teal">
+                <div className="i-line-md-computer text-4rem" />
+                <div className="font-bold align-baseline text-2xl">
+                  Step 3: Present
+                </div>
+              </div>
+              <div className="pl-1">
+                Now that your presentation is uploaded, head over the homepage
+                by clicking on the Slidr link at the top left of the screen. You
+                should see your presentation towards the top. Click on the
+                Present button underneath your presentation to start presenting.
+              </div>
+              {/* <div className="flex flex-row justify-center">
+                <video autoPlay loop width="300">
+                  <source src={navigateHome} type="video/mp4" />
+                </video>
+              </div> */}
+            </li>
+          </ol>
+          <div className="col-span-full text-sm">
+            P.S. Slidr is currently in beta, come back often to see what&apos;s
+            new.
+          </div>
+          <div className="col-span-full text-4xl font-bold text-center mt-20">
+            Getting Involved
+          </div>
+          <a
+            className="col-span-full justify-self-center"
+            href="https://github.com/slidr-app/slidr"
+          >
+            <div className="text-4rem i-line-md-github-loop text-teal" />
+          </a>
+          <div className="col-span-full">
+            Slidr is 100% open source software! Come and help make Slidr better.
+            We&apos;re building a community around Slidr and it&apos;s a great
+            time to get involved. We need folks of all backgrounds and skill
+            levels. Head over to the{' '}
+            <a
+              className="text-teal underline"
+              href="https://github.com/slidr-app/slidr"
+            >
+              Slidr GitHub repository
+            </a>{' '}
+            to learn more! We&apos;d love to add your photo below!
+          </div>
+          <div className="col-span-full text-4xl font-bold text-center mt-20">
+            Who&apos;s Behind Slidr?
+          </div>
+          <img
+            className="col-span-full rounded-full overflow-hidden aspect-square justify-self-center max-w-90 border-teal border-3 shadow-primary"
+            src={cody}
+          />
+          <div className="col-span-full">
+            Hi!{' '}
+            <div className="i-fluent-emoji-flat-waving-hand-medium-light align-baseline h-1.25rem w-1.25rem" />{' '}
+            I&apos;m Cody. I started Slidr while speaking around the world. I
+            love connecting with the audience when I&apos;m speaking and I was
+            sure there must be a better way. That&apos;s when I decided to
+            create Slidr. You cab find out how to connect with me over at my
+            website:{' '}
+            <a
+              className="text-teal underline"
+              href="https://devrel.codyfactory.eu"
+            >
+              devrel.codyfactory.eu
+            </a>
+            .
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+}

src/pages/Home.tsx

@@ -1,5 +1,5 @@
 import {useEffect, useState} from 'react';
-import {Link} from 'react-router-dom';
+import {Link, NavLink} from 'react-router-dom';
 import {collection, orderBy, query, onSnapshot} from 'firebase/firestore';
 import {auth, firestore} from '../firebase.ts';
 import {
@@ -53,17 +53,27 @@ export default function Home() {
           <div className="text-2xl text-center">
             Slidr.app: making presentations fun!
           </div>
-          <div className="text-sm text-center">
-            Slidr is currently in beta, come back often to see what&apos;s new.
+        </div>
+        <div className="flex flex-col items-center text-base gap-1">
+          <div>
+            Wondering where to start? Check out the Getting Started guide:
           </div>
+          <NavLink end to="/help" className="flex flex-row">
+            <button
+              className="btn hover:bg-teal hover:bg-opacity-20"
+              type="button"
+            >
+              Getting Started
+            </button>
+          </NavLink>
         </div>
         {presentations === undefined ? (
           <div className="flex flex-col col-span-2 w-full h-40 items-center justify-center">
             <Loading />
           </div>
         ) : (
           <ol
-            className="grid grid-cols-2 lt-sm:grid-cols-1 max-w-screen-lg w-full mx-auto gap-8 px-4 justify-center pb-6"
+            className="grid grid-cols-2 lt-sm:grid-cols-1 max-w-screen-lg w-full mx-auto gap-8 px-4 justify-center pb-6 mt-10"
             aria-labelledby="page-title"
           >
             {presentations?.map((presentation) => (

src/pages/error.e2e.ts

@@ -2,6 +2,8 @@ import {test, expect} from '../test/coverage-fixture';
 
 test('displays an error when the presentation does not exist', async ({
   page,
+  // @ts-expect-error activate coverage
+  coverage,
 }) => {
   const errorLogs: string[] = [];
   page.on('console', (message) => {

src/pages/help.e2e.ts

@@ -0,0 +1,41 @@
+import {test, expect} from '../test/coverage-fixture';
+
+test('can navigate to the help page from the nav bar', async ({
+  page,
+  // @ts-expect-error activate coverage
+  coverage,
+}) => {
+  await page.goto('/');
+
+  const presentationList = page.getByRole('list', {
+    name: /presentations/i,
+  });
+
+  await expect(
+    presentationList.getByText('A Presentation for Testing'),
+  ).toBeVisible();
+
+  await page.getByRole('button', {name: 'Help'}).click();
+
+  await expect(page.getByText('What is Slidr?')).toBeVisible();
+});
+
+test('can navigate to the help page the getting started button', async ({
+  page,
+  // @ts-expect-error activate coverage
+  coverage,
+}) => {
+  await page.goto('/');
+
+  const presentationList = page.getByRole('list', {
+    name: /presentations/i,
+  });
+
+  await expect(
+    presentationList.getByText('A Presentation for Testing'),
+  ).toBeVisible();
+
+  await page.getByRole('button', {name: 'Getting Started'}).click();
+
+  await expect(page.getByText('What is Slidr?')).toBeVisible();
+});

src/pages/home.e2e.ts

@@ -14,7 +14,11 @@ test.beforeAll(async () => {
   } as PresentationUpdate);
 });
 
-test('lists all presentations', async ({page}) => {
+test('lists all presentations', async ({
+  page,
+  // @ts-expect-error activate coverage
+  coverage,
+}) => {
   await page.goto('/');
 
   const presentationList = page.getByRole('list', {

src/pages/upload.e2e.ts

@@ -56,18 +56,15 @@ test('can upload and view presentation', async ({page, loginPage}) => {
   await presentation.getByRole('button', {name: 'view'}).click();
   const page1 = page.getByAltText(/slide page 1/i);
   await expect(page1).toBeVisible();
-  // TODO: instead match just the slide image
   await expect(page1).toHaveScreenshot('page-1.png');
 
   await page.getByRole('button', {name: /next/i}).click();
   const page2 = page.getByAltText(/slide page 2/i);
   await expect(page2).toBeVisible();
-  // TODO: instead match just the slide image
   await expect(page2).toHaveScreenshot('page-2.png');
 
   await page.getByRole('button', {name: /next/i}).click();
   const page3 = page.getByAltText(/slide page 3/i);
   await expect(page3).toBeVisible();
-  // TODO: instead match just the slide image
   await expect(page3).toHaveScreenshot('page-3.png');
 });

src/pages/viewer.e2e.ts

@@ -1,5 +1,5 @@
 import {databaseAdmin} from '../test/firestore';
-import {test, expect} from '../test/login-fixture';
+import {test, expect} from '../test/coverage-fixture';
 
 let presentationId: string;
 
@@ -13,7 +13,11 @@ test.beforeAll(async () => {
   presentationId = presentationSnapshot.id;
 });
 
-test('navigate the presentation', async ({page}) => {
+test('navigate the presentation', async ({
+  page,
+  // @ts-expect-error activate coverage
+  coverage,
+}) => {
   await page.goto(`/v/${presentationId}`);
 
   const slide1 = page.getByRole('img', {name: 'Slide page 1'});
@@ -40,7 +44,11 @@ test('navigate the presentation', async ({page}) => {
   await expect(slide1).toHaveScreenshot('slide-1.png');
 });
 
-test('can share with share buttons', async ({page}) => {
+test('can share with share buttons', async ({
+  page,
+  // @ts-expect-error activate coverage
+  coverage,
+}) => {
   await page.goto(`/v/${presentationId}?slide=2`);
 
   // Twitter