From 153fddfaa003a2adc53f9a0f4b83736b95a5bb21 Mon Sep 17 00:00:00 2001 From: Dennis Reimann Date: Wed, 7 Oct 2020 18:47:19 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=86=20Add=20subscribe=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/meta.json | 2 +- package.json | 4 ++-- pug.config.js | 5 ++++- src/css/base/elements.css | 39 ++++++++++++++++++++++++++++++++++-- src/css/base/variables.css | 5 ++++- src/includes/mixins.pug | 41 +++++++++++++++++++++++++++----------- src/includes/template.pug | 3 +-- src/index.pug | 5 +++-- src/podcast.pug | 2 +- static/js/main.js | 5 ++--- 10 files changed, 84 insertions(+), 27 deletions(-) diff --git a/content/meta.json b/content/meta.json index ad2f3edbc17..02fb2774c8d 100644 --- a/content/meta.json +++ b/content/meta.json @@ -2,7 +2,7 @@ "title": "Einundzwanzig, der Bitcoin Podcast", "description": "Toximalistisches Infotainment für bullishe Bitcoiner.", "keywords": "Bitcoin,Podcast,Lightning Network", - "themeColor": "#FFFFFF", + "themeColor": "#f7931a", "cardImage": "/img/cover/news.png", "twitterUrl": "https://twitter.com/_einundzwanzig_", "telegramUrl": "https://t.me/einundzwanzigpodcast", diff --git a/package.json b/package.json index 2fd9631213e..183040dc9e7 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "fetch": "node tasks/fetch_feed.js", "copy": "cp -r static/* dist && cp node_modules/amplitudejs/dist/amplitude.min.js dist/js/amplitude.js", "init": "npm-run-all clean -p fetch copy build:data", - "start": "npm-run-all init -p start:*", + "start": "NODE_ENV=development npm-run-all init -p start:*", "start:data": "onchange -k 'content/**/*' -- npm run build:data", "start:pages": "onchange -i -k 'pug.config.js' 'markdown.js' 'content/**' 'generated/**' 'src/**/*.pug' 'src/**/*.svg' 'tasks/generate_pages.js' -- npm run build:pages", "start:styles": "onchange -i -k 'src/**/*.css' -- npm run build:styles", @@ -25,7 +25,7 @@ "optimize": "npm-run-all -p optimize:* -s rev", "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/*.svg dist/img/cover/*.png dist/img/team/*.jpg dist/img/team/*.png", - "prod": "npm-run-all build optimize -s build:pages" + "prod": "NODE_ENV=production npm-run-all build optimize -s build:pages" }, "dependencies": { "amplitudejs": "5.2.0" diff --git a/pug.config.js b/pug.config.js index d5ea6604fb1..57a8fac1ab6 100644 --- a/pug.config.js +++ b/pug.config.js @@ -1,6 +1,8 @@ // initialize markdown rendering const renderMarkdown = require('./markdown') +const IS_DEV = process.env.NODE_ENV === 'development' +const HOST = IS_DEV ? 'localhost:3000' : 'einundzwanzig.space' const random = max => Math.floor(Math.random() * Math.floor(max)) const shuffle = arr => { for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * i); const temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; }; return arr } const formatDate = date => (new Date(date)).toISOString().replace(/T.*/, '').split('-').reverse().join('.') @@ -12,7 +14,8 @@ const assetPath = path => { return `${(revs && revs[path]) || path}` } const assetUrl = (path, protocol = 'https') => { - const base = path.startsWith('http') ? '' : `${protocol}://einundzwanzig.space` + if (IS_DEV && !path.startsWith('http')) protocol = 'http' + const base = path.startsWith('http') ? '' : `${protocol}://${HOST}` let url = `${base}${assetPath(path)}` if (!url.startsWith(`${protocol}:`)) url = url.replace(/^.*:/, `${protocol}:`) return url diff --git a/src/css/base/elements.css b/src/css/base/elements.css index b7152651cb3..82eb6565939 100644 --- a/src/css/base/elements.css +++ b/src/css/base/elements.css @@ -146,18 +146,53 @@ img:-moz-loading { display: inline-block; text-align: center; padding: var(--space-m) var(--space-l); - color: var(--color-neutral-0); + font-weight: var(--font-weight-bold); + color: #2a1801; background-color: var(--color-accent); text-decoration: none; + text-transform: uppercase; border-radius: var(--space-m); transition-property: color, background; transition-duration: var(--transition-duration-fast); &:hover { @media not all and (hover: none) { - color: var(--color-neutral-0); + color: #2a1801; background-color: var(--color-accent-highlight); text-decoration: none; } } } + +.podlove-subscribe-button-iframe { + margin-top: var(--space-m); + border-radius: var(--space-m); +} + +#podlove-subscribe-popup { + background-color: var(--color-overlay-bg) !important; + + & #podlove-subscribe-popup-modal { + & * { + font-family: var(--font-family-base) !important; + font-weight: var(--font-weight-regular) !important; + } + + & .top-bar, + & .podlove-logo, + & .device-cloud-switch, + & #podlove-subscribe-panel-podcast, + & #podlove-subscribe-panel-clients, + & #podlove-subscribe-panel-finish { + color: var(--color-body-text) !important; + background-color: var(--color-card-bg) !important; + transition-property: color, background-color; + transition-duration: var(--transition-duration-fast); + + & li, + & .device-cloud-switch { + border-color: var(--color-body-bg) !important; + } + } + } +} diff --git a/src/css/base/variables.css b/src/css/base/variables.css index 1e05932f212..2d55758ee8b 100644 --- a/src/css/base/variables.css +++ b/src/css/base/variables.css @@ -11,6 +11,7 @@ --color-neutral-90: #222; --color-neutral-95: #1B1B1B; + --color-overlay-bg: rgba(200, 200, 200, .95); --color-body-text: var(--color-neutral-90); --color-body-bg: var(--color-neutral-0); --color-card-bg: var(--color-neutral-10); @@ -33,7 +34,7 @@ --font-family-base: 'Inconsolata', monospace; - --font-weight-normal: 400; + --font-weight-regular: 400; --font-weight-bold: 700; --font-size-base: 18px; @@ -62,6 +63,7 @@ --color-body-text: var(--color-neutral-0); --color-body-bg: var(--color-neutral-90); --color-card-bg: var(--color-neutral-95); + --color-overlay-bg: rgba(0, 0, 0, .95); } @media (prefers-color-scheme: dark) { @@ -69,5 +71,6 @@ --color-body-text: var(--color-neutral-0); --color-body-bg: var(--color-neutral-90); --color-card-bg: var(--color-neutral-95); + --color-overlay-bg: rgba(20, 20, 20, .95); } } diff --git a/src/includes/mixins.pug b/src/includes/mixins.pug index f34caa8914c..d41226006fc 100644 --- a/src/includes/mixins.pug +++ b/src/includes/mixins.pug @@ -43,16 +43,33 @@ mixin episodePlayer(e) .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true") script. - window.Einundzwanzig = { - amplitude: { - songs: [ - { - "name": "#{e.titlePlain}", - "artist": "Einundzwanzig", - "album": "#{e.categoryName + (e.number ? ` #${e.number}` : '')}", - "url": "#{e.enclosure.url}", - "cover_art_url": "#{assetPath(e.image)}" - } - ] - } + window.player = { + songs: [ + { + "name": "#{e.titlePlain}", + "artist": "Einundzwanzig", + "album": "#{e.categoryName + (e.number ? ` #${e.number}` : '')}", + "url": "#{e.enclosure.url}", + "cover_art_url": "#{assetPath(e.image)}" + } + ] }; + +mixin subscribe() + script. + window.subscribe = { + title: "Einundzwanzig", + subtitle: "Der Bitcoin Podcast", + description: "#{site.meta.description}", + cover: "#{assetUrl(site.meta.cardImage)}", + feeds: [ + { + type: "audio", + format: "mp3", + url: "#{site.meta.feedUrl}", + "directory-url-itunes": "#{site.meta.appleUrl}" + } + ] + } + script(src="https://cdn.podlove.org/subscribe-button/javascripts/app.js" class="podlove-subscribe-button" data-language="de" data-size="big" data-json-data="subscribe" data-color=themeColor data-format="rectangle") + noscript: a.button(href=site.meta.feedUrl) Jetzt abonnieren diff --git a/src/includes/template.pug b/src/includes/template.pug index 664e146adec..8376432091f 100644 --- a/src/includes/template.pug +++ b/src/includes/template.pug @@ -7,7 +7,7 @@ block vars - const pageKeywords = keywords || site.meta.keywords - const pageCard = cardImage || site.meta.cardImage - const pageCardSize = cardSize || 1400 -- const themeColor = '#FFFFFF' +- const themeColor = site.meta.themeColor html(lang="en") @@ -31,7 +31,6 @@ html(lang="en") meta(property="twitter:title" content=pageTitle) meta(property="twitter:description" content=pageDescription) meta(property="twitter:image" content=assetUrl(pageCard)) - meta(name="msapplication-TileColor" content=themeColor) meta(name="theme-color" content=themeColor) link(rel="preload" as="font" crossorigin href=assetPath("/fonts/inconsolata-400.woff2")) diff --git a/src/index.pug b/src/index.pug index d0b6dff1d20..5126039d83d 100644 --- a/src/index.pug +++ b/src/index.pug @@ -20,6 +20,7 @@ block main [Wir](/team/) bringen dir die [News](/podcast/news/) der Woche, sowie zusätzlich [Interviews](/podcast/interviews/) und die besten Artikel als [Lesestunde](/podcast/lesestunde/). Außerdem erfährst du in [Der Weg](/podcast/der-weg/) wie andere Leute zu Bitcoin gekommen sind. + +subscribe() section h2 Aktuelle Episode @@ -34,7 +35,7 @@ block main sprechen wir dort nicht über den Preis, Altcoins oder sonstige unwichtigen Dinge. In unserer Gruppe findest du News, Informationen und bekommst praktische Ratschläge zu technischen Themen. - a.button(href=site.meta.telegramUrl target="_blank") Komm in die Gruppe! + a.button(href=site.meta.telegramUrl target="_blank") Ab in die Gruppe section :markdown-it(html linkify typographer) @@ -45,4 +46,4 @@ block main darüber abstimmen welches Bitcoin-Projekt aus Deutschland diese kostbaren Sats bekommen soll. Wenn du also einen Shout-Out in unserem Podcast kaufst, unterstützt du damit auch ein Bitcoin Projekt. - a.button(href=site.meta.shoutoutUrl target="_blank") Sende uns einen Shout-Out + a.button(href=site.meta.shoutoutUrl target="_blank") Shout-Out senden diff --git a/src/podcast.pug b/src/podcast.pug index d489be69dac..c0af5665cca 100644 --- a/src/podcast.pug +++ b/src/podcast.pug @@ -28,7 +28,7 @@ block main = " und " a(href=site.meta.anchorUrl) Anchor = "." - a.button(href=site.meta.feedUrl) Jetzt abonnieren + +subscribe() section h2 Aktuelle Episode diff --git a/static/js/main.js b/static/js/main.js index d4952dce05c..7ab95506c9b 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -41,9 +41,8 @@ document.addEventListener("DOMContentLoaded", () => { }) // Player - if (window.Einundzwanzig && window.Einundzwanzig.amplitude && window.Amplitude) { - window.Amplitude.init(window.Einundzwanzig.amplitude) - + if (window.Amplitude && window.player) { + window.Amplitude.init(window.player) document.querySelector('.player__progress').addEventListener('click', function (e) { var offset = this.getBoundingClientRect() var x = e.pageX - offset.left