Merge branch 'main' of git@github.com:cdransf/coryd.dev.git
This commit is contained in:
commit
19dc5b2828
17 changed files with 185 additions and 182 deletions
|
|
@ -64,6 +64,9 @@ export default async function (eleventyConfig) {
|
|||
eleventyConfig.addPassthroughCopy({
|
||||
'node_modules/@cdransf/theme-toggle/theme-toggle.js': 'assets/scripts/components/theme-toggle.js',
|
||||
})
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
'node_modules/@cdransf/select-pagination/select-pagination.js': 'assets/scripts/components/select-pagination.js',
|
||||
})
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
'node_modules/@zachleat/webcare-webshare/webcare-webshare.js': 'assets/scripts/components/webcare-webshare.js'
|
||||
})
|
||||
|
|
|
|||
2
cache/jsonfeed-to-mastodon-timestamp.json
vendored
2
cache/jsonfeed-to-mastodon-timestamp.json
vendored
|
|
@ -1,3 +1,3 @@
|
|||
{
|
||||
"timestamp": 1712433804875
|
||||
"timestamp": 1712548994285
|
||||
}
|
||||
30
cache/jsonfeed-to-mastodon.json
vendored
30
cache/jsonfeed-to-mastodon.json
vendored
|
|
@ -12171,5 +12171,35 @@
|
|||
"https://social.lol/users/cory/statuses/112226061832057528"
|
||||
],
|
||||
"lastTootTimestamp": 1712433804869
|
||||
},
|
||||
"https://trakt.tv/movies/outbreak-1995": {
|
||||
"id": "aHR0cHM6Ly90cmFrdC50di9tb3ZpZXMvb3V0YnJlYWstMTk5NQ==",
|
||||
"title": "🎥: Outbreak",
|
||||
"url": "https://trakt.tv/movies/outbreak-1995",
|
||||
"content_text": "🎥: Outbreak #Movies #Watching #Trakt https://trakt.tv/movies/outbreak-1995",
|
||||
"date_published": "Sun, 07 Apr 2024 16:48:00 GMT",
|
||||
"toots": [
|
||||
"https://social.lol/users/cory/statuses/112231722207668276"
|
||||
],
|
||||
"lastTootTimestamp": 1712520175372
|
||||
},
|
||||
"https://joanwestenberg.com/blog/curation-is-the-last-best-hope-of-intelligent-discourse": {
|
||||
"id": "aHR0cHM6Ly9qb2Fud2VzdGVuYmVyZy5jb20vYmxvZy9jdXJhdGlvbi1pcy10aGUtbGFzdC1iZXN0LWhvcGUtb2YtaW50ZWxsaWdlbnQtZGlzY291cnNl",
|
||||
"title": "🔗: Curation is the last best hope of intelligent discourse.",
|
||||
"url": "https://joanwestenberg.com/blog/curation-is-the-last-best-hope-of-intelligent-discourse",
|
||||
"content_text": "🔗: Curation is the last best hope of intelligent discourse. #AI #Tech #IndieWeb #SmallWeb #SocialMedia https://joanwestenberg.com/blog/curation-is-the-last-best-hope-of-intelligent-discourse",
|
||||
"date_published": "Mon, 08 Apr 2024 00:29:00 GMT",
|
||||
"toots": [
|
||||
"https://social.lol/users/cory/statuses/112233610884767203"
|
||||
],
|
||||
"lastTootTimestamp": 1712548994279
|
||||
},
|
||||
"https://tylersticka.com/journal/git-fresh/": {
|
||||
"id": "aHR0cHM6Ly90eWxlcnN0aWNrYS5jb20vam91cm5hbC9naXQtZnJlc2gv",
|
||||
"title": "🔗: Git Fresh",
|
||||
"url": "https://tylersticka.com/journal/git-fresh/",
|
||||
"content_text": "🔗: Git Fresh #WebDev https://tylersticka.com/journal/git-fresh/",
|
||||
"date_published": "Sun, 07 Apr 2024 17:50:00 GMT",
|
||||
"toots": []
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ export const img = async (
|
|||
sizes = '90vw',
|
||||
formats = ['avif', 'webp', 'jpeg']
|
||||
) => {
|
||||
const widths = [200, 320, 570, 880, 1024, 1248].filter(width => width <= maxWidth);
|
||||
const widths = [80, 200, 320, 570, 880, 1024, 1248].filter(width => width <= maxWidth);
|
||||
const metadata = await Image(src, {
|
||||
widths: [...widths],
|
||||
formats: [...formats],
|
||||
|
|
|
|||
42
package-lock.json
generated
42
package-lock.json
generated
|
|
@ -1,21 +1,21 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "9.5.1",
|
||||
"version": "9.7.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "coryd.dev",
|
||||
"version": "9.5.1",
|
||||
"version": "9.7.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cdransf/api-text": "^1.2.2",
|
||||
"@cdransf/select-pagination": "^1.0.2",
|
||||
"@cdransf/theme-toggle": "^1.2.3",
|
||||
"@daviddarnes/mastodon-post": "^1.1.1",
|
||||
"@remy/webmention": "^1.5.0",
|
||||
"@zachleat/webcare-webshare": "^1.0.3",
|
||||
"minisearch": "^6.3.0",
|
||||
"terser": "^5.30.1",
|
||||
"youtube-video-element": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
"markdown-it-anchor": "^8.4.1",
|
||||
"markdown-it-footnote": "^4.0.0",
|
||||
"slugify": "^1.6.6",
|
||||
"terser": "^5.30.1",
|
||||
"writing-stats": "^1.0.6"
|
||||
}
|
||||
},
|
||||
|
|
@ -1219,6 +1220,11 @@
|
|||
"integrity": "sha512-hL94Eez7twe31eQzH4iNk6bb3HjRc2Qnqq+d1O9XpVhKnJPKkMlp+trqnidvos8EEqU4H3VkyVANachFm5cxSw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@cdransf/select-pagination": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@cdransf/select-pagination/-/select-pagination-1.0.2.tgz",
|
||||
"integrity": "sha512-wDQ/jaBSZNf4bUB5NXC0G86IJlOEEyUBaOmRNOoMjmFhBW6RXVXhAZr6ggBksbSi7guImZgdW556CxeGiJjt7w=="
|
||||
},
|
||||
"node_modules/@cdransf/theme-toggle": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-1.2.3.tgz",
|
||||
|
|
@ -1699,6 +1705,7 @@
|
|||
"version": "0.3.5",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
|
||||
"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.2.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.10",
|
||||
|
|
@ -1712,6 +1719,7 @@
|
|||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
|
||||
"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
|
|
@ -1720,6 +1728,7 @@
|
|||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
|
||||
"integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
|
|
@ -1728,6 +1737,7 @@
|
|||
"version": "0.3.6",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
|
||||
"integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.5",
|
||||
"@jridgewell/trace-mapping": "^0.3.25"
|
||||
|
|
@ -1736,12 +1746,14 @@
|
|||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
|
||||
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
|
||||
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.25",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
|
||||
"integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
|
|
@ -2882,9 +2894,9 @@
|
|||
"peer": true
|
||||
},
|
||||
"node_modules/@types/markdown-it": {
|
||||
"version": "13.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.7.tgz",
|
||||
"integrity": "sha512-U/CBi2YUUcTHBt5tjO2r5QV/x0Po6nsYwQU4Y04fBS6vfoImaiZ6f8bi3CjTCxBPQSO1LMyUqkByzi8AidyxfA==",
|
||||
"version": "14.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.0.0.tgz",
|
||||
"integrity": "sha512-2rStaAqMaLQNfo9mg2HNlley75jUTAkZKqlk3pxDSgaFk44zd+CAVpczpoh6/RtOzfUtwpEyD6lsHWUfKbVSDg==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
|
|
@ -2920,6 +2932,7 @@
|
|||
"version": "8.11.3",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
|
||||
"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
|
|
@ -3178,7 +3191,8 @@
|
|||
"node_modules/buffer-from": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="
|
||||
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/call-bind": {
|
||||
"version": "1.0.7",
|
||||
|
|
@ -5582,9 +5596,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/path-to-regexp": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
|
||||
"integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.2.tgz",
|
||||
"integrity": "sha512-GQX3SSMokngb36+whdpRXE+3f9V8UzyAorlYvOGx87ufGHehNTn5lCxrKtLyZ4Yl/wEKnNnr98ZzOwwDZV5ogw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
|
|
@ -6330,6 +6344,7 @@
|
|||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -6338,6 +6353,7 @@
|
|||
"version": "0.5.21",
|
||||
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
|
||||
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"buffer-from": "^1.0.0",
|
||||
"source-map": "^0.6.0"
|
||||
|
|
@ -6427,6 +6443,7 @@
|
|||
"version": "5.30.3",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.30.3.tgz",
|
||||
"integrity": "sha512-STdUgOUx8rLbMGO9IOwHLpCqolkDITFFQSMYYwKE1N2lY6MVSaeoi10z/EhWxRc6ybqoVmKSkhKYH/XUpl7vSA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
"acorn": "^8.8.2",
|
||||
|
|
@ -6443,7 +6460,8 @@
|
|||
"node_modules/terser/node_modules/commander": {
|
||||
"version": "2.20.3",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
|
||||
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/timers-ext": {
|
||||
"version": "0.1.7",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "coryd.dev",
|
||||
"version": "9.6.4",
|
||||
"version": "9.8.2",
|
||||
"description": "The source for my personal site. Built using 11ty.",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
|
@ -20,12 +20,12 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cdransf/api-text": "^1.2.2",
|
||||
"@cdransf/select-pagination": "^1.0.2",
|
||||
"@cdransf/theme-toggle": "^1.2.3",
|
||||
"@daviddarnes/mastodon-post": "^1.1.1",
|
||||
"@remy/webmention": "^1.5.0",
|
||||
"@zachleat/webcare-webshare": "^1.0.3",
|
||||
"minisearch": "^6.3.0",
|
||||
"terser": "^5.30.1",
|
||||
"youtube-video-element": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -50,6 +50,7 @@
|
|||
"markdown-it-anchor": "^8.4.1",
|
||||
"markdown-it-footnote": "^4.0.0",
|
||||
"slugify": "^1.6.6",
|
||||
"terser": "^5.30.1",
|
||||
"writing-stats": "^1.0.6"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@ import artistCapitalizationPatches from '../json/artist-capitalization-patches.j
|
|||
export const artistCapitalization = (artist) => artistCapitalizationPatches[artist?.toLowerCase()] || artist
|
||||
|
||||
const sanitizeMediaString = (string) => string.normalize('NFD').replace(/[\u0300-\u036f\u2010—\.\?\(\)\[\]\{\}]/g, '').replace(/\.{3}/g, '').replace(/A©|é/g, 'e');
|
||||
const artistSanitizedKey = (artist) => `${sanitizeMediaString(artist).replace(/\s+/g, '-').toLowerCase()}`
|
||||
const albumSanitizedKey = (album) => `${sanitizeMediaString(album).replace(/\s+/g, '-').toLowerCase()}-${sanitizeMediaString(album.replace(/[:\/\\,'']+/g
|
||||
, '').replace(/\s+/g, '-').toLowerCase())}`
|
||||
|
||||
export const buildChart = (tracks, artists, albums, nowPlaying = {}) => {
|
||||
const artistsData = {}
|
||||
const albumsData = {}
|
||||
const tracksData = {}
|
||||
const artistSanitizedKey = (artist) => `${sanitizeMediaString(artist).replace(/\s+/g, '-').toLowerCase()}`
|
||||
const albumSanitizedKey = (album) => `${sanitizeMediaString(album).replace(/\s+/g, '-').toLowerCase()}-${sanitizeMediaString(album.replace(/[:\/\\,'']+/g
|
||||
, '').replace(/\s+/g, '-').toLowerCase())}`
|
||||
const objectToArraySorted = (inputObject) => Object.values(inputObject).sort((a, b) => b.plays - a.plays)
|
||||
|
||||
tracks.forEach(track => {
|
||||
|
|
@ -74,4 +74,16 @@ export const buildChart = (tracks, artists, albums, nowPlaying = {}) => {
|
|||
topTracks: topTracksData,
|
||||
nowPlaying
|
||||
}
|
||||
}
|
||||
|
||||
export const buildTracksWithArt = (tracks, artists, albums) => {
|
||||
tracks.forEach(track => {
|
||||
track['image'] = albums[albumSanitizedKey(track['album'])]?.['image'] || `https://cdn.coryd.dev/albums/${sanitizeMediaString(track['artist']).replace(/\s+/g, '-').toLowerCase()}-${sanitizeMediaString(track['album'].replace(/[:\/\\,'']+/g
|
||||
, '').replace(/\s+/g, '-').toLowerCase())}.jpg`
|
||||
track['url'] = (artists[artistSanitizedKey(track['artist'])]?.['mbid'] && artists[artistSanitizedKey(track['artist'])]?.['mbid'] !== '') ? `http://musicbrainz.org/artist/${artists[artistSanitizedKey(track['artist'])]?.['mbid']}` : `https://musicbrainz.org/search?query=${track['artist'].replace(
|
||||
/\s+/g,
|
||||
'+'
|
||||
)}&type=artist`
|
||||
})
|
||||
return tracks
|
||||
}
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
import { readFile } from 'fs/promises'
|
||||
import { buildChart } from './helpers/music.js'
|
||||
import { buildChart, buildTracksWithArt } from './helpers/music.js'
|
||||
|
||||
export default async function () {
|
||||
const monthChart = JSON.parse(await readFile('./src/_data/json/scrobbles-month-chart.json', 'utf8'));
|
||||
const threeMonthChart = JSON.parse(await readFile('./src/_data/json/scrobbles-three-month-chart.json', 'utf8'));
|
||||
const artists = JSON.parse(await readFile('./src/_data/json/artists-map.json', 'utf8'));
|
||||
const albums = JSON.parse(await readFile('./src/_data/json/albums-map.json', 'utf8'));
|
||||
const recent = JSON.parse(await readFile('./src/_data/json/scrobbles-window.json', 'utf8'))['data'].reverse().splice(0,10)
|
||||
return {
|
||||
recent: buildTracksWithArt(recent, artists, albums),
|
||||
month: buildChart(monthChart['data'], artists, albums),
|
||||
threeMonthChart: buildChart(threeMonthChart['data'], artists, albums),
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,12 +59,16 @@ layout: default
|
|||
Tracks
|
||||
</h2>
|
||||
<div class="now__section--header-buttons client-side">
|
||||
<button class="small active" data-toggle="tracks-window">This week</button>
|
||||
<button class="small active" data-toggle="tracks-recent">Recent</button>
|
||||
<button class="small secondary" data-toggle="tracks-window">This week</button>
|
||||
<button class="small secondary" data-toggle="tracks-month">This month</button>
|
||||
<button class="small secondary" data-toggle="tracks-three-months">3 months</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tracks-window">
|
||||
<div id="tracks-recent">
|
||||
{% render "partials/now/tracks-recent.liquid", data:musicCharts.recent %}
|
||||
</div>
|
||||
<div class="hidden" id="tracks-window">
|
||||
{% render "partials/now/track-chart.liquid", data:music.topTracks.data, mostPlayed:music.topTracks.mostPlayed %}
|
||||
</div>
|
||||
<div class="hidden" id="tracks-month">
|
||||
|
|
|
|||
25
src/_includes/partials/now/tracks-recent.liquid
Normal file
25
src/_includes/partials/now/tracks-recent.liquid
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{% if data.size > 0 %}
|
||||
{% capture css %}
|
||||
{% render "../../../assets/styles/components/track-chart.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css}}</style>
|
||||
{% endif %}
|
||||
<div class="track__chart">
|
||||
{% for item in data limit: 10 %}
|
||||
{% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
|
||||
<div class="track__chart--item">
|
||||
<div class="track__chart--meta">
|
||||
{% image item.image, alt, '', 'lazy', 80 %}
|
||||
<div class="track__chart--meta--text">
|
||||
<div class="track__chart--title">{{ item.track }}</div>
|
||||
<div class="track__chart--artists">
|
||||
<a href="{{ item.url }}">{{ item.artist }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="track__chart--timestamp">
|
||||
{{ item.timestamp | date: "%B %-d, %-I:%M%p", "America/Los_Angeles" }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
@ -2,10 +2,7 @@
|
|||
{% render "../../assets/styles/components/paginator.css" %}
|
||||
{% endcapture %}
|
||||
<style>{{ css }}</style>
|
||||
{% capture js %}
|
||||
{% render "../../assets/scripts/paginator.js" %}
|
||||
{% endcapture %}
|
||||
<script>{{ js }}</script>
|
||||
<script type="module" src="/assets/scripts/components/select-pagination.js"></script>
|
||||
<nav aria-label="Blog pagination" class="pagination flex--centered">
|
||||
{% if pagination.href.previous %}
|
||||
<a href="{{ pagination.href.previous }}" aria-label="Previous page">
|
||||
|
|
@ -19,18 +16,18 @@
|
|||
{% tablericon "arrow-left" "Prevous" %}
|
||||
</span>
|
||||
{% endif %}
|
||||
<noscript>
|
||||
<div class="text--centered">
|
||||
<span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
|
||||
</div>
|
||||
</noscript>
|
||||
<div class="select client-side">
|
||||
<select id="pagination" aria-label="Page selection">
|
||||
<select-pagination>
|
||||
<select aria-label="Page selection">
|
||||
{% for pageEntry in pagination.pages %}
|
||||
<option value="{{ forloop.index | minus: 1 }}">{{ forloop.index }} of {{ pagination.links.size }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<noscript>
|
||||
<div class="text--centered">
|
||||
<span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
|
||||
</div>
|
||||
</noscript>
|
||||
</select-pagination>
|
||||
{% if pagination.href.next %}
|
||||
<a href="{{ pagination.href.next }}" aria-label="Next page">
|
||||
{% tablericon "arrow-right" "Next" %}
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
window.onload = () => {
|
||||
const pagination = document.getElementById('pagination')
|
||||
const uri = window.location.pathname
|
||||
const urlSegments = uri.split('/').filter(segment => segment !== '')
|
||||
let pageNumber = parseInt(urlSegments[urlSegments.length - 1]) || 0
|
||||
pagination.querySelector(`option[value="${pageNumber.toString()}"]`).setAttribute('selected', 'selected')
|
||||
|
||||
if (pagination) {
|
||||
pagination.addEventListener('change', (event) => {
|
||||
pageNumber = event.target.value
|
||||
|
||||
if (urlSegments.length === 0 || isNaN(urlSegments[urlSegments.length - 1])) {
|
||||
urlSegments.push(pageNumber.toString())
|
||||
} else {
|
||||
urlSegments[urlSegments.length - 1] = pageNumber.toString()
|
||||
}
|
||||
|
||||
if (pageNumber === 0) {
|
||||
window.location.href = `${window.location.protocol}//${window.location.host}/`
|
||||
} else {
|
||||
window.location = `${window.location.protocol}//${window.location.host}/${urlSegments.join('/')}`
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
|
||||
.now__section--header-buttons > button {
|
||||
margin-bottom: 0 !important;
|
||||
margin-bottom: var(--sizing-sm) !important;
|
||||
}
|
||||
|
||||
.now__section--header-buttons > button:last-of-type {
|
||||
|
|
@ -120,4 +120,8 @@
|
|||
.now__section--header-buttons {
|
||||
margin: var(--sizing-3xl) 0 var(--sizing-lg);
|
||||
}
|
||||
|
||||
.now__section--header-buttons > button {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,115 +0,0 @@
|
|||
.pagefind-ui {
|
||||
margin-bottom: var(--sizing-base);
|
||||
--pagefind-ui-primary: var(--accent-color);
|
||||
--pagefind-ui-text: var(--text-color);
|
||||
--pagefind-ui-background: var(--color-lightest);
|
||||
--pagefind-ui-border: var(--gray-light);
|
||||
--pagefind-ui-tag: var(--gray-light);
|
||||
--pagefind-ui-border-width: 1px;
|
||||
--pagefind-ui-border-radius: 0;
|
||||
--pagefind-ui-image-border-radius: 0;
|
||||
--pagefind-ui-image-box-ratio: 3 / 2;
|
||||
--pagefind-ui-font: var(--font-sans);
|
||||
}
|
||||
|
||||
.pagefind-ui,
|
||||
.pagefind-ui__filter-name,
|
||||
.pagefind-ui__filter-label,
|
||||
.pagefind-ui__result-excerpt,
|
||||
.pagefind-ui__message,
|
||||
.pagefind-ui__button {
|
||||
font-size: var(--font-size-base) !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-excerpt {
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__form:before {
|
||||
opacity: 1 !important;
|
||||
top: calc(19px * var(--pagefind-ui-scale)) !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-title {
|
||||
color: var(--accent-color);
|
||||
font-size: var(--font-size-2xl);
|
||||
line-height: var(--line-height-2xl);
|
||||
font-weight: var(--font-weight-bold);
|
||||
margin: 0;
|
||||
transition-property: color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
|
||||
.pagefind-ui__result-title:hover,
|
||||
.pagefind-ui__result-title:focus,
|
||||
.pagefind-ui__result-title:active {
|
||||
color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
.pagefind-ui__results-area {
|
||||
margin-bottom: var(--sizing-base);
|
||||
}
|
||||
|
||||
:is(input[type="text"], input[type="search"]).pagefind-ui__search-input {
|
||||
padding-left: 2.375rem !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
height: 42px !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__search-clear {
|
||||
color: var(--text-color);
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__search-clear:hover,
|
||||
.pagefind-ui__search-clear:focus,
|
||||
.pagefind-ui__search-clear:active {
|
||||
color: var(--accent-color-hover) !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-title {
|
||||
margin-bottom: var(--sizing-xs) !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-link {
|
||||
font-size: var(--font-size-2xl) !important;
|
||||
color: var(--accent-color) !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__result-link:hover,
|
||||
.pagefind-ui__result-link:focus,
|
||||
.pagefind-ui__result-link:active {
|
||||
color: var(--accent-color-hover) !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__button {
|
||||
color: var(--color-lightest) !important;
|
||||
line-height: var(--line-height-base);
|
||||
border-radius: var(--rounded-full) !important;
|
||||
padding: var(--sizing-sm) var(--sizing-lg) !important;
|
||||
margin: 0 var(--sizing-xs) var(--sizing-md) 0;
|
||||
cursor: pointer !important;
|
||||
height: unset !important;
|
||||
background-color: var(--accent-color) !important;
|
||||
transition-property: background-color;
|
||||
transition-timing-function: var(--transition-ease-in-out);
|
||||
transition-duration: var(--transition-duration-default);
|
||||
}
|
||||
|
||||
.pagefind-ui__search-clear {
|
||||
height: calc(48px * var(--pagefind-ui-scale)) !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__button:hover,
|
||||
.pagefind-ui__button:active,
|
||||
.pagefind-ui__button:focus {
|
||||
color: var(--color-lightest) !important;
|
||||
background-color: var(--accent-color-hover) !important;
|
||||
}
|
||||
|
||||
.pagefind__placeholder {
|
||||
height: 42px !important;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
|
@ -1,7 +1,12 @@
|
|||
.track__chart--item {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.track__chart--item,
|
||||
.track__chart--meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.track__chart--item:not(:last-of-type) {
|
||||
|
|
@ -29,12 +34,46 @@
|
|||
|
||||
.track__chart--title {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.track__chart--title,
|
||||
.track__chart--artists {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.track__chart--artists {
|
||||
.track__chart--artists,
|
||||
.track__chart--timestamp {
|
||||
font-size: var(--font-size-sm);
|
||||
line-height: var(--line-height-sm);
|
||||
}
|
||||
|
||||
.track__chart--item img {
|
||||
border: 1px solid var(--accent-color);
|
||||
border-radius: var(--rounded-md);
|
||||
}
|
||||
|
||||
.track__chart--item img,
|
||||
.track__chart--item picture {
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
}
|
||||
|
||||
.track__chart--meta {
|
||||
justify-content: start;
|
||||
gap: var(--sizing-md);
|
||||
max-width: calc(70% - var(--sizing-lg));
|
||||
}
|
||||
|
||||
.track__chart--meta--text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.track__chart--timestamp {
|
||||
margin-left: var(--sizing-lg);
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -413,7 +413,8 @@ select {
|
|||
line-height: var(--line-height-base);
|
||||
}
|
||||
|
||||
.select {
|
||||
.select,
|
||||
select-pagination {
|
||||
border-radius: var(--rounded-full);
|
||||
background-color: var(--accent-color);
|
||||
padding: 0 var(--sizing-lg);
|
||||
|
|
@ -426,17 +427,22 @@ select {
|
|||
}
|
||||
|
||||
.select,
|
||||
.select select {
|
||||
.select select,
|
||||
select-pagination,
|
||||
select-pagination select {
|
||||
min-height: calc(var(--sizing-3xl) * 1.25);
|
||||
min-width: calc(var(--sizing-3xl) * 4);;
|
||||
}
|
||||
|
||||
.select select,
|
||||
.select::after {
|
||||
.select::after,
|
||||
select-pagination select,
|
||||
select-pagination::after {
|
||||
grid-area: select;
|
||||
}
|
||||
|
||||
.select::after {
|
||||
.select::after,
|
||||
select-pagination::after {
|
||||
content: '';
|
||||
width: var(--sizing-md);
|
||||
height: var(--sizing-sm);
|
||||
|
|
|
|||
|
|
@ -40,4 +40,6 @@ We wait for the document to load, select the pagination DOM node, get the curren
|
|||
|
||||
Within the `change` event listener I check whether we've extracted a url segment *and* that the last segment is a valid number — if not, we add a new numeric segment. If it is numeric, we replace it with the new page number. Finally, we have special handling for the root section — because my first page is at `/` and the second is at `/1/` we need to correctly navigate the user should the pageNumber be `0`.
|
||||
|
||||
With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.
|
||||
With that, we have quicker and more convenient page navigation for users that have JavaScript enabled and a handy page count for users that have disabled JavaScript in their browser.
|
||||
|
||||
{% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/select-pagination', command: 'npm i @cdransf/select-pagination' %}
|
||||
Reference in a new issue