diff --git a/astro.config.mjs b/astro.config.mjs index 22f70f3..17e3c31 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -64,6 +64,7 @@ export default defineConfig({ { label: "Help & Support", items: [ + { label: "Tutorials", slug: "support/tutorials"}, { label: "Troubleshooting", slug: "support/troubleshooting" }, { label: "Getting Help", slug: "support/getting-help" }, ], diff --git a/src/assets/base-images/tutorial-card-help-page-dark.png b/src/assets/base-images/tutorial-card-help-page-dark.png new file mode 100644 index 0000000..7b68ad3 Binary files /dev/null and b/src/assets/base-images/tutorial-card-help-page-dark.png differ diff --git a/src/assets/base-images/tutorial-card-help-page-light.png b/src/assets/base-images/tutorial-card-help-page-light.png new file mode 100644 index 0000000..61bf098 Binary files /dev/null and b/src/assets/base-images/tutorial-card-help-page-light.png differ diff --git a/src/assets/base-images/tutorial-card-landing-page-dark.png b/src/assets/base-images/tutorial-card-landing-page-dark.png new file mode 100644 index 0000000..d5b1752 Binary files /dev/null and b/src/assets/base-images/tutorial-card-landing-page-dark.png differ diff --git a/src/assets/base-images/tutorial-card-landing-page-light.png b/src/assets/base-images/tutorial-card-landing-page-light.png new file mode 100644 index 0000000..0b0f6f0 Binary files /dev/null and b/src/assets/base-images/tutorial-card-landing-page-light.png differ diff --git a/src/assets/base-images/tutorial-end-dark.png b/src/assets/base-images/tutorial-end-dark.png new file mode 100644 index 0000000..31f4bdb Binary files /dev/null and b/src/assets/base-images/tutorial-end-dark.png differ diff --git a/src/assets/base-images/tutorial-end-light.png b/src/assets/base-images/tutorial-end-light.png new file mode 100644 index 0000000..b9b94f5 Binary files /dev/null and b/src/assets/base-images/tutorial-end-light.png differ diff --git a/src/assets/base-images/tutorial-interface-dark.png b/src/assets/base-images/tutorial-interface-dark.png new file mode 100644 index 0000000..01e0205 Binary files /dev/null and b/src/assets/base-images/tutorial-interface-dark.png differ diff --git a/src/assets/base-images/tutorial-interface-light.png b/src/assets/base-images/tutorial-interface-light.png new file mode 100644 index 0000000..0d68478 Binary files /dev/null and b/src/assets/base-images/tutorial-interface-light.png differ diff --git a/src/assets/task-images/tutorial-card-help-page-dark.png b/src/assets/task-images/tutorial-card-help-page-dark.png new file mode 100644 index 0000000..91672e9 Binary files /dev/null and b/src/assets/task-images/tutorial-card-help-page-dark.png differ diff --git a/src/assets/task-images/tutorial-card-help-page-light.png b/src/assets/task-images/tutorial-card-help-page-light.png new file mode 100644 index 0000000..c2236fe Binary files /dev/null and b/src/assets/task-images/tutorial-card-help-page-light.png differ diff --git a/src/assets/task-images/tutorial-card-landing-page-dark.png b/src/assets/task-images/tutorial-card-landing-page-dark.png new file mode 100644 index 0000000..74fe30a Binary files /dev/null and b/src/assets/task-images/tutorial-card-landing-page-dark.png differ diff --git a/src/assets/task-images/tutorial-card-landing-page-light.png b/src/assets/task-images/tutorial-card-landing-page-light.png new file mode 100644 index 0000000..4df031a Binary files /dev/null and b/src/assets/task-images/tutorial-card-landing-page-light.png differ diff --git a/src/assets/task-images/tutorial-end-dark.png b/src/assets/task-images/tutorial-end-dark.png new file mode 100644 index 0000000..9a109e4 Binary files /dev/null and b/src/assets/task-images/tutorial-end-dark.png differ diff --git a/src/assets/task-images/tutorial-end-light.png b/src/assets/task-images/tutorial-end-light.png new file mode 100644 index 0000000..7ff7918 Binary files /dev/null and b/src/assets/task-images/tutorial-end-light.png differ diff --git a/src/content/docs/support/tutorials.mdx b/src/content/docs/support/tutorials.mdx new file mode 100644 index 0000000..1ddf22c --- /dev/null +++ b/src/content/docs/support/tutorials.mdx @@ -0,0 +1,114 @@ +--- +title: Tutorials +description: Learn about the interactive guided tours available in Fileglancer to help you master key workflows. +--- + +import mascot from "@assets/mascot/fg-beach.png"; +import StyledImage from "@components/StyledImage.astro"; +import tutorialCardHomeDark from "@assets/task-images/tutorial-card-landing-page-dark.png"; +import tutorialCardHomeLight from "@assets/task-images/tutorial-card-landing-page-light.png"; +import tutorialCardHelpDark from "@assets/task-images/tutorial-card-help-page-dark.png"; +import tutorialCardHelpLight from "@assets/task-images/tutorial-card-help-page-light.png"; +import tutorialInterfaceDark from "@assets/base-images/tutorial-interface-dark.png"; +import tutorialInterfaceLight from "@assets/base-images/tutorial-interface-light.png"; +import tutorialEndDark from "@assets/task-images/tutorial-end-dark.png"; +import tutorialEndLight from "@assets/task-images/tutorial-end-light.png"; + +Fileglancer mascot + +Fileglancer provides interactive guided tours to help you learn the platform's key features. These tours walk you through common workflows step-by-step. + +## Accessing the Tours + +### From the Landing Page + + + +When you first log in to Fileglancer, you'll see a welcome card on the landing page with a "Start Tour" button. This card offers quick access to the tutorials. + +You can hide this card by checking the "Hide this card" option. Don't worry—you can always access the tours from the Help page. + +### From the Help Page + + + +The tours are always accessible from the Help page: + +1. Click the **Help** link in the top navigation bar +2. Find the **Take a Tutorial** card +3. Click to open the tour selection dialog + +## Available Tours + + + +When you open the tutorial interface, you'll be presented with three tour options. Each tour focuses on a specific workflow in Fileglancer. + +### 1. Navigation Tour + +Learn how to browse and find files in Fileglancer. This tour covers: + +- **"Navigate to path" widget**: Quickly jump to a specific directory +- **Sidebar**: Accessing zones, file shares, and favorites +- **Main file browser**: Browsing directories and viewing files +- **Properties panel**: Viewing file and folder information + +For further information on navigation features, see the [Navigating Files](../../workflows/navigation/) workflow guide. + +### 2. Data Links Tour + +Discover how to create and share links to your data. This tour covers: + +- **Creating data links from the Properties panel**: Using the toggle switch to enable sharing for any directory +- **Creating data links for OME-Zarr, Zarr, or Cellmap N5 images**: Opening viewers and creating shareable links for imaging data +- **Enabling automatic data links**: Streamlining the link creation process through enabling this preference + +For further information on data links, see the [Creating Data Links](../../workflows/data-links/) workflow guide. + +### 3. File Conversion Tour + +Learn how to request file format conversions for your scientific imaging data. This tour covers: + +- **Opening the Convert tab**: Accessing the conversion interface in the Properties panel +- **Opening a conversion request**: Filling out and submitting a conversion request form +- **Monitoring conversion status**: Using the Tasks page to track your conversion requests + +For further information on file conversions, see the [File Conversion Requests](../../workflows/file-conversion/) workflow guide. + +## Taking Multiple Tours + +At the end of any tour, you have two options: + +- **Take Another Tour**: Returns you to the tour selection dialog to choose a different tour +- **Exit Tour**: Closes the tutorial interface and returns you to your workflow + +You can take the tours in any order and repeat them as many times as you'd like. + + + +## Tips for Using the Tours + +- **Follow along in real-time**: The tours guide you through actual features in the interface, so you can practice as you learn +- **Repeat as needed**: Revisit any tour when you need a refresher on a workflow +- **Explore after completion**: Once you finish a tour, try using the features on your own to reinforce what you learned +- **Consult the workflow guides**: Each tour corresponds to a detailed workflow guide for deeper understanding