open.source/dumb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add read more option to song's about section

Browse Source
This commit is contained in:
rramiachraf 2022-10-08 22:46:48 +01:00
parent 9325639b13
commit f5288a0e1d
4 changed files with 30 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
lyrics.go
View File

@ -4,6 +4,7 @@ import (
"fmt"
"net/http"
"path"
"strings"
"text/template"
"github.com/PuerkitoBio/goquery"
@ -16,7 +17,7 @@ type song struct {
Image string
Lyrics string
Credits map[string]string
About string
About [2]string
}
func (s *song) parseLyrics(doc *goquery.Document) {
@ -52,7 +53,12 @@ func (s *song) parseCredits(doc *goquery.Document) {
}
func (s *song) parseAbout(doc *goquery.Document) {
s.About = doc.Find("[class*='SongDescription__Content']").Text()
s.About[0] = doc.Find("[class*='SongDescription__Content']").Text()
summary := strings.Split(s.About[0], "")
if len(summary) > 250 {
s.About[1] = strings.Join(summary[0:250], "") + "..."
}
}
func (s *song) parse(doc *goquery.Document) {

11
static/script.js
View File

@ -1,7 +1,18 @@
const fullAbout = document.querySelector("#about #full_about")
const summary = document.querySelector("#about #summary")
function showAbout() {
summary.classList.toggle("hidden")
fullAbout.classList.toggle("hidden")
}
[fullAbout, summary].forEach(item => item.onclick = showAbout)
document.querySelectorAll("#lyrics a").forEach(item => {
item.addEventListener("click", getAnnotation)
})
function getAnnotation(e) {
e.preventDefault()
console.log(e.target.parentElement.getAttribute("href"))
}

9
static/style.css
View File

@ -99,7 +99,8 @@ a {
#container {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
padding: 2rem;
padding: 5rem 10rem;
gap: 5rem;
}
#credits {
@ -141,4 +142,10 @@ a {
font-size: 1.4rem;
color: #171717;
line-height: 1.8rem;
cursor: pointer;
}
.hidden {
display: none;
}

5
views/lyrics.tmpl
View File

@ -4,7 +4,7 @@
<title>{{.Artist}} - {{.Title}} lyrics</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/static/style.css" />
<script type="text/javascript" src="/static/script.js" async></script>
<script type="text/javascript" src="/static/script.js" defer></script>
</head>
<body>
<h1 id="nav">DUMB</h1>
@ -18,7 +18,8 @@
<div id="info">
<div id="about">
<h1 id="title">About</h1>
<p>{{.About}}</p>
<p class="hidden" id="full_about">{{index .About 0}}</p>
<p id="summary">{{index .About 1}}</p>
</div>
<div id="credits">
<h1 id="title">Credits</h1>