refactor: use jinja for social links integration

close #21
This commit is contained in:
Adrien Allard 2024-06-11 17:47:57 +02:00
parent 849e6ce46d
commit 1fd8cc356c
3 changed files with 19 additions and 42 deletions

View File

@ -16,27 +16,9 @@
<a href="#news" class="nav-bar--menu-link">{{ gettext('News') }}</a> <a href="#news" class="nav-bar--menu-link">{{ gettext('News') }}</a>
</div> </div>
<div class="nav-bar--links"> <div class="nav-bar--links">
<a class="nav-bar--link" href="mailto:contact@frog-collective.com"> {% with class_prefix="nav-bar" %}
<img class="nav-bar--link-icon" src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img> {% include "lib/social_links.html" %}
</a> {% endwith %}
<a class="nav-bar--link" href="https://frog-collective.itch.io/" target="_blank">
<img class="nav-bar--link-icon" src="/img/itchio-fill.svg" alt-text="Itch.io"></img>
</a>
<a class="nav-bar--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
<img class="nav-bar--link-icon" src="/img/youtube-fill.svg" alt-text="Youtube"></img>
</a>
<a class="nav-bar--link" href="https://www.twitch.tv/frogcollective" target="_blank">
<img class="nav-bar--link-icon" src="/img/twitch-fill.svg" alt-text="Twitch"></img>
</a>
<a class="nav-bar--link" href="https://mastodon.social/@frogcollective" target="_blank">
<img class="nav-bar--link-icon" src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
</a>
<a class="nav-bar--link" href="https://x.com/FrogCoGames" target="_blank">
<img class="nav-bar--link-icon" src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
</a>
<a class="nav-bar--link" href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
<img class="nav-bar--link-icon" src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
</a>
</div> </div>
<div class="nav-bar--separator"></div> <div class="nav-bar--separator"></div>
<div class="nav-bar--languages"> <div class="nav-bar--languages">

13
src/lib/social_links.html Normal file
View File

@ -0,0 +1,13 @@
{% macro social_link(name, icon_name, link) %}
<a class="{{class_prefix}}--link" href="{{link}}">
<img class="{{class_prefix}}--link-icon" src="/img/{{icon_name}}" alt-text="{{name}}"></img>
</a>
{% endmacro %}
{{ social_link(gettext('Mail'), 'mail-fill.svg', 'mailto:contact@frog-collective.com') }}
{{ social_link('Itch.io', 'itchio-fill.svg', 'https://frog-collective.itch.io/') }}
{{ social_link('Youtube', 'youtube-fill.svg', 'https://www.youtube.com/@FrogCoGames') }}
{{ social_link('Twitch', 'twitch-fill.svg', 'https://www.twitch.tv/frogcollective') }}
{{ social_link('Mastodon', 'mastodon-fill.svg', 'https://mastodon.social/@frogcollective') }}
{{ social_link('Twitter - X', 'twitter-x-line.svg', 'https://x.com/FrogCoGames') }}
{{ social_link('Facebook', 'facebook-circle-fill.svg', 'https://www.facebook.com/profile.php?id=61560180067337') }}

View File

@ -7,27 +7,9 @@
{% endtrans %} {% endtrans %}
</div> </div>
<div class="footer--links"> <div class="footer--links">
<a class="footer--link" href="mailto:contact@frog-collective.com"> {% with class_prefix="footer" %}
<img src="/img/mail-fill.svg" alt-text=="{{ gettext('Mail') }}"></img> {% include "lib/social_links.html" %}
</a> {% endwith %}
<a class="footer--link" href="https://frog-collective.itch.io/" target="_blank">
<img src="/img/itchio-fill.svg" alt-text="Itch.io"></img>
</a>
<a class="footer--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
<img src="/img/youtube-fill.svg" alt-text=="Youtube"></img>
</a>
<a class="footer--link" href="https://www.twitch.tv/frogcollective" target="_blank">
<img src="/img/twitch-fill.svg" alt-text=="Twitch"></img>
</a>
<a class="footer--link" href="https://mastodon.social/@frogcollective" target="_blank">
<img src="/img/mastodon-fill.svg" alt-text=="Mastodon"></img>
</a>
<a class="footer--link" href="https://x.com/FrogCoGames" target="_blank">
<img src="/img/twitter-x-line.svg" alt-text=="Twitter - X"></img>
</a>
<a class="footer--link" href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
<img src="/img/facebook-circle-fill.svg" alt-text=="Facebook"></img>
</a>
</div> </div>
</div> </div>
</div> </div>