noot

.gitignore

@@ -0,0 +1,11 @@
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# Fresh build directory
+_fresh/
+# npm dependencies
+node_modules/

README.md

@@ -0,0 +1,16 @@
+# Fresh project
+
+Your new Fresh project is ready to go. You can follow the Fresh "Getting
+Started" guide here: https://fresh.deno.dev/docs/getting-started
+
+### Usage
+
+Make sure to install Deno: https://deno.land/manual/getting_started/installation
+
+Then start the project:
+
+```
+deno task start
+```
+
+This will watch the project directory and restart as necessary.

app.config.ts

@@ -0,0 +1,15 @@
+import { container } from "#/lib/container.ts";
+import { ConfigLoader } from "#/lib/config/index.ts";
+const configLoader = await ConfigLoader.New(
+  "doorgan.yml",
+  "doorgan.yaml",
+  Deno.env.get("HOME")+"/.config/doorgan.yml",
+  Deno.env.get("HOME")+"/.config/doorgan.yaml"
+)
+container.bind({
+  provide: ConfigLoader,
+  useFactory: () => {
+    return configLoader;
+  }
+})
+

components/Button.tsx

@@ -0,0 +1,12 @@
+import { JSX } from "preact";
+import { IS_BROWSER } from "$fresh/runtime.ts";
+
+export function Button(props: JSX.HTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      disabled={!IS_BROWSER || props.disabled}
+      class="px-2 py-1 border-gray-500 border-2 rounded bg-white hover:bg-gray-200 transition-colors"
+    />
+  );
+}

deno.json

@@ -0,0 +1,45 @@
+{
+  "lock": false,
+  "tasks": {
+    "check": "deno fmt --check && deno lint && deno check **/*.ts && deno check **/*.tsx",
+    "cli": "echo \"import '\\$fresh/src/dev/cli.ts'\" | deno run --unstable -A -",
+    "manifest": "deno task cli manifest $(pwd)",
+    "start": "deno run -A --watch=static/,routes/,lib/ dev.ts",
+    "build": "deno run -A dev.ts build",
+    "generate": "deno run -A generate.ts ",
+    "preview": "deno run -A main.ts",
+    "update": "deno run -A -r https://fresh.deno.dev/update ."
+  },
+  "lint": {
+    "rules": {
+      "tags": [
+        "fresh",
+        "recommended"
+      ]
+    }
+  },
+  "exclude": [
+    "**/_fresh/*"
+  ],
+  "imports": {
+    "#/": "./",
+    "$fresh/": "https://deno.land/x/fresh@1.7.3/",
+    "$std/": "https://deno.land/std@0.216.0/",
+    "@gnome/exec": "jsr:@gnome/exec@^0.6.0",
+    "@needle-di/core": "jsr:@needle-di/core@^0.8.4",
+    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
+    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
+    "@std/yaml": "jsr:@std/yaml@^1.0.5",
+    "preact": "https://esm.sh/preact@10.22.0",
+    "preact/": "https://esm.sh/preact@10.22.0/",
+    "tailwindcss": "npm:tailwindcss@3.4.1",
+    "tailwindcss/": "npm:/tailwindcss@3.4.1/",
+    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
+    "zod": "npm:zod@^3.23.8"
+  },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "nodeModulesDir": "auto"
+}

dev.ts

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

doorgan.yml

@@ -0,0 +1,26 @@
+title: homepage
+pages:
+  - categories:
+    - name: self
+      items:
+        - name: agh
+          href: http://jelly:3000
+          iframe: true
+        - name: acf
+          href: http://jelly/cgi-bin/acf/acf-util/welcome/read
+          iframe: true
+    - name: put
+      items:
+        - name: grafana
+          href: https://grafana.put.gay
+    - name: gfx
+      items:
+        - name: cafe
+          href: https://gfx.cafe
+        - name: wtf
+          href: https://grafana.gfx.wtf
+          iframe: true
+    - name: etc
+      items:
+        - name: netdata
+          href: https://app.netdata.cloud/spaces/ash-space-group/rooms/all-nodes/home

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

@@ -0,0 +1,27 @@
+// 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 * as $_page_ts_index from "./routes/[page].ts/index.tsx";
+import * as $_404 from "./routes/_404.tsx";
+import * as $_app from "./routes/_app.tsx";
+import * as $index from "./routes/index.tsx";
+import * as $Counter from "./islands/Counter.tsx";
+import * as $MagicPage from "./islands/MagicPage.tsx";
+import type { Manifest } from "$fresh/server.ts";
+
+const manifest = {
+  routes: {
+    "./routes/[page].ts/index.tsx": $_page_ts_index,
+    "./routes/_404.tsx": $_404,
+    "./routes/_app.tsx": $_app,
+    "./routes/index.tsx": $index,
+  },
+  islands: {
+    "./islands/Counter.tsx": $Counter,
+    "./islands/MagicPage.tsx": $MagicPage,
+  },
+  baseUrl: import.meta.url,
+} satisfies Manifest;
+
+export default manifest;

generate.ts

@@ -0,0 +1,7 @@
+import { output } from "@gnome/exec"
+
+const printLines = (resp: any) => console.log(resp.lines().join("\n"))
+
+await output(`deno`,
+    ["run", "-A", "npm:ts-to-zod", "lib/config/types.ts", "lib/config/types.zod.ts"]
+).then(printLines)

islands/Counter.tsx

@@ -0,0 +1,16 @@
+import type { Signal } from "@preact/signals";
+import { Button } from "../components/Button.tsx";
+
+interface CounterProps {
+  count: Signal<number>;
+}
+
+export default function Counter(props: CounterProps) {
+  return (
+    <div class="flex gap-8 py-6">
+      <Button onClick={() => props.count.value -= 1}>-1</Button>
+      <p class="text-3xl tabular-nums">{props.count}</p>
+      <Button onClick={() => props.count.value += 1}>+1</Button>
+    </div>
+  );
+}

islands/MagicPage.tsx

@@ -0,0 +1,64 @@
+import type { Config, Item, Page } from "#/lib/config/types.ts";
+import { useState } from "preact/hooks";
+
+
+interface MagicPageProps {
+  config: Config;
+  page: Page;
+}
+
+
+export default function MagicPage(props: MagicPageProps) {
+  const {page, config} = props
+  const [iframeUrl, setIframeUrl]= useState<string | undefined>(undefined)
+  return (
+    <div class="flex flex-row h-full">
+      <div class="mx-auto flex flex-col justify-top">
+        {
+          page?.categories?.map((category, idx) => {
+            return (
+              <div class="mb-8" key={category.name || `category-idx-${idx}`}>
+                <h2 class="text-2xl font-bold">{category.name}</h2>
+                <div class="flex flex-row">
+                  {
+                    category.items?.map((item,idx) => {
+                      return (
+                        <div class="bg-white pr-2 py-2" key={item.name || `item-idx-${idx}`}>
+                          <div
+                            class={`hover:cursor-pointer`}
+                            onMouseDown={(e)=>{
+                              console.log("click event", e)
+                              if(e.buttons === 4) {
+                                globalThis.window.open(item.href, "_blank")
+                              } else if(e.buttons === 1) {
+                                if(item.iframe) {
+                                  setIframeUrl(item.href)
+                                } else{
+                                  globalThis.window.open(item.href, "_blank")
+                                }
+                              }
+                            }}>
+                            <h3
+                              class={`text-md text-cyan-800 hover:underline`}>{item.iframe && "!"}{item.name}</h3>
+                          </div>
+                        </div>
+                      );
+                    })
+                  }
+                </div>
+              </div>
+            );
+          })
+        }
+      </div>
+      <div class="flex grow">
+        {iframeUrl &&
+        <iframe
+          class="w-full h-full"
+          src={iframeUrl}
+        ></iframe>
+        }
+      </div>
+    </div>
+  );
+}

lib/config/index.ts

@@ -0,0 +1,57 @@
+import type { Config } from "#/lib/config/types.ts";
+import { configSchema } from "#/lib/config/types.zod.ts";
+import { parse } from "jsr:@std/yaml";
+import { debounce } from "jsr:@std/async/debounce";
+
+export * from "#/lib/config/types.ts"
+
+export class ConfigLoader {
+  private currentConfig: Config
+  private path: string
+
+  constructor(firstConfig: Config, path:string) {
+    this.path = path
+    this.currentConfig = firstConfig
+    const run = debounce(async (e: Deno.FsEvent)=>{
+      console.log("config file hmr", e);
+      const fileText = await Deno.readTextFile(path)
+      const parsed = parse(fileText)
+      return [await configSchema.parseAsync(parsed), path]
+    }, 250)
+    const watch = async ()=>{
+      const watcher = Deno.watchFs(path)
+      for await (const event of watcher) {
+        if(event.kind === "remove") {
+          return
+        }
+        run(event)
+      }
+    }
+    watch()
+  }
+
+  static async New(...paths: string[]) {
+    const [config, configPath] = await this.firstLoad(paths)
+    return new ConfigLoader(config, configPath)
+
+  }
+  config(): Config {
+    return this.currentConfig
+  }
+  static async firstLoad(paths: string[]): Promise<[Config, string]>{
+    const errs = []
+    for (const path of paths) {
+      let fileText:string
+      try {
+        fileText = await Deno.readTextFile(path)
+      } catch (e) {
+        errs.push(e)
+        console.error(`Failed to load config from ${path}: ${e}`)
+        continue
+      }
+      const parsed = parse(fileText)
+      return [await configSchema.parseAsync(parsed), path]
+    }
+    throw new AggregateError(errs)
+  }
+}

lib/config/types.ts

@@ -0,0 +1,23 @@
+export interface Config {
+  title?: string;
+  favicon?: string;
+  faviconType?: string;
+  pages?: Page[];
+}
+
+export interface Page {
+  name?: string;
+  title?: string;
+  categories?: Category[];
+}
+
+export interface Category {
+  name?: string;
+  items?: Item[];
+}
+
+export interface Item {
+  name: string;
+  href: string;
+  iframe?: boolean;
+}

lib/config/types.zod.ts

@@ -0,0 +1,26 @@
+// Generated by ts-to-zod
+import { z } from "zod";
+
+export const itemSchema = z.object({
+  name: z.string(),
+  href: z.string(),
+  iframe: z.boolean().optional(),
+});
+
+export const categorySchema = z.object({
+  name: z.string().optional(),
+  items: z.array(itemSchema).optional(),
+});
+
+export const pageSchema = z.object({
+  name: z.string().optional(),
+  title: z.string().optional(),
+  categories: z.array(categorySchema).optional(),
+});
+
+export const configSchema = z.object({
+  title: z.string().optional(),
+  favicon: z.string().optional(),
+  faviconType: z.string().optional(),
+  pages: z.array(pageSchema).optional(),
+});

lib/container.ts

@@ -0,0 +1,3 @@
+import { Container } from "@needle-di/core";
+
+export const container = new Container();

main.ts

@@ -0,0 +1,14 @@
+/// <reference no-default-lib="true" />
+/// <reference lib="dom" />
+/// <reference lib="dom.iterable" />
+/// <reference lib="dom.asynciterable" />
+/// <reference lib="deno.ns" />
+
+import "$std/dotenv/load.ts";
+import "#/app.config.ts";
+
+import { start } from "$fresh/server.ts";
+import manifest from "#/fresh.gen.ts";
+import config from "#/fresh.config.ts";
+
+await start(manifest, config);

routes/[page].ts/index.tsx

@@ -0,0 +1,18 @@
+import {useContext} from "preact/hooks";
+import { ConfigContext } from "#/routes/_app.tsx";
+import type { PageProps } from "$fresh/server.ts";
+
+
+export default function SubPage(props: PageProps) {
+  const config = useContext(ConfigContext);
+  const page = config.pages?.find((page) => page.title === props.params.page);
+  if(!page) {
+    return <div>page not found</div>
+  }
+  return (
+    <div class="px-4 py-8 mx-auto">
+      <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+      </div>
+    </div>
+  );
+}

routes/_404.tsx

@@ -0,0 +1,27 @@
+import { Head } from "$fresh/runtime.ts";
+
+export default function Error404() {
+  return (
+    <>
+      <Head>
+        <title>404 - Page not found</title>
+      </Head>
+      <div class="px-4 py-8 mx-auto bg-[#86efac]">
+        <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">
+          <img
+            class="my-6"
+            src="/logo.svg"
+            width="128"
+            height="128"
+            alt="the Fresh logo: a sliced lemon dripping with juice"
+          />
+          <h1 class="text-4xl font-bold">404 - Page not found</h1>
+          <p class="my-4">
+            The page you were looking for doesn't exist.
+          </p>
+          <a href="/" class="underline">Go back home</a>
+        </div>
+      </div>
+    </>
+  );
+}

routes/_app.tsx

@@ -0,0 +1,34 @@
+import { type PageProps } from "$fresh/server.ts";
+import { Partial } from "$fresh/runtime.ts";
+import { container } from "#/lib/container.ts";
+import { ConfigLoader } from "#/lib/config/index.ts";
+import { createContext } from "preact"
+import type { Config } from "#/lib/config/types.ts";
+const configLoader = container.get(ConfigLoader);
+const config = configLoader.config()
+export const ConfigContext = createContext<Config>(config)
+
+
+export default function App({ Component }: PageProps) {
+  const config = configLoader.config()
+  return (
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{config.title || "new tab"}</title>
+        <link rel="stylesheet" href="/styles.css" />
+        {
+          config.favicon && <link rel="icon" href={config.favicon} type={config.faviconType} />
+          }
+      </head>
+      <ConfigContext.Provider value={config}>
+        <body f-client-nav class="h-screen w-screen">
+          <Partial name="body">
+            <Component />
+          </Partial>
+        </body>
+      </ConfigContext.Provider>
+    </html>
+  );
+}

routes/index.tsx

@@ -0,0 +1,17 @@
+import { container } from "#/lib/container.ts";
+import { ConfigLoader } from "#/lib/config/index.ts";
+import MagicPage from "#/islands/MagicPage.tsx";
+
+
+
+
+export default function HomePage() {
+  const configLoader = container.get(ConfigLoader);
+  const config = configLoader.config()
+  let page = config.pages?.find((page) => page.name === undefined || page.name === "index");
+  if(page === undefined) {
+    page = {
+    }
+  }
+  return <MagicPage config={config} page={page} />;
+}

static/logo.svg

@@ -0,0 +1,6 @@
+<svg width="40" height="40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M34.092 8.845C38.929 20.652 34.092 27 30 30.5c1 3.5-2.986 4.222-4.5 2.5-4.457 1.537-13.512 1.487-20-5C2 24.5 4.73 16.714 14 11.5c8-4.5 16-7 20.092-2.655Z" fill="#FFDB1E"/>
+  <path d="M14 11.5c6.848-4.497 15.025-6.38 18.368-3.47C37.5 12.5 21.5 22.612 15.5 25c-6.5 2.587-3 8.5-6.5 8.5-3 0-2.5-4-5.183-7.75C2.232 23.535 6.16 16.648 14 11.5Z" fill="#fff" stroke="#FFDB1E"/>
+  <path d="M28.535 8.772c4.645 1.25-.365 5.695-4.303 8.536-3.732 2.692-6.606 4.21-7.923 4.83-.366.173-1.617-2.252-1.617-1 0 .417-.7 2.238-.934 2.326-1.365.512-4.223 1.29-5.835 1.29-3.491 0-1.923-4.754 3.014-9.122.892-.789 1.478-.645 2.283-.645-.537-.773-.534-.917.403-1.546C17.79 10.64 23 8.77 25.212 8.42c.366.014.82.35.82.629.41-.14 2.095-.388 2.503-.278Z" fill="#FFE600"/>
+  <path d="M14.297 16.49c.985-.747 1.644-1.01 2.099-2.526.566.121.841-.08 1.29-.701.324.466 1.657.608 2.453.701-.715.451-1.057.852-1.452 2.106-1.464-.611-3.167-.302-4.39.42Z" fill="#fff"/>
+</svg>

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,js,jsx}",
+  ],
+} satisfies Config;