Skip to content

Commit 48b02dd

Browse files
SpyC0der77SpyC0der77
committed
Add About link to Reader component and page
- Introduced an "About" link in both the ReaderPage and Reader components for improved navigation. - Enhanced user experience by providing quick access to information about the application.
1 parent 93ae9ea commit 48b02dd

4 files changed

Lines changed: 135 additions & 0 deletions

File tree

‎apps/web/app/about/page.tsx‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import type { Metadata } from "next";
2+
import Link from "next/link";
3+
import { ArrowLeft } from "lucide-react";
4+
import { Button } from "@/components/ui/button";
5+
6+
export const metadata: Metadata = {
7+
title: "About | WordFlash",
8+
description:
9+
"Learn how WordFlash uses RSVP (Rapid Serial Visual Presentation) to speed up your reading.",
10+
};
11+
12+
export default function AboutPage() {
13+
return (
14+
<div className="mx-auto flex min-h-screen max-w-2xl flex-col px-4 py-10 sm:px-8">
15+
<Button variant="ghost" size="icon" asChild className="mb-8 self-start">
16+
<Link href="/" aria-label="Back to home">
17+
<ArrowLeft className="size-5" />
18+
</Link>
19+
</Button>
20+
21+
<article className="space-y-6">
22+
<h1 className="text-3xl font-bold tracking-tight sm:text-4xl">
23+
How WordFlash speeds up reading
24+
</h1>
25+
26+
<p className="lead text-lg text-muted-foreground">
27+
WordFlash uses a technique called <strong>RSVP</strong>—Rapid Serial
28+
Visual Presentation—to help you read faster by eliminating eye
29+
movement and focusing your attention on one word at a time.
30+
</p>
31+
32+
<section className="space-y-3">
33+
<h2 className="mt-10 text-xl font-semibold">What is RSVP?</h2>
34+
<p className="leading-7 text-muted-foreground">
35+
<strong>Rapid Serial Visual Presentation</strong> (RSVP) is a
36+
reading method that displays words one at a time in a fixed position
37+
on the screen. Instead of scanning left-to-right across lines and
38+
jumping your eyes from line to line, you keep your gaze steady while
39+
words stream to you. This removes the physical limits of traditional
40+
reading—saccades (eye jumps) and fixations (pauses on each
41+
word)—which typically cap reading speed around 200–250 words per
42+
minute.
43+
</p>
44+
</section>
45+
46+
<section className="space-y-3">
47+
<h2 className="mt-10 text-xl font-semibold">
48+
Why RSVP speeds up reading
49+
</h2>
50+
<p className="leading-7 text-muted-foreground">
51+
When you read normally, your eyes spend time moving between words
52+
and lines. Each movement and refocus costs time. RSVP eliminates
53+
that by:
54+
</p>
55+
<ul className="my-4 list-disc space-y-2 pl-6">
56+
<li>
57+
<strong>Removing saccades</strong> — Your eyes stay fixed; words
58+
come to you instead of you chasing them.
59+
</li>
60+
<li>
61+
<strong>Reducing subvocalization</strong> — The steady pace
62+
encourages you to process words visually rather than “sounding
63+
them out” in your head.
64+
</li>
65+
<li>
66+
<strong>Maintaining focus</strong> — One word at a time reduces
67+
distractions and keeps your attention centered.
68+
</li>
69+
</ul>
70+
</section>
71+
72+
<section className="space-y-3">
73+
<h2 className="mt-10 text-xl font-semibold">
74+
Focal character highlighting
75+
</h2>
76+
<p className="leading-7 text-muted-foreground">
77+
WordFlash adds a refinement: the <strong>focal character</strong>.
78+
The middle letter of each word is highlighted in a distinct color
79+
(rose, blue, green, or amber). This gives your eye a precise anchor
80+
point—the optimal viewing position (OVP) for each word—so you can
81+
recognize words faster without scanning left-to-right within the
82+
word itself.
83+
</p>
84+
</section>
85+
86+
<section className="space-y-3">
87+
<h2 className="mt-10 text-xl font-semibold">Getting started</h2>
88+
<p className="leading-7 text-muted-foreground">
89+
Paste text on the home page or enter an article URL in the{" "}
90+
<Link
91+
href="/reader"
92+
className="text-primary underline underline-offset-4 hover:opacity-80"
93+
>
94+
Article Reader
95+
</Link>
96+
. Press play, focus on the highlighted letter, and adjust the
97+
words-per-minute (WPM) until you find a comfortable pace. Most
98+
people can reach 300–400 WPM with practice; some go much higher.
99+
</p>
100+
</section>
101+
102+
<section className="space-y-3">
103+
<h2 className="mt-10 text-xl font-semibold">Further reading</h2>
104+
<p className="leading-7 text-muted-foreground">
105+
For more information, see:
106+
</p>
107+
<ul className="space-y-3 text-muted-foreground">
108+
<li>
109+
<Link
110+
href="https://en.wikipedia.org/wiki/Rapid_serial_visual_presentation"
111+
target="_blank"
112+
className="text-primary underline underline-offset-4 hover:opacity-80"
113+
>
114+
Rapid Serial Visual Presentation on Wikipedia
115+
</Link>
116+
</li>
117+
</ul>
118+
</section>
119+
</article>
120+
</div>
121+
);
122+
}

‎apps/web/app/reader/page.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
BookOpen,
2121
Gauge,
2222
History,
23+
Info,
2324
Link2,
2425
Loader2,
2526
Menu,
@@ -733,6 +734,12 @@ export default function ReaderPage() {
733734
<Bookmark className="size-4" />
734735
Bookmarklet
735736
</DropdownMenuItem>
737+
<DropdownMenuItem asChild>
738+
<Link href="/about" className="cursor-pointer">
739+
<Info className="size-4" />
740+
About
741+
</Link>
742+
</DropdownMenuItem>
736743
</DropdownMenuContent>
737744
</DropdownMenu>
738745
<Dialog.Root

‎apps/web/components/reader.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -920,6 +920,12 @@ export function Reader(props: ReaderProps): React.ReactElement | null {
920920
>
921921
Article Reader
922922
</Link>
923+
<Link
924+
href="/about"
925+
className="text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
926+
>
927+
About
928+
</Link>
923929
{isDesktop ? (
924930
<Dialog.Root open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
925931
<Dialog.Trigger asChild>

‎bun.lockb‎

1000 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)