Add support for adding an icon next to external links, close #4

README.md

@@ -34,6 +34,13 @@ plugins:
   - open-in-new-tab
 ```
 
+## Configuration
+
+The plugin supports the following configuration option:
+
+- `add_icon:` (default: false)
+    - If set to true, the plugin will add an icon next to external links.
+
 
 ## Testing
 Link to [Google](https://google.com) and [GitHub](https://github.com).
@@ -113,12 +120,28 @@ if (typeof document$ !== "undefined") {
 }
 
 ```
+
+`open_in_new_tab.css` (added when add_icon: true)
+
+```css
+/*
+ * Materialize links that open in a new window with a right-up arrow icon
+ * Author: @ebouchut (https://github.com/ebouchut)
+ * https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/issues/4
+ */
+ a[target="_blank"]::after {
+    content: "↗";
+    display: inline-block;
+    margin-left: 0.2em;
+    width: 1em;
+    height: 1em;
+}
+```
+
 </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.
+This project is licensed under the terms of the MIT license.

docs/README.md

@@ -15,8 +15,6 @@ 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/).
-aasLook at the [demo](http://127.0.0.1:8000/).
-aasLook at the [demo](http://127.0.0.1:1234/).
 
 ## Installation
 
@@ -36,6 +34,14 @@ plugins:
   - open-in-new-tab
 ```
 
+## Configuration
+
+The plugin supports the following configuration option:
+
+
+- `add_icon:` (default: false)
+    - If set to true, the plugin will add an icon next to external links.
+
 
 ## Testing
 Link to [Google](https://google.com) and [GitHub](https://github.com).
@@ -115,12 +121,35 @@ if (typeof document$ !== "undefined") {
 }
 
 ```
+
+`open_in_new_tab.css` (added when add_icon: true)
+
+```css
+/*
+ * Materialize links that open in a new window with a right-up arrow icon
+ * Author: @ebouchut (https://github.com/ebouchut)
+ * https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/issues/4
+ */
+ a[target="_blank"]::after {
+    content: "↗";
+    display: inline-block;
+    margin-left: 0.2em;
+    width: 1em;
+    height: 1em;
+}
+```
+
 </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.
+This project is licensed under the terms of the MIT license.

mkdocs.yml

@@ -10,7 +10,7 @@ repo_url: https://github.com/JakubAndrysek/mkdocs-open-in-new-tab
 edit_uri: edit/main/docs/
 
 # Copyright
-copyright: Copyright © 2023 Jakub Andrýsek
+copyright: Copyright © Jakub Andrýsek
 
 theme:
   name: material
@@ -77,7 +77,8 @@ use_directory_urls: True
 
 plugins:
   - search
-  - open-in-new-tab
+  - open-in-new-tab:
+      add_icon: true
 
 markdown_extensions:
   - pymdownx.highlight

open_in_new_tab/css/open_in_new_tab.css

@@ -0,0 +1,12 @@
+/*
+ * Materialize links that open in a new window with a right-up arrow icon
+ * Author: @ebouchut (https://github.com/ebouchut)
+ * https://github.com/JakubAndrysek/mkdocs-open-in-new-tab/issues/4
+ */
+ a[target="_blank"]::after {
+    content: "↗";
+    display: inline-block;
+    margin-left: 0.2em;
+    width: 1em;
+    height: 1em;
+}

open_in_new_tab/plugin.py

@@ -6,33 +6,46 @@
 # PyPI: https://pypi.org/project/mkdocs-open-in-new-tab/
 # Inspired by: https://github.com/timvink/mkdocs-charts-plugin/tree/main
 
+from pathlib import Path
+from mkdocs.config.base import Config
+from mkdocs.config.config_options import Type
 from mkdocs.plugins import BasePlugin
 from mkdocs.utils import copy_file
-import os
 
-HERE = os.path.dirname(os.path.abspath(__file__))
 
+class OpenInNewTabPluginConfig(Config):
+    add_icon = Type(bool, default=False)
 
-class OpenInNewTabPlugin(BasePlugin):
+
+class OpenInNewTabPlugin(BasePlugin[OpenInNewTabPluginConfig]):
     def on_config(self, config, **kwargs):
         """
         Event trigger on config.
         See https://www.mkdocs.org/user-guide/plugins/#on_config.
         """
         # Add pointer to open_in_new_tab.js file to extra_javascript
-        # which is added to the output directory during on_post_build() event
-        config["extra_javascript"].append("/js/open_in_new_tab.js")
+        config["extra_javascript"].append("js/open_in_new_tab.js")
+
+        # If add_icon is True, add extra CSS to extra_css
+        if self.config.add_icon:
+            config["extra_css"].append("css/open_in_new_tab.css")
 
     def on_post_build(self, config):
         """
         Event trigger on post build.
         See https://www.mkdocs.org/user-guide/plugins/#on_post_build.
         """
+        site_dir = Path(config["site_dir"])
+        self.copy_asset("js/open_in_new_tab.js", site_dir)
+
+        if self.config.add_icon:
+            self.copy_asset("css/open_in_new_tab.css", site_dir)
 
-        js_output_base_path = os.path.join(config["site_dir"], "js")
-        js_file_path = os.path.join(js_output_base_path, "open_in_new_tab.js")
-        package = os.path.dirname(os.path.abspath(__file__))
-        copy_file(
-            os.path.join(os.path.join(package, "js"), "open_in_new_tab.js"),
-            js_file_path,
-        )
+    def copy_asset(self, asset_path: str, site_dir: Path):
+        """
+        Copy an asset file to the output directory.
+        """
+        source_path = Path(__file__).parent / asset_path
+        dest_path = site_dir / asset_path
+        dest_path.parent.mkdir(parents=True, exist_ok=True)
+        copy_file(source_path, dest_path)