You've already forked AstralRinth
Calum H.
bd97ace974
* feat: implement access tab with dummy data * fix: spacing * feat: qa * feat: implement backend * qa: qa pass * feat: fix user "search" * fix: lint * feat: change to bitfield * feat: fix fields * fix: lint * fix: lint * feat: hook up api * feat: fix permissions * feat: audit log table event start * feat: better mobile mode for audit log table * feat: i18n * feat: qa * feat: enforce permissions * feat: email template start * feat: qa * fix: tooltip bug * feat: qa * impl: sse support in api-client * feat: sse impl * fix: desync path * feat: time frame picker from analytics * feat: QA * fix: spacing * fix: permisison audit log entries * fix: hosting manage page shared server detection * fix: lint * feat: qa + lint * feat: audit log table sort by time * feat: finish frontend panel stuff * fix: lint * fix: backend alignment * fix: lint * fix: supress friend errors * feat: qa * fix: qa * fix: lint * fix: utils barrel * fix: safari cookies in dev * fix: pin nuxt * feat: fixes + notif fix * fix: notifications * feat: qa * fix: notification sync not happening immediately * fix: qa * fix: qa * feat: qa * blog + prepr * feat: toast shit * blog images * thumbnail update one last time * prepr * feat: use reinvite route * update images * fix: reinvite stuff * fix: lint * fix: alignment of save bar * fix: notif sizing * fix: split up access * fix: lint * fix: lint * fix: link --------- Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
43 lines
2.3 KiB
Markdown
43 lines
2.3 KiB
Markdown
# apps/frontend — Modrinth Website
|
|
|
|
Nuxt 3 application serving the main Modrinth website. Uses Vue 3, Tailwind CSS v3, and file-based routing.
|
|
|
|
## Architecture
|
|
|
|
Nuxt 3 with SSR — pages are server-rendered and hydrated on the client. Uses `$fetch` for server-side data fetching and `@modrinth/api-client` (via `NuxtModrinthClient`) for client-side API calls.
|
|
|
|
## Key Directories
|
|
|
|
- **`src/pages/`** — file-based routing (`[param].vue` for dynamic segments, nested folders for nested routes)
|
|
- **`src/components/`** — website-specific components (not shared with the app)
|
|
- **`src/composables/`** — Vue composables, including `queries/` for TanStack Query options
|
|
- **`src/providers/`** — page-level DI context providers (e.g., version modal, project page)
|
|
- **`src/plugins/`** — Nuxt plugins (TanStack Query setup, theme, etc.)
|
|
- **`src/middleware/`** — route guards and auth checks
|
|
- **`src/layouts/`** — Nuxt layout components
|
|
- **`src/server/`** — server-side plugins, routes, and utilities
|
|
- **`src/store/`** — Pinia state management
|
|
- **`src/helpers/`** — utility functions
|
|
- **`src/locales/`** — i18n translation files
|
|
|
|
## Components
|
|
|
|
**Website-specific components go in `src/components/`.** These are components that only make sense in the website context — admin panels, moderation tools, dashboard widgets, brand components, etc.
|
|
|
|
**Shared components go in `packages/ui`.** If a component could be used by both the website and the desktop app, it belongs in `packages/ui/src/components/`. See `packages/ui/CLAUDE.md` for UI standards, color rules, and component patterns.
|
|
|
|
Rule of thumb: if it doesn't depend on Nuxt-specific APIs or website-only features, it should be in `packages/ui`.
|
|
|
|
## Data Fetching
|
|
|
|
Use `@modrinth/api-client` via `injectModrinthClient()` for all API calls. See `packages/api-client/CLAUDE.md` for the full API client documentation.
|
|
|
|
For caching and server state, use TanStack Query (`@tanstack/vue-query`). See the `tanstack-query` skill (`.claude/skills/tanstack-query/SKILL.md`) for patterns and conventions used in this codebase.
|
|
|
|
### Deprecated Composables
|
|
|
|
These composables are deprecated and should not be used in new code:
|
|
|
|
- **`useAsyncData`** - we use tanstack, not nuxt's built in async data utility.
|
|
- **`useBaseFetch`** (`src/composables/fetch.js`) — legacy Labrinth fetch wrapper. Use `client.labrinth.*` modules instead.
|