🛠 Image improvements

This commit is contained in:
Dennis Reimann
2020-10-06 19:13:38 +02:00
parent 72226ddcf7
commit 0664152f9e
30 changed files with 38 additions and 91 deletions

View File

@@ -3,7 +3,7 @@
"description": "Toximalistisches Infotainment für bullishe Bitcoiner.", "description": "Toximalistisches Infotainment für bullishe Bitcoiner.",
"keywords": "Bitcoin,Podcast,Lightning Network", "keywords": "Bitcoin,Podcast,Lightning Network",
"themeColor": "#FFFFFF", "themeColor": "#FFFFFF",
"cardImage": "/img/card.png", "cardImage": "/img/cover/news.png",
"twitterUrl": "https://twitter.com/_einundzwanzig_", "twitterUrl": "https://twitter.com/_einundzwanzig_",
"telegramUrl": "https://t.me/einundzwanzigpodcast", "telegramUrl": "https://t.me/einundzwanzigpodcast",
"shoutoutUrl": "https://tallyco.in/s/zfxqtu/", "shoutoutUrl": "https://tallyco.in/s/zfxqtu/",

View File

@@ -23,7 +23,7 @@
"build:styles": "postcss src/css/main.css --output dist/css/main.css", "build:styles": "postcss src/css/main.css --output dist/css/main.css",
"optimize": "npm-run-all -p optimize:* -s rev", "optimize": "npm-run-all -p optimize:* -s rev",
"optimize:styles": "csso dist/css/main.css --output dist/css/main.css", "optimize:styles": "csso dist/css/main.css --output dist/css/main.css",
"rev": "node-file-rev --manifest=generated/rev.json --root=dist dist/css/* dist/js/* dist/img/*.png dist/img/*.svg dist/img/team/*.jpg dist/img/team/*.png", "rev": "node-file-rev --manifest=generated/rev.json --root=dist dist/css/* dist/js/* dist/img/*.svg dist/img/cover/*.png dist/img/team/*.jpg dist/img/team/*.png",
"prod": "npm-run-all build optimize -s build:pages", "prod": "npm-run-all build optimize -s build:pages",
"images": "node tasks/optimize_images.js" "images": "node tasks/optimize_images.js"
}, },

View File

@@ -6,6 +6,7 @@ const shuffle = arr => { for (let i = arr.length - 1; i > 0; i--) { const j = Ma
const formatDate = date => (new Date(date)).toISOString().replace(/T.*/, '').split('-').reverse().join('.') const formatDate = date => (new Date(date)).toISOString().replace(/T.*/, '').split('-').reverse().join('.')
const linkTarget = url => url.startsWith('http') ? '_blank' : null const linkTarget = url => url.startsWith('http') ? '_blank' : null
const assetPath = path => { const assetPath = path => {
if (path.startsWith('http')) return path
let revs let revs
try { revs = require('./generated/rev.json') } catch (error) { } try { revs = require('./generated/rev.json') } catch (error) { }
return `${(revs && revs[path]) || path}` return `${(revs && revs[path]) || path}`

View File

@@ -121,13 +121,9 @@
min-width: 300px; min-width: 300px;
max-width: 400px; max-width: 400px;
} }
@media (--M_and_up) {
}
} }
.player__cover { .player__coverlink {
display: block;
@media (--up_to_M) { @media (--up_to_M) {
width: 100%; width: 100%;
} }
@@ -136,6 +132,11 @@
} }
} }
.player__cover {
display: block;
width: 100%;
}
.player__bottom { .player__bottom {
flex: 1; flex: 1;
color: var(--color-body-text); color: var(--color-body-text);

View File

@@ -4,7 +4,7 @@ block vars
- const title = episode.title - const title = episode.title
- const description = episode.contentSnippet - const description = episode.contentSnippet
- const cardImage = episode.image - const cardImage = episode.image
- const cardSize = 3000 - const cardSize = episode.image.match('cloudfront') ? 3000 : 1400
block og block og
meta(property="og:type" content="article") meta(property="og:type" content="article")

View File

@@ -6,7 +6,7 @@ mixin episodeItem(e)
article.episodeItem&attributes(attributes) article.episodeItem&attributes(attributes)
a.plain(href=`/podcast/${e.slug}/`) a.plain(href=`/podcast/${e.slug}/`)
.media .media
img(src=e.image alt=e.title loading="lazy") img(src=assetPath(e.image) alt=e.title loading="lazy")
.content .content
.meta .meta
span= e.categoryName + (e.number ? ` #${e.number}` : '') span= e.categoryName + (e.number ? ` #${e.number}` : '')
@@ -15,7 +15,8 @@ mixin episodeItem(e)
mixin episodePlayer(e) mixin episodePlayer(e)
.player.player--single&attributes(attributes) .player.player--single&attributes(attributes)
img.player__cover(src=imgLarge data-amplitude-song-info="cover_art_url" data-amplitude-main-song-info="true") a.player__coverlink(href=`/podcast/${e.slug}/`)
img.player__cover(src=imgLarge data-amplitude-song-info="cover_art_url" data-amplitude-main-song-info="true")
.player__bottom .player__bottom
progress.player__progress.amplitude-song-played-progress(data-amplitude-main-song-played-progress="true") progress.player__progress.amplitude-song-played-progress(data-amplitude-main-song-played-progress="true")
@@ -50,7 +51,7 @@ mixin episodePlayer(e)
"artist": "Einundzwanzig", "artist": "Einundzwanzig",
"album": "#{e.categoryName + (e.number ? ` #${e.number}` : '')}", "album": "#{e.categoryName + (e.number ? ` #${e.number}` : '')}",
"url": "#{e.enclosure.url}", "url": "#{e.enclosure.url}",
"cover_art_url": "#{e.image}" "cover_art_url": "#{assetPath(e.image)}"
} }
] ]
} }

View File

@@ -6,7 +6,7 @@ block vars
- const pageDescription = description || site.meta.description - const pageDescription = description || site.meta.description
- const pageKeywords = keywords || site.meta.keywords - const pageKeywords = keywords || site.meta.keywords
- const pageCard = cardImage || site.meta.cardImage - const pageCard = cardImage || site.meta.cardImage
- const pageCardSize = cardSize || 1402 - const pageCardSize = cardSize || 1400
- const themeColor = '#FFFFFF' - const themeColor = '#FFFFFF'
<!DOCTYPE html> <!DOCTYPE html>

View File

@@ -46,4 +46,4 @@ block main
darüber abstimmen welches Bitcoin-Projekt aus Deutschland diese kostbaren Sats bekommen soll. darüber abstimmen welches Bitcoin-Projekt aus Deutschland diese kostbaren Sats bekommen soll.
Wenn du also einen Shoutout in unserem Podcast kaufst, unterstützt du damit auch ein Bitcoin Projekt. Wenn du also einen Shoutout in unserem Podcast kaufst, unterstützt du damit auch ein Bitcoin Projekt.
a.button(href=site.meta,shoutoutUrl) Sende uns einen Shout-Out a.button(href=site.meta.shoutoutUrl) Sende uns einen Shout-Out

Binary file not shown.

Before

Width:  |  Height:  |  Size: 158 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

BIN
static/img/cover/news.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

@@ -1,60 +1 @@
<?xml version="1.0" standalone="no"?> <svg height="700pt" preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 700" width="700pt" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.1 0 0 -.1 0 700)"><path d="m622 5983 3-748 483-3 482-2v175 175h-310-310v120 120h250 250v170 170h-250-250v115 115h310 310v170 170h-485-485z"/><path d="m1770 5980v-750l173 2 172 3 3 748 2 747h-175-175z"/><path d="m2320 5980v-750h175 175l2 433 3 434 244-434 245-433h188 188v750 750h-175-175l-2-432-3-432-241 430-242 429-191 3-191 2z"/><path d="m3360 4346v-756h169c201 0 296 12 401 49 114 40 184 85 281 181 72 71 93 100 132 180 26 52 53 121 61 152 89 353-92 726-428 878-119 54-165 62-398 67l-218 5zm486 364c37-18 81-51 113-85 231-244 109-618-222-680l-37-7v407 408l43-7c23-4 69-20 103-36z"/><path d="m650 4583c0-412 3-518 15-563 66-247 290-422 544-424 108-1 175 16 273 66 147 76 265 229 297 386 7 34 11 230 11 547v495h-175-174l-3-504-3-504-30-44c-60-86-187-122-281-79-53 24-109 91-123 146-7 29-11 204-11 514v471h-170-170z"/><path d="m2000 4340v-750h170 170v437c0 240 3 433 7 429 5-4 116-200 249-434l241-427 186-3 187-2v750 750h-170-170v-431c0-245-4-428-9-425s-116 197-247 431l-239 425h-187-188z"/><path d="m660 3290v-170h271c254 0 271-1 265-17-4-10-144-271-311-580-168-310-305-565-305-568s270-5 600-5h600v175 175l-309 2-310 3 309 570c170 314 310 573 310 578 0 4-252 7-560 7h-560z"/><path d="m1832 3448c3-7 116-347 252-756l248-742 171 2 172 3 85 367c46 202 87 365 89 362 3-3 49-168 102-367l95-362 171-3 171-2 11 32c27 85 431 1462 431 1469 0 5-81 9-179 9-162 0-180-2-185-17-3-10-55-189-117-398-61-209-114-385-118-392-3-7-55 172-115 398l-109 409h-171-171l-94-410c-52-226-97-407-101-403s-68 189-141 411l-134 402h-183c-143 0-183-3-180-12z"/><path d="m4285 3438c-28-78-505-1475-505-1481 0-4 82-6 182-5l182 3 31 88 30 87 239-2 239-3 30-87 29-88h179c114 0 179 4 179 10 0 9-302 945-436 1353l-46 137h-164c-123 0-166-3-169-12zm226-780 55-173-114-3c-63-1-117 0-120 2-5 6 111 346 119 346 3 0 30-78 60-172z"/><path d="m5210 2700v-750l173 2 172 3 5 427 5 427 241-427 241-427 186-3 187-2v750 750h-170-170v-431c0-236-4-428-8-425-5 3-116 197-248 431l-239 425h-187-188z"/><path d="m660 1650v-170h271c254 0 271-1 265-17-4-10-144-271-311-580-168-310-305-565-305-568s270-5 600-5h600v175 175l-310 2-309 3 309 570c170 314 310 573 310 578 0 4-252 7-560 7h-560z"/><path d="m3100 1809c-170-17-325-92-451-218-89-89-139-170-182-296-29-83-31-100-32-225 0-234 57-376 217-538 82-82 180-143 298-183 89-31 103-33 230-33 90 1 152 6 188 16 49 14 52 14 52-3 0-18 11-19 175-19h175v420 420h-325-325v-170-170h151 150l-3-42c-3-42-5-44-63-73-56-28-68-30-170-30-103 0-114 2-175 31-169 81-263 267-225 445 61 293 399 422 644 246l48-35 122 122 123 123-44 37c-155 133-364 197-578 175z"/><path d="m1992 1063 3-748 173-3 172-2v750 750h-175-175z"/></g></svg>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M622 5983 l3 -748 483 -3 482 -2 0 175 0 175 -310 0 -310 0 0 120 0
120 250 0 250 0 0 170 0 170 -250 0 -250 0 0 115 0 115 310 0 310 0 0 170 0
170 -485 0 -485 0 2 -747z"/>
<path d="M1770 5980 l0 -750 173 2 172 3 3 748 2 747 -175 0 -175 0 0 -750z"/>
<path d="M2320 5980 l0 -750 175 0 175 0 2 433 3 434 244 -434 245 -433 188 0
188 0 0 750 0 750 -175 0 -175 0 -2 -432 -3 -432 -241 430 -242 429 -191 3
-191 2 0 -750z"/>
<path d="M3360 4346 l0 -756 169 0 c201 0 296 12 401 49 114 40 184 85 281
181 72 71 93 100 132 180 26 52 53 121 61 152 89 353 -92 726 -428 878 -119
54 -165 62 -398 67 l-218 5 0 -756z m486 364 c37 -18 81 -51 113 -85 231 -244
109 -618 -222 -680 l-37 -7 0 407 0 408 43 -7 c23 -4 69 -20 103 -36z"/>
<path d="M650 4583 c0 -412 3 -518 15 -563 66 -247 290 -422 544 -424 108 -1
175 16 273 66 147 76 265 229 297 386 7 34 11 230 11 547 l0 495 -175 0 -174
0 -3 -504 -3 -504 -30 -44 c-60 -86 -187 -122 -281 -79 -53 24 -109 91 -123
146 -7 29 -11 204 -11 514 l0 471 -170 0 -170 0 0 -507z"/>
<path d="M2000 4340 l0 -750 170 0 170 0 0 437 c0 240 3 433 7 429 5 -4 116
-200 249 -434 l241 -427 186 -3 187 -2 0 750 0 750 -170 0 -170 0 0 -431 c0
-245 -4 -428 -9 -425 -5 3 -116 197 -247 431 l-239 425 -187 0 -188 0 0 -750z"/>
<path d="M660 3290 l0 -170 271 0 c254 0 271 -1 265 -17 -4 -10 -144 -271
-311 -580 -168 -310 -305 -565 -305 -568 0 -3 270 -5 600 -5 l600 0 0 175 0
175 -309 2 -310 3 309 570 c170 314 310 573 310 578 0 4 -252 7 -560 7 l-560
0 0 -170z"/>
<path d="M1832 3448 c3 -7 116 -347 252 -756 l248 -742 171 2 172 3 85 367
c46 202 87 365 89 362 3 -3 49 -168 102 -367 l95 -362 171 -3 171 -2 11 32
c27 85 431 1462 431 1469 0 5 -81 9 -179 9 -162 0 -180 -2 -185 -17 -3 -10
-55 -189 -117 -398 -61 -209 -114 -385 -118 -392 -3 -7 -55 172 -115 398
l-109 409 -171 0 -171 0 -94 -410 c-52 -226 -97 -407 -101 -403 -4 4 -68 189
-141 411 l-134 402 -183 0 c-143 0 -183 -3 -180 -12z"/>
<path d="M4285 3438 c-28 -78 -505 -1475 -505 -1481 0 -4 82 -6 182 -5 l182 3
31 88 30 87 239 -2 239 -3 30 -87 29 -88 179 0 c114 0 179 4 179 10 0 9 -302
945 -436 1353 l-46 137 -164 0 c-123 0 -166 -3 -169 -12z m226 -780 l55 -173
-114 -3 c-63 -1 -117 0 -120 2 -5 6 111 346 119 346 3 0 30 -78 60 -172z"/>
<path d="M5210 2700 l0 -750 173 2 172 3 5 427 5 427 241 -427 241 -427 186
-3 187 -2 0 750 0 750 -170 0 -170 0 0 -431 c0 -236 -4 -428 -8 -425 -5 3
-116 197 -248 431 l-239 425 -187 0 -188 0 0 -750z"/>
<path d="M660 1650 l0 -170 271 0 c254 0 271 -1 265 -17 -4 -10 -144 -271
-311 -580 -168 -310 -305 -565 -305 -568 0 -3 270 -5 600 -5 l600 0 0 175 0
175 -310 2 -309 3 309 570 c170 314 310 573 310 578 0 4 -252 7 -560 7 l-560
0 0 -170z"/>
<path d="M3100 1809 c-170 -17 -325 -92 -451 -218 -89 -89 -139 -170 -182
-296 -29 -83 -31 -100 -32 -225 0 -234 57 -376 217 -538 82 -82 180 -143 298
-183 89 -31 103 -33 230 -33 90 1 152 6 188 16 49 14 52 14 52 -3 0 -18 11
-19 175 -19 l175 0 0 420 0 420 -325 0 -325 0 0 -170 0 -170 151 0 150 0 -3
-42 c-3 -42 -5 -44 -63 -73 -56 -28 -68 -30 -170 -30 -103 0 -114 2 -175 31
-169 81 -263 267 -225 445 61 293 399 422 644 246 l48 -35 122 122 123 123
-44 37 c-155 133 -364 197 -578 175z"/>
<path d="M1992 1063 l3 -748 173 -3 172 -2 0 750 0 750 -175 0 -175 0 2 -747z"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -13,13 +13,11 @@ const slugify = str => str.toLowerCase()
const parseInfo = e => { const parseInfo = e => {
const titleMatch = e.title.match(/([\w\s]+?)?\s?#(\d+) - (.*)/) const titleMatch = e.title.match(/([\w\s]+?)?\s?#(\d+) - (.*)/)
let [, categoryName = 'News', number, titlePlain] = titleMatch ? titleMatch : [,,,e.title] let [, categoryName = 'News', number, titlePlain] = titleMatch ? titleMatch : [,,,e.title]
if (!number) categoryName = 'Verschiedenes' if (!number) categoryName = 'Verschiedenes'
const blockMatch = e.contentSnippet.match(/Blockzeit\s(\d+)/) const blockMatch = e.contentSnippet.match(/Blockzeit\s(\d+)/)
const block = blockMatch ? parseInt(blockMatch[1]) : null const block = blockMatch ? parseInt(blockMatch[1]) : null
const category = slugify(categoryName) const category = slugify(categoryName)
const slug = slugify(`${categoryName} ${number || ''} ${titlePlain}`) const slug = slugify(`${categoryName} ${number || ''} ${titlePlain}`)
return { block, category, categoryName, number, titlePlain, slug } return { block, category, categoryName, number, titlePlain, slug }
} }
@@ -31,20 +29,25 @@ const parseInfo = e => {
write('feed', feed) write('feed', feed)
// All episodes // All episodes
const episodes = feed.items.map(e => ({ const episodes = feed.items.map(e => {
title: e.title.trim(), const info = parseInfo(e)
content: e.content.trim(), const image = info.category === 'interview' ? e.itunes.image : `/img/cover/${info.category}.png`
contentSnippet: e.contentSnippet.trim(), return {
anchor: e.link, title: e.title.trim(),
date: e.isoDate, content: e.content.trim(),
enclosure: e.enclosure, contentSnippet: e.contentSnippet.trim(),
duration: e.itunes.duration, anchor: e.link,
image: e.itunes.image, date: e.isoDate,
season: e.itunes.season, enclosure: e.enclosure,
episode: e.itunes.episode, duration: e.itunes.duration,
guid: e.guid, season: e.itunes.season,
...parseInfo(e) episode: e.itunes.episode,
})) guid: e.guid,
image,
originalImage: e.itunes.image,
...info
}
})
write('episodes', episodes) write('episodes', episodes)
})() })()