refactor: use a regular links with special attributes for external li…

…nks (#19)
ArkEcosystemArchive · Jul 29, 2021 · f392e15 · f392e15
1 parent 4b0cbaa
commit f392e15
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 69 deletions.
diff --git a/config/markdown.php b/config/markdown.php
@@ -187,8 +187,5 @@
     'max_nesting_level' => INF,
 
     'link_attributes'               => [],
-    'link_renderer_view'            => 'ark::external-link',
-    'link_renderer_view_attributes' => [
-        'inline' => true,
-    ],
+    'link_renderer_view_attributes' => [],
 ];
diff --git a/src/Extensions/Link/LinkRenderer.php b/src/Extensions/Link/LinkRenderer.php
@@ -47,29 +47,28 @@ public function render(AbstractInline $inline, ElementRendererInterface $htmlRen
             $attrs['rel'] = 'noopener nofollow noreferrer';
         }
 
-        if ($this->isInternalLink($attrs['href'])) {
-            $attrs = array_merge(Arr::only($attrs, ['href', 'id', 'class', 'name', 'title']), config('markdown.link_attributes', []));
+        $attrs = array_merge(Arr::only($attrs, ['href', 'id', 'class', 'name', 'title']), config('markdown.link_attributes', []));
 
-            return new HtmlElement('a', $attrs, $htmlRenderer->renderInlines($inline->children()));
-        }
+        $content = $htmlRenderer->renderInlines($inline->children());
 
-        $text = $attrs['title'] ?? $attrs['href'];
+        if (! $this->isInternalLink($attrs['href'])) {
+            $attrs['target']        = '_blank';
+            $attrs['data-external'] = 'true';
 
-        // If the child is not as URL we can use it as the text for the link
-        $children = trim($htmlRenderer->renderInlines($inline->children()));
+            $externalLinkIcon = view('ark::icon', array_merge(
+                config('markdown.link_renderer_view_attributes', []),
+                [
+                    'attributes' => new ComponentAttributeBag([]),
+                    'name'       => 'link',
+                    'class'      => 'inline ml-1 -mt-1.5',
+                    'size'       => 'sm',
+                ]
+            ));
 
-        if (! filter_var($children, FILTER_VALIDATE_URL)) {
-            $text = $children;
+            $content .= ' '.$externalLinkIcon->render();
         }
 
-        return view(config('markdown.link_renderer_view', 'ark::external-link'), array_merge(
-            config('markdown.link_renderer_view_attributes', ['inline' => true]),
-            [
-                'attributes' => new ComponentAttributeBag([]),
-                'text'       => $text,
-                'url'        => $attrs['href'],
-            ]
-        ))->render();
+        return new HtmlElement('a', $attrs, $content);
     }
 
     public function setConfiguration(ConfigurationInterface $configuration)

diff --git a/tests/Extensions/Link/LinkRendererTest.php b/tests/Extensions/Link/LinkRendererTest.php
@@ -5,7 +5,6 @@
 use League\CommonMark\HtmlRenderer;
 use League\CommonMark\Inline\Element\Link;
 use League\CommonMark\Inline\Element\Text;
-
 use League\CommonMark\Inline\Renderer\TextRenderer;
 use League\CommonMark\Util\Configuration;
 use function Spatie\Snapshots\assertMatchesSnapshot;

diff --git a/...snapshots__/LinkRendererTest__it_should_render_external_links_with_(ftpgoogle.com)__1.txt b/...snapshots__/LinkRendererTest__it_should_render_external_links_with_(ftpgoogle.com)__1.txt
@@ -1,8 +1,4 @@
-<a
-    href="ftp://google.com"
-    class="link font-semibold inline space-x-1 whitespace-nowrap"
-    target="_blank"
-    rel="noopener nofollow noreferrer"
->
-    <span>Label</span>
-</a>
+<a href="ftp://google.com" title="Title" target="_blank" data-external="true">Label <svg wire:key="GfLVwv0b" class="fill-current w-4 h-4 inline ml-1 -mt-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M23.251 7.498V.748h-6.75m6.75 0l-15 15m3-10.5h-9a1.5 1.5 0 00-1.5 1.5v15a1.5 1.5 0 001.5 1.5h15a1.5 1.5 0 001.5-1.5v-9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+</svg>
+</a>
diff --git a/.../__snapshots__/LinkRendererTest__it_should_render_external_links_with_(google.com)__1.txt b/.../__snapshots__/LinkRendererTest__it_should_render_external_links_with_(google.com)__1.txt
@@ -1,8 +1,4 @@
-<a
-    href="//google.com"
-    class="link font-semibold inline space-x-1 whitespace-nowrap"
-    target="_blank"
-    rel="noopener nofollow noreferrer"
->
-    <span>Label</span>
-</a>
+<a href="//google.com" title="Title" target="_blank" data-external="true">Label <svg wire:key="GfLVwv0b" class="fill-current w-4 h-4 inline ml-1 -mt-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M23.251 7.498V.748h-6.75m6.75 0l-15 15m3-10.5h-9a1.5 1.5 0 00-1.5 1.5v15a1.5 1.5 0 001.5 1.5h15a1.5 1.5 0 001.5-1.5v-9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+</svg>
+</a>
diff --git a/...apshots__/LinkRendererTest__it_should_render_external_links_with_(httpsgoogle.com)__1.txt b/...apshots__/LinkRendererTest__it_should_render_external_links_with_(httpsgoogle.com)__1.txt
@@ -1,8 +1,4 @@
-<a
-    href="https://google.com"
-    class="link font-semibold inline space-x-1 whitespace-nowrap"
-    target="_blank"
-    rel="noopener nofollow noreferrer"
->
-    <span>Label</span>
-</a>
+<a href="https://google.com" title="Title" target="_blank" data-external="true">Label <svg wire:key="GfLVwv0b" class="fill-current w-4 h-4 inline ml-1 -mt-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M23.251 7.498V.748h-6.75m6.75 0l-15 15m3-10.5h-9a1.5 1.5 0 00-1.5 1.5v15a1.5 1.5 0 001.5 1.5h15a1.5 1.5 0 001.5-1.5v-9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+</svg>
+</a>
diff --git a/...__/LinkRendererTest__it_should_render_external_links_with_(unsupportedrelativeurl)__1.txt b/...__/LinkRendererTest__it_should_render_external_links_with_(unsupportedrelativeurl)__1.txt
@@ -1,8 +1,4 @@
-<a
-    href="unsupported/relative/url"
-    class="link font-semibold inline space-x-1 whitespace-nowrap"
-    target="_blank"
-    rel="noopener nofollow noreferrer"
->
-    <span>Label</span>
-</a>
+<a href="unsupported/relative/url" title="Title" target="_blank" data-external="true">Label <svg wire:key="GfLVwv0b" class="fill-current w-4 h-4 inline ml-1 -mt-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M23.251 7.498V.748h-6.75m6.75 0l-15 15m3-10.5h-9a1.5 1.5 0 00-1.5 1.5v15a1.5 1.5 0 001.5 1.5h15a1.5 1.5 0 001.5-1.5v-9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+</svg>
+</a>
diff --git a/tests/views/external-link.blade.php b/tests/views/external-link.blade.php
diff --git a/tests/views/icon.blade.php b/tests/views/icon.blade.php
@@ -0,0 +1,34 @@
+@props([
+    'name',
+    'size' => 'base',
+    'style' => '',
+    'class' => ''
+])
+@php
+    $availableSizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'base'];
+
+    if (in_array($size, $availableSizes) || empty($size)) {
+        $size = [
+            '2xs'  => 'w-2 h-2 ',
+            'xs'   => 'w-3 h-3 ',
+            'sm'   => 'w-4 h-4 ',
+            'md'   => 'w-6 h-6 ',
+            'lg'   => 'w-8 h-8 ',
+            'xl'   => 'w-12 h-12 ',
+            '2xl'  => 'w-14 h-14 ',
+            'base' => 'w-5 h-5 ',
+        ][$size ?? 'base'];
+    }
+
+    if (!empty($style)) {
+        $style = [
+            'secondary' => 'text-theme-secondary-500 ',
+            'success'   => 'text-theme-success-500 ',
+            'danger'    => 'text-theme-danger-500 ',
+        ][$style];
+    }
+@endphp
+
+<svg wire:key="GfLVwv0b" class="fill-current w-4 h-4 inline ml-1 -mt-1.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M23.251 7.498V.748h-6.75m6.75 0l-15 15m3-10.5h-9a1.5 1.5 0 00-1.5 1.5v15a1.5 1.5 0 001.5 1.5h15a1.5 1.5 0 001.5-1.5v-9" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
+</svg>