A tool for finding when specific text first appeared in a Wikipedia article's history, similar to git blame functionality.
Wikipedia-Blame is a React-based single-page application that helps users identify the revision where specific text was introduced into a Wikipedia article. It leverages the MediaWiki APIs and an efficient search algorithm to analyze revision history.
The application utilizes modern React features, specifically the useActionState
hook, for streamlined form handling and state management.
- Search for the first occurrence of text across all revisions of a Wikipedia article.
- Support for both English (en.wikipedia.org) and Japanese (ja.wikipedia.org) Wikipedia.
- Search algorithm:
- Performs a linear search through revisions.
- Fetches revision data (ID and content) progressively using an async generator, handling potentially long histories by processing data in streams without loading all data into memory at once.
- Iterative searching: Users can specify a "start revision ID" and/or an "end revision ID" to search within a specific range of revisions.
- Direct links to the specific revision where the text was found.
- Clear indication of loading states managed by
useActionState
.
- React v19 (
useActionState
) - TypeScript
- Vite for build tooling
- MediaWiki APIs (REST API for page ID, Query API for revisions)
- CSS Modules / Standard CSS for styling
- GitHub Pages for hosting
The application employs an action-state driven architecture centered around React's useActionState
hook:
- Form Submission: The
SearchForm
component uses a form action (searchAction
) provided byuseActionState
. - Action Execution (
search.ts
):- The
searchAction
function receives form data and the previous state. - It validates input and fetches the Wikipedia page ID using
fetchPageId
(MediaWikiAPIs.ts
). - It initiates fetching revision IDs using the
fetchAllRevisions
async generator (MediaWikiAPIs.ts
), optionally passing anendRevId
to limit the search range based on form input. fetchAllRevisions
implements basic caching using themaxage
parameter in the API request.- It calls
genFindMap
(async-generator.ts
), passing the revision generator and a predicate to check for the target text.
- The
- Search Algorithm (
async-generator.ts
):genFindMap
consumes revisions from the generator.- The predicate checks the fetched text content.
- State Update:
searchAction
returns the newSearchState
(including the foundrevisionId
) or an error.useActionState
updates the application state. - UI Rendering:
App.tsx
passes thesearchState
(containing the foundrevisionId
) andisPending
status down toSearchForm.tsx
(for default value population) andResultView.tsx
(for display).
This approach collocates data fetching and state logic within the action, simplifying component responsibilities and leveraging React's built-in pending state management.
See architecture-overview.md
for a visual flow diagram.
src/
: Main source code directory.actions/
: Contains theuseActionState
action logic (search.ts
).components/
: React UI components (SearchForm.tsx
,ResultView.tsx
,WikiSelector.tsx
).services/
: MediaWiki APIs interaction layer (MediaWikiAPIs.ts
).lib/
: general libraries (async-generator.ts
).wiki.ts
: Type definitions and constants related to Wikipedia sites.state.ts
: Type definitions for application state (e.g.,SearchState
).App.tsx
: Main application component, orchestrates state and components.main.tsx
: Application entry point.
- Configured for automatic deployment to GitHub Pages via GitHub Actions.
- Accessible at: https://[username].github.io/Wikipedia-Blame/ (Replace
[username]
with the actual GitHub username) - Workflow file:
.github/workflows/deploy.yml
- Automatically builds and deploys on pushes to the main branch.
- Uses the latest GitHub Pages deployment methods.
- Supports manual deployment via GitHub Actions workflow dispatch.
- Find first/last deletion of text.
- Allow user selection to search further if multiple occurrences exist.
- Implement visual highlighting of the found text within the revision content.
- Support for additional Wikipedia languages.
- More robust error handling and user feedback.