diff --git a/docs/help/contents/_include/custom.css b/docs/help/contents/_include/custom.css index 188fc5919..c43d9dc01 100644 --- a/docs/help/contents/_include/custom.css +++ b/docs/help/contents/_include/custom.css @@ -2,6 +2,7 @@ html.light { --primary: #008837; --header-fg: #008837; --link: #008837; + --heading: #000; } html.dark { diff --git a/docs/help/contents/_include/static/web-clipper/assign-a-tag.gif b/docs/help/contents/_include/static/web-clipper/assign-a-tag.gif new file mode 100644 index 000000000..bcfe21645 Binary files /dev/null and b/docs/help/contents/_include/static/web-clipper/assign-a-tag.gif differ diff --git a/docs/help/contents/_include/static/web-clipper/chrome-dev-mode.png b/docs/help/contents/_include/static/web-clipper/chrome-dev-mode.png new file mode 100644 index 000000000..f2c96db7d Binary files /dev/null and b/docs/help/contents/_include/static/web-clipper/chrome-dev-mode.png differ diff --git a/docs/help/contents/_include/static/web-clipper/chrome-pin-to-toolbar.gif b/docs/help/contents/_include/static/web-clipper/chrome-pin-to-toolbar.gif new file mode 100644 index 000000000..e4f90b646 Binary files /dev/null and b/docs/help/contents/_include/static/web-clipper/chrome-pin-to-toolbar.gif differ diff --git a/docs/help/contents/_include/static/web-clipper/clipping-area.png b/docs/help/contents/_include/static/web-clipper/clipping-area.png new file mode 100644 index 000000000..901598fca Binary files /dev/null and b/docs/help/contents/_include/static/web-clipper/clipping-area.png differ diff --git a/docs/help/contents/_include/static/web-clipper/firefox-pin-to-toolbar.gif b/docs/help/contents/_include/static/web-clipper/firefox-pin-to-toolbar.gif new file mode 100644 index 000000000..46d07e8bc Binary files /dev/null and b/docs/help/contents/_include/static/web-clipper/firefox-pin-to-toolbar.gif differ diff --git a/docs/help/contents/_include/static/web-clipper/organize-web-clip.png b/docs/help/contents/_include/static/web-clipper/organize-web-clip.png new file mode 100644 index 000000000..526daa73e Binary files /dev/null and b/docs/help/contents/_include/static/web-clipper/organize-web-clip.png differ diff --git a/docs/help/contents/_include/static/web-clipper/selected-nodes-popup.png b/docs/help/contents/_include/static/web-clipper/selected-nodes-popup.png new file mode 100644 index 000000000..1ced997c7 Binary files /dev/null and b/docs/help/contents/_include/static/web-clipper/selected-nodes-popup.png differ diff --git a/docs/help/contents/_include/static/web-clipper/web-clip-embed.gif b/docs/help/contents/_include/static/web-clipper/web-clip-embed.gif new file mode 100644 index 000000000..9ffc03edb Binary files /dev/null and b/docs/help/contents/_include/static/web-clipper/web-clip-embed.gif differ diff --git a/docs/help/contents/web-clipper/README.md b/docs/help/contents/web-clipper/README.md new file mode 100644 index 000000000..0fc038d2c --- /dev/null +++ b/docs/help/contents/web-clipper/README.md @@ -0,0 +1 @@ +# Web clipper diff --git a/docs/help/contents/web-clipper/clipping-your-first-web-page.md b/docs/help/contents/web-clipper/clipping-your-first-web-page.md new file mode 100644 index 000000000..bb58edcba --- /dev/null +++ b/docs/help/contents/web-clipper/clipping-your-first-web-page.md @@ -0,0 +1,130 @@ +--- +index: 1 +--- + +# Clipping your first web page + +## Connecting with the web app + +Before you can clip pages, you must connect the web clipper with the Notesnook web app. The web clipper works completely offline and relies on the web app to sync & save your clips. + +1. Activate the web clipper by clicking on the Notesnook icon in your browser toolbar + + > info Pin the Notesnook Web Clipper to toolbar + > + > Modern browsers group all extensions under their Extensions dropdown by default. It is recommended that you `Pin to toolbar` the Notesnook Web Clipper. + > + > # [Chrome](#/tab/chrome) + > + > ![How to pin the Notesnook Web Clipper to toolbar in Chrome](/static/web-clipper/chrome-pin-to-toolbar.gif) + > + > # [Firefox](#/tab/firefox) + > + > ![How to pin the Notesnook Web Clipper to toolbar in Firefox](/static/web-clipper/firefox-pin-to-toolbar.gif) + > + > *** + +2. Click on `Connect to Notesnook` +3. Notesnook web app will open in a new tab in the background. Wait a few seconds and the web clipper should automatically connect. + > error What to do if the web clipper doesn't connect? + > + > There are a few things you can do to troubleshoot: + > + > 1. Make sure you are logged in on the Notesnook web app + > 2. Make sure you have the Notesnook web app opened in the background + > 3. The web clipper doesn't yet support multiple browser windows so make sure there aren't any additional browser windows opened in the background. + > 4. Try restarting the browser + +## Selecting the clipping area + +The web clipper provides a few options to help you clip exactly the part of the page you need: + +![Notesnook Web Clipper clipping area options](/static/web-clipper/clipping-area.png) + +### Full page + +The `Full page` mode clips the web page from top to bottom including every possible detail. This mode is also the largest in size & consequently takes longer to clip. + +### Article + +The `Article` mode is best for blogs & articles on the web because it tries to finds the "content" part of the page using a couple of heuristics. It works similar to Firefox's Reader Mode. + +### Visible area + +The `Visible area` mode clips only the nodes that fit in the viewport. Any nodes that are partially in the viewport are also included. + +### Selected nodes + +The `Selected nodes` mode allows you to select exactly which nodes you want to clip: + +1. Select the `Selected nodes` mode from the Notesnook Web Clipper +2. You should now see a small popup in the bottom-right corner of the page + ![](/static/web-clipper/selected-nodes-popup.png) +3. Click on all the nodes you want to clip (they can be in any part of the screen). + > info + > + > The web clipper stacks all the selected nodes vertically during final processing. +4. Clicking again on the selected nodes will deselect them. +5. Once you are done, click on the Clip button +6. Activate the Notesnook Web Clipper and save your clip. + +## Selecting the clipping mode + +The clipping mode controls how the final clip should look. + +### Simplified + +`Simplified` mode doesn't include any styles. It is best suited for long-form content such as articles & blogs. All clips in `Simplified` mode are saved directly as is i.e. they do not appear as web clip embeds in the Notesnook editor. + +### Screenshot + +> info Pro users only +> +> `Screenshot` mode is only available to Pro users + +`Screenshot` mode includes all the styles + images but the final result is saved as an image i.e. it is non-interactive. + +### Complete with styles + +> info Pro users only +> +> `Complete with styles` mode is only available to Pro users + +`Complete with styles` mode saves all images, styles & everything on the page to retain the maximum amount of information. The final result appears as an embed in the Notesnook editor which is full interactive. + +![](/static/web-clipper/web-clip-embed.gif) + +## Organizing your web clip + +Notesnook Web Clipper offers 3 easy ways to organize your web clips (all of which are completely optional): + +![](/static/web-clipper/organize-web-clip.png) + +### [Append to note](#/tab/append-to-note) + +You can choose to append your web clip to an existing note and it'll be automatically added at the bottom of that note: + +1. Click on `Select a note to append to` +2. Select the note you want to append to + +### [Add to notebook](#/tab/add-to-notebook) + +> info +> +> You can only assign the web clip to an existing notebook. Creating new notebooks is not supported from inside the web clipper. + +1. Click on `Select a notebook` +2. Select the notebook you want to add the web clip to + +### [Assign tags](#/tab/assign-tags) + +1. Click on `Assign a tag` +2. Select the tag you want to assign (you can assign multiple tags) +3. You can also create & assign a new tag by typing in the search bar + ![](/static/web-clipper/assign-a-tag.gif) + +--- + +## Saving your web clip + +1. Click on the `Save` button to save & sync your web clip. diff --git a/docs/help/contents/web-clipper/installation.md b/docs/help/contents/web-clipper/installation.md new file mode 100644 index 000000000..bccb1453a --- /dev/null +++ b/docs/help/contents/web-clipper/installation.md @@ -0,0 +1,20 @@ +--- +title: Installation +index: 0 +--- + +# Installation + +## Chromium-based browsers + +1. Download the .zip archive from [here](https://notesnook.com/notesnook-web-clipper) +2. Go to `chrome://extensions/` +3. Turn on the Developer Mode + ![](/static/web-clipper/chrome-dev-mode.png) +4. Drag & drop the .zip archive in the Google Chrome window + +## Firefox-based browsers + +1. Download the .xpi file from [here](https://notesnook.com/notesnook-web-clipper) +2. Open `about:addons` +3. Drag & drop the .xpi file diff --git a/docs/help/contents/web-clipper/troubleshooting.md b/docs/help/contents/web-clipper/troubleshooting.md new file mode 100644 index 000000000..074b6a02e --- /dev/null +++ b/docs/help/contents/web-clipper/troubleshooting.md @@ -0,0 +1,24 @@ +--- +index: 2 +--- + +# Troubleshooting + +## What to do if the web clipper doesn't connect? + +There are a few things you can do try: + +1. Make sure you are logged in on the Notesnook web app +2. Make sure you have the Notesnook web app opened in the background +3. The web clipper doesn't yet support multiple browser windows so make sure there aren't any additional browser windows opened in the background. +4. Try restarting the browser + +## "Could not establish connection. Receiving end does not exist." + +Notesnook Web Clipper shows this error when it cannot clip a web page for various reasons. Usually you'll see this error on browser default pages like the new tab page, extensions page etc. + +However, if you are seeing this on a website it is recommended that you trigger a page reload. This will reinitialize the web clipper & hopefully proceed. + +## What to do if a website appears broken in the web clip? + +Since the Notesnook Web Clipper is still in alpha-beta stage, some rendering issues are expected in the web clips. If you notice any such problem, feel free to open a new issue on our [GitHub Issue Tracker](https://github.com/streetwriters/notesnook/issues/new/choose).