https://podkite.com/00c4ba4a.js

1import{b as e,s as t,aC as s,aD as o,ab as r,$ as a,u as i,x as c,i as l,a3 as n,ae as p,L as d,J as g,at as h,aE as u}from"./23687aed.js";import{P as b}from"./ae9ce5bc.js";import{P as m}from"./895801ad.js";import{o as f}from"./d18b9a6e.js";const $="posts";class _ extends(e(t)(m(b))){static get properties(){return{type:String,redirect:{type:Boolean,attribute:"redirect"},_posts:Array,_resources:Array}}get _tilesTemplate(){return this.type===$?this._posts.map((e=>this._renderPost(e.slug,e.title.rendered,e.excerpt.rendered,this._getImage(e)))):this._resources.map((e=>this._renderResource(e.acf.resource_title,e.acf.resource_image.url,e.acf.resource_description,e.acf.resource_link,e.acf.resource_catgeories)))}constructor(){super(),this._posts=[],this._resources=[],this.type=$,this.watchScreenSize(),t.dispatch(s()),t.dispatch(o());const e="Podkite Blog - resources and content about podcasting",a="Content and resources helping podcasters to become successful in their podcasting journey.";r("title",e),r("description",a),r("og:title",e),r("og:description",a)}stateChanged(e){this._posts=this.get(e,"blog.posts",[]),this._resources=this.get(e,"blog.resources",[])}connectedCallback(){super.connectedCallback(),this.redirect&&(window.location.href="https://podkite.com/blog/")}render(){return a`
2      <style>
3        .blog .headline {
4          margin-bottom: ${i};
5        }
6        .blog .post-tile {
7          box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
8          border-radius: ${c};
9          max-width: 480px;
10          margin: 24px;
11          background-color: #f5f9fd;
12        }
13        .blog .post-tile:hover {
14          box-shadow: 8px 28px 50px rgba(39, 44, 49, 0.07), 1px 6px 12px rgba(39, 44, 49, 0.04);
15          transition: all 0.3s ease;
16          transform: scale(1.02);
17        }
18        .blog .post-tile > div {
19          padding: ${i};
20        }
21        .blog .post-tile .post-title {
22          color: black;
23          font-weight: 700;
24        }
25        .blog .post-tile img,
26        .blog .post-tile .post-title,
27        .blog .post-tile .post-read-more {
28          cursor: pointer;
29        }
30        .blog .post-tile .post-read-more {
31          text-transform: uppercase;
32          color: ${l};
33          opacity: 0.8;
34          letter-spacing: 2px;
35          font-size: ${i};
36          font-weight: bold;
37          transition: all 0.3s ease-in-out;
38        }
39        .blog .post-tile .post-read-more:hover {
40          color: initial;
41          opacity: 1;
42        }
43        .blog .post-tile .post-title:hover {
44          color: ${l};
45          opacity: 1;
46        }
47        .blog .post-tile img {
48          max-width: 100%;
49          max-height: 100%;
50          margin: 0 auto;
51        }
52        .blog .post-tile .post-content {
53          line-height: 1.6;
54          color: ${n};
55          opacity: 0.5;
56        }
57
58        .blog .cta-hero {
59          margin-top: 10vh;
60        }
61
62        .blog .resource-categories {
63          margin-top: 3em;
64        }
65        .blog .resource-category {
66          border: 1px solid ${p};
67          padding: ${d};
68          border-radius: ${g};
69          font-size: ${h};
70          font-weight: bold;
71          margin: ${c};
72        }
73      </style>
74      <section class="page blog">
75        <section class="headline">
76          <h2 class="feature-headline">
77            ${this.type===$?"Blog":"Resources for Podcasters"}
78          </h2>
79        </section>
80
81        <section class="flex wrap center-center">
82          ${this._tilesTemplate}
83        </section>
84
85        <section class="vertical center cta-hero">
86          <h2>Ready to stay on top of your feedback?</h2>
87          <podcast-search-section class="as-footer" do-not-autofocus></podcast-search-section>
88        </section>
89      </section>
90    `}_getImage(e){const t=this.get(e,"acf");return null==t?null:t["meta.featured_image"]}_renderPost(e,t,s,o){return a`
91      <div
92        class="post-tile center"
93        @mouseover=${()=>this._preloadPost(e)}
94        @click=${()=>this._openPost(e)}
95      >
96        <img src=${o} alt=${t} />
97        <div class="post-content-container">
98          <h3 class="post-title">${f(t)}</h3>
99          <div class="post-content">${f(s)}</div>
100          <p class="post-read-more">Read more >></p>
101        </div>
102      </div>
103    `}_renderResource(e,t,s,o,r=[]){return a`
104      <div class="post-tile center">
105        <img @click=${()=>window.open(o,"_blank")} src=${t} alt=${e} />
106        <div class="post-content-container">
107          <h3 @click=${()=>window.open(o,"_blank")} class="post-title">
108            ${f(e)}
109          </h3>
110          <div class="post-content">${s}</div>
111          <p class="post-read-more">
112            <a href=${o} target="_blank" rel="noopener">Get it >></a>
113          </p>
114          <p class="resource-categories">
115            ${r.map((e=>a`

116                  <span class="resource-category">${e}</span>
117                `))}
118          </p>
119        </div>
120      </div>
121    `}_preloadPost(e){t.dispatch(u(e))}_openPost(e){t.dispatch(u(e)),this.navigateBlogPost(e)}}window.customElements.define("page-blog",_);