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.
This commit is contained in:
Julian Prieber 2022-03-18 14:59:45 +01:00
parent 35b487d48a
commit bcc5050c35
4 changed files with 24 additions and 0 deletions

View File

@ -19,6 +19,10 @@ class ButtonSeeder extends Seeder
[
'name' => 'custom'
],
[
'name' => 'custom_website'
],
[
'name' => 'github'

View File

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

View File

@ -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

View File

@ -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