From 8ac789cdece3a56ec37f290cdfec7c5cda024455 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ewilan=20Rivi=C3=A8re?= <ewilan.riviere@gmail.com>
Date: Fri, 4 Oct 2024 10:03:58 +0200
Subject: [PATCH] Refactor CSS and add JSON rendering link in header component

---
 src/components/feed.css  | 17 ++++++++++++++---
 src/components/header.ts | 12 ++++++++++++
 src/models/Podcast.ts    |  5 ++++-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/feed.css b/src/components/feed.css
index afba5d7..a04e1be 100644
--- a/src/components/feed.css
+++ b/src/components/feed.css
@@ -33,7 +33,6 @@ header {
 
 .rss {
   position: fixed;
-  z-index: 10;
   top: 0;
   left: 0;
   padding: 0.3rem;
@@ -42,11 +41,23 @@ header {
   border-bottom-right-radius: 0.375rem;
 }
 
-.rss:hover {
+.json {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: 0.3rem;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 20;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.rss:hover,
+.json:hover {
   background-color: rgba(0, 0, 0, 0.75);
 }
 
-.rss svg {
+.rss svg,
+.json svg {
   fill: white;
   height: 1.5rem;
   width: 1.5rem;
diff --git a/src/components/header.ts b/src/components/header.ts
index 56405b2..4d32b64 100644
--- a/src/components/header.ts
+++ b/src/components/header.ts
@@ -31,6 +31,18 @@ export default {
           ]),
         ]),
       ]),
+      h('div', { class: 'json' }, [
+        h('a', { href: props.podcast?.jsonFormatUrl, target: '_blank', rel: 'noopener noreferrer', title: 'To JSON' }, [
+          h('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24' }, [
+            h('g', {}, [
+              h('path', {
+                fill: 'white',
+                d: 'M5 3h2v2H5v5a2 2 0 0 1-2 2a2 2 0 0 1 2 2v5h2v2H5c-1.07-.27-2-.9-2-2v-4a2 2 0 0 0-2-2H0v-2h1a2 2 0 0 0 2-2V5a2 2 0 0 1 2-2m14 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2a2 2 0 0 1-2-2V5h-2V3zm-7 12a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m-4 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1a1 1 0 0 1-1 1a1 1 0 0 1-1-1a1 1 0 0 1 1-1',
+              }),
+            ]),
+          ]),
+        ]),
+      ]),
       h('div', { class: 'header-block' }, [
         h('div', { class: 'header-block__img' }, [
           h('img', { src: props.podcast?.image, alt: props.podcast?.title, loading: 'lazy' }),
diff --git a/src/models/Podcast.ts b/src/models/Podcast.ts
index 857e4cd..f13e5eb 100644
--- a/src/models/Podcast.ts
+++ b/src/models/Podcast.ts
@@ -1,4 +1,5 @@
 import type { Channel } from '@/types'
+import { format } from 'node:path'
 import { renderDom } from '@/components'
 import { Episode } from '@/models/Episode'
 import { route } from '@/routes/router'
@@ -8,6 +9,7 @@ export class Podcast {
   protected constructor(
     public feedUrl: string,
     public xmlRenderUrl: string,
+    public jsonFormatUrl: string,
     public title?: string,
     public description?: string,
     public image?: string,
@@ -36,7 +38,8 @@ export class Podcast {
   public static make(feedUrl: string, channel: Channel, lang: string = 'en'): Podcast {
     // http://localhost:3000/api/xml?url=http://zqsd.fr/zqsd.xml
     const xmlRenderUrl = route('/api/xml', { query: { url: feedUrl } })
-    const self = new this(feedUrl, xmlRenderUrl)
+    const jsonFormatUrl = route('/api/render', { query: { url: feedUrl, format: 'json' } })
+    const self = new this(feedUrl, xmlRenderUrl, jsonFormatUrl)
 
     self.title = channel.title