Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jakubandrysek/mkdocs-open-in-new-tab
🔮 This plugin adds JS to open outgoing links and PDFs in a new tab.
https://github.com/jakubandrysek/mkdocs-open-in-new-tab
js markdown mkdocs new-tab new-tab-page plugin pypi-package python
Last synced: about 4 hours ago
JSON representation
🔮 This plugin adds JS to open outgoing links and PDFs in a new tab.
- Host: GitHub
- URL: https://github.com/jakubandrysek/mkdocs-open-in-new-tab
- Owner: JakubAndrysek
- License: mit
- Created: 2023-03-26T20:25:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-12T14:04:49.000Z (15 days ago)
- Last Synced: 2024-09-27T07:01:17.221Z (about 4 hours ago)
- Topics: js, markdown, mkdocs, new-tab, new-tab-page, plugin, pypi-package, python
- Language: Python
- Homepage: https://newtab.kubaandrysek.cz/
- Size: 358 KB
- Stars: 23
- Watchers: 2
- Forks: 3
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MkDocs - Open in a new tab plugin
This plugin adds JS code to open outgoing links and PDFs in a new tab.
The automatic opening of links in a new tab is a common feature of modern websites. It is also a good practice for accessibility. However, it is not a default behavior of Markdown. This plugin adds a JavaScript code to your website that opens external links and PDFs in a new tab.
Look at the [demo](https://newtab.kubaandrysek.cz/).
## Installation
Install the plugin using pip from [PyPI](https://pypi.org/project/mkdocs-open-in-new-tab/):
```bash
pip install mkdocs-open-in-new-tab
```## Usage
Add the plugin to your `mkdocs.yml`:
```yaml
plugins:
- search
- open-in-new-tab
```## Testing
Link to [Google](https://google.com) and [GitHub](https://github.com).
Both should links should open in a new tab.Relative link to [Relative link](./docs/RelativeLink.md) should open in the same tab.
Sample PDF link to [PDF](./docs/assets/sample.pdf) should open in a new tab (pdf from [here](https://www.africau.edu/images/default/sample.pdf)).
# How does it work?
The plugin adds a JavaScript code to your website that opens external links and PDFs in a new tab. Injection of the code is done using the `on_page_context` hook. The code is injected into the `` section of the page as a `` dependency of the `open_in_new_tab.js` file. The code is automatically added to all pages of your website.The function `external_new_window` checks if the link is external using the `hostname` property of the `a` element. If the link is external, the `target` attribute is set to `_blank` and the `rel` attribute is set to `noopener`. The `noopener` attribute is used to prevent the new tab from accessing the `window.opener` property and ensures that the original page will not be able to access the new tab.
The same way is used to open PDF links in a new tab.
<details><summary>Show source code</summary>
<p>Look at this source <a href="https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/blob/main/open_in_new_tab/js/open_in_new_tab.js">open_in_new_tab.js</a>:
```js
// Description: Open external links in a new tab and PDF links in a new tab
// Source: https://jekyllcodex.org/without-plugin/new-window-fix///open external links in a new window
function external_new_window() {
for(let c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
let b = c[a];
if(b.getAttribute("href") && b.hostname !== location.hostname) {
b.target = "_blank";
b.rel = "noopener";
}
}
}
//open PDF links in a new window
function pdf_new_window ()
{
if (!document.getElementsByTagName) {
return false;
}
let links = document.getElementsByTagName("a");
for (let eleLink=0; eleLink < links.length; eleLink ++) {
if ((links[eleLink].href.indexOf('.pdf') !== -1)||(links[eleLink].href.indexOf('.doc') !== -1)||(links[eleLink].href.indexOf('.docx') !== -1)) {
links[eleLink].onclick =
function() {
window.open(this.href);
return false;
}
}
}
}function apply_rules() {
external_new_window();
pdf_new_window();
}if (typeof document$ !== "undefined") {
// compatibility with mkdocs-material's instant loading feature
// based on code from https://github.com/timvink/mkdocs-charts-plugin
// Copyright (c) 2021 Tim Vink - MIT License
// fixes [Issue #2](https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/issues/2)
document$.subscribe(function() {
apply_rules();
})
}
```
</p>
</details><!-- ## Known issues
This extension does not work with mkdocs-material [navigation.instant](https://squidfunk.github.io/mkdocs-material/setup/setting-up-navigation/#instant-loading). JS could not be loaded when the page is loaded instantly. If you know how to fix it, please let me know. Issue is [here](https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/issues/2). -->## License
This project is licensed under the terms of the MIT license.