From bcc5050c359720671251d5c7d22580448782dc9a Mon Sep 17 00:00:00 2001
From: Julian Prieber <60265788+JulianPrieber@users.noreply.github.com>
Date: Fri, 18 Mar 2022 14:59:45 +0100
Subject: [PATCH] Added Custom Website button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added new Custom Website button which visually looks similar to the previously added Website button with an except of the icon of the new button being the favicon of the chose link. The text on the button is set with the button title, just like the Custom button.

The favicon request is performed via the Google API. The icon displays correctly in most cases, with some exceptions. I might add a function later on that displays a generic icon if no icon was found.
---
 database/seeders/ButtonSeeder.php         |  4 ++++
 littlelink/css/brands.css                 |  7 +++++++
 resources/views/littlelink.blade.php      |  2 ++
 resources/views/studio/add-link.blade.php | 11 +++++++++++
 4 files changed, 24 insertions(+)

diff --git a/database/seeders/ButtonSeeder.php b/database/seeders/ButtonSeeder.php
index ca0d4b6..e611a33 100755
--- a/database/seeders/ButtonSeeder.php
+++ b/database/seeders/ButtonSeeder.php
@@ -19,6 +19,10 @@ class ButtonSeeder extends Seeder
         	[
                 'name' => 'custom'
             ],
+
+            [
+                'name' => 'custom_website'
+            ],
             
             [
                 'name' => 'github'
diff --git a/littlelink/css/brands.css b/littlelink/css/brands.css
index 9537d39..6014b28 100644
--- a/littlelink/css/brands.css
+++ b/littlelink/css/brands.css
@@ -428,6 +428,13 @@ button:hover,
   color: #ffffff;
   background-color: #000000;
 }
+
+/* Custom Website */
+.button.button-custom_website {
+  color: #ffffff;
+  background-color: #000000;
+}
+
 .button.button-web:hover,
 .button.button-web:focus {
   filter: brightness(90%);
diff --git a/resources/views/littlelink.blade.php b/resources/views/littlelink.blade.php
index 76e0b34..685c65c 100644
--- a/resources/views/littlelink.blade.php
+++ b/resources/views/littlelink.blade.php
@@ -132,6 +132,8 @@
          <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ $link->title }}</a></div>
          @elseif($link->name === "buy me a coffee")
          <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-coffee button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}coffee.svg">Buy me a Coffee</a></div>
+         @elseif($link->name === "custom_website")
+         <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-customwebsite button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link->link}}">{{ $link->title }}</a></div>
          @else
          <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a></div>
          @endif
diff --git a/resources/views/studio/add-link.blade.php b/resources/views/studio/add-link.blade.php
index ba35808..bc565f4 100755
--- a/resources/views/studio/add-link.blade.php
+++ b/resources/views/studio/add-link.blade.php
@@ -27,4 +27,15 @@
         <button type="submit" class="mt-3 ml-3 btn btn-info">Submit</button>
         </form>
 
+        <br><br><details>
+    <summary>More information</summary>
+<pre style="color: grey;">
+Always add links with 'http://' or 'https://' before your URLs, otherwise this will cause error when clicking on the link.
+Make sure that added URLs don't have a trailing slash at the end of a URL (e.g. 'n.com' instead of 'n.com/') as this causes errors when redirecting to that URL.
+
+The 'Custom' button allows you to add a custom link, where the text on the button is determined with the link title set above.
+The 'Custom_website' button functions similar to the Custom button, with the addition of a function that requests the favicon from the chosen URL and uses it as the button icon.
+</pre>
+</details>
+
 @endsection