hikari
7606a18e38
Implements issue #56 (activity feed) followup - adds complete detail pages for all entity types so activity feed and homepage links work properly. Created Detail Components: - game-detail.component.ts - Shows full game details with platform, series, time played - book-detail.component.ts - Shows book details with author, ISBN, series, reading time - music-detail.component.ts - Shows music details with artist, type (album/single), listening time - art-detail.component.ts - Shows art details with artist, description, large image display - show-detail.component.ts - Shows show details with type (TV/anime/film), watch time - manga-detail.component.ts - Shows manga details with author, reading time Features per Detail Page: - Read-only display of full entity information - Cover/poster/art image display (when available) - Rating display with 10-star system (when applicable) - Time spent formatting (hours and minutes) - Date formatting (British English locale) - Tags display with entity-specific colour schemes - External links with hover effects - Comments section with add/edit/delete functionality - Like button integration - Breadcrumb navigation back to list page - Loading states with spinner - Error handling for not found cases - Responsive design for all screen sizes Routing Updates: - Added 6 new routes: /games/:id, /books/:id, /music/:id, /art/:id, /shows/:id, /manga/:id - All routes use lazy loading with loadComponent Navigation Fixes: - Fixed activity feed like links to point to entity detail pages (was pointing to list) - Updated homepage recent items to link directly to entity detail pages (was pointing to list) Technical Fixes: - Corrected Art component to only use existing fields (removed non-existent medium, rating, notes) - Fixed Show component to use coverImage instead of non-existent posterImage - Added proper null checks for optional fields (timeSpent, dateStarted, dateFinished) - Added non-null assertions where values are guaranteed to exist within conditionals Each detail component follows the established pattern from the list components whilst adapting for single-item display. All components use Angular signals for reactive state management and integrate with existing services. ✨ This issue was created with help from Hikari~ 🌸
Library
✨ Your new, shiny Nx workspace is ready ✨.
Learn more about this workspace setup and its capabilities or run npx nx graph to visually explore what was created. Now, let's get you up to speed!
Run tasks
To run the dev server for your app, use:
npx nx serve frontend
To create a production bundle:
npx nx build frontend
To see all available targets to run for a project, run:
npx nx show project frontend
These targets are either inferred automatically or defined in the project.json or package.json files.
More about running tasks in the docs »
Add new projects
While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.
Use the plugin's generator to create new projects.
To generate a new application, use:
npx nx g @nx/angular:app demo
To generate a new library, use:
npx nx g @nx/angular:lib mylib
You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.
Learn more about Nx plugins » | Browse the plugin registry »
Set up CI!
Step 1
To connect to Nx Cloud, run the following command:
npx nx connect
Connecting to Nx Cloud ensures a fast and scalable CI pipeline. It includes features such as:
- Remote caching
- Task distribution across multiple machines
- Automated e2e test splitting
- Task flakiness detection and rerunning
Step 2
Use the following command to configure a CI workflow for your workspace:
npx nx g ci-workflow
Install Nx Console
Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
Useful links
Learn more:
- Learn more about this workspace setup
- Learn about Nx on CI
- Releasing Packages with Nx release
- What are Nx plugins?
And join the Nx community: