👆 Add subscribe button

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",

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"

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

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

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

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 = {
+    window.player = {
-      amplitude: {
+      songs: [
-        songs: [
+        {
-          {
+          "name": "#{e.titlePlain}",
-            "name": "#{e.titlePlain}",
+          "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": "#{assetPath(e.image)}"
-            "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

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
 
 <!DOCTYPE html>
 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"))

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

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

static/js/main.js

@@ -41,9 +41,8 @@ document.addEventListener("DOMContentLoaded", () => {
   })
 
   // Player
-  if (window.Einundzwanzig && window.Einundzwanzig.amplitude && window.Amplitude) {
+  if (window.Amplitude && window.player) {
-    window.Amplitude.init(window.Einundzwanzig.amplitude)
+    window.Amplitude.init(window.player)
-
     document.querySelector('.player__progress').addEventListener('click', function (e) {
       var offset = this.getBoundingClientRect()
       var x = e.pageX - offset.left