add read more option to song's about section

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

View File

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

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 => { 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"))
} }

View File

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

View File

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