🔀 Merge pull request #6 from wouterdebruijn/fresh-1.6

⬆ Fresh 1.6 update

.gitignore

@@ -1 +1,6 @@
-.env
+.env
+# Fresh build directory
+_fresh/
+
+# NPM modules :'(
+node_modules

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "deno.enable": true,
   "deno.lint": true,
-  "editor.defaultFormatter": "denoland.vscode-deno"
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "deno.unstable": true
 }

Dockerfile

@@ -14,5 +14,7 @@ WORKDIR /app
 ADD . .
 # Compile the main app so that it doesn't need to be compiled each startup/entry.
 RUN deno cache --lock-write main.ts
+RUN deno task build
+
 
 CMD ["run", "--allow-read", "--allow-env", "--allow-net", "main.ts"]

components/MinidenticonAvatar.tsx

@@ -0,0 +1,16 @@
+import { minidenticon } from "minidenticons";
+
+export function Minidenticon(
+  { name, ...props }: { name: string } & JSX.HTMLAttributes<HTMLImageElement>,
+) {
+  const svgURI = "data:image/svg+xml;utf8," +
+    encodeURIComponent(minidenticon(name));
+
+  return (
+    <img
+      src={svgURI}
+      alt="Profile Picture"
+      {...props}
+    />
+  );
+}

deno.json

@@ -1,11 +1,23 @@
 {
   "tasks": {
-    "start": "deno run -A --watch=static/,routes/ dev.ts"
+    "start": "deno run -A --watch=static/,routes/ dev.ts",
+    "build": "deno run -A dev.ts build",
+    "preview": "deno run -A main.ts"
   },
-  "importMap": "./import_map.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact"
+  "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" },
+  "lock": false,
+  "imports": {
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "preact": "https://esm.sh/[email protected]",
+    "preact/": "https://esm.sh/[email protected]/",
+    "preact-render-to-string": "https://esm.sh/*[email protected]",
+    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
+    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
+    "tailwindcss": "npm:[email protected]",
+    "tailwindcss/": "npm:/[email protected]/",
+    "tailwindcss/plugin": "npm:/[email protected]/plugin.js",
+    "minidenticons": "npm:minidenticons"
   },
-  "lock": false
+  "lint": { "rules": { "tags": ["fresh", "recommended"] } },
+  "exclude": ["**/_fresh/*"]
 }

dev.ts

@@ -1,5 +1,4 @@
-#!/usr/bin/env -S deno run -A --watch=static/,routes/
-
 import dev from "$fresh/dev.ts";
+import config from "./fresh.config.ts";
 
-await dev(import.meta.url, "./main.ts");
+await dev(import.meta.url, "./main.ts", config);

fresh.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "$fresh/server.ts";
+import tailwind from "$fresh/plugins/tailwind.ts";
+
+export default defineConfig({
+  plugins: [tailwind()],
+});

fresh.gen.ts

@@ -1,19 +1,21 @@
-// DO NOT EDIT. This file is generated by fresh.
+// DO NOT EDIT. This file is generated by Fresh.
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import config from "./deno.json" assert { type: "json" };
-import * as $0 from "./routes/[userid]/index.tsx";
-import * as $1 from "./routes/index.tsx";
+import * as $_userid_index from "./routes/[userid]/index.tsx";
+import * as $_app from "./routes/_app.tsx";
+import * as $index from "./routes/index.tsx";
+
+import { type Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {
-    "./routes/[userid]/index.tsx": $0,
-    "./routes/index.tsx": $1,
+    "./routes/[userid]/index.tsx": $_userid_index,
+    "./routes/_app.tsx": $_app,
+    "./routes/index.tsx": $index,
   },
   islands: {},
   baseUrl: import.meta.url,
-  config,
-};
+} satisfies Manifest;
 
 export default manifest;

main.ts

@@ -1,15 +1,5 @@
-/// <reference no-default-lib="true" />
-/// <reference lib="dom" />
-/// <reference lib="dom.iterable" />
-/// <reference lib="dom.asynciterable" />
-/// <reference lib="deno.ns" />
-
-import "https://deno.land/[email protected]/dotenv/load.ts";
-
 import { start } from "$fresh/server.ts";
 import manifest from "./fresh.gen.ts";
+import config from "./fresh.config.ts";
 
-import twindPlugin from "$fresh/plugins/twind.ts";
-import twindConfig from "./twind.config.ts";
-
-await start(manifest, { plugins: [twindPlugin(twindConfig)] });
+await start(manifest, config);

routes/_app.tsx

@@ -0,0 +1,17 @@
+import { AppProps } from "$fresh/server.ts";
+
+export default function App({ Component }: AppProps) {
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="/styles.css" />
+        <title>emby-recap</title>
+      </head>
+      <body>
+        <Component />
+      </body>
+    </html>
+  );
+}

routes/index.tsx

@@ -1,6 +1,7 @@
 import { Head } from "$fresh/runtime.ts";
 
 import { Handlers, PageProps } from "$fresh/server.ts";
+import { Minidenticon } from "../components/MinidenticonAvatar.tsx";
 
 import {
   EmbyUserList,
@@ -52,12 +53,15 @@ export default function Home(
             <a href={`/${user.id}?name=${user.name}&self=1`}>
               <div class="flex flex-col items-center justify-center p-4 bg-white bg-opacity-30 rounded">
                 <div class="h-24 w-24 rounded-full overflow-hidden">
-                  <img
-                    class="w-full h-full object-cover"
-                    src={data.pictures[index] ||
-                      "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"}
-                    alt="Profile Picture"
-                  />
+                  {data.pictures[index]
+                    ? (
+                      <img
+                        class="w-full h-full object-cover"
+                        src={data.pictures[index] ?? ``}
+                        alt="Profile Picture"
+                      />
+                    )
+                    : <Minidenticon name={user.name} class="bg-gray-300" />}
                 </div>
                 <span class="mt-2 text-lg font-thin">{user.name}</span>
               </div>

static/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.ts

@@ -0,0 +1,7 @@
+import { type Config } from "tailwindcss";
+
+export default {
+  content: [
+    "{routes,islands,components}/**/*.{ts,tsx}",
+  ],
+} satisfies Config;