diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 9424e59d..85843055 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -17,11 +17,16 @@ const config = { onBrokenAnchors: 'warn', i18n: { + // Dutch locale temporarily dropped — `i18n/nl/` carries only stale + // translation strings (no actual translated markdown), and recent + // docs additions broke Dutch SSR with "Cannot read properties of + // undefined (reading 'id')" on a handful of pages. Re-enable by + // adding `'nl'` back once the Dutch translation pass has been + // completed or the metadata audited for stale references. defaultLocale: 'en', - locales: ['en', 'nl'], + locales: ['en'], localeConfigs: { en: { label: 'English' }, - nl: { label: 'Nederlands' }, }, }, diff --git a/docs/features/admin-settings.md b/docs/features/admin-settings.md index 694d321b..d6e7ef3e 100644 --- a/docs/features/admin-settings.md +++ b/docs/features/admin-settings.md @@ -26,4 +26,4 @@ Admin settings provide Nextcloud administrators with global configuration option ## Screenshot -![Dashboard Overview](../screenshots/mydash-dashboard-overview.png) +![Dashboard Overview](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/features/admin-templates.md b/docs/features/admin-templates.md index e0be0a44..28d202e7 100644 --- a/docs/features/admin-templates.md +++ b/docs/features/admin-templates.md @@ -31,4 +31,4 @@ Admin templates allow Nextcloud administrators to create pre-configured dashboar ## Screenshot -![Dashboard Overview](../screenshots/mydash-dashboard-overview.png) +![Dashboard Overview](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/features/conditional-visibility.md b/docs/features/conditional-visibility.md index e7790542..23a95788 100644 --- a/docs/features/conditional-visibility.md +++ b/docs/features/conditional-visibility.md @@ -29,4 +29,4 @@ Conditional visibility allows widget placements to be shown or hidden based on d ## Screenshot -![Dashboard Overview](../screenshots/mydash-dashboard-overview.png) +![Dashboard Overview](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/features/dashboards.md b/docs/features/dashboards.md index fd32197f..7b236050 100644 --- a/docs/features/dashboards.md +++ b/docs/features/dashboards.md @@ -25,4 +25,4 @@ Dashboards are the core organizational unit in MyDash. Each user can create and ## Screenshot -![Dashboard Overview](../screenshots/mydash-dashboard-overview.png) +![Dashboard Overview](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/features/grid-layout.md b/docs/features/grid-layout.md index 7f47e05e..275c69f1 100644 --- a/docs/features/grid-layout.md +++ b/docs/features/grid-layout.md @@ -26,4 +26,4 @@ The grid layout system powers the drag-and-drop dashboard experience in MyDash, ## Screenshot -![Grid Layout](../screenshots/mydash-dashboard-overview.png) +![Grid Layout](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/features/permissions.md b/docs/features/permissions.md index 7289390c..b8492fa4 100644 --- a/docs/features/permissions.md +++ b/docs/features/permissions.md @@ -20,4 +20,4 @@ Permission levels control what users can do with their dashboards, especially fo ## Screenshot -![Dashboard Overview](../screenshots/mydash-dashboard-overview.png) +![Dashboard Overview](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/features/prometheus-metrics.md b/docs/features/prometheus-metrics.md index 7ea90537..f33bf139 100644 --- a/docs/features/prometheus-metrics.md +++ b/docs/features/prometheus-metrics.md @@ -33,4 +33,4 @@ MyDash exposes application metrics in Prometheus text exposition format for moni ## Screenshot -![Dashboard Overview](../screenshots/mydash-dashboard-overview.png) +![Dashboard Overview](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/features/tiles.md b/docs/features/tiles.md index b7a97078..338a22a0 100644 --- a/docs/features/tiles.md +++ b/docs/features/tiles.md @@ -22,4 +22,4 @@ Custom tiles are user-created shortcut cards that provide quick access to Nextcl ## Screenshot -![Dashboard with Tiles](../screenshots/mydash-dashboard-overview.png) +![Dashboard with Tiles](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/features/widgets.md b/docs/features/widgets.md index bcadf32e..55f8ab0a 100644 --- a/docs/features/widgets.md +++ b/docs/features/widgets.md @@ -23,4 +23,4 @@ Widgets are the primary content blocks on MyDash dashboards. MyDash integrates w ## Screenshot -![Dashboard with Widgets](../screenshots/mydash-dashboard-overview.png) +![Dashboard with Widgets](/screenshots/mydash-dashboard-overview.png) diff --git a/docs/i18n/nl/docusaurus-plugin-content-docs/current.json b/docs/i18n/nl/docusaurus-plugin-content-docs/current.json index 960970a3..b5916a58 100644 --- a/docs/i18n/nl/docusaurus-plugin-content-docs/current.json +++ b/docs/i18n/nl/docusaurus-plugin-content-docs/current.json @@ -2,5 +2,45 @@ "version.label": { "message": "Volgende", "description": "The label for version current" + }, + "sidebar.tutorialSidebar.category.Tutorials": { + "message": "Tutorials", + "description": "The label for category 'Tutorials' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.Tutorials.link.generated-index.title": { + "message": "MyDash tutorials", + "description": "The generated-index page title for category 'Tutorials' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.Tutorials.link.generated-index.description": { + "message": "Step-by-step walkthroughs for everyday MyDash tasks. The user track covers personal-dashboard workflows; the admin track covers org-wide configuration and policy.", + "description": "The generated-index page description for category 'Tutorials' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.User guide": { + "message": "User guide", + "description": "The label for category 'User guide' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.User guide.link.generated-index.title": { + "message": "User guide", + "description": "The generated-index page title for category 'User guide' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.User guide.link.generated-index.description": { + "message": "Workflows for individual MyDash users — opening the app, customizing dashboards, switching between them, and pinning a default.", + "description": "The generated-index page description for category 'User guide' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.Admin guide": { + "message": "Admin guide", + "description": "The label for category 'Admin guide' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.Admin guide.link.generated-index.title": { + "message": "Admin guide", + "description": "The generated-index page title for category 'Admin guide' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.Admin guide.link.generated-index.description": { + "message": "Org-wide MyDash administration — toggling personal dashboards, authoring admin templates, marking group defaults, and restricting widgets per role.", + "description": "The generated-index page description for category 'Admin guide' in sidebar 'tutorialSidebar'" + }, + "sidebar.tutorialSidebar.category.MyDash — Features": { + "message": "MyDash — Features", + "description": "The label for category 'MyDash — Features' in sidebar 'tutorialSidebar'" } } diff --git a/docs/static/screenshots/admin-settings.png b/docs/static/screenshots/admin-settings.png new file mode 100644 index 00000000..d96f2972 Binary files /dev/null and b/docs/static/screenshots/admin-settings.png differ diff --git a/docs/static/screenshots/customize-panel-dashboards.png b/docs/static/screenshots/customize-panel-dashboards.png new file mode 100644 index 00000000..c50e87d1 Binary files /dev/null and b/docs/static/screenshots/customize-panel-dashboards.png differ diff --git a/docs/static/screenshots/customize-panel-widgets.png b/docs/static/screenshots/customize-panel-widgets.png new file mode 100644 index 00000000..a1ddde18 Binary files /dev/null and b/docs/static/screenshots/customize-panel-widgets.png differ diff --git a/docs/static/screenshots/mydash-dashboard-overview.png b/docs/static/screenshots/mydash-dashboard-overview.png new file mode 100644 index 00000000..af39d3b7 Binary files /dev/null and b/docs/static/screenshots/mydash-dashboard-overview.png differ diff --git a/docs/static/screenshots/template-create-modal.png b/docs/static/screenshots/template-create-modal.png new file mode 100644 index 00000000..19241f0b Binary files /dev/null and b/docs/static/screenshots/template-create-modal.png differ diff --git a/docs/static/screenshots/tutorials/admin/01-admin-settings.png b/docs/static/screenshots/tutorials/admin/01-admin-settings.png new file mode 100644 index 00000000..3b447854 Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/01-admin-settings.png differ diff --git a/docs/static/screenshots/tutorials/admin/01-toggle.png b/docs/static/screenshots/tutorials/admin/01-toggle.png new file mode 100644 index 00000000..3b447854 Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/01-toggle.png differ diff --git a/docs/static/screenshots/tutorials/admin/02-template-create.png b/docs/static/screenshots/tutorials/admin/02-template-create.png new file mode 100644 index 00000000..a4713525 Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/02-template-create.png differ diff --git a/docs/static/screenshots/tutorials/admin/02-template-edit.png b/docs/static/screenshots/tutorials/admin/02-template-edit.png new file mode 100644 index 00000000..adf11223 Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/02-template-edit.png differ diff --git a/docs/static/screenshots/tutorials/admin/02-templates-list.png b/docs/static/screenshots/tutorials/admin/02-templates-list.png new file mode 100644 index 00000000..bc050402 Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/02-templates-list.png differ diff --git a/docs/static/screenshots/tutorials/admin/03-group-cog.png b/docs/static/screenshots/tutorials/admin/03-group-cog.png new file mode 100644 index 00000000..c68e2dcf Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/03-group-cog.png differ diff --git a/docs/static/screenshots/tutorials/admin/04-role-create.png b/docs/static/screenshots/tutorials/admin/04-role-create.png new file mode 100644 index 00000000..e4b05fe8 Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/04-role-create.png differ diff --git a/docs/static/screenshots/tutorials/admin/04-roles-tab.png b/docs/static/screenshots/tutorials/admin/04-roles-tab.png new file mode 100644 index 00000000..b1839f8c Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/04-roles-tab.png differ diff --git a/docs/static/screenshots/tutorials/admin/05-bulk-panel.png b/docs/static/screenshots/tutorials/admin/05-bulk-panel.png new file mode 100644 index 00000000..fbcf808c Binary files /dev/null and b/docs/static/screenshots/tutorials/admin/05-bulk-panel.png differ diff --git a/docs/static/screenshots/tutorials/user/01-first-launch-overview.png b/docs/static/screenshots/tutorials/user/01-first-launch-overview.png new file mode 100644 index 00000000..71ba497f Binary files /dev/null and b/docs/static/screenshots/tutorials/user/01-first-launch-overview.png differ diff --git a/docs/static/screenshots/tutorials/user/02-create-add-button.png b/docs/static/screenshots/tutorials/user/02-create-add-button.png new file mode 100644 index 00000000..b5e445c4 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/02-create-add-button.png differ diff --git a/docs/static/screenshots/tutorials/user/02-create-modal.png b/docs/static/screenshots/tutorials/user/02-create-modal.png new file mode 100644 index 00000000..2107ae28 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/02-create-modal.png differ diff --git a/docs/static/screenshots/tutorials/user/02-sidebar-open.png b/docs/static/screenshots/tutorials/user/02-sidebar-open.png new file mode 100644 index 00000000..635355ec Binary files /dev/null and b/docs/static/screenshots/tutorials/user/02-sidebar-open.png differ diff --git a/docs/static/screenshots/tutorials/user/03-cog-menu.png b/docs/static/screenshots/tutorials/user/03-cog-menu.png new file mode 100644 index 00000000..904ad999 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/03-cog-menu.png differ diff --git a/docs/static/screenshots/tutorials/user/03-edit-mode-enter.png b/docs/static/screenshots/tutorials/user/03-edit-mode-enter.png new file mode 100644 index 00000000..815b8fbd Binary files /dev/null and b/docs/static/screenshots/tutorials/user/03-edit-mode-enter.png differ diff --git a/docs/static/screenshots/tutorials/user/03-widget-added.png b/docs/static/screenshots/tutorials/user/03-widget-added.png new file mode 100644 index 00000000..525e64ab Binary files /dev/null and b/docs/static/screenshots/tutorials/user/03-widget-added.png differ diff --git a/docs/static/screenshots/tutorials/user/03-widget-form.png b/docs/static/screenshots/tutorials/user/03-widget-form.png new file mode 100644 index 00000000..238c2026 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/03-widget-form.png differ diff --git a/docs/static/screenshots/tutorials/user/03-widget-picker.png b/docs/static/screenshots/tutorials/user/03-widget-picker.png new file mode 100644 index 00000000..e6a2d0d1 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/03-widget-picker.png differ diff --git a/docs/static/screenshots/tutorials/user/04-dragging.png b/docs/static/screenshots/tutorials/user/04-dragging.png new file mode 100644 index 00000000..981d1643 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/04-dragging.png differ diff --git a/docs/static/screenshots/tutorials/user/04-edit-mode.png b/docs/static/screenshots/tutorials/user/04-edit-mode.png new file mode 100644 index 00000000..2ac1c064 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/04-edit-mode.png differ diff --git a/docs/static/screenshots/tutorials/user/04-reflowed.png b/docs/static/screenshots/tutorials/user/04-reflowed.png new file mode 100644 index 00000000..cd6b40c4 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/04-reflowed.png differ diff --git a/docs/static/screenshots/tutorials/user/07-default-marker.png b/docs/static/screenshots/tutorials/user/07-default-marker.png new file mode 100644 index 00000000..6aff0490 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/07-default-marker.png differ diff --git a/docs/static/screenshots/tutorials/user/08-url-bar.png b/docs/static/screenshots/tutorials/user/08-url-bar.png new file mode 100644 index 00000000..5f167f38 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/08-url-bar.png differ diff --git a/docs/static/screenshots/tutorials/user/09-after-switch.png b/docs/static/screenshots/tutorials/user/09-after-switch.png new file mode 100644 index 00000000..880c1b2e Binary files /dev/null and b/docs/static/screenshots/tutorials/user/09-after-switch.png differ diff --git a/docs/static/screenshots/tutorials/user/10-config-modal.png b/docs/static/screenshots/tutorials/user/10-config-modal.png new file mode 100644 index 00000000..8a72253a Binary files /dev/null and b/docs/static/screenshots/tutorials/user/10-config-modal.png differ diff --git a/docs/static/screenshots/tutorials/user/10-delete-confirm.png b/docs/static/screenshots/tutorials/user/10-delete-confirm.png new file mode 100644 index 00000000..8dd4c625 Binary files /dev/null and b/docs/static/screenshots/tutorials/user/10-delete-confirm.png differ diff --git a/docs/tutorials/admin/01-toggle-personal-dashboards.md b/docs/tutorials/admin/01-toggle-personal-dashboards.md index 34d04afd..2c12899c 100644 --- a/docs/tutorials/admin/01-toggle-personal-dashboards.md +++ b/docs/tutorials/admin/01-toggle-personal-dashboards.md @@ -22,13 +22,13 @@ Toggle the flag on or off and verify the user UI reflects the change. Settings menu (avatar) → **Administration settings** → **MyDash** in the left nav. -![MyDash admin settings page](../../screenshots/tutorials/admin/01-admin-settings.png) +![MyDash admin settings page](/screenshots/tutorials/admin/01-admin-settings.png) ### 2. Find the **Personal dashboards** section The section is near the top of the page. The toggle is labelled **Allow users to create personal dashboards**. -![Personal dashboards toggle](../../screenshots/tutorials/admin/01-toggle.png) +![Personal dashboards toggle](/screenshots/tutorials/admin/01-toggle.png) ### 3. Flip the toggle @@ -41,7 +41,7 @@ Open MyDash as a non-admin user. - **Toggle on** → **+ Add dashboard** is visible in the sidebar; the empty state shows the standard "Create your first dashboard" CTA. - **Toggle off** → button hidden; empty state shows "Personal dashboards are not enabled by your administrator." -![User UI when disabled](../../screenshots/tutorials/admin/01-user-disabled.png) +![User UI when disabled](/screenshots/tutorials/admin/01-user-disabled.png) ## Behaviour notes diff --git a/docs/tutorials/admin/02-admin-templates.md b/docs/tutorials/admin/02-admin-templates.md index cecb46c9..38807387 100644 --- a/docs/tutorials/admin/02-admin-templates.md +++ b/docs/tutorials/admin/02-admin-templates.md @@ -33,7 +33,7 @@ Avatar → **Administration settings** → **MyDash**. The section lists every existing template with name, assigned groups, and edit / delete actions. -![Admin templates list](../../screenshots/tutorials/admin/02-templates-list.png) +![Admin templates list](/screenshots/tutorials/admin/02-templates-list.png) ### 3. Click **Create template** @@ -42,7 +42,7 @@ The template-create modal opens. Required fields: - **Name** — internal label for admins. Not user-visible (the user sees a regular dashboard with whatever name you set there). - **Group order priority** — comma-separated group ids in priority order. The resolver picks the first group in this list that the user belongs to. -![Create template modal](../../screenshots/tutorials/admin/02-template-create.png) +![Create template modal](/screenshots/tutorials/admin/02-template-create.png) Optional fields: @@ -53,13 +53,13 @@ Optional fields: Saving creates the template row. Click **Edit layout** on the new template — MyDash opens a regular dashboard editor scoped to the template. Add widgets, position them, configure them — exactly like editing a personal dashboard. -![Edit template layout](../../screenshots/tutorials/admin/02-template-edit.png) +![Edit template layout](/screenshots/tutorials/admin/02-template-edit.png) ### 5. Verify with a test user `occ user:add testuser` (or pick an existing member of the assigned group). Log in as that user and open MyDash. The first visit clones the template into a personal dashboard named **My Dashboard** (default) — visible in **MY DASHBOARDS** in the sidebar. -![Test user lands on cloned template](../../screenshots/tutorials/admin/02-test-user-view.png) +![Test user lands on cloned template](/screenshots/tutorials/admin/02-test-user-view.png) ## Behaviour notes diff --git a/docs/tutorials/admin/03-group-defaults.md b/docs/tutorials/admin/03-group-defaults.md index 09ae9b64..f98f810b 100644 --- a/docs/tutorials/admin/03-group-defaults.md +++ b/docs/tutorials/admin/03-group-defaults.md @@ -24,19 +24,19 @@ Mark an existing dashboard as the default for a Nextcloud group, and verify memb Open MyDash as the admin and navigate to the group dashboard. Open its cog menu. -![Group dashboard cog menu](../../screenshots/tutorials/admin/03-group-cog.png) +![Group dashboard cog menu](/screenshots/tutorials/admin/03-group-cog.png) ### 2. Click **Set as default for <group>** This is admin-only. The action issues `POST /api/dashboards/group//default` with the dashboard's UUID. The service flips the previous group default off and the new one on **in a single transaction** (REQ-DASH-015), so members never see a flash with no default. -![Set as default for group](../../screenshots/tutorials/admin/03-set-group-default.png) +![Set as default for group](/screenshots/tutorials/admin/03-set-group-default.png) ### 3. Verify on a member's view Log in as a member of the group. Their sidebar's **DEFAULT** section now lists the dashboard you marked. -![Member view — DEFAULT section](../../screenshots/tutorials/admin/03-member-default.png) +![Member view — DEFAULT section](/screenshots/tutorials/admin/03-member-default.png) ## Behaviour notes diff --git a/docs/tutorials/admin/04-restrict-widgets.md b/docs/tutorials/admin/04-restrict-widgets.md index bc3bec51..d468a136 100644 --- a/docs/tutorials/admin/04-restrict-widgets.md +++ b/docs/tutorials/admin/04-restrict-widgets.md @@ -27,7 +27,7 @@ Define a role with a widget allow-list, assign it to a group, and verify members ### 1. Open MyDash admin settings → **Roles** -![Roles tab in admin settings](../../screenshots/tutorials/admin/04-roles-tab.png) +![Roles tab in admin settings](/screenshots/tutorials/admin/04-roles-tab.png) ### 2. Click **Create role** @@ -37,7 +37,7 @@ Required fields: - **Group** — Nextcloud group id this role applies to. - **Allowed widgets** — multi-select of widget IDs (e.g. `recommendations`, `activity`, `tile`, `files`, `text`). -![Create role modal](../../screenshots/tutorials/admin/04-role-create.png) +![Create role modal](/screenshots/tutorials/admin/04-role-create.png) Leave the allow-list empty to mean "no restriction" (the default for users not in any role). @@ -49,7 +49,7 @@ The role row appears in the list. The allow-list is persisted in `oc_mydash_role As a member of the assigned group, open MyDash and the widget picker: -![Filtered widget picker](../../screenshots/tutorials/admin/04-filtered-picker.png) +![Filtered widget picker](/screenshots/tutorials/admin/04-filtered-picker.png) Only the allowed widget IDs appear. Existing placements of disallowed widgets keep rendering — the filter only applies to **adding new** widgets. diff --git a/docs/tutorials/admin/05-bulk-operations.md b/docs/tutorials/admin/05-bulk-operations.md index 8c173d73..7d7e1c8a 100644 --- a/docs/tutorials/admin/05-bulk-operations.md +++ b/docs/tutorials/admin/05-bulk-operations.md @@ -34,19 +34,19 @@ Move every dashboard in `eng-old` into `eng`, then delete the now-empty `eng-old ### 1. Open Bulk operations -![Bulk operations panel](../../screenshots/tutorials/admin/05-bulk-panel.png) +![Bulk operations panel](/screenshots/tutorials/admin/05-bulk-panel.png) ### 2. Filter the dashboard list Filter controls: by group id, by `source`, by date range, by name match. The selected rows update live. -![Filter applied — eng-old dashboards selected](../../screenshots/tutorials/admin/05-bulk-filter.png) +![Filter applied — eng-old dashboards selected](/screenshots/tutorials/admin/05-bulk-filter.png) ### 3. Pick **Move** and the target group Select the rows (or **Select all matching**), open the action dropdown, pick **Move**, type or pick the target group id (`eng`). -![Move action — target group entered](../../screenshots/tutorials/admin/05-bulk-move-target.png) +![Move action — target group entered](/screenshots/tutorials/admin/05-bulk-move-target.png) ### 4. Confirm @@ -54,7 +54,7 @@ A confirmation dialog summarises what's about to happen — count, source group, The action issues `POST /api/admin/dashboards/bulk-move` with the UUIDs and target group id. Service-side this is a single transaction: all rows or nothing. -![Bulk move confirmation](../../screenshots/tutorials/admin/05-bulk-confirm.png) +![Bulk move confirmation](/screenshots/tutorials/admin/05-bulk-confirm.png) ### 5. Repeat for **Delete** on the empty group diff --git a/docs/tutorials/user/01-first-launch.md b/docs/tutorials/user/01-first-launch.md index e90dfbb9..1402b8c6 100644 --- a/docs/tutorials/user/01-first-launch.md +++ b/docs/tutorials/user/01-first-launch.md @@ -18,7 +18,7 @@ Recognise the parts of the MyDash workspace and know where to find the controls Or visit `/apps/mydash/` directly. After a moment of loading you land on **My Dashboard** with the default widget bundle already in place: -![First-launch overview](../../screenshots/tutorials/user/01-first-launch-overview.png) +![First-launch overview](/screenshots/tutorials/user/01-first-launch-overview.png) The bundle ships with three preconfigured tile widgets on the top row — Conduction, Sendent, and Nextcloud — plus a Files widget below. @@ -26,7 +26,7 @@ The bundle ships with three preconfigured tile widgets on the top row — Conduc Click the **hamburger** button in the top-right to slide out the sidebar: -![Sidebar open](../../screenshots/tutorials/user/02-sidebar-open.png) +![Sidebar open](/screenshots/tutorials/user/02-sidebar-open.png) The sidebar is your jumping-off point for everything — switching between dashboards, creating new ones, configuring an existing one, and pinning a default. @@ -44,7 +44,7 @@ A ★ next to a row marks that dashboard as your **default** — the one MyDash Each row carries a cog (⚙️) on the right. Click it for the per-dashboard action menu: -![Cog action menu](../../screenshots/tutorials/user/03-cog-menu.png) +![Cog action menu](/screenshots/tutorials/user/03-cog-menu.png) From here you can edit the layout, configure metadata, add custom widgets, pin as default, and delete. Most of the rest of the user guide is built around these actions. diff --git a/docs/tutorials/user/02-create-dashboard.md b/docs/tutorials/user/02-create-dashboard.md index 186a9e3b..6cbc8c70 100644 --- a/docs/tutorials/user/02-create-dashboard.md +++ b/docs/tutorials/user/02-create-dashboard.md @@ -20,7 +20,7 @@ Create a new personal dashboard, give it a name, optionally add a description an ### 1. Open the sidebar and click **+ Add dashboard** -![Add dashboard button](../../screenshots/tutorials/user/02-create-add-button.png) +![Add dashboard button](/screenshots/tutorials/user/02-create-add-button.png) ### 2. Fill in the create modal @@ -30,13 +30,13 @@ A configuration modal opens with these fields: - **Description** — optional. Shown in admin tooling and inside the configuration modal. - **Icon** — optional. Pick from the registered icon set, or paste a URL for a custom icon (see [Dashboard icons capability](../../features/dashboards.md)). -![Create dashboard modal](../../screenshots/tutorials/user/02-create-modal.png) +![Create dashboard modal](/screenshots/tutorials/user/02-create-modal.png) ### 3. Click **Save** The new dashboard is auto-activated, appears at the top of **MY DASHBOARDS** in the sidebar, and is bootstrapped with the default widget bundle (three tiles + a Files widget). You can now [add more widgets](03-add-widget.md), [reposition them](04-reposition-resize.md), or [pin this as your default](07-set-default.md). -![New dashboard with default bundle](../../screenshots/tutorials/user/02-create-success.png) +![New dashboard with default bundle](/screenshots/tutorials/user/02-create-success.png) ## Verification diff --git a/docs/tutorials/user/03-add-widget.md b/docs/tutorials/user/03-add-widget.md index f5352c48..4d06a855 100644 --- a/docs/tutorials/user/03-add-widget.md +++ b/docs/tutorials/user/03-add-widget.md @@ -27,13 +27,13 @@ Add a new widget to your active dashboard. Open the active dashboard's cog menu and click **Edit dashboard**. The grid shows resize handles on each placement. -![Edit dashboard menu entry](../../screenshots/tutorials/user/03-edit-mode-enter.png) +![Edit dashboard menu entry](/screenshots/tutorials/user/03-edit-mode-enter.png) ### 2. Open the **Add widget** modal From the cog menu pick **Add custom widget…** for the MyDash custom families, or click the empty-cell **+** marker that appears in edit mode for built-in Nextcloud widgets. -![Widget picker modal](../../screenshots/tutorials/user/03-widget-picker.png) +![Widget picker modal](/screenshots/tutorials/user/03-widget-picker.png) ### 3. Pick a widget type @@ -48,13 +48,13 @@ Each custom widget type opens its own form. Some examples: - **Files** — folder path, view mode (list / grid), optional filters and upload toggle. - **Link button** — single-link button or list mode with multiple links. -![Per-type configuration form](../../screenshots/tutorials/user/03-widget-form.png) +![Per-type configuration form](/screenshots/tutorials/user/03-widget-form.png) ### 5. Click **Save** The new placement appears in the grid at the next available cell. You can immediately drag it where you want — see [Reposition & resize widgets](04-reposition-resize.md). -![Newly-added widget on dashboard](../../screenshots/tutorials/user/03-widget-added.png) +![Newly-added widget on dashboard](/screenshots/tutorials/user/03-widget-added.png) ## Verification diff --git a/docs/tutorials/user/04-reposition-resize.md b/docs/tutorials/user/04-reposition-resize.md index 1c6a0785..d7074560 100644 --- a/docs/tutorials/user/04-reposition-resize.md +++ b/docs/tutorials/user/04-reposition-resize.md @@ -23,27 +23,27 @@ Move a widget to a new position and resize it. Cog menu → **Edit dashboard**. Drag/resize handles appear on every placement; the cog button on the active row flips to **Save dashboard** with a save icon. -![Edit mode active](../../screenshots/tutorials/user/04-edit-mode.png) +![Edit mode active](/screenshots/tutorials/user/04-edit-mode.png) ### 2. Reposition by dragging the title bar Click and hold anywhere on a widget's header (or its drag handle if the widget overrides the title row). Drop targets light up as you move; release to snap into place. Other widgets reflow around the drop point. -![Mid-drag — drop targets](../../screenshots/tutorials/user/04-dragging.png) +![Mid-drag — drop targets](/screenshots/tutorials/user/04-dragging.png) -![After drop — reflowed layout](../../screenshots/tutorials/user/04-reflowed.png) +![After drop — reflowed layout](/screenshots/tutorials/user/04-reflowed.png) ### 3. Resize from the corner / edge handles Each widget has a bottom-right corner handle for diagonal resize and edge handles for single-axis resize. Minimum size is 2×2 cells; the registry-defined widget size hints take precedence on first placement but you can resize freely afterwards. -![Resizing a widget](../../screenshots/tutorials/user/04-resizing.png) +![Resizing a widget](/screenshots/tutorials/user/04-resizing.png) ### 4. Save the layout Click **Save dashboard** in the top-right (the cog button switches into save mode while editing). MyDash issues a single `PUT /api/dashboard/{id}` with the new layout. -![Save layout](../../screenshots/tutorials/user/04-save-layout.png) +![Save layout](/screenshots/tutorials/user/04-save-layout.png) :::tip The grid auto-saves on drop, so the explicit Save button is mostly a confirmation that no other layout changes are pending. If you reload mid-edit you'll see the auto-saved state, not a draft. diff --git a/docs/tutorials/user/05-edit-content.md b/docs/tutorials/user/05-edit-content.md index 61fa9ed4..04fe8170 100644 --- a/docs/tutorials/user/05-edit-content.md +++ b/docs/tutorials/user/05-edit-content.md @@ -27,7 +27,7 @@ Edit a widget you already added — both its content and its visual style. In edit mode, right-clicking a widget opens a context menu anchored at the cursor: -![Right-click context menu](../../screenshots/tutorials/user/05-context-menu.png) +![Right-click context menu](/screenshots/tutorials/user/05-context-menu.png) Options: - **Edit** — opens the per-type configuration form (same as during add). @@ -39,7 +39,7 @@ Options: Pick **Edit**. The same `AddWidgetModal` you used to add the widget reopens, this time pre-filled with the current placement's content. Change fields and **Save**. -![Edit content modal](../../screenshots/tutorials/user/05-edit-content.png) +![Edit content modal](/screenshots/tutorials/user/05-edit-content.png) ### 3. Edit style @@ -51,7 +51,7 @@ Pick **Style** instead. The dedicated `WidgetStyleEditor` opens with these contr - **Border** — colour and thickness. - **Background colour** — solid, transparent, or theme-bound. -![Style editor](../../screenshots/tutorials/user/05-style-editor.png) +![Style editor](/screenshots/tutorials/user/05-style-editor.png) The style is persisted as a JSON blob in `placement.styleConfig`; it doesn't touch the widget's content. diff --git a/docs/tutorials/user/06-remove-widget.md b/docs/tutorials/user/06-remove-widget.md index 629561b6..814ae1c5 100644 --- a/docs/tutorials/user/06-remove-widget.md +++ b/docs/tutorials/user/06-remove-widget.md @@ -23,13 +23,13 @@ Remove one widget from a dashboard. In edit mode, right-click anywhere on the widget. The context menu opens at the cursor. -![Right-click context menu](../../screenshots/tutorials/user/05-context-menu.png) +![Right-click context menu](/screenshots/tutorials/user/05-context-menu.png) ### 2. Click **Remove** The menu auto-closes and the placement disappears from the grid. The DELETE call fires immediately; there is no undo. -![After remove](../../screenshots/tutorials/user/06-after-remove.png) +![After remove](/screenshots/tutorials/user/06-after-remove.png) :::caution The remove is destructive. If you're unsure, [edit the style](05-edit-content.md) and toggle **Show title** off — it hides the placement without deleting it. diff --git a/docs/tutorials/user/07-set-default.md b/docs/tutorials/user/07-set-default.md index 73ea3eb1..1855b68b 100644 --- a/docs/tutorials/user/07-set-default.md +++ b/docs/tutorials/user/07-set-default.md @@ -25,7 +25,7 @@ Pin a dashboard as your personal default; verify the ★ marker appears in the s ### 1. Open the sidebar and click the cog on the row you want as default -![Cog action menu](../../screenshots/tutorials/user/03-cog-menu.png) +![Cog action menu](/screenshots/tutorials/user/03-cog-menu.png) ### 2. Click **Set as default** @@ -35,7 +35,7 @@ Pin a dashboard as your personal default; verify the ★ marker appears in the s The sidebar redraws with a small star to the left of the dashboard name on the pinned row: -![Sidebar with star marker](../../screenshots/tutorials/user/07-default-marker.png) +![Sidebar with star marker](/screenshots/tutorials/user/07-default-marker.png) The marker carries a tooltip on hover: *"Default dashboard — opens automatically when you visit MyDash"*. Screen readers announce the same string via `aria-label`. @@ -49,7 +49,7 @@ Close the tab. Visit `/apps/mydash/` from scratch. You land on the pinned dashbo - **The marker can land on any section.** Personal pin in **MY DASHBOARDS**, group dashboard in the primary-group section, default-group dashboard in **DEFAULT** — all carry the same star. - **No pin set?** The marker still appears on whichever group dashboard the resolver would land on (the same fallback chain — steps 2-5 above). -![No pin — fallback to group default](../../screenshots/tutorials/user/07-fallback-marker.png) +![No pin — fallback to group default](/screenshots/tutorials/user/07-fallback-marker.png) ## Common issues diff --git a/docs/tutorials/user/08-deep-link.md b/docs/tutorials/user/08-deep-link.md index f611bce5..165b6cf6 100644 --- a/docs/tutorials/user/08-deep-link.md +++ b/docs/tutorials/user/08-deep-link.md @@ -34,7 +34,7 @@ Open a dashboard via its URL, and verify the URL stays in sync as you switch das The address bar already shows it after the slash: -![URL bar](../../screenshots/tutorials/user/08-url-bar.png) +![URL bar](/screenshots/tutorials/user/08-url-bar.png) Or check **Dashboard configuration…** in the cog menu — the slug is editable there. @@ -42,13 +42,13 @@ Or check **Dashboard configuration…** in the cog menu — the slug is editable Open a new tab and paste `http://localhost:8080/apps/mydash/`. MyDash loads with that dashboard already active — no extra clicks needed. -![Deep-link landing](../../screenshots/tutorials/user/08-deep-link-landed.png) +![Deep-link landing](/screenshots/tutorials/user/08-deep-link-landed.png) ### 3. Switch dashboards in the sidebar Click another row. The URL updates immediately via `history.pushState` — the page doesn't reload but the address bar is now the slug-chain of the new dashboard. -![URL updates after switch](../../screenshots/tutorials/user/08-url-after-switch.png) +![URL updates after switch](/screenshots/tutorials/user/08-url-after-switch.png) ### 4. Use the browser back / forward buttons diff --git a/docs/tutorials/user/09-switch-dashboards.md b/docs/tutorials/user/09-switch-dashboards.md index b661a177..fb654062 100644 --- a/docs/tutorials/user/09-switch-dashboards.md +++ b/docs/tutorials/user/09-switch-dashboards.md @@ -18,13 +18,13 @@ Switch from the active dashboard to a different one. Click the hamburger button (top-right). The sidebar slides in from the left: -![Sidebar open](../../screenshots/tutorials/user/02-sidebar-open.png) +![Sidebar open](/screenshots/tutorials/user/02-sidebar-open.png) ### 2. Click the row of the dashboard you want The sidebar closes immediately (per `REQ-SWITCH-002`); the workspace re-renders with the selected dashboard's layout. The URL updates via `history.pushState` so back/forward navigates between dashboards (see [Bookmark or share a dashboard URL](08-deep-link.md)). -![After switching](../../screenshots/tutorials/user/09-after-switch.png) +![After switching](/screenshots/tutorials/user/09-after-switch.png) ### 3. The active row is highlighted diff --git a/docs/tutorials/user/10-rename-or-delete.md b/docs/tutorials/user/10-rename-or-delete.md index 5fb2780a..941fb0eb 100644 --- a/docs/tutorials/user/10-rename-or-delete.md +++ b/docs/tutorials/user/10-rename-or-delete.md @@ -21,13 +21,13 @@ Change a dashboard's metadata (name, description, icon, slug) — or delete it. ### 1. Open the cog menu on the row -![Cog action menu](../../screenshots/tutorials/user/03-cog-menu.png) +![Cog action menu](/screenshots/tutorials/user/03-cog-menu.png) ### 2. Click **Dashboard configuration…** The configuration modal opens with the current values pre-filled: -![Dashboard configuration modal](../../screenshots/tutorials/user/10-config-modal.png) +![Dashboard configuration modal](/screenshots/tutorials/user/10-config-modal.png) Editable fields: @@ -46,7 +46,7 @@ The dashboard updates in place. Slug changes propagate to the URL: if you were v A confirmation prompt appears. Confirming issues `DELETE /api/dashboard/{id}`; the row is removed from the sidebar and the active dashboard falls back to your default (or the next available). -![Delete confirmation](../../screenshots/tutorials/user/10-delete-confirm.png) +![Delete confirmation](/screenshots/tutorials/user/10-delete-confirm.png) :::danger Permanent Deleting a dashboard removes it AND every widget placement on it. There is no undo. Tile data, widget configs, and the dashboard row itself are all dropped. diff --git a/tests/e2e/docs-screenshots.spec.ts b/tests/e2e/docs-screenshots.spec.ts index fffade88..63480933 100644 --- a/tests/e2e/docs-screenshots.spec.ts +++ b/tests/e2e/docs-screenshots.spec.ts @@ -37,11 +37,13 @@ import { test, expect, type Page } from '@playwright/test' import * as path from 'path' import * as fs from 'fs' -const SHOT_ROOT = path.resolve(__dirname, '..', '..', 'docs', 'screenshots', 'tutorials') +const SHOT_ROOT = path.resolve(__dirname, '..', '..', 'docs', 'static', 'screenshots', 'tutorials') /** - * Save a screenshot under `docs/screenshots/tutorials//`. - * Ensures the destination directory exists. + * Save a screenshot under `docs/static/screenshots/tutorials//`. + * Lives under `static/` so Docusaurus copies the PNGs into the build root — + * markdown image refs use the absolute `/screenshots/...` path the static + * dir resolves to. Ensures the destination directory exists. */ async function shoot(page: Page, track: 'user' | 'admin', file: string): Promise { const dir = path.join(SHOT_ROOT, track)