👆 Add subscribe button

2025-12-13 16:26:50 +00:00 · 2020-10-07 18:47:19 +02:00
parent e267773b0a
commit 153fddfaa0
10 changed files with 84 additions and 27 deletions
--- 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",
--- 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"
--- 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
--- 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;
+      }
+    }
+  }
+}
--- 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);
  }
 }
--- a/src/includes/mixins.pug
+++ b/src/includes/mixins.pug
@@ -43,8 +43,7 @@ mixin episodePlayer(e)
            .player__name(data-amplitude-song-info="name" data-amplitude-main-song-info="true")

  script.
-    window.Einundzwanzig = {
-      amplitude: {
+    window.player = {
      songs: [
        {
          "name": "#{e.titlePlain}",
@@ -54,5 +53,23 @@ mixin episodePlayer(e)
          "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
--- 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

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