add read more
option to song's about section
This commit is contained in:
parent
9325639b13
commit
f5288a0e1d
10
lyrics.go
10
lyrics.go
|
@ -4,6 +4,7 @@ import (
|
||||||
"fmt"
|
"fmt"
|
||||||
"net/http"
|
"net/http"
|
||||||
"path"
|
"path"
|
||||||
|
"strings"
|
||||||
"text/template"
|
"text/template"
|
||||||
|
|
||||||
"github.com/PuerkitoBio/goquery"
|
"github.com/PuerkitoBio/goquery"
|
||||||
|
@ -16,7 +17,7 @@ type song struct {
|
||||||
Image string
|
Image string
|
||||||
Lyrics string
|
Lyrics string
|
||||||
Credits map[string]string
|
Credits map[string]string
|
||||||
About string
|
About [2]string
|
||||||
}
|
}
|
||||||
|
|
||||||
func (s *song) parseLyrics(doc *goquery.Document) {
|
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) {
|
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) {
|
func (s *song) parse(doc *goquery.Document) {
|
||||||
|
|
|
@ -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 => {
|
document.querySelectorAll("#lyrics a").forEach(item => {
|
||||||
item.addEventListener("click", getAnnotation)
|
item.addEventListener("click", getAnnotation)
|
||||||
})
|
})
|
||||||
|
|
||||||
function getAnnotation(e) {
|
function getAnnotation(e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
console.log(e.target.parentElement.getAttribute("href"))
|
||||||
}
|
}
|
||||||
|
|
|
@ -99,7 +99,8 @@ a {
|
||||||
#container {
|
#container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 3fr 1fr;
|
grid-template-columns: 1fr 3fr 1fr;
|
||||||
padding: 2rem;
|
padding: 5rem 10rem;
|
||||||
|
gap: 5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#credits {
|
#credits {
|
||||||
|
@ -141,4 +142,10 @@ a {
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
color: #171717;
|
color: #171717;
|
||||||
line-height: 1.8rem;
|
line-height: 1.8rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<title>{{.Artist}} - {{.Title}} lyrics</title>
|
<title>{{.Artist}} - {{.Title}} lyrics</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="stylesheet" type="text/css" href="/static/style.css" />
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1 id="nav">DUMB</h1>
|
<h1 id="nav">DUMB</h1>
|
||||||
|
@ -18,7 +18,8 @@
|
||||||
<div id="info">
|
<div id="info">
|
||||||
<div id="about">
|
<div id="about">
|
||||||
<h1 id="title">About</h1>
|
<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>
|
||||||
<div id="credits">
|
<div id="credits">
|
||||||
<h1 id="title">Credits</h1>
|
<h1 id="title">Credits</h1>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user