front: add an external link icon to external links

src/assets/scss/base.scss

@@ -155,7 +155,7 @@ h1 {
 a {
 	text-decoration: none;
 
-	.icon.feather-external-link { //todo add js
+	.icon.lucide-external-link { //todo add js
 		--icon-size: 16px;
 		margin-left: 4px;
 		margin-top: -3px;

src/assets/views/scripts/ExternalLinkIcons.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import Icon from "../utils/Icon.svelte";
+
+    let iconTemplate: HTMLTemplateElement;
+
+    function addExternalLinkIcons(): void {
+        console.log('Add icons to external links...');
+
+        const iconElement = iconTemplate.childNodes.item(0);
+
+        document.querySelectorAll('a[target="_blank"]').forEach(el => {
+            if (!el.classList.contains('no-icon')) {
+                el.appendChild(iconElement.cloneNode(true));
+            }
+        });
+    }
+
+    onMount(() => {
+        addExternalLinkIcons();
+    });
+</script>
+
+<style>
+    div {
+        display: none;
+    }
+</style>
+
+<div bind:this={iconTemplate}>
+    <Icon name="external-link"/>
+</div>

src/assets/views/templates/BaseTemplate.svelte

@@ -2,6 +2,7 @@
     import FlashMessages from "../components/FlashMessages.svelte";
     import BaseFooter from "./base/BaseFooter.svelte";
     import BaseHeader from "./base/BaseHeader.svelte";
+    import CommonScripts from "./CommonScripts.svelte";
 
     export let title: string;
     export let h1: string = title;
@@ -9,6 +10,8 @@
     export let refresh_after: number | undefined = undefined;
 </script>
 
+<CommonScripts/>
+
 <style lang="scss">
     @import "../../scss/vars";
     @import "../../scss/helpers";

src/assets/views/templates/CommonScripts.svelte

@@ -0,0 +1,5 @@
+<script>
+    import ExternalLinkIcons from "../scripts/ExternalLinkIcons.svelte";
+</script>
+
+<ExternalLinkIcons/>

src/assets/views/templates/ErrorTemplate.svelte

@@ -2,6 +2,7 @@
     import {locals} from "../../ts/stores.js";
     import FlashMessages from "../components/FlashMessages.svelte";
     import Icon from "../utils/Icon.svelte";
+    import CommonScripts from "./CommonScripts.svelte";
 
     const previousUrl = $locals.getPreviousUrl();
 
@@ -15,6 +16,8 @@
     instructions = $locals.error_instructions || instructions;
 </script>
 
+<CommonScripts/>
+
 <svelte:head>
     <title>{code + ' - ' + message}</title>
 

test/assets/views/design.svelte

@@ -23,7 +23,7 @@
         </h2>
         <p>Paragraph</p>
 
-        <p>Paragraph, <a href={route('home')}>Link</a></p>
+        <p>Paragraph, <a href={route('home')}>Link</a>, <a href={route('home')} target="_blank">External link</a></p>
 
         <ul>
             <li>Unordered</li>