Skip to content

Commit 33eff83

Browse files
JakubAndrysekJakubAndrysek
committed
Add theme toggle, how it works
1 parent 7fca0a2 commit 33eff83

File tree

3 files changed

+142
-6
lines changed

3 files changed

+142
-6
lines changed

‎README.md‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212

1313
</p>
1414

15-
This plugin adds js to open outgoing links and PDFs in a new tab.
15+
This plugin adds JS code to open outgoing links and PDFs in a new tab.
16+
17+
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.
1618

1719
Look at the [demo](https://newtab.kubaandrysek.cz/).
1820

@@ -43,6 +45,61 @@ Relative link to [Relative link](./docs/RelativeLink.md) should open in the same
4345
4446
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)).
4547
48+
49+
# How does it work?
50+
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 `<head>` section of the page as a `<script>` dependency of the `open_in_new_tab.js` file. The code is automatically added to all pages of your website.
51+
52+
53+
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.
54+
55+
The same way is used to open PDF links in a new tab.
56+
57+
58+
59+
<details><summary>Show source code</summary>
60+
<p>
61+
62+
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>:
63+
64+
```js
65+
// Description: Open external links in a new tab and PDF links in a new tab
66+
// Source: https://jekyllcodex.org/without-plugin/new-window-fix/
67+
68+
//open external links in a new window
69+
function external_new_window() {
70+
for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
71+
var b = c[a];
72+
if(b.getAttribute("href") && b.hostname !== location.hostname) {
73+
b.target = "_blank";
74+
b.rel = "noopener";
75+
}
76+
}
77+
}
78+
//open PDF links in a new window
79+
function pdf_new_window ()
80+
{
81+
if (!document.getElementsByTagName) return false;
82+
var links = document.getElementsByTagName("a");
83+
for (var eleLink=0; eleLink < links.length; eleLink ++) {
84+
if ((links[eleLink].href.indexOf('.pdf') !== -1)||(links[eleLink].href.indexOf('.doc') !== -1)||(links[eleLink].href.indexOf('.docx') !== -1)) {
85+
links[eleLink].onclick =
86+
function() {
87+
window.open(this.href);
88+
return false;
89+
}
90+
}
91+
}
92+
}
93+
94+
window.addEventListener("DOMContentLoaded", function() {
95+
external_new_window();
96+
pdf_new_window();
97+
});
98+
```
99+
</p>
100+
</details>
101+
102+
46103
## License
47104

48105
This project is licensed under the terms of the MIT license.

‎docs/README.md‎

Lines changed: 58 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212

1313
</p>
1414

15-
This plugin adds js to open outgoing links and PDFs in a new tab.
15+
This plugin adds JS code to open outgoing links and PDFs in a new tab.
16+
17+
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.
1618

1719
Look at the [demo](https://newtab.kubaandrysek.cz/).
1820

@@ -43,6 +45,61 @@ Relative link to [Relative link](./RelativeLink.md) should open in the same tab.
4345
4446
Sample PDF link to [PDF](./assets/sample.pdf) should open in a new tab (pdf from [here](https://www.africau.edu/images/default/sample.pdf)).
4547
48+
49+
# How does it work?
50+
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 `<head>` section of the page as a `<script>` dependency of the `open_in_new_tab.js` file. The code is automatically added to all pages of your website.
51+
52+
53+
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.
54+
55+
The same way is used to open PDF links in a new tab.
56+
57+
58+
59+
<details><summary>Show source code</summary>
60+
<p>
61+
62+
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>:
63+
64+
```js
65+
// Description: Open external links in a new tab and PDF links in a new tab
66+
// Source: https://jekyllcodex.org/without-plugin/new-window-fix/
67+
68+
//open external links in a new window
69+
function external_new_window() {
70+
for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) {
71+
var b = c[a];
72+
if(b.getAttribute("href") && b.hostname !== location.hostname) {
73+
b.target = "_blank";
74+
b.rel = "noopener";
75+
}
76+
}
77+
}
78+
//open PDF links in a new window
79+
function pdf_new_window ()
80+
{
81+
if (!document.getElementsByTagName) return false;
82+
var links = document.getElementsByTagName("a");
83+
for (var eleLink=0; eleLink < links.length; eleLink ++) {
84+
if ((links[eleLink].href.indexOf('.pdf') !== -1)||(links[eleLink].href.indexOf('.doc') !== -1)||(links[eleLink].href.indexOf('.docx') !== -1)) {
85+
links[eleLink].onclick =
86+
function() {
87+
window.open(this.href);
88+
return false;
89+
}
90+
}
91+
}
92+
}
93+
94+
window.addEventListener("DOMContentLoaded", function() {
95+
external_new_window();
96+
pdf_new_window();
97+
});
98+
```
99+
</p>
100+
</details>
101+
102+
46103
## License
47104

48105
This project is licensed under the terms of the MIT license.

‎mkdocs.yml‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ site_description: >-
77
# Repository
88
repo_name: JakubAndrysek/mkdocs-open-in-new-tab
99
repo_url: https://github.com/JakubAndrysek/mkdocs-open-in-new-tab
10+
edit_uri: edit/main/docs/
1011

1112
# Copyright
1213
copyright: Copyright © 2023 Jakub Andrýsek
@@ -20,14 +21,33 @@ theme:
2021
- navigation.tabs
2122
- navigation.indexes
2223
- navigation.top
23-
24+
- content.action.edit
25+
- content.action.view
26+
- navigation.tracking
27+
- navigation.tabs
28+
- navigation.expand
2429
icon:
2530
repo: fontawesome/brands/github
2631

32+
2733
palette:
28-
- scheme: slate
34+
# Palette toggle for dark mode
35+
- media: "(prefers-color-scheme: dark)"
36+
scheme: slate
2937
primary: red
3038
accent: red
39+
toggle:
40+
icon: material/brightness-4
41+
name: Switch to light mode
42+
43+
# Palette toggle for light mode
44+
- media: "(prefers-color-scheme: light)"
45+
scheme: default
46+
primary: red
47+
accent: red
48+
toggle:
49+
icon: material/brightness-7
50+
name: Switch to dark mode
3151

3252
extra:
3353
social:
@@ -65,8 +85,10 @@ plugins:
6585
markdown_extensions:
6686
- pymdownx.highlight
6787
- pymdownx.superfences
68-
69-
88+
- admonition
89+
- pymdownx.details
90+
- pymdownx.superfences
91+
- attr_list
7092

7193
nav:
7294
- Home: 'README.md'

0 commit comments

Comments
 (0)