feat: add icons to kmenu

components/RecipeHero.tsx

@@ -1,7 +1,9 @@
-import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
 import { Star } from "@components/Stars.tsx";
-import IconArrowNarrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-narrow-left.tsx";
-import IconEdit from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/edit.tsx";
+import {
+  IconArrowNarrowLeft,
+  IconEdit,
+  IconExternalLink,
+} from "@components/icons.tsx";
 
 export function RecipeHero(
   { data, subline, backlink, editLink }: {
@@ -29,6 +31,7 @@ export function RecipeHero(
           <img
             src={imageUrl}
             alt="Recipe Banner"
+            style={{ objectPosition: "0% 30%" }}
             class="absolute object-cover w-full h-full -z-10"
           />
         )}
@@ -57,7 +60,9 @@ export function RecipeHero(
         class={`relative inset-x-0 py-4 px-8 ${imageUrl ? "py-8" : ""} `}
       >
         <div
-          class={`${imageUrl ? "noisy-gradient" : ""} flex gap-4 items-center ${
+          class={`${
+            imageUrl ? "noisy-gradient" : ""
+          } after:opacity-90 flex gap-4 items-center ${
             imageUrl ? "pt-12" : ""
           }`}
         >

components/Stars.tsx

@@ -1,5 +1,4 @@
-import IconStar from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star.tsx";
-import IconStarFilled from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star-filled.tsx";
+import { IconStar, IconStarFilled } from "@components/icons.tsx";
 
 export const Star = (
   { max = 5, rating = 3 }: { max?: number; rating: number },

components/icons.tsx

@@ -0,0 +1,10 @@
+export { default as IconStar } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star.tsx";
+export { default as IconStarFilled } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/star-filled.tsx";
+export { default as IconExternalLink } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
+export { default as IconArrowNarrowLeft } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-narrow-left.tsx";
+export { default as IconEdit } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/edit.tsx";
+export { default as IconArrowLeft } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
+export { default as IconError404 } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/error-404.tsx";
+export { default as IconSquareRoundedPlus } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/square-rounded-plus.tsx";
+export { default as IconReportSearch } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/report-search.tsx";
+export { default as IconRefresh } from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/refresh.tsx";

islands/KMenu.tsx

@@ -3,7 +3,7 @@ import { useRef } from "preact/hooks";
 import { useEventListener } from "@lib/hooks/useEventListener.ts";
 import { menus } from "@islands/KMenu/commands.ts";
 import { MenuEntry } from "@islands/KMenu/types.ts";
-
+import * as icons from "@components/icons.tsx";
 const KMenuEntry = (
   { entry, activeIndex, index }: {
     entry: MenuEntry;
@@ -14,12 +14,13 @@ const KMenuEntry = (
   return (
     <div
       onClick={() => activeIndex.value = index}
-      class={`px-4 py-2 ${
+      class={`px-4 py-2 flex items-center gap-1 ${
         activeIndex.value === index
           ? "bg-gray-100 text-gray-900"
           : "text-gray-400"
       }`}
     >
+      {entry?.icon && icons[entry.icon]({ class: "w-4 h-4 mr-1" })}
       {entry.title}
     </div>
   );
@@ -38,7 +39,7 @@ export const KMenu = (
   const input = useRef<HTMLInputElement>(null);
   const commandInput = useSignal("");
 
-  const visible = useSignal(false);
+  const visible = useSignal(true);
   if (visible.value === false) {
     setTimeout(() => {
       activeMenuType.value = "main";
@@ -126,11 +127,10 @@ export const KMenu = (
       class={`opacity-${visible.value ? 100 : 0} pointer-events-${
         visible.value ? "auto" : "none"
       } transition grid place-items-center w-full h-full fixed top-0 left-0 z-50`}
-      style={{ background: "#1f1f1f88" }}
+      style={{ background: "#141217ee" }}
     >
       <div
-        class={`relative w-1/2 max-h-64 max-w-[400px] rounded-2xl shadow-2xl nnoisy-gradient overflow-hidden after:opacity-10`}
-        style={{ background: "#1f1f1f" }}
+        class={`relative w-1/2 max-h-64 max-w-[400px] rounded-2xl shadow-2xl nnoisy-gradient overflow-hidden after:opacity-10 bg-gray-700`}
       >
         <div
           class="grid h-12 text-gray-400 border-b border-gray-500 "
@@ -149,8 +149,9 @@ export const KMenu = (
                   onInput={() => {
                     commandInput.value = input.current?.value || "";
                   }}
+                  style={{ outline: "none !important" }}
                   placeholder="Command"
-                  class="bg-transparent color pl-4 border-0"
+                  class="bg-transparent color pl-4 outline outline outline-2  outline-offset-2"
                 />
               </>
             )}

islands/KMenu/commands.ts

@@ -18,6 +18,7 @@ export const menus: Record<string, Menu> = {
       {
         title: "Create new article",
         meta: "",
+        icon: "IconSquareRoundedPlus",
         cb: (state) => {
           state.menus["input_link"] = {
             title: "Link:",
@@ -48,6 +49,7 @@ export const menus: Record<string, Menu> = {
       },
       {
         title: "Clear Cache",
+        icon: "IconRefresh",
         cb: async (state) => {
           state.activeState.value = "loading";
           await fetch("/api/cache", {
@@ -60,6 +62,7 @@ export const menus: Record<string, Menu> = {
       {
         title: "Add Movie infos",
         meta: "",
+        icon: "IconReportSearch",
         cb: async (state, context) => {
           state.activeState.value = "loading";
           const movie = context as Movie;

islands/KMenu/types.ts

@@ -1,4 +1,7 @@
 import { Signal } from "@preact/signals";
+import * as icons from "@components/icons.tsx";
+
+type IconKey = keyof typeof icons;
 
 export type MenuState = {
   activeMenu: Signal<string>;
@@ -10,10 +13,10 @@ export type MenuState = {
 
 export type MenuEntry = {
   cb: (state: MenuState, context: unknown) => void;
+  icon?: IconKey;
   meta?: string;
   visible?: boolean | ((context: unknown) => boolean);
   title: string;
-  icon?: string;
 };
 
 export type Menu = {

routes/api/images/index.ts

@@ -158,7 +158,7 @@ const GET = async (
     processImage(imageUrl, params)
   );
 
-  cache.setImage(resizedImage.slice(), {
+  cache.setImage(resizedImage, {
     url: imageUrl,
     width: params.width,
     height: params.height,
@@ -166,8 +166,9 @@ const GET = async (
   });
 
   console.log("[api/image] not-cached: " + imageUrl);
+  console.log({ imageUrl, resizedImage });
 
-  return new Response(resizedImage, {
+  return new Response(new Uint8Array(resizedImage), {
     headers: {
       "Content-Type": mediaType,
     },

routes/articles/index.tsx

@@ -1,10 +1,10 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
-import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
 import { Article, getAllArticles } from "@lib/resource/articles.ts";
 import { Card } from "@components/Card.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { Grid } from "@components/Grid.tsx";
+import { IconArrowLeft } from "@components/icons.tsx";
 
 export const handler: Handlers<Article[] | null> = {
   async GET(_, ctx) {

routes/movies/index.tsx

@@ -1,9 +1,10 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { MainLayout } from "@components/layouts/main.tsx";
-import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
 import { getAllMovies, Movie } from "@lib/resource/movies.ts";
 import { MovieCard } from "@components/MovieCard.tsx";
 import { Grid } from "@components/Grid.tsx";
+import { IconArrowLeft } from "@components/icons.tsx";
+import { KMenu } from "@islands/KMenu.tsx";
 
 export const handler: Handlers<Movie[] | null> = {
   async GET(_, ctx) {
@@ -15,6 +16,7 @@ export const handler: Handlers<Movie[] | null> = {
 export default function Greet(props: PageProps<Movie[] | null>) {
   return (
     <MainLayout url={props.url}>
+      <KMenu type="main" context={false} />
       <header class="flex gap-4 items-center mb-5 md:hidden">
         <a
           class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"

routes/recipes/index.tsx

@@ -2,8 +2,8 @@ import { Handlers, PageProps } from "$fresh/server.ts";
 import { RecipeCard } from "@components/RecipeCard.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { getAllRecipes, Recipe } from "@lib/resource/recipes.ts";
-import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
 import { Grid } from "@components/Grid.tsx";
+import { IconArrowLeft } from "@components/icons.tsx";
 
 export const handler: Handlers<Recipe[] | null> = {
   async GET(_, ctx) {

static/global.css

@@ -14,6 +14,7 @@ pre {
   position: absolute;
   height: 100%;
   width: 100%;
+  filter: saturate(0) brightness(2);
   background: url(/grainy-gradient.png);
   background-size: contain;
 }

static/grainy-gradient(1).png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet