feat: add option to easily redirect to Genius website

This commit is contained in:
rramiachraf 2024-04-16 01:26:28 +01:00
parent e54ea8abec
commit 22d4ab2cda
3 changed files with 39 additions and 17 deletions

View File

@ -9,6 +9,8 @@ function showAbout() {
fullAbout && [fullAbout, summary].forEach(item => item.onclick = showAbout) fullAbout && [fullAbout, summary].forEach(item => item.onclick = showAbout)
window.addEventListener("load", () => { window.addEventListener("load", () => {
const geniusURL = "https://genius.com" + document.location.pathname + document.location.search
document.getElementById("goto-genius").setAttribute("href", geniusURL)
document.querySelectorAll("#lyrics a").forEach(item => { document.querySelectorAll("#lyrics a").forEach(item => {
item.addEventListener("click", getAnnotation) item.addEventListener("click", getAnnotation)
}) })

View File

@ -24,7 +24,13 @@ nav img {
width: 50px; width: 50px;
} }
#choose-theme { #nav-icons {
display: flex;
align-items: center;
gap: 1rem;
}
.nav-icon {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;

View File

@ -4,7 +4,20 @@ templ navbar() {
<nav> <nav>
<div id="nav-container"> <div id="nav-container">
<a href="/"><img src="/static/logo.svg"/></a> <a href="/"><img src="/static/logo.svg"/></a>
<button id="choose-theme"> <div id="nav-icons">
<a
title="Go to Genius.com"
alt="Go to Genius.com"
class="nav-icon"
id="goto-genius"
rel="noopener noreferrer"
target="_blank"
>
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" fill="none" viewBox="0 0 24 24">
<path stroke="#181d31" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"></path>
</svg>
</a>
<button id="choose-theme" class="nav-icon">
<svg <svg
width="25px" width="25px"
height="25px" height="25px"
@ -23,5 +36,6 @@ templ navbar() {
</svg> </svg>
</button> </button>
</div> </div>
</div>
</nav> </nav>
} }