fix: Improve embedded user guide UX (#2630)
Resolves https://github.com/webrecorder/browsertrix/issues/2629 ## Changes - Fixes user guide not opening to the correct page when not using the workflow editor - Fixes out of date instructions in "starting a crawl" user guide - Updates user guide so that the content makes more sense for both logged in and non-logged in users, including moving the introduction section so that the user guide navigation categories are all displayed (see screenshot) ## Screenshots | Page | Image/video | | ---- | ----------- | | Dashboard | <img width="517" alt="Screenshot 2025-05-27 at 5 09 07 PM" src="https://github.com/user-attachments/assets/481ac817-d591-4ca9-a4be-532fad586fcf" /> | <!-- ## Follow-ups --> --------- Co-authored-by: Emma Segal-Grossman <hi@emma.cafe>
This commit is contained in:
sua yoo
GitHub
parent
dc41468daf
commit
9e581cbb7d
@ -2,24 +2,26 @@
|
||||
|
||||
Let’s crawl your first webpage! Start by opening up a webpage that you'd like to crawl, and note the URL for later.
|
||||
|
||||
## Logging in
|
||||
## Accessing your dashboard
|
||||
|
||||
To start crawling with hosted Browsertrix, you'll need a Browsertrix account. [Sign up for an account](./signup.md) and log in.
|
||||
To start a crawl, you'll need to log in using a Browsertrix account that has [**crawler** permissions](./org-members.md#permission-levels).
|
||||
|
||||
!!! note "Self-hosting"
|
||||
You likely have crawler permissions already if:
|
||||
|
||||
If you'd like to try Browsertrix before signing up, or you have specialized hosting requirements, you can host Browsertrix yourself. [Set up Browsertrix](../deploy/index.md) on your system and log in as your admin user.
|
||||
- You [registered for an org on hosted Browsertrix](./signup.md)
|
||||
- You [joined an existing org](./join.md) and were given crawler permissions
|
||||
- You are the admin of a self-hosted instance
|
||||
|
||||
Check if you have crawler permissions by logging in. If you see a _+ Create New..._ button near the org name, you're able to start a crawl. If you don't see this button and think that you should, contact your org admin to update your permissions.
|
||||
|
||||
## Starting the crawl
|
||||
|
||||
Once you've logged in you should see your org [overview](overview.md). If you land somewhere else, navigate to **Dashboard**.
|
||||
When you log in, the first page you see is the [org dashboard](overview.md). If you've navigated away to another page, navigate back to **Dashboard**.
|
||||
|
||||
1. Tap the _Create New..._ shortcut and select **Crawl Workflow**.
|
||||
2. Choose **Page List**. We'll get into the details of the options [later](./crawl-workflows.md), but this is a good starting point for a simple crawl.
|
||||
3. Enter the URL of the webpage that you noted earlier in **Page URL(s)**.
|
||||
4. Tap _Review & Save_.
|
||||
5. Tap _Save Workflow_.
|
||||
6. You should now see your new crawl workflow. Give the crawler a few moments to warm up, and then watch as it archives the webpage!
|
||||
2. Enter the URL of the webpage that you noted earlier as the **Page URL**.
|
||||
3. Tap _Run Crawl_.
|
||||
4. You should now see your new crawl workflow running. Give the crawler a few moments to warm up, and then watch as it archives the webpage!
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Welcome
|
||||
# Introduction
|
||||
|
||||
Browsertrix is an intuitive, automated web archiving platform designed to allow you to archive, replay, and share websites exactly as they were at a certain point in time.
|
||||
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
# Register For an Account
|
||||
|
||||
!!! tip "Already have an account?"
|
||||
|
||||
Skip ahead to [running your first crawl](./getting-started.md).
|
||||
|
||||
!!! note "Self-hosting?"
|
||||
|
||||
This guide only applies to hosted Browsertrix accounts. If you're self-hosting Browsertrix, [enable open registration](../deploy/customization.md#enable-open-registration) to allow others to sign up for an account on your instance.
|
||||
@ -8,7 +12,7 @@ To sign up for Browsertrix, [choose a plan](https://webrecorder.net/browsertrix/
|
||||
|
||||
## Register Your Org
|
||||
|
||||
After you finish setting up your subscription, you'll receive an email from us with a link to set up your org (organization.)
|
||||
After you finish setting up your subscription, you'll receive an email from Webrecorder with a link to set up your org (organization.)
|
||||
|
||||
Choose an org name that's unique and memorable, like the name of your company or organization. Your org URL identifier will determine the unique URL of the org's home page.
|
||||
|
||||
|
||||
@ -47,8 +47,8 @@ theme:
|
||||
nav:
|
||||
- Overview: index.md
|
||||
- User Guide:
|
||||
- user-guide/index.md
|
||||
- Getting Started:
|
||||
- user-guide/index.md
|
||||
- user-guide/signup.md
|
||||
- user-guide/getting-started.md
|
||||
- Orgs:
|
||||
|
||||
@ -2247,7 +2247,7 @@ https://archiveweb.page/images/${"logo.svg"}`}
|
||||
"btrix-user-guide-show",
|
||||
{
|
||||
detail: {
|
||||
path: `user-guide/workflow-setup/#${workflowTabToGuideHash[step]}`,
|
||||
path: `workflow-setup/#${workflowTabToGuideHash[step]}`,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
|
||||
@ -103,7 +103,7 @@ export class App extends BtrixElement {
|
||||
private viewState!: ViewState;
|
||||
|
||||
@state()
|
||||
private fullDocsUrl = "/docs/";
|
||||
private userGuidePath = "";
|
||||
|
||||
@state()
|
||||
private globalDialogContent: DialogContent = {};
|
||||
@ -199,7 +199,7 @@ export class App extends BtrixElement {
|
||||
"btrix-user-guide-show",
|
||||
(e: UserGuideEventMap["btrix-user-guide-show"]) => {
|
||||
e.stopPropagation();
|
||||
this.showUserGuide(e.detail.path);
|
||||
void this.showUserGuide(e.detail.path);
|
||||
},
|
||||
);
|
||||
}
|
||||
@ -385,6 +385,16 @@ export class App extends BtrixElement {
|
||||
>${this.globalDialogContent.body}</sl-dialog
|
||||
>
|
||||
|
||||
${this.renderUserGuide()}
|
||||
`;
|
||||
}
|
||||
|
||||
private renderUserGuide() {
|
||||
if (!this.docsUrl) return;
|
||||
|
||||
const url = `${this.docsUrl}user-guide/${this.userGuidePath}`;
|
||||
|
||||
return html`
|
||||
<sl-drawer
|
||||
id="userGuideDrawer"
|
||||
label=${msg("User Guide")}
|
||||
@ -400,22 +410,26 @@ export class App extends BtrixElement {
|
||||
if (!iframe) return;
|
||||
|
||||
const src = iframe.src;
|
||||
iframe.src = src.slice(0, src.indexOf("#"));
|
||||
const hashIdx = src.indexOf("#");
|
||||
|
||||
if (hashIdx > -1) {
|
||||
iframe.src = src.slice(0, src.indexOf("#"));
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span slot="label" class="flex items-center gap-3">
|
||||
<sl-icon name="book" class=""></sl-icon>
|
||||
<sl-icon name="book"></sl-icon>
|
||||
<span>${msg("User Guide")}</span>
|
||||
</span>
|
||||
<iframe
|
||||
class="size-full text-xs transition-opacity duration-slow"
|
||||
src="${this.docsUrl}user-guide/workflow-setup/"
|
||||
src="${url}"
|
||||
></iframe>
|
||||
<sl-button
|
||||
size="small"
|
||||
slot="footer"
|
||||
variant="text"
|
||||
href="${this.fullDocsUrl}"
|
||||
href="${url}"
|
||||
target="_blank"
|
||||
>
|
||||
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
|
||||
@ -535,7 +549,7 @@ export class App extends BtrixElement {
|
||||
? html`
|
||||
<button
|
||||
class="flex items-center gap-2 leading-none text-neutral-500 hover:text-primary"
|
||||
@click=${() => this.showUserGuide()}
|
||||
@click=${() => void this.showUserGuide()}
|
||||
>
|
||||
<sl-icon
|
||||
name="book"
|
||||
@ -983,16 +997,16 @@ export class App extends BtrixElement {
|
||||
></btrix-not-found>`;
|
||||
}
|
||||
|
||||
private showUserGuide(pathName?: string) {
|
||||
private async showUserGuide(pathName = "") {
|
||||
const iframe = this.userGuideDrawer.querySelector("iframe");
|
||||
|
||||
if (iframe) {
|
||||
if (pathName) {
|
||||
this.fullDocsUrl = this.docsUrl + pathName;
|
||||
iframe.src = this.fullDocsUrl;
|
||||
} else {
|
||||
this.fullDocsUrl = this.docsUrl;
|
||||
iframe.src = this.fullDocsUrl;
|
||||
const url = `${this.docsUrl}user-guide/${pathName}`;
|
||||
|
||||
if (url !== iframe.src) {
|
||||
this.userGuidePath = pathName;
|
||||
|
||||
await this.updateComplete;
|
||||
}
|
||||
|
||||
if (!this.appState.userGuideOpen) {
|
||||
|
||||
@ -67,7 +67,7 @@ export function makeUserGuideEvent(
|
||||
"btrix-user-guide-show",
|
||||
{
|
||||
detail: {
|
||||
path: `user-guide/workflow-setup/#${userGuideHash}`,
|
||||
path: `workflow-setup/#${userGuideHash}`,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user