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

components/Footer.tsx

@@ -0,0 +1,9 @@
+import config from "../deno.json" with { type: "json" };
+
+export default function Footer() {
+  return (
+    <div className="mt-4 border-t-2 pt-4">
+      <a class="text-blue-600 hover:underline" href={config.source}>Kildekode</a>
+    </div>
+  );
+}

components/Header.tsx

@@ -0,0 +1,10 @@
+export default function Header() {
+  return (
+    <div className="text-center">
+      <h1 className="text-4xl lg:text-3xl font-semibold">
+        <a href="/">📻 NRSS</a>
+      </h1>
+      <h2 className="lg:text-xl">NRK-podcast som RSS</h2>
+    </div>
+  );
+}

components/Search.tsx

@@ -10,7 +10,7 @@ export default function Search(props: { defaultValue: string }) {
         id="query"
         defaultValue={props.defaultValue}
       />
-      <button type="submit" className="my-2 bg-gray-100 rounded-md">
+      <button type="submit" className="my-2 bg-gray-100 border-2 border-gray-400 rounded-md">
         Søk
       </button>
     </form>

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 (
-    <div className="border-2 my-2 p-2">
+    <div className="border-2 border-blue-800 p-4 rounded-lg bg-blue-400">
       <div className="mx-auto h-full w-full space-y-2">
-        <h2 className="text-xl">{props.serie.title}</h2>
+        <h3 className="text-xl font-semibold">{props.serie.title}</h3>
         <p className="text-md">{props.serie.description}</p>
         <img src={image.uri} width={image.width} alt="" />
         <code className="font-mono bg-black text-white select-all p-2">{feedUrl.toString()}</code>

deno.json

@@ -1,5 +1,8 @@
 {
   "lock": false,
+  "name": "NRSS",
+  "source": "https://github.com/olaven/NRSS",
+  "author": " Olav Sundfør <olav@sundfoer.com>",
   "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",
+    "$gfm": "https://deno.land/x/gfm@0.6.0/mod.ts",
-    "twind/": "https://esm.sh/twind@0.16.17/",
     "openapi-typescript": "npm:openapi-typescript@6.7.5"
   },
   "compilerOptions": {

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.

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}
     </button>

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)] });

routes/_app.tsx

@@ -6,9 +6,14 @@ export default function App({ Component }: PageProps) {
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+          rel="icon"
+          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📻</text></svg>"
+        />
+
         <title>NRSS</title>
       </head>
-      <body>
+      <body class="bg-slate-50">
         <Component />
       </body>
     </html>

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<HandlerData> = {
@@ -18,7 +22,8 @@ export const handler: Handlers<HandlerData> = {
     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<HandlerData>) {
   return (
     <>
       <Head>
-        <title>NRSS</title>
+        <title>{data.query ? `Søk: ${data.query} - ` : ""}NRSS</title>
-      </Head>
+        <style
-      <div className="p-4 mx-auto max-w-screen-md bg-blue-400">
+          dangerouslySetInnerHTML={{
-        <div className="text-center">
+            __html: `
-          <h1 className="text-2xl lg:text-3xl">NRSS</h1>
+          ${CSS}
-          <h2 className="lg:text-xl">NRK-podcast som RSS</h2>
+          .markdown-body {
-        </div>
+            background-color: rgb(248 250 252);
-        <Search defaultValue={data.query} />
+          }
-        {data.result
+          `,
-          ? (
+          }}
-            <div className="w-full mx-auto my-4">
-              {data.result.map((result) => (
-                <SeriesCard
-                  serie={result}
-                  origin={data.origin}
         />
-              ))}
+      </Head>
-            </div>
+      <div className="p-4 mx-auto max-w-screen-md">
-          )
+        <Header />
-          : null}
+        <Search defaultValue={data.query} />
-        <h2 className="text-3xl">Hva er dette?</h2>
+        <SearchResult result={data.result} origin={data.origin} />
-        <p>
+        <div
-          Hei! Denne løsningen er laget som en reaksjon på at statsfinansierte NRK lukker ned innholdet sitt til sin
+          class="markdown-body"
-          egen app fremfor å bygge oppunder åpne standarder som RSS. Denne siden er laget fort og gæli - den er ustabil
+          dangerouslySetInnerHTML={{ __html: render(data?.rawMarkdown) }}
-          og kommer til å krasje :) Sjekk gjerne ut{" "}
+        />
-          <a
+        <Footer />
-            href="https://github.com/olaven/NRSS/"
-            className="underline"
-          >
-            kildekoden
-          </a>.
-        </p>
-        <h2 className="text-3xl">Hvordan bruker jeg dette?</h2>
-        <p>
-          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{" "}
-          <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>
       </div>
     </>
   );
 }
+
+function SearchResult({ result, origin }: { result: SearchResultList; origin: string }) {
+  if (!result) {
+    return null;
+  }
+  if (result.length === 0) {
+    return <h2 className="text-2xl font-semibold mb-8">Ingen resultater</h2>;
+  }
+  return (
+    <div className="w-full mx-auto my-4 space-y-4">
+      <h2 className="text-2xl font-semibold">Søkeresultat: {result.length} treff</h2>
+      {result.map((result) => (
+        <SeriesCard
+          serie={result}
+          origin={origin}
+        />
+      ))}
+    </div>
+  );
+}

twind.config.ts

@@ -1,5 +1,10 @@
-import { Options } from "$fresh/plugins/twind.ts";
+import { defineConfig, Preset } from "https://esm.sh/@twind/core@1.1.3";
+import presetTailwind from "https://esm.sh/@twind/preset-tailwind@1.1.4";
+import presetAutoprefix from "https://esm.sh/@twind/preset-autoprefix@1.0.7";
 
 export default {
+  ...defineConfig({
+    presets: [presetTailwind() as Preset, presetAutoprefix() as Preset],
+  }),
   selfURL: import.meta.url,
-} as Options;
+};