Add list of guides

src/pages/channels/[country]/[name]/+page.server.js

@@ -8,6 +8,7 @@ import categories from '~/data/categories.json'
 import blocklist from '~/data/blocklist.json'
 import languages from '~/data/languages.json'
 import streams from '~/data/streams.json'
+import guides from '~/data/guides.json'
 import isURL from 'validator/lib/isURL'
 
 let _streams = streams.filter(stream => isURL(stream.url))
@@ -19,6 +20,7 @@ data.subdivisions = _.keyBy(subdivisions, 'code')
 data.languages = _.keyBy(languages, 'code')
 data.categories = _.keyBy(categories, 'id')
 data.streams = _.groupBy(_streams, 'channel')
+data.guides = _.groupBy(guides, 'channel')
 data.blocklist = _.groupBy(blocklist, 'channel')
 data.channels = _.keyBy(channels, channel => channel.id.toLowerCase())
 data.nameIndex = _.groupBy(channels, channel => channel.name.toLowerCase())

src/pages/channels/[country]/[name]/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+  import GuideItem from '~/components/GuideItem.svelte'
   import StreamItem from '~/components/StreamItem.svelte'
   import HTMLPreview from '~/components/HTMLPreview.svelte'
   import EditButton from '~/components/EditButton.svelte'
@@ -9,6 +10,7 @@
   let isLoading = false
   let channel = data.channel
   let streams = channel ? channel._streams : []
+  let guides = channel ? channel._guides : []
 
   const structuredData = {
     '@context': 'https://schema.org/',
@@ -101,5 +103,23 @@
         </div>
       </div>
     {/if}
+    {#if guides.length}
+      <div class="border rounded-md border-gray-200 dark:border-gray-700 dark:bg-gray-800 bg-white">
+        <div
+          class="flex justify-between items-center py-3 pl-5 pr-4 rounded-t border-b dark:border-gray-700"
+        >
+          <div class="w-1/3 overflow-hidden">
+            <h2 class="text-l font-medium text-gray-900 dark:text-white">Guides</h2>
+          </div>
+        </div>
+        <div class="overflow-y-auto overflow-x-hidden w-full p-6">
+          <div class="dark:border-gray-700 rounded-md border border-gray-200">
+            {#each guides as guide, index}
+              <GuideItem {guide} {index} />
+            {/each}
+          </div>
+        </div>
+      </div>
+    {/if}
   </section>
 </main>