●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Sidebar page tree with expandable nodes (PageTree component) and breadcrumb navigation for the selected page.
- Search input (InputText) with client-side filtering of articles and a sort toggle (Newest/Oldest).
- Article card grid (ArticleCard component) with image, metadata badges, tags and view/edit buttons.
- Simple pagination logic via PagedArticles property and prev/next controls (currentPage, pageSize).
## Key components
- Blazor components: WikiHome.razor, ArticleCard.razor, PageTree.razor
- Models: ArticleModel, CategoryModel, PageItemModel
- Blazor APIs: InputText, @bind-Value, EventCallback, NavigationManager
- UI patterns: Bootstrap cards, list-group, breadcrumb, badge, sticky-top sidebar
## How it works
- Data is seeded in OnInitialized via SampleArticles() and stored in in-memory lists.
- Filtering happens in FilteredArticles() using searchTerm, selected categories, and selectedTag.
- Sorting toggles by updating sortByDateDesc and re-evaluating the filtered query.
- Pagination is computed in the PagedArticles getter which sets totalPages and returns a page slice.
- Page selection uses OnPageSelected plus BuildBreadcrumbs/FindPath to assemble breadcrumb trail.
- ArticleCard uses NavigationManager to navigate to placeholder view/edit routes.
## Styling
- Uses Bootstrap utility and component classes (container, row, col-*, card, btn, list-group, badge).
- Sidebar uses .sticky-top with an inline top offset for persistent navigation on larger viewports.
- Font Awesome icon classes are present for visual affordances (fa-book-open, fa-search, fa-user, etc.).
- Layout is responsive via the Bootstrap grid (col-12 col-md-3 / col-md-9 and card columns).
## Reuse steps
1. Copy WikiHome.razor, ArticleCard.razor, PageTree.razor and the model classes into a Blazor project.
2. Ensure Bootstrap CSS and Font Awesome are included in index.html/_Host.cshtml.
3. Register any required services and confirm NavigationManager is available (default in Blazor).
4. Replace SampleArticles() with a data service or API client; wire view/edit routes (/articles/{id}).
5. Optionally add a Markdown renderer and replace placeholder content rendering.
## Limitations & next steps
- This is a single-page showcase generated by Instruct UI with in-memory sample data; persistent storage and APIs are not implemented.
- No authentication/authorization or server-side validation is included; add services, auth and API endpoints as needed.
- Page content is placeholder text; swap with a Markdown or HTML renderer to show real article bodies.
- Add EditForm with validation for create/edit flows and implement real routing for article view/edit pages.