@rmdes/indiekit-endpoint-youtube 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/includes/@indiekit-endpoint-youtube-live.njk +16 -0
  2. package/includes/@indiekit-endpoint-youtube-videos.njk +13 -0
  3. package/includes/@indiekit-endpoint-youtube-widget.njk +11 -134
  4. package/package.json +1 -1
  5. package/views/youtube.njk +3 -3
package/includes/@indiekit-endpoint-youtube-live.njk ADDED
@@ -0,0 +1,16 @@
1
+ {# Live status partial for embedding in other templates #}
2
+ {% if liveStatus and liveStatus.isLive %}
3
+ <div class="youtube-live youtube-live--active">
4
+ <span class="youtube-live__badge">Live</span>
5
+ <a href="https://www.youtube.com/watch?v={{ liveStatus.videoId }}" target="_blank" rel="noopener">
6
+ {{ liveStatus.title }}
7
+ </a>
8
+ </div>
9
+ {% elif liveStatus and liveStatus.isUpcoming %}
10
+ <div class="youtube-live youtube-live--upcoming">
11
+ <span class="youtube-live__badge">Upcoming</span>
12
+ <a href="https://www.youtube.com/watch?v={{ liveStatus.videoId }}" target="_blank" rel="noopener">
13
+ {{ liveStatus.title }}
14
+ </a>
15
+ </div>
16
+ {% endif %}
package/includes/@indiekit-endpoint-youtube-videos.njk ADDED
@@ -0,0 +1,13 @@
1
+ {# Videos partial for embedding in other templates #}
2
+ {% if videos and videos.length > 0 %}
3
+ <ul class="youtube-list youtube-list--compact">
4
+ {% for video in videos %}
5
+ {% if loop.index <= 5 %}
6
+ <li class="youtube-list__item">
7
+ <a href="{{ video.url }}" target="_blank" rel="noopener">{{ video.title }}</a>
8
+ <small class="youtube-meta">{{ video.viewCount }} views</small>
9
+ </li>
10
+ {% endif %}
11
+ {% endfor %}
12
+ </ul>
13
+ {% endif %}
package/includes/@indiekit-endpoint-youtube-widget.njk CHANGED
@@ -1,135 +1,12 @@
1
- {#
2
- YouTube Widget - Embeddable component showing latest video and live status
3
-
4
- Usage in your templates:
5
- {% include "@indiekit-endpoint-youtube-widget.njk" %}
6
-
7
- Requires youtube data to be fetched and passed to the template context
8
- #}
9
-
10
- <style>
11
- .youtube-widget {
12
- display: flex;
13
- flex-direction: column;
14
- gap: 0.75rem;
15
- padding: 1rem;
16
- background: var(--color-offset, #f5f5f5);
17
- border-radius: 0.5rem;
18
- }
19
- .youtube-widget__header {
20
- display: flex;
21
- align-items: center;
22
- justify-content: space-between;
23
- }
24
- .youtube-widget__title {
25
- font-weight: 600;
26
- font-size: 0.875rem;
27
- margin: 0;
28
- }
29
- .youtube-widget__live {
30
- display: inline-flex;
31
- align-items: center;
32
- gap: 0.375rem;
33
- padding: 0.125rem 0.5rem;
34
- border-radius: 1rem;
35
- font-size: 0.625rem;
36
- font-weight: 600;
37
- text-transform: uppercase;
38
- }
39
- .youtube-widget__live--on {
40
- background: #ff0000;
41
- color: white;
42
- }
43
- .youtube-widget__live--off {
44
- background: #e5e5e5;
45
- color: #666;
46
- }
47
- .youtube-widget__live-dot {
48
- width: 6px;
49
- height: 6px;
50
- border-radius: 50%;
51
- background: currentColor;
52
- }
53
- .youtube-widget__video {
54
- display: flex;
55
- gap: 0.75rem;
56
- }
57
- .youtube-widget__thumb {
58
- width: 120px;
59
- height: 68px;
60
- object-fit: cover;
61
- border-radius: 0.25rem;
62
- flex-shrink: 0;
63
- }
64
- .youtube-widget__info {
65
- flex: 1;
66
- min-width: 0;
67
- }
68
- .youtube-widget__video-title {
69
- font-size: 0.875rem;
70
- font-weight: 500;
71
- margin: 0 0 0.25rem 0;
72
- display: -webkit-box;
73
- -webkit-line-clamp: 2;
74
- -webkit-box-orient: vertical;
75
- overflow: hidden;
76
- }
77
- .youtube-widget__video-title a {
78
- color: inherit;
79
- text-decoration: none;
80
- }
81
- .youtube-widget__video-title a:hover {
82
- text-decoration: underline;
83
- }
84
- .youtube-widget__meta {
85
- font-size: 0.75rem;
86
- color: var(--color-text-secondary, #666);
87
- }
88
- </style>
89
-
90
- <div class="youtube-widget">
91
- <div class="youtube-widget__header">
92
- <h3 class="youtube-widget__title">YouTube</h3>
93
- {% if youtube.isLive %}
94
- <span class="youtube-widget__live youtube-widget__live--on">
95
- <span class="youtube-widget__live-dot"></span>
96
- Live
97
- </span>
98
- {% else %}
99
- <span class="youtube-widget__live youtube-widget__live--off">
100
- Offline
101
- </span>
102
- {% endif %}
1
+ {% call widget({
2
+ title: __("youtube.title")
3
+ }) %}
4
+ <p class="prose">{{ __("youtube.widget.description") }}</p>
5
+ <div class="button-grid">
6
+ {{ button({
7
+ classes: "button--secondary-on-offset",
8
+ href: application.youtubeEndpoint or "/youtube",
9
+ text: __("youtube.widget.view")
10
+ }) }}
103
11
  </div>
104
-
105
- {% if youtube.liveStream %}
106
- <div class="youtube-widget__video">
107
- <img src="{{ youtube.liveStream.thumbnail }}" alt="" class="youtube-widget__thumb">
108
- <div class="youtube-widget__info">
109
- <h4 class="youtube-widget__video-title">
110
- <a href="{{ youtube.liveStream.url }}" target="_blank" rel="noopener">
111
- {{ youtube.liveStream.title }}
112
- </a>
113
- </h4>
114
- <p class="youtube-widget__meta">🔴 Streaming now</p>
115
- </div>
116
- </div>
117
- {% elif youtube.videos and youtube.videos[0] %}
118
- {% set video = youtube.videos[0] %}
119
- <div class="youtube-widget__video">
120
- <img src="{{ video.thumbnail }}" alt="" class="youtube-widget__thumb">
121
- <div class="youtube-widget__info">
122
- <h4 class="youtube-widget__video-title">
123
- <a href="{{ video.url }}" target="_blank" rel="noopener">
124
- {{ video.title }}
125
- </a>
126
- </h4>
127
- <p class="youtube-widget__meta">
128
- {{ video.viewCount | localeNumber }} views
129
- </p>
130
- </div>
131
- </div>
132
- {% else %}
133
- <p class="youtube-widget__meta">No videos available</p>
134
- {% endif %}
135
- </div>
12
+ {% endcall %}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rmdes/indiekit-endpoint-youtube",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "YouTube channel endpoint for Indiekit. Display latest videos and live status from any YouTube channel.",
5
5
  "keywords": [
6
6
  "indiekit",
package/views/youtube.njk CHANGED
@@ -188,8 +188,8 @@
188
188
  <div class="yt-channel__info">
189
189
  <h2 class="yt-channel__name">{{ channel.title }}</h2>
190
190
  <div class="yt-channel__stats">
191
- <span>{{ channel.subscriberCount | localeNumber }} {{ __("youtube.subscribers") }}</span>
192
- <span>{{ channel.videoCount | localeNumber }} videos</span>
191
+ <span>{{ channel.subscriberCount }} {{ __("youtube.subscribers") }}</span>
192
+ <span>{{ channel.videoCount }} videos</span>
193
193
  </div>
194
194
  </div>
195
195
  {% if isLive %}
@@ -255,7 +255,7 @@
255
255
  <a href="{{ video.url }}" target="_blank" rel="noopener">{{ video.title }}</a>
256
256
  </h3>
257
257
  <div class="yt-video__meta">
258
- {{ video.viewCount | localeNumber }} {{ __("youtube.views") }}
258
+ {{ video.viewCount }} {{ __("youtube.views") }}
259
259
  </div>
260
260
  </div>
261
261
  </li>