style: Style adjustments, headings, search result etc. #20

Merged
timharek merged 14 commits from style-layout-changes into main 2024-04-02 19:14:06 +00:00
3 changed files with 24 additions and 27 deletions
Showing only changes of commit 39a54505c8 - Show all commits

View File

@ -15,7 +15,8 @@
"@preact/signals": "https://esm.sh/*@preact/signals@1.2.2", "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
"@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1", "@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",
"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"
}, },
"compilerOptions": { "compilerOptions": {
"jsx": "react-jsx", "jsx": "react-jsx",

12
docs/what.md Normal file
View File

@ -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.

View File

@ -5,11 +5,13 @@ import Header from "../components/Header.tsx";
import Search from "../components/Search.tsx"; import Search from "../components/Search.tsx";
import SeriesCard from "../components/SeriesCard.tsx"; import SeriesCard from "../components/SeriesCard.tsx";
import { nrkRadio, SearchResultList } from "../lib/nrk.ts"; import { nrkRadio, SearchResultList } from "../lib/nrk.ts";
import { CSS, render } from "$gfm";
interface HandlerData { interface HandlerData {
query: string; query: string;
result?: SearchResultList;
origin: string; origin: string;
rawMarkdown: string;
result?: SearchResultList;
} }
export const handler: Handlers<HandlerData> = { export const handler: Handlers<HandlerData> = {
@ -20,7 +22,8 @@ export const handler: Handlers<HandlerData> = {
if (query) { if (query) {
result = await nrkRadio.search(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 });
}, },
}; };
@ -29,6 +32,7 @@ export default function Home({ data }: PageProps<HandlerData>) {
<> <>
<Head> <Head>
<title>{data.query ? `Søk: ${data.query} - ` : ""}NRSS</title> <title>{data.query ? `Søk: ${data.query} - ` : ""}NRSS</title>
<style dangerouslySetInnerHTML={{ __html: CSS }} />
</Head> </Head>
<div className="p-4 mx-auto max-w-screen-md"> <div className="p-4 mx-auto max-w-screen-md">
<Header /> <Header />
@ -45,30 +49,10 @@ export default function Home({ data }: PageProps<HandlerData>) {
</div> </div>
) )
: null} : null}
<h2 className="text-3xl">Hva er dette?</h2> <div
<p> class="markdown-body"
Hei! Denne løsningen er laget som en reaksjon at statsfinansierte NRK lukker ned innholdet sitt til sin dangerouslySetInnerHTML={{ __html: render(data?.rawMarkdown) }}
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{" "}
<a
href="https://github.com/olaven/NRSS/"
className="underline"
>
kildekoden
</a>.
</p>
<h2 className="text-3xl">Hvordan bruker jeg dette?</h2>
<p>
Søk NRK-podcasten du vil høre . Kopier deretter URL-en under bildet. Lim denne inn i akkurat den
podcastspilleren du måtte foretrekke! Se{" "}
<a
className="underline"
href="https://help.omnystudio.com/en/articles/5222518-podcast-apps-that-support-add-rss-feed"
>
her
</a>{" "}
for en oversikt over hvordan det gjøres i populære podcastspillere.
</p>
<Footer /> <Footer />
</div> </div>
</> </>