Added Custom Website button

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.

Author: JulianPrieber

database/seeders/ButtonSeeder.php

@@ -19,6 +19,10 @@ public function run()
         	[
                 'name' => 'custom'
             ],
+
+            [
+                'name' => 'custom_website'
+            ],
 
             [
                 'name' => 'github'

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%);

resources/views/littlelink.blade.php

@@ -132,6 +132,8 @@ function update_color_scheme() {
          <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

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