tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: add public collections gallery howto (#2462)

Browse Source 
- Updated how collections gallery and presentation and sharing pages
- Collections gallery page content extracted from blog post, linked from blog post
- Each page has one video covering the gallery setting and individual collection presentation
- Cleaned up text on both to avoid duplicated content (thanks @DaleLore)



---------

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
Co-authored-by: DaleLore <DaleLoreNY@gmail.com>
This commit is contained in:
Ilya Kreymer 2025-03-08 15:57:13 -08:00 committed by GitHub
parent 75eb04c37b
commit 00a42515c8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 175 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/docs/docs/overrides/.icons/bootstrap/asterisk.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-asterisk" viewBox="0 0 16 16">
<path d="M8 0a1 1 0 0 1 1 1v5.268l4.562-2.634a1 1 0 1 1 1 1.732L10 8l4.562 2.634a1 1 0 1 1-1 1.732L9 9.732V15a1 1 0 1 1-2 0V9.732l-4.562 2.634a1 1 0 1 1-1-1.732L6 8 1.438 5.366a1 1 0 0 1 1-1.732L7 6.268V1a1 1 0 0 1 1-1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 357 B

3
frontend/docs/docs/overrides/.icons/bootstrap/globe2.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe2" viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855q-.215.403-.395.872c.705.157 1.472.257 2.282.287zM4.249 3.539q.214-.577.481-1.078a7 7 0 0 1 .597-.933A7 7 0 0 0 3.051 3.05q.544.277 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9 9 0 0 1-1.565-.667A6.96 6.96 0 0 0 1.018 7.5zm1.4-2.741a12.3 12.3 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332M8.5 5.09V7.5h2.99a12.3 12.3 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.6 13.6 0 0 1 7.5 10.91V8.5zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741zm-3.282 3.696q.18.469.395.872c.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a7 7 0 0 1-.598-.933 9 9 0 0 1-.481-1.079 8.4 8.4 0 0 0-1.198.49 7 7 0 0 0 2.276 1.522zm-1.383-2.964A13.4 13.4 0 0 1 3.508 8.5h-2.49a6.96 6.96 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667m6.728 2.964a7 7 0 0 0 2.275-1.521 8.4 8.4 0 0 0-1.197-.49 9 9 0 0 1-.481 1.078 7 7 0 0 1-.597.933M8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855q.216-.403.395-.872A12.6 12.6 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.96 6.96 0 0 0 14.982 8.5h-2.49a13.4 13.4 0 0 1-.437 3.008M14.982 7.5a6.96 6.96 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008zM11.27 2.461q.266.502.482 1.078a8.4 8.4 0 0 0 1.196-.49 7 7 0 0 0-2.275-1.52c.218.283.418.597.597.932m-.488 1.343a8 8 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
frontend/docs/docs/overrides/.icons/bootstrap/three-dots-vertical.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

29
frontend/docs/docs/user-guide/collection.md
View File

@ -1,10 +1,12 @@
# Intro to Collections
A collection is a specific, user-directed grouping of archived items from either crawls or WACZ files. You can create a collection, add content to your collection, include a description to your collection, download your collection, and share your collection whichever way you need to others in your community.
## Create a Collection
You can create a collection from the Collections page, or the _Create New ..._ shortcut from the org overview.
You can create a collection from the Collections page directly, or the _Create New..._ shortcut from the org dashboard.
### Adding Collection Content
### Add Collection Content
Collections are the primary way of organizing and combining archived items into groups for presentation. Collections also allow you to view a combined replay of any archived items they contain; if a link is present when viewing a collection but the actual page is missing, and another item with that captured page is added to the collection, the link will now work as expected.
@ -17,6 +19,27 @@ Crawls and uploads can be added to a collection after creation by selecting _Sel
A crawl workflow can also be set to [automatically add any completed crawls to a collection](workflow-setup.md#collection-auto-add) in the workflow's settings.
## Downloading Collections
### Customize a Collection
The [Presentation and Sharing](../presentation-sharing) page provides further details for options on how to present and share Collections. You can customize how your Collection appears to the public by clicking the edit button :bootstrap-pencil: in each collection to:
- **Name** it and add a **description** — include emojis if that’s your style 😉
- Select a **thumbnail** to represent it: Choose between a page screenshot and a placeholder
- Choose the **initial view** for your Collection
## Download a Collection
Downloading a collection will export every archived item in it as a single WACZ file. To download a collection, use the _Download Collection_ option under the collection's _Actions_ dropdown.
## Collection Access
Collections can be set to one of the one following access modes.
- Private — Collections only accessible to logged in users
- Unlisted — Collections can be shared with others, given the link to the collection.
- Public — Collections can be shared with others, and when enabled, collections can also be listed in the [public collections gallery](org-settings.md#public-collections-gallery).
!!! tip "Note: About Public Collections Gallery"
If the public collections gallery page is not enabled, any existing public collections are treated the same as unlisted collections. Check out [enabling public collection gallery](../public-collections-gallery) for a guide on how to enable this page.

71
frontend/docs/docs/user-guide/presentation-sharing.md
View File

@ -1,26 +1,71 @@
# Collection Presentation & Sharing
# Presentation & Sharing
## Sharing Collections
<video autoplay muted playsinline loop disablepictureinpicture disableremoteplayback>
<source src="https://webrecorder.net/assets/video/collection-editing-av1.mp4"/>
<source src="https://webrecorder.net/assets/video/collection-editing-h264.mp4"/>
</video>
Collections are private by default, but can be made sharable either with an unlisted link, or displayed in your org's public gallery for everyone to discover. Sharing settings can be found within the **Sharing** tab of the Collection Settings dialog. Public collections will not be visible unless your org has enabled its [public collections gallery](org-settings.md#public-collections-gallery).
## Share a Collection
Public collections can also be embedded into other websites using the provided embed code. Making a collection private after it is public or unlisted will break any previously shared links and remove it from your gallery.
A Collection is private by default, but can be made sharable either with an unlisted link, or displayed in your org's public gallery for everyone to discover. Sharing settings can be found within the **Sharing** tab of the Collection.
For further resources on embedding archived web content into your own website, see the [ReplayWeb.page docs page on embedding](https://replayweb.page/docs/embedding).
1. Click the edit button :bootstrap-pencil: on the specific Collection you want to share
## Initial View
2. In that Collection's **Sharing** tab, change its visibility from the default **Private** to **Public** and save
Set the **Initial View** to control what visitors see first when viewing a collection. The initial view can either be a list of pages (ReplayWeb.page's default), or a single page from your collection such as a crawl start URL or index page.
3. Click on the edit button :bootstrap-pencil: again, and now in the Collection's **Sharing** tab, there will be a new section, **Link to Share**, with a URL for this specific Collection that you can share and circulate to your community
## Thumbnails
4. Optional: If you want to allow other viewers to download the Collection, confirm that the **Show download button** is enabled. If not, toggle it so that others would not be able to download it and only view.
Choose a thumbnail image to represent the collection in your org's public collections gallery and org dashboard. This thumbnail can be edited from the **Presentation** tab of the Collection Settings dialog. Thumbnails can either be a screenshot of a page from the collection, or a placeholder image designed by Webrecorder.
## Customize a Collection
You can customize how your Collection appears to the public by making edits within the **Presentation** tab of Collection.
You can access this tab via the edit button :bootstrap-pencil: of a Collection from the Public Collection Gallery or via the kebab icon of a Collection from your account's Collections tab.
From the Collections tab:
1. Click the Collections tab from your account
2. Click the kebab icon :bootstrap-three-dots-vertical: for options
3. Click Edit Collection Settings
4. Edit any of the following information from the **Presentation** tab: Name, Summary, Thumbnail, and set Initial View
From the Public Collection Gallery. When Public Collection Gallery is enabled, you can view Collections from your dashboard. To customize the Collection:
1. Click on the edit button :bootstrap-pencil: of the Collection you want to edit
2. Edit any of the following information from the **Presentation** tab: Name, Summary, Thumbnail, and set Initial View
### Name
A **Name** is always required, so by default, your Collection's name is determined by the Metadata section from your crawl workflow — either a custom name you had set or the first Crawl URL from your workflow.
You can edit the **Name** as long as its within 50 characters, which is roughly between 7 words and 13 words with spaces included in the character count.
### Summary
A **Summary** describing your Collection is not required, but it is useful information to others to summarize the Collection and caption collection thumbnails.
You can edit the **Summary** as long as its within 150 characters, which is roughly between 90 words and 150 words with spaces included in the character count.
### Thumbnail
Choose a thumbnail image to represent this collection in your org's dashboard and public collections gallery page. Thumbnails can either be a placeholder image designed by Webrecorder, or a screenshot of a page from the collection.
To choose a screenshot:
1. Click the _Enter a Page URL to preview it_ for a Page URL dropdown to appear
2. Select one of the URLs or search for a specific URL from the Collection
3. Optional: You can choose a specific captured URL based on its Page Timestamp.
??? question "Why isn't there a thumbnail preview for my page?"
If you have uploaded archived items captured with tools other than Browsertrix, some of the pages in your collection may not have screenshots available to use as thumbnails. To fix this, either re-crawl a page you wish to use as a thumbnail with Browsertrix and add it to the collection, or choose a placeholder thumbnail.
## Description
### Initial View
Share additional context and details of your collection with your org team members or the public by writing a description. Whereas **Summary** is used to summarize the collection and caption collection thumbnails, the **About** section offers a space to write out a longer, more detailed description of the collection. The description supports basic text formatting like headings, bold and italicized text, lists, and links.
The editor is powered by [ink-mde](https://github.com/davidmyersdev/ink-mde), an open source [Markdown](https://github.github.com/gfm/#what-is-markdown-) editor.
The **Initial View** is the first view visitors see first when viewing a Collection. The initial view can either be a list of pages, which is the default when replaying using ReplayWeb.page, or a single page from your collection such as a crawl start URL or index page.

77
frontend/docs/docs/user-guide/public-collections-gallery.md Normal file
View File

@ -0,0 +1,77 @@
# Public Collections Gallery
Collections provide a way to dynamically combine and group multiple individual crawls and uploads into a contextual, unified archive replay experience.
With Public Collections Gallery, you can create a dedicated page that showcases all public Collections in one place, allowing you to personalize, curate, and share your web archives with the world!
<video autoplay muted playsinline loop disablepictureinpicture disableremoteplayback>
<source src="https://webrecorder.net/assets/video/collections-full-walkthrough-av1.mp4"/>
<source src="https://webrecorder.net/assets/video/collections-full-walkthrough-h264.mp4"/>
</video>
## Enable Public Collections Gallery
The _enable public collections gallery_ toggle is located in the org's **Settings** tab within your account. Follow these steps to activate the Public Collections Gallery.
1. Log in to your Browsertrix account
2. In your org's **settings**, click **enable public collections gallery** and save
3. You can share the link to your Public Collections Page from either copying from the org's **settings**, or by clicking on the copy button next to "**Visit public collections gallery**" from your dashboard.
Note: If you choose to hide the gallery later, you can go back to the setting and set the toggle to off at any time.
The gallery will still be available for logged in users to preview, but the public page will be hidden.
Public Collections will be treated the same as *Unlisted* when the public gallery is turned off.
### Customizing the Gallery
The Public Collection Gallery page will automatically have the title of your Org. You can customize this page by including a **Description** and your org's **Website** by adding them from your org's **Settings** of your account. The Gallery URL is always based on the Org URL, if you change one, the other changes as well.
For example, if your org URL ends with `/my-org`, than the Public Collections Gallery will be made available at `/explore/my-org`.
### Add Collections
If you don’t have any public Collections yet, on the right side of the section you'll see three different icons.
1. Click the asterisk icon :bootstrap-asterisk: in order to see all your Collections.
2. Click the edit button :bootstrap-pencil: on the specific Collection you want to share
3. In that Collection's **Sharing** tab, change its visibility from the default **Private** to **Public** and save
4. Repeat Steps 2 and 3 as needed to share all the Collections you want
5. When you're done, click the globe icon :bootstrap-globe2: in order to see all your public Collections
6. Click on “**Visit Public Collections Gallery**”, and now you can share your gallery with the world!
### Remove Collections
You'll take similar steps from [Add Collections](../public-collections-gallery/#add-collections) to also remove Collections from the Public Collections Gallery
1. Within the Public Collections Gallery, click the edit button :bootstrap-pencil: on the specific Collection you want to remove
2. In that Collection's **Sharing** tab, change its visibility from the default **Public** to **Private**, save, and that Collection should be removed from the Public Collections Gallery!
### Customize Collections
The [Presentation and Sharing](../presentation-sharing) page provides further details for options on how to present and share Collections in your Public Collections Gallery. Your Public Collection Gallery page will automatically have the title of your org. You can customize this page by including a **Description** and your org's **Website** by adding them from your org's **Settings** of your account.
### Description
A **Description** about your Collection is not required, but it is useful information to share additional context and details of your collection with your org team members or the public by writing a description.
You can edit the **Description** as long as its within 150 characters, which is roughly between 90 words and 150 words with spaces included in the character count. The **Description** supports basic text formatting like headings, bold and italicized text, lists, and links.
### Website
Link to your org's (or your personal) website so viewers can visit from your Public Collections Gallery page.
how your Collection appears to the public by clicking the edit button :bootstrap-pencil: in each collection to:
- **Name** it and add a **description** — include emojis if that’s your style 😉
- Select a **thumbnail** to represent it: Choose between a page screenshot and a placeholder
- Choose the **initial view** for your collection.

1
frontend/docs/mkdocs.yml
View File

@ -63,6 +63,7 @@ nav:
- user-guide/review.md
- Collections:
- user-guide/collection.md
- user-guide/public-collections-gallery.md
- user-guide/presentation-sharing.md
- Browser Profiles:
- user-guide/browser-profiles.md

4
yarn.lock Normal file
View File

@ -0,0 +1,4 @@
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1