From e7a0b798cfb7bdce28e5782f76af524eb671f63b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20H=C3=A5rek=20Andreassen?= Date: Tue, 2 Apr 2024 21:14:06 +0200 Subject: [PATCH] style: Style adjustments, headings, search result etc. (#20) --- components/Footer.tsx | 9 ++++ components/Header.tsx | 10 +++++ components/Search.tsx | 2 +- components/SeriesCard.tsx | 4 +- deno.json | 6 ++- docs/what.md | 12 ++++++ islands/CopyButton.tsx | 2 +- main.ts | 2 +- routes/_app.tsx | 7 ++- routes/index.tsx | 90 ++++++++++++++++++++------------------- twind.config.ts | 9 +++- 11 files changed, 99 insertions(+), 54 deletions(-) create mode 100644 components/Footer.tsx create mode 100644 components/Header.tsx create mode 100644 docs/what.md diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 0000000..868f185 --- /dev/null +++ b/components/Footer.tsx @@ -0,0 +1,9 @@ +import config from "../deno.json" with { type: "json" }; + +export default function Footer() { + return ( +
+ Kildekode +
+ ); +} diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 0000000..63af346 --- /dev/null +++ b/components/Header.tsx @@ -0,0 +1,10 @@ +export default function Header() { + return ( +
+

+ 📻 NRSS +

+

NRK-podcast som RSS

+
+ ); +} diff --git a/components/Search.tsx b/components/Search.tsx index 49841fc..e264d49 100644 --- a/components/Search.tsx +++ b/components/Search.tsx @@ -10,7 +10,7 @@ export default function Search(props: { defaultValue: string }) { id="query" defaultValue={props.defaultValue} /> - diff --git a/components/SeriesCard.tsx b/components/SeriesCard.tsx index a6cf1b9..50ed1b9 100644 --- a/components/SeriesCard.tsx +++ b/components/SeriesCard.tsx @@ -5,9 +5,9 @@ export default function SeriesCard(props: { serie: SearchResult; origin: string const feedUrl = new URL(`/api/feeds/${props.serie.seriesId}`, props.origin); const image = props.serie.images[0]; return ( -
+
-

{props.serie.title}

+

{props.serie.title}

{props.serie.description}

{feedUrl.toString()} diff --git a/deno.json b/deno.json index 6044a61..e8e12b5 100644 --- a/deno.json +++ b/deno.json @@ -1,5 +1,8 @@ { "lock": false, + "name": "NRSS", + "source": "https://github.com/olaven/NRSS", + "author": " Olav Sundfør ", "tasks": { "start": "deno run -A --watch=static/,routes/ dev.ts", "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx", @@ -12,8 +15,7 @@ "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4", "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2", "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1", - "twind": "https://esm.sh/twind@0.16.17", - "twind/": "https://esm.sh/twind@0.16.17/", + "$gfm": "https://deno.land/x/gfm@0.6.0/mod.ts", "openapi-typescript": "npm:openapi-typescript@6.7.5" }, "compilerOptions": { diff --git a/docs/what.md b/docs/what.md new file mode 100644 index 0000000..10a85a3 --- /dev/null +++ b/docs/what.md @@ -0,0 +1,12 @@ +## Hva er dette? + +Hei! Denne løsningen er laget som en reaksjon på at statsfinansierte NRK lukker ned innholdet sitt til sin +egen app fremfor å bygge oppunder åpne standarder som RSS. + +Denne siden er laget fort og gæli - den er ustabil og kommer til å krasje :) Sjekk gjerne ut [kildekoden](https://github.com/olaven/NRSS). + +## Hvordan bruker jeg dette? + +Søk på NRK-podcasten du vil høre på. Kopier deretter URL-en under bildet. Lim denne inn i akkurat den +podcastspilleren du måtte foretrekke! Se [her](https://help.omnystudio.com/en/articles/5222518-podcast-apps-that-support-add-rss-feed) +for en oversikt over hvordan det gjøres i populære podcastspillere. diff --git a/islands/CopyButton.tsx b/islands/CopyButton.tsx index 8acca88..759c2ef 100644 --- a/islands/CopyButton.tsx +++ b/islands/CopyButton.tsx @@ -25,7 +25,7 @@ export default function CopyButton({ text, disabled = false, children }: Props) startReset(); }} disabled={!IS_BROWSER || disabled} - class="px-2 py-1 border(gray-100 2) hover:bg-gray-200 mx-auto" + class="px-2 py-1 border(gray-100 2) hover:bg-gray-200 mx-auto bg-blue-200" > {clicked ? "Kopiert!" : children} diff --git a/main.ts b/main.ts index 27962df..e3a52ce 100644 --- a/main.ts +++ b/main.ts @@ -1,7 +1,7 @@ import { start } from "$fresh/server.ts"; import manifest from "./fresh.gen.ts"; -import twindPlugin from "$fresh/plugins/twind.ts"; +import twindPlugin from "$fresh/plugins/twindv1.ts"; import twindConfig from "./twind.config.ts"; await start(manifest, { plugins: [twindPlugin(twindConfig)] }); diff --git a/routes/_app.tsx b/routes/_app.tsx index 324f36b..8c4c566 100644 --- a/routes/_app.tsx +++ b/routes/_app.tsx @@ -6,9 +6,14 @@ export default function App({ Component }: PageProps) { + + NRSS - + diff --git a/routes/index.tsx b/routes/index.tsx index 9213b35..1d04993 100644 --- a/routes/index.tsx +++ b/routes/index.tsx @@ -1,13 +1,17 @@ import { Head } from "$fresh/runtime.ts"; import { Handlers, PageProps } from "$fresh/server.ts"; +import Footer from "../components/Footer.tsx"; +import Header from "../components/Header.tsx"; import Search from "../components/Search.tsx"; import SeriesCard from "../components/SeriesCard.tsx"; import { nrkRadio, SearchResultList } from "../lib/nrk.ts"; +import { CSS, render } from "$gfm"; interface HandlerData { query: string; - result?: SearchResultList; origin: string; + rawMarkdown: string; + result?: SearchResultList; } export const handler: Handlers = { @@ -18,7 +22,8 @@ export const handler: Handlers = { if (query) { result = await nrkRadio.search(query); } - return ctx.render({ query: query || "", result, origin: url.origin }); + const rawMarkdown = await Deno.readTextFile(new URL("../docs/what.md", import.meta.url)); + return ctx.render({ query: query || "", result, origin: url.origin, rawMarkdown }); }, }; @@ -26,51 +31,48 @@ export default function Home({ data }: PageProps) { return ( <> - NRSS + {data.query ? `Søk: ${data.query} - ` : ""}NRSS +