Viewing Archived Pages

Relevant source files

The following files were used as context for generating this wiki page:

• packages/web/src/pages/(layout)/page.[slug].tsx
• packages/web/src/pages/(layout)/index.tsx
• packages/web/src/pages/(layout)/folder.[slug].tsx
• packages/server/src/api/pages.ts
• packages/web/src/data/page.ts
• packages/web/src/pages/showcase/page.[slug].tsx
• packages/plugin/lib/single-file-extension-editor.js

The Web Archive application provides a comprehensive system for users to browse, search, and view saved web pages. The interface allows for discovering pages through a main dashboard, folder-based organization, and search functionality. When viewing an individual page, users can switch between a faithful iframe-based rendering of the original saved content and a simplified, reader-friendly "Readability" mode. A separate public-facing "Showcase" feature also exists for displaying curated pages.

Page Discovery and Navigation

Users can discover and navigate to archived pages through several views within the web client. The primary methods are the home page, folder views, and search results.

Sources: packages/web/src/pages/(layout)/index.tsx, packages/web/src/pages/(layout)/folder.[slug].tsx

Home and Folder Views

• Home Page (/): The main entry point, ArchiveHome, displays recently saved pages by default using the RecentSavePageView component. It fetches this data via the getRecentSavePage function.
• Folder View (/folder/:slug): When a user navigates into a folder, the FolderPage component is rendered. It fetches and displays a paginated list of pages belonging to that specific folder.
• Search View: When a user performs a search from the header, the ArchiveHome component switches to rendering SearchiPageView, which displays pages matching the keyword and/or selected tags.

Sources: packages/web/src/pages/(layout)/index.tsx:13-28, 122-136, packages/web/src/pages/(layout)/folder.[slug].tsx:17-36

Display Modes: Card vs. List

Both folder and search views can display pages in two different layouts, controlled by the view property from the global AppContext.

• Card View: The default view, which renders pages as a grid of PageCard components. This is managed by the CardView component.
• List View: An alternative, more compact view that renders pages in a list. This is managed by the ListView component.

Sources: packages/web/src/pages/(layout)/folder.[slug].tsx:62-76

Individual Page Viewing

When a user selects a page to view, they are navigated to /page/:slug, which renders the ArchivePage component. This component is the core of the page viewing experience, managing data fetching, rendering modes, and user actions.

Sources: packages/web/src/pages/(layout)/page.[slug].tsx

Data Fetching Flow

To display a page, the ArchivePage component first fetches the page's metadata (title, folder, etc.) and then its full HTML content.

The following diagram illustrates the data fetching sequence for an individual page.

This sequence shows two separate API calls: one for metadata and one for the raw HTML content stored in R2.

Sources: packages/web/src/pages/(layout)/page.[slug].tsx:18-29, 38-47, 54-62, packages/web/src/data/page.ts:4-12, 290-313, packages/server/src/api/pages.ts:186-203, 298-321

Rendering Modes

The ArchivePage component supports two distinct rendering modes, controlled by the readMode state from AppContext.

Sources: packages/web/src/pages/(layout)/page.[slug].tsx:112-114

Iframe Mode

This is the default mode. It renders the archived page's HTML content within an <iframe>.

• Mechanism: The fetched HTML string is converted into a Blob and then into an object URL using the useObjectURL custom hook. This URL is then passed as the src attribute to the IframePageContent component, which simply wraps the <iframe> element.
• Sandboxing: The iframe is sandboxed for security, but allows scripts, same-origin access, popups, and forms to maintain the functionality of the original page.

Sources: packages/web/src/pages/(layout)/page.[slug].tsx:64, 114, packages/web/src/components/iframe-page-content.tsx (file not provided, inferred from usage)

Readability Mode

This mode provides a simplified, clutter-free reading experience, similar to Firefox's Reader View.

• Mechanism: When readMode is true, the ReadabilityPageContent component is rendered. This component uses the @mozilla/readability library to parse the raw HTML and extract the main article content, which is then displayed.
• Styling: The single-file-extension-editor.js file contains extensive CSS (STYLE_FORMATTED_PAGE) that is applied to format the page in this mode, including support for light, dark, and sepia themes.

The logic for switching between these modes is as follows:

User Actions

The navigation bar on the page view provides several actions:

Action	Component	Description
Go Back	Button	Navigates the user back to the previous page, typically the folder view.
Download	<a> tag with Button	Allows the user to download the archived page as an .html file. The href is set to the same object URL used by the iframe.
Toggle Mode	Button	Switches between "Iframe Mode" and "Read Mode" by toggling the readMode state.
Delete	Button	Triggers a confirmation prompt and then calls the deletePage API endpoint to move the page to the trash.

Sources: packages/web/src/pages/(layout)/page.[slug].tsx:78-110

Showcase Viewing

The application also includes a public-facing "Showcase" for viewing specific archived pages. This is handled by the ShowcasePage component at /showcase/page/:slug.

• Simplified UI: The showcase view has a minimal UI, with navigation to go home, back, or to the next showcase page. It also includes a "Powered By" component.
• Different API Endpoint: Page content is fetched from a dedicated, unauthenticated endpoint: /api/showcase/content.
• Navigation: Users can navigate between showcase pages using left/right arrow keys or on-screen buttons, which trigger the getNextShowcasePageId function.
• Rendering: Like the standard page view, it uses an <iframe> to render the page content from a generated object URL.

Sources: packages/web/src/pages/showcase/page.[slug].tsx:12-23, 49-55, 83-89

Backend API Endpoints

The packages/server/src/api/pages.ts file defines the Hono API routes responsible for serving page data and content.

Endpoint	Method	Description
/api/pages/query	POST	Queries for a list of pages based on folderId, tagId, keyword, and pagination.
/api/pages/detail	GET	Fetches metadata for a single page by its ID.
/api/pages/content	GET	Fetches the raw HTML content of a page from R2 storage by its ID.
/api/pages/delete_page	DELETE	Marks a page as deleted in the database.
/api/showcase/content	GET	(Inferred from showcase/page.[slug].tsx) Fetches raw HTML for a public showcase page.

Sources: packages/server/src/api/pages.ts:101-130, 186-203, 298-321, 205-222, packages/web/src/pages/showcase/page.[slug].tsx:14