mycrobe
/
cmsetlbbq
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

putting tags on the index page made the template more complex, so most of this solution is extracting bits out so that it's more readable

This commit is contained in:
Joe Mulvaney 2023-07-10 02:42:07 +00:00
parent 203ff84616
commit 25ba59ead5
3 changed files with 54 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/styles.css
View File

@ -87,10 +87,24 @@ p {
padding: 0;
}
.tag, .entry {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.entry {
margin-bottom: 1em;
}
.entry .link {
text-decoration: none;
}
.entry .link-text {
text-decoration: underline;
}
.nav {
margin: 0;
}
@ -116,17 +130,22 @@ p {
content: "➡️";
}
.metadata, .footer {
.footer {
color: grey;
overflow: auto;
}
.metadata .date {
float: left;
.metadata div, .metadata ul {
color: grey;
display: inline-block;
}
.metadata .location, .footer .feed-link {
.metadata .date::after {
content: "·";
padding: 0 1em;
}
.footer .feed-link {
float: right;
}
@ -135,7 +154,8 @@ p {
padding: 0;
}
.heading .tags li {
.heading .tags li,
.metadata .tags li {
display: inline;
border-right: 1px;
padding-right: 1em;

29
htmlIndexTemplate.js
View File

@ -1,3 +1,28 @@
const tagListItem = (tag, doLink) => {
let li = ` <li class="tag">`
if (doLink) {
li += ` <a class="link" href="tags/${tag}/">${tag}</a>`
}
else {
li += tag
}
li += `</li>`
return li
}
const tagsListItems = (tags, doLink=true) => tags.map(tag => tagListItem(tag, doLink)).join('\n')
const entryListItem = ({relativeUrl, title, date, tags}) => ` <li class="entry">
<a class="link" title="${title}" href="${relativeUrl}">
<span class="link-text">${title}</span>
<div class="metadata">
<div class="date">${date}</div><ul class="tags">
${tagsListItems(tags, false)}
</ul>
</div>
</a>
</li>`
const entriesListItems = (links) => links.map(entryListItem).join('\n')
module.exports = (links, tags) =>
`
<!DOCTYPE html>
@ -18,13 +43,13 @@ module.exports = (links, tags) =>
<section class="entries-section">
<h2>Entries</h2>
<ul class="entries">
${links.map(({relativeUrl, title, date}) => ` <li class="entry"><a class="link" href="${relativeUrl}">${title}</a><div class="date">${date}</div></li>`).join('\n')}
${entriesListItems(links)}
</ul>
</section>
<section class="tags-section">
<h2>Tags</h2>
<ul class="tags">
${tags.map(tag => ` <li class="tag"><a class="link" href="tags/${tag}/">${tag}</a></li>`).join('\n')}
${tagsListItems(tags)}
</ul>
</section>
</div>

3
htmlTemplate.js
View File

@ -29,8 +29,7 @@ page += `
${data.tags.map(tag => `<li><a href="../tags/${tag}/">${tag}</a></li>`).join('')}
</ul>
<div class="metadata">
<div class="date">${data.date}</div>
<div class="location">${data.location || ''}</div>
<div class="date">${data.date}</div><div class="location">${data.location || ''}</div>
</div>
</div>
<div class="content">