Home
Relevant source files
The following files were used as context for generating this wiki page:The Home page is the central dashboard of the Web Archive web client. It serves as the primary interface for users to browse, search, and manage their archived web pages. It provides an overview of the archive's statistics and displays recently saved pages or search results in a card-based layout.
The Web Archive project is a self-hosted service for archiving and sharing web pages, composed of a browser plugin for saving pages, a server for storage and retrieval, and a web client for user interaction. The Home page is the main entry point to this web client.
Sources: README.md, packages/web/src/pages/(layout)/index.tsx
Architecture Overview
The Web Archive is a monorepo project structured into three main packages: plugin, server, and web. The Home page is part of the web package and interacts with the server to display data that was originally captured and uploaded by the plugin.
Sources: package.json:11-13
This diagram illustrates the high-level interaction between the system's components.
Home Page Components
The Home page is implemented in the ArchiveHome React component. Its primary responsibility is to manage the display of archived pages, switching between a default view of recent items and a dedicated search results view.
Sources: packages/web/src/pages/(layout)/index.tsx:112-132
Conditional View Rendering
The ArchiveHome component uses local state to decide which sub-view to render. If a search keyword is entered or a tag is selected, it displays SearchiPageView; otherwise, it defaults to RecentSavePageView.
Default View (RecentSavePageView)
When no search is active, the Home page displays a dashboard layout. This view is controlled by the RecentSavePageView component. It presents several informational cards and a grid of recently saved pages.
PageDataPieCard: A component showing a pie chart of page data (not detailed in the provided files).R2UsageCard: Displays R2 storage usage, fetching data from the/api/data/r2_usageendpoint.- Recent Pages: A list of recently saved pages, fetched from the
/api/pages/recent_saveendpoint. This list is only shown if theshouldShowRecenthook returns true.
Sources: packages/web/src/pages/(layout)/index.tsx:32-90
The following diagram shows the data loading sequence for the default view.
Search View (SearchiPageView)
When a user initiates a search (by typing a keyword or selecting a tag), the SearchiPageView component is rendered. This component is responsible for fetching and displaying filtered and paginated results.
- It uses the
useInfiniteScrollhook to automatically load more pages as the user scrolls. - Data is fetched from the
POST /api/pages/queryendpoint. - The results are displayed in a
CardViewcomponent, which arrangesPageCardcomponents in a grid.
Sources: packages/web/src/pages/(layout)/index.tsx:93-132
The search data flow is as follows:
Key UI Elements
Page Card (PageCard.tsx)
The PageCard is a fundamental UI component used on the Home page to represent a single archived page. It displays the page's title, description, tags, and a screenshot. It also provides several actions for page management.
Sources: [packages/web/src/components/page-card.tsx]
| Action | Icon | Description |
|---|---|---|
| Edit Page | SquarePen | Opens a dialog (CardEditDialog) to edit the page's metadata like title, description, and tags. |
| Open Original Link | ExternalLink | Opens the original URL of the archived page in a new tab. |
| Delete Page | Trash | Prompts the user for confirmation and then deletes the page. |
| Toggle Showcase | Eye / EyeOff | Adds or removes the page from the public "Showcase". |
Sources: packages/web/srcs/components/page-card.tsx:50-107, packages/web/src/assets/locales/en/translation.json:26-30
Backend API Endpoints
The Home page relies on several backend API endpoints defined in packages/server/src/api/pages.ts to fetch and manipulate data.
Sources: [packages/server/src/api/pages.ts]
POST /api/pages/query
This endpoint is used by the SearchiPageView to query for archived pages with filtering and pagination.
| Parameter | Type | Description |
|---|---|---|
folderId | number (optional) | ID of the folder to search within. |
tagId | number (optional) | ID of the tag to filter by. |
pageNumber | number (optional) | The page number for pagination. |
pageSize | number (optional) | The number of items per page. |
keyword | string (optional) | The search term to match against page metadata. |
Sources: packages/server/src/api/pages.ts:107-130
GET /api/pages/recent_save
Fetches a list of the most recently saved pages. This is used by the RecentSavePageView for the default Home screen.
Sources: packages/server/src/api/pages.ts:200-203
PUT /api/pages/update_showcase
Updates the showcase status of a page. This is called when the user clicks the Eye / EyeOff icon on a PageCard.
Sources: packages/server/src/api/pages.ts:407-426
DELETE /api/pages/delete_page
Deletes a page by its ID. This is called from the PageCard when the user confirms deletion.
Sources: packages/server/src/api/pages.ts:241-257
Page Archiving and Upload Flow
While not part of the Home page itself, understanding how pages are archived is crucial context. The process is initiated by the browser plugin and involves scraping the page content, packaging it, and uploading it to the server.
Sources: packages/plugin/background/processor.ts, [packages/server/src/api/pages.ts]
This sequence diagram outlines the entire flow from saving a page in the plugin to it being available on the server.