lightnet 2.17.0 → 2.17.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # lightnet
 
+## 2.17.2
+
+### Patch Changes
+
+- [#224](https://github.com/LightNetDev/LightNet/pull/224) [`bb11b47`](https://github.com/LightNetDev/LightNet/commit/bb11b47ec257208938d7cac8416ef95b9539d5a8) Thanks [@smn-cds](https://github.com/smn-cds)! - Revert Tailwind CSS back to v3.
+
+## 2.17.1
+
+### Patch Changes
+
+- [#222](https://github.com/LightNetDev/LightNet/pull/222) [`00dd8e9`](https://github.com/LightNetDev/LightNet/commit/00dd8e95a80cdda53c52077ff4caa9c9f6b3b523) Thanks [@smn-cds](https://github.com/smn-cds)! - Fix contrast of more results button.
+
 ## 2.17.0
 
 ### Minor Changes

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.4.0_@types+node@22.13.5_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.4.0_@types+node@22.13.5_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.5.3_@types+node@22.13.10_jiti@2.4.2_lightningcss@1.29.1_rollup@4.36.0_terser@5.39.0_typescript@5.8.2_yaml@2.7.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.5.3_@types+node@22.13.10_jiti@2.4.2_lightningcss@1.29.1_rollup@4.36.0_terser@5.39.0_typescript@5.8.2_yaml@2.7.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.4.0_@types+node@22.13.5_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.4.0_@types+node@22.13.5_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.8_terser@5.39.0_typescript@5.7.3_yaml@2.7.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.5.3_@types+node@22.13.10_jiti@2.4.2_lightningcss@1.29.1_rollup@4.36.0_terser@5.39.0_typescript@5.8.2_yaml@2.7.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.5.3_@types+node@22.13.10_jiti@2.4.2_lightningcss@1.29.1_rollup@4.36.0_terser@5.39.0_typescript@5.8.2_yaml@2.7.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/node_modules/.bin/tailwind

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tailwindcss/lib/cli.js" "$@"
+else
+  exec node  "$basedir/../tailwindcss/lib/cli.js" "$@"
+fi

package/__e2e__/fixtures/basics/node_modules/.bin/tailwindcss

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/tailwindcss@3.4.17/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tailwindcss/lib/cli.js" "$@"
+else
+  exec node  "$basedir/../tailwindcss/lib/cli.js" "$@"
+fi

package/__e2e__/fixtures/basics/node_modules/.bin/tsc

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"

package/__e2e__/fixtures/basics/node_modules/.bin/tsserver

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.7.3/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -5,14 +5,14 @@
   "private": "true",
   "dependencies": {
     "@astrojs/react": "^4.2.1",
-    "@lightnet/decap-admin": "^2.4.0",
-    "@tailwindcss/vite": "^4.0.9",
-    "astro": "^5.4.0",
+    "@astrojs/tailwind": "^6.0.0",
+    "@lightnet/decap-admin": "^2.4.1",
+    "astro": "^5.5.3",
     "lightnet": "^2.17.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "sharp": "^0.33.5",
-    "tailwindcss": "^4.0.9",
-    "typescript": "^5.7.3"
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.2"
   }
 }

package/__e2e__/fixtures/basics/tailwind.config.mjs

@@ -0,0 +1,8 @@
+import { lightnetStyles } from "lightnet/tailwind.config.ts"
+
+/**
+ * @type {import('tailwindcss').Config}
+ */
+export default {
+  presets: [lightnetStyles({ primaryColor: "#14004B" })],
+}

package/exports/utils.ts

@@ -1,2 +1,2 @@
-export * from "../src/utils/paths"
+export { detailsPagePath, searchPagePath } from "../src/utils/paths"
 export { verifySchema, verifySchemaAsync } from "../src/utils/verify-schema"

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "2.17.0",
+  "version": "2.17.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -33,30 +33,30 @@
   },
   "peerDependencies": {
     "@astrojs/react": "^4.1.0",
-    "@tailwindcss/vite": "^4.0.9",
+    "@astrojs/tailwind": "^6.0.0",
     "astro": "^5.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sharp": "^0.33.4",
-    "tailwindcss": "^4.0.9",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.5.3"
   },
   "dependencies": {
     "@iconify-json/mdi": "^1.2.3",
-    "@iconify/tailwind4": "^1.0.6",
+    "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.16",
-    "daisyui": "^5.0.0",
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.0.11",
+    "daisyui": "^4.12.24",
     "fuse.js": "^7.1.0",
-    "i18next": "^24.2.2",
+    "i18next": "^24.2.3",
     "marked": "^15.0.7",
     "yaml": "^2.7.0",
     "zod-validation-error": "^3.4.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.50.1",
-    "@types/node": "^22.13.5",
-    "vitest": "^3.0.7"
+    "@playwright/test": "^1.51.1",
+    "@types/node": "^22.13.10",
+    "vitest": "^3.0.9"
   },
   "scripts": {
     "test": "vitest",

package/src/astro-integration/config.ts

@@ -124,16 +124,6 @@ export const configSchema = z.object({
    * Title of the web site.
    */
   title: z.string(),
-  /**
-   * Defines the primary color for your site.
-   *
-   * The primary color is applied to various UI elements, such as buttons,
-   * links, and hover states. Choose a color that aligns with your brand
-   * and provides good contrast against a white background for accessibility.
-   *
-   * Default: #1E2939 (dark gray)
-   */
-  primaryColor: z.string().default("#1E2939"),
   /**
    * All languages: content languages and site languages.
    */

package/src/astro-integration/integration.ts

@@ -1,6 +1,6 @@
 /// <reference path="../i18n/locals.d.ts" />
 import react from "@astrojs/react"
-import tailwindcss from "@tailwindcss/vite"
+import tailwind from "@astrojs/tailwind"
 import type { AstroIntegration } from "astro"
 
 import { resolveDefaultLocale } from "../i18n/resolve-default-locale"
@@ -58,14 +58,11 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
 
         addMiddleware({ entrypoint: "lightnet/locals", order: "pre" })
 
-        astroConfig.integrations.push(react())
+        astroConfig.integrations.push(tailwind(), react())
 
         updateConfig({
           vite: {
-            plugins: [
-              vitePluginLightnetConfig(config, astroConfig, logger),
-              tailwindcss(),
-            ],
+            plugins: [vitePluginLightnetConfig(config, astroConfig, logger)],
           },
           i18n: {
             defaultLocale: resolveDefaultLocale(config),

package/src/components/CategoriesOverview.astro

@@ -20,7 +20,7 @@ const categories = await getCategories(currentLocale, t)
         {categories.map((category) => (
           <li class="flex max-w-56 grow">
             <a
-              class="shadow-xs flex h-12 w-full items-center justify-center rounded-xl bg-gray-200 p-2 px-8 hover:bg-gray-300 sm:h-14"
+              class="flex h-12 w-full items-center justify-center rounded-xl bg-gray-200 p-2 px-8 shadow-sm hover:bg-gray-300 sm:h-14"
               href={searchPagePath(currentLocale, {
                 category: category.id,
               })}

package/src/components/Gallery.astro

@@ -42,8 +42,8 @@ const { items, layout } = Astro.props
             class="group flex flex-col gap-3"
           >
             <div
-              class="relative overflow-hidden shadow-md outline-gray-400 transition-all duration-75 ease-in-out group-hover:outline-2"
-              class:list={layout === "book" ? "rounded-xs" : "rounded-md"}
+              class="relative overflow-hidden shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+              class:list={layout === "book" ? "rounded-sm" : "rounded-md"}
             >
               <Image
                 class="h-full w-full object-contain"
@@ -88,7 +88,7 @@ const { items, layout } = Astro.props
             class="group flex flex-col gap-3"
           >
             <div
-              class="relative overflow-hidden rounded-md shadow-md outline-gray-400 transition-all duration-75 ease-in-out group-hover:outline-2"
+              class="relative overflow-hidden rounded-md shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
               class:list={[layout === "video" && "aspect-video bg-gray-950"]}
             >
               <Image

package/src/components/Hero.astro

@@ -49,7 +49,7 @@ const subtitleSizes = {
       alt=""
     />
     <div
-      class="bg-radial absolute top-0 flex h-full w-full flex-col items-center justify-center gap-6 from-black/30 to-black/40 p-4 text-center text-gray-50"
+      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center gap-6 from-black/30 to-black/40 p-4 text-center text-gray-50"
       class:list={[className]}
     >
       {

package/src/components/HighlightSection.astro

@@ -53,7 +53,7 @@ const { image, id, title, text, link, className, titleClass, textClass } =
       {
         link && (
           <a
-            class="bg-primary hover:bg-primary/85 shadow-xs inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 text-sm font-bold uppercase text-gray-50 hover:text-gray-100"
+            class="bg-primary hover:bg-primary/85 inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:text-gray-100"
             href={link.href}
           >
             {link.text}

package/src/components/MediaItemList.astro

@@ -38,7 +38,7 @@ const mediaTypes = Object.fromEntries(
                   id: item.id,
                 })
           }
-          class="md:rounded-xs group flex overflow-hidden py-4 transition-colors ease-in-out hover:bg-gray-100 md:py-8"
+          class="group flex overflow-hidden py-4 transition-colors ease-in-out md:rounded-sm md:py-8 md:hover:bg-gray-100"
           class:list={
             item.disabled ? "pointer-events-none cursor-default opacity-50" : ""
           }
@@ -46,7 +46,7 @@ const mediaTypes = Object.fromEntries(
         >
           <div class="flex h-32 w-32 shrink-0 flex-col items-start justify-center">
             <Image
-              class="rounded-xs max-h-32 w-auto max-w-32 object-contain shadow-md"
+              class="max-h-32 w-auto max-w-32 rounded-sm object-contain shadow-md"
               src={item.data.image}
               alt=""
             />
@@ -73,7 +73,7 @@ const mediaTypes = Object.fromEntries(
           </div>
 
           <Icon
-            className="mdi--chevron-right hidden sm:block group-hover:text-primary my-auto ms-2 me-4 shrink-0 text-2xl text-gray-300"
+            className="mdi--chevron-right hidden sm:block md:group-hover:text-primary my-auto ms-2 me-4 shrink-0 text-2xl text-gray-300"
             flipIcon={direction === "rtl"}
             ariaLabel=""
           />

package/src/i18n/translations/README.md

@@ -1,4 +1,4 @@
-# LightNet Translations
+# LightNet Built-in Translations
 
 This folder contains all the built-in translations for LightNet.
 Check the [translation status](TRANSLATION-STATUS.md) for an overview of completed translations and pending work.

package/src/layouts/Page.astro

@@ -1,6 +1,4 @@
 ---
-import "./global.css"
-
 import { ClientRouter } from "astro:transitions"
 import config from "virtual:lightnet/config"
 
@@ -20,7 +18,6 @@ const configTitle = Astro.locals.i18n.t(config.title)
 
 const { currentLocale } = Astro.locals.i18n
 const language = resolveLanguage(currentLocale)
-const primaryColor = config.primaryColor
 ---
 
 <!doctype html>
@@ -51,9 +48,5 @@ const primaryColor = config.primaryColor
       <slot />
     </main>
     <PreloadReact client:idle />
-  </body><style is:global define:vars={{ primaryColor }}>
-    :root {
-      --primary-color: var(--primaryColor);
-    }
-  </style>
+  </body>
 </html>

package/src/pages/details-page/components/Cover.astro

@@ -15,8 +15,8 @@ const isPortraitImage = image.height > image.width
 ---
 
 <div
-  class="shadow-xs relative shrink-0 overflow-hidden"
-  class:list={style === "book" ? "rounded-xs" : "rounded-md"}
+  class="relative shrink-0 overflow-hidden shadow-sm"
+  class:list={style === "book" ? "rounded-sm" : "rounded-md"}
 >
   <Image
     class:list={isPortraitImage ? "h-52 w-auto sm:h-72" : "h-auto w-52 sm:w-72"}

package/src/pages/details-page/components/OpenButton.astro

@@ -13,7 +13,7 @@ const content = createContentMetadata(item.data.content[0])
 ---
 
 <a
-  class="shadow-xs flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold uppercase text-gray-100 hover:bg-gray-950 hover:text-gray-300"
+  class="flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold uppercase text-gray-100 shadow-sm hover:bg-gray-950 hover:text-gray-300"
   href={content.url}
   target={content.target}
   hreflang={item.data.language}

package/src/pages/details-page/components/ShareButton.astro

@@ -7,7 +7,7 @@ interface Props {
 ---
 
 <button
-  class="shadow-xs flex cursor-pointer items-center justify-center gap-2 rounded-2xl bg-gray-200 px-6 py-3 font-bold uppercase text-gray-600 hover:bg-gray-300"
+  class="flex cursor-pointer items-center justify-center gap-2 rounded-2xl bg-gray-200 px-6 py-3 font-bold uppercase text-gray-600 shadow-sm hover:bg-gray-300"
   class:list={[Astro.props.className]}
   id="share-btn"
   ><Icon className="mdi--share-variant-outline" ariaLabel="" />

package/src/pages/search-page/components/ResultList.tsx

@@ -52,11 +52,11 @@ export default function ResultList({
               href={detailsPagePath(locale, {
                 id: item.id,
               })}
-              className="md:rounded-xs group flex overflow-hidden py-6 transition-colors ease-in-out hover:bg-gray-100 md:py-10"
+              className="group flex overflow-hidden py-6 transition-colors ease-in-out md:rounded-sm md:py-10 md:hover:bg-gray-100"
             >
               <div className="flex h-36 w-36 shrink-0 flex-col items-start justify-center">
                 <img
-                  className="rounded-xs max-h-36 w-auto max-w-36 object-contain shadow-md"
+                  className="max-h-36 w-auto max-w-36 rounded-sm object-contain shadow-md"
                   src={item.image.src}
                   width={item.image.width}
                   height={item.image.height}
@@ -99,7 +99,7 @@ export default function ResultList({
 
                 <div className="hidden sm:block">
                   <p
-                    className="line-clamp-3 max-w-screen-sm text-xs text-gray-500"
+                    className="line-clamp-3 max-w-screen-sm text-xs"
                     lang={item.language}
                     dir={languages[item.language].direction}
                   >
@@ -108,7 +108,7 @@ export default function ResultList({
                 </div>
               </div>
               <Icon
-                className="mdi--chevron-right group-hover:text-primary my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+                className="mdi--chevron-right md:group-hover:text-primary my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
                 flipIcon={direction === "rtl"}
                 ariaLabel=""
               />
@@ -121,7 +121,7 @@ export default function ResultList({
           <div className="dy-divider">
             <button
               type="button"
-              className="dy-btn"
+              className="dy-btn text-gray-700"
               onClick={() => setMaxItems(maxItems + PAGE_SIZE)}
             >
               {t("ln.search.more-results")}

package/src/pages/search-page/components/SearchFilter.tsx

@@ -95,7 +95,7 @@ export default function SearchFilter({
 
   return (
     <>
-      <label className="dy-input dy-input-md dy-input-bordered mb-2 flex w-full items-center gap-2">
+      <label className="dy-input dy-input-bordered mb-2 flex items-center gap-2">
         <input
           type="search"
           className="grow"

package/src/pages/search-page/components/Select.tsx

@@ -13,7 +13,7 @@ export default function Select({
 }: Props) {
   return (
     <label className="dy-form-control">
-      <span className="mb-1 mt-2 block text-xs font-bold uppercase text-gray-500">
+      <span className="my-2 block text-xs font-bold uppercase text-gray-500">
         {label}
       </span>
       <select

package/src/pages/search-page/hooks/use-debounce.ts

@@ -4,7 +4,7 @@ export function useDebounce<T>(
   callback: (...args: T[]) => unknown,
   time: number,
 ) {
-  const timeout = useRef<number>()
+  const timeout = useRef<number>(undefined)
   return (...args: T[]) => {
     if (timeout.current) {
       window.clearTimeout(timeout.current)

package/src/pages/search-page/hooks/use-search.ts

@@ -11,7 +11,7 @@ export type SearchQuery = {
 }
 
 export function useSearch() {
-  const fuse = useRef<Fuse<SearchItem>>()
+  const fuse = useRef<Fuse<SearchItem>>(undefined)
   const [allItems, setAllItems] = useState<SearchItem[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [query, setQuery] = useState<SearchQuery>({})

package/src/utils/paths.ts

@@ -9,32 +9,33 @@ export function detailsPagePath(
   locale: string | undefined,
   { id }: { id: string },
 ) {
-  return localizePath(locale, `/media/${id}`)
+  return `/${locale}/media/${id}`
 }
 
 /**
  * Build path to the search page.
  *
- * @param language current locale
+ * @param locale current locale
  * @param query  search query params
  * @returns path to the search page eg. '/en/media?category=comics'
  */
 export function searchPagePath(
-  language: string | undefined,
+  locale: string | undefined,
   filter?: { category: string },
 ) {
   const searchParams = new URLSearchParams()
   if (filter?.category) {
     searchParams.append("category", filter.category)
   }
-  return localizePath(
-    language,
-    `/media${searchParams.size ? `?${searchParams.toString()}` : ""}`,
-  )
+  const query = searchParams.size ? `?${searchParams.toString()}` : ""
+  return `/${locale}/media${query}`
 }
 
 /**
  * Resolve a path for a given locale.
+ * Use this if you create paths based on user's input. In
+ * cases where you control the full path, JavaScript template strings
+ * are the easier solution to create a localized path.
  *
  * @param locale current locale
  * @param path to be resolved. A '/' at the beginning of the path is not required.

package/tailwind.config.ts

@@ -0,0 +1,56 @@
+import { addIconSelectors } from "@iconify/tailwind"
+import typography from "@tailwindcss/typography"
+import daisyui from "daisyui"
+import type { Config } from "tailwindcss"
+
+const DEFAULT_COLOR_PRIMARY = "#E6B15C"
+
+export function lightnetStyles({
+  primaryColor,
+}: {
+  primaryColor?: string
+}): Partial<Config> {
+  const primary = primaryColor ?? DEFAULT_COLOR_PRIMARY
+  return {
+    content: [
+      "./node_modules/lightnet/src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
+      "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
+      "./src/content/media-types/*.json",
+    ],
+    theme: {
+      extend: {
+        colors: {
+          primary,
+        },
+        backgroundImage: {
+          "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        },
+      },
+    },
+    daisyui: {
+      themes: [
+        {
+          lightnet: {
+            primary,
+            secondary: primary,
+            accent: primary,
+            neutral: "#030712",
+            "base-100": "#f9fafb",
+
+            "--rounded-box": "0.375rem", // border radius rounded-box utility class, used in card and other large boxes
+            "--rounded-btn": "0.375rem", // border radius rounded-btn utility class, used in buttons and similar element
+            "--rounded-badge": "0.375rem", // border radius rounded-badge utility class, used in badges and similar
+            "--tab-radius": "0.375rem", // border radius of tabs
+          },
+        },
+      ],
+      base: false, // applies background color and foreground color for root element by default
+      utils: true, // adds responsive and modifier utility classes
+      logs: false, // Shows info about daisyUI version and used config in the console when building your CSS
+      prefix: "dy-",
+    },
+    plugins: [typography, daisyui, addIconSelectors(["mdi"])],
+  }
+}
+
+export default lightnetStyles({})

package/src/layouts/color-overrides.css

@@ -1,267 +0,0 @@
-/* We override Tailwind CSS's oklch colors because 
-oklch is not yet widely supported by all browsers. */
-@theme {
-  --color-gray-50: #f9fafb;
-  --color-gray-100: #f3f4f6;
-  --color-gray-200: #e5e7eb;
-  --color-gray-300: #d1d5db;
-  --color-gray-400: #9ca3af;
-  --color-gray-500: #6b7280;
-  --color-gray-600: #4b5563;
-  --color-gray-700: #374151;
-  --color-gray-800: #1f2937;
-  --color-gray-900: #111827;
-  --color-gray-950: #030712;
-
-  --color-red-50: #fef2f2;
-  --color-red-100: #fee2e2;
-  --color-red-200: #fecaca;
-  --color-red-300: #fca5a5;
-  --color-red-400: #f87171;
-  --color-red-500: #ef4444;
-  --color-red-600: #dc2626;
-  --color-red-700: #b91c1c;
-  --color-red-800: #991b1b;
-  --color-red-900: #7f1d1d;
-  --color-red-950: #450a0a;
-
-  --color-orange-50: #fff7ed;
-  --color-orange-100: #ffedd5;
-  --color-orange-200: #fed7aa;
-  --color-orange-300: #fdba74;
-  --color-orange-400: #fb923c;
-  --color-orange-500: #f97316;
-  --color-orange-600: #ea580c;
-  --color-orange-700: #c2410c;
-  --color-orange-800: #9a3412;
-  --color-orange-900: #7c2d12;
-  --color-orange-950: #431407;
-
-  --color-amber-50: #fffbeb;
-  --color-amber-100: #fef3c7;
-  --color-amber-200: #fde68a;
-  --color-amber-300: #fcd34d;
-  --color-amber-400: #fbbf24;
-  --color-amber-500: #f59e0b;
-  --color-amber-600: #d97706;
-  --color-amber-700: #b45309;
-  --color-amber-800: #92400e;
-  --color-amber-900: #78350f;
-  --color-amber-950: #451a03;
-
-  --color-yellow-50: #fefce8;
-  --color-yellow-100: #fef9c3;
-  --color-yellow-200: #fef08a;
-  --color-yellow-300: #fde047;
-  --color-yellow-400: #facc15;
-  --color-yellow-500: #eab308;
-  --color-yellow-600: #ca8a04;
-  --color-yellow-700: #a16207;
-  --color-yellow-800: #854d0e;
-  --color-yellow-900: #713f12;
-  --color-yellow-950: #422006;
-
-  --color-lime-50: #f7fee7;
-  --color-lime-100: #ecfccb;
-  --color-lime-200: #d9f99d;
-  --color-lime-300: #bef264;
-  --color-lime-400: #a3e635;
-  --color-lime-500: #84cc16;
-  --color-lime-600: #65a30d;
-  --color-lime-700: #4d7c0f;
-  --color-lime-800: #3f6212;
-  --color-lime-900: #365314;
-  --color-lime-950: #1a2e05;
-
-  --color-green-50: #f0fdf4;
-  --color-green-100: #dcfce7;
-  --color-green-200: #bbf7d0;
-  --color-green-300: #86efac;
-  --color-green-400: #4ade80;
-  --color-green-500: #22c55e;
-  --color-green-600: #16a34a;
-  --color-green-700: #15803d;
-  --color-green-800: #166534;
-  --color-green-900: #14532d;
-  --color-green-950: #052e16;
-
-  --color-emerald-50: #ecfdf5;
-  --color-emerald-100: #d1fae5;
-  --color-emerald-200: #a7f3d0;
-  --color-emerald-300: #6ee7b7;
-  --color-emerald-400: #34d399;
-  --color-emerald-500: #10b981;
-  --color-emerald-600: #059669;
-  --color-emerald-700: #047857;
-  --color-emerald-800: #065f46;
-  --color-emerald-900: #064e3b;
-  --color-emerald-950: #022c22;
-
-  --color-teal-50: #f0fdfa;
-  --color-teal-100: #ccfbf1;
-  --color-teal-200: #99f6e4;
-  --color-teal-300: #5eead4;
-  --color-teal-400: #2dd4bf;
-  --color-teal-500: #14b8a6;
-  --color-teal-600: #0d9488;
-  --color-teal-700: #0f766e;
-  --color-teal-800: #115e59;
-  --color-teal-900: #134e4a;
-  --color-teal-950: #042f2e;
-
-  --color-cyan-50: #ecfeff;
-  --color-cyan-100: #cffafe;
-  --color-cyan-200: #a5f3fc;
-  --color-cyan-300: #67e8f9;
-  --color-cyan-400: #22d3ee;
-  --color-cyan-500: #06b6d4;
-  --color-cyan-600: #0891b2;
-  --color-cyan-700: #0e7490;
-  --color-cyan-800: #155e75;
-  --color-cyan-900: #164e63;
-  --color-cyan-950: #083344;
-
-  --color-sky-50: #f0f9ff;
-  --color-sky-100: #e0f2fe;
-  --color-sky-200: #bae6fd;
-  --color-sky-300: #7dd3fc;
-  --color-sky-400: #38bdf8;
-  --color-sky-500: #0ea5e9;
-  --color-sky-600: #0284c7;
-  --color-sky-700: #0369a1;
-  --color-sky-800: #075985;
-  --color-sky-900: #0c4a6e;
-  --color-sky-950: #082f49;
-
-  --color-blue-50: #eff6ff;
-  --color-blue-100: #dbeafe;
-  --color-blue-200: #bfdbfe;
-  --color-blue-300: #93c5fd;
-  --color-blue-400: #60a5fa;
-  --color-blue-500: #3b82f6;
-  --color-blue-600: #2563eb;
-  --color-blue-700: #1d4ed8;
-  --color-blue-800: #1e40af;
-  --color-blue-900: #1e3a8a;
-  --color-blue-950: #172554;
-
-  --color-indigo-50: #eef2ff;
-  --color-indigo-100: #e0e7ff;
-  --color-indigo-200: #c7d2fe;
-  --color-indigo-300: #a5b4fc;
-  --color-indigo-400: #818cf8;
-  --color-indigo-500: #6366f1;
-  --color-indigo-600: #4f46e5;
-  --color-indigo-700: #4338ca;
-  --color-indigo-800: #3730a3;
-  --color-indigo-900: #312e81;
-  --color-indigo-950: #1e1b4b;
-
-  --color-violet-50: #f5f3ff;
-  --color-violet-100: #ede9fe;
-  --color-violet-200: #ddd6fe;
-  --color-violet-300: #c4b5fd;
-  --color-violet-400: #a78bfa;
-  --color-violet-500: #8b5cf6;
-  --color-violet-600: #7c3aed;
-  --color-violet-700: #6d28d9;
-  --color-violet-800: #5b21b6;
-  --color-violet-900: #4c1d95;
-  --color-violet-950: #2e1065;
-
-  --color-purple-50: #faf5ff;
-  --color-purple-100: #f3e8ff;
-  --color-purple-200: #e9d5ff;
-  --color-purple-300: #d8b4fe;
-  --color-purple-400: #c084fc;
-  --color-purple-500: #a855f7;
-  --color-purple-600: #9333ea;
-  --color-purple-700: #7e22ce;
-  --color-purple-800: #6b21a8;
-  --color-purple-900: #581c87;
-  --color-purple-950: #3b0764;
-
-  --color-fuchsia-50: #fdf4ff;
-  --color-fuchsia-100: #fae8ff;
-  --color-fuchsia-200: #f5d0fe;
-  --color-fuchsia-300: #f0abfc;
-  --color-fuchsia-400: #e879f9;
-  --color-fuchsia-500: #d946ef;
-  --color-fuchsia-600: #c026d3;
-  --color-fuchsia-700: #a21caf;
-  --color-fuchsia-800: #86198f;
-  --color-fuchsia-900: #701a75;
-  --color-fuchsia-950: #4a044e;
-
-  --color-pink-50: #fdf2f8;
-  --color-pink-100: #fce7f3;
-  --color-pink-200: #fbcfe8;
-  --color-pink-300: #f9a8d4;
-  --color-pink-400: #f472b6;
-  --color-pink-500: #ec4899;
-  --color-pink-600: #db2777;
-  --color-pink-700: #be185d;
-  --color-pink-800: #9d174d;
-  --color-pink-900: #831843;
-  --color-pink-950: #500724;
-
-  --color-rose-50: #fff1f2;
-  --color-rose-100: #ffe4e6;
-  --color-rose-200: #fecdd3;
-  --color-rose-300: #fda4af;
-  --color-rose-400: #fb7185;
-  --color-rose-500: #f43f5e;
-  --color-rose-600: #e11d48;
-  --color-rose-700: #be123c;
-  --color-rose-800: #9f1239;
-  --color-rose-900: #881337;
-  --color-rose-950: #4c0519;
-
-  --color-slate-50: #f8fafc;
-  --color-slate-100: #f1f5f9;
-  --color-slate-200: #e2e8f0;
-  --color-slate-300: #cbd5e1;
-  --color-slate-400: #94a3b8;
-  --color-slate-500: #64748b;
-  --color-slate-600: #475569;
-  --color-slate-700: #334155;
-  --color-slate-800: #1e293b;
-  --color-slate-900: #0f172a;
-  --color-slate-950: #020617;
-
-  --color-zinc-50: #fafafa;
-  --color-zinc-100: #f4f4f5;
-  --color-zinc-200: #e4e4e7;
-  --color-zinc-300: #d4d4d8;
-  --color-zinc-400: #a1a1aa;
-  --color-zinc-500: #71717a;
-  --color-zinc-600: #52525b;
-  --color-zinc-700: #3f3f46;
-  --color-zinc-800: #27272a;
-  --color-zinc-900: #18181b;
-  --color-zinc-950: #09090b;
-
-  --color-neutral-50: #fafafa;
-  --color-neutral-100: #f5f5f5;
-  --color-neutral-200: #e5e5e5;
-  --color-neutral-300: #d4d4d4;
-  --color-neutral-400: #a3a3a3;
-  --color-neutral-500: #737373;
-  --color-neutral-600: #525252;
-  --color-neutral-700: #404040;
-  --color-neutral-800: #262626;
-  --color-neutral-900: #171717;
-  --color-neutral-950: #0a0a0a;
-
-  --color-stone-50: #fafaf9;
-  --color-stone-100: #f5f5f4;
-  --color-stone-200: #e7e5e4;
-  --color-stone-300: #d6d3d1;
-  --color-stone-400: #a8a29e;
-  --color-stone-500: #78716c;
-  --color-stone-600: #57534e;
-  --color-stone-700: #44403c;
-  --color-stone-800: #292524;
-  --color-stone-900: #1c1917;
-  --color-stone-950: #0c0a09;
-}

package/src/layouts/global.css

@@ -1,49 +0,0 @@
-@import "tailwindcss";
-@import "./color-overrides.css";
-
-@source "../";
-
-@plugin "@tailwindcss/typography";
-@plugin "@iconify/tailwind4" {
-  prefixes: mdi;
-}
-
-@plugin "daisyui" {
-  prefix: "dy-";
-  logs: false;
-  themes: light --default;
-  exclude: rootcolor scrollbar;
-}
-
-@theme inline {
-  --color-primary: var(--primary-color);
-}
-
-@plugin "daisyui/theme" {
-  name: "light";
-  default: true;
-  --radius-selector: 1rem;
-  --radius-field: 0.375rem;
-  --radius-box: 0.375rem;
-  --color-base-100: #f3f4f6;
-  --color-base-200: #e5e7eb;
-  --color-base-300: #d1d5db;
-  --color-base-content: #9ca3af;
-
-  --color-primary: var(--primary-color);
-  --color-primary-content: #f9fafb;
-  --color-secondary: var(--primary-color);
-  --color-secondary-content: #f9fafb;
-  --color-accent: var(--primary-color);
-  --color-accent-content: #f9fafb;
-  --color-neutral: #4b5563;
-  --color-neutral-content: #f9fafb;
-  --color-info: #0ea5e9;
-  --color-info-content: #f9fafb;
-  --color-success: #16a34a;
-  --color-success-content: #f9fafb;
-  --color-warning: #f97316;
-  --color-warning-content: #fff7ed;
-  --color-error: #dc2626;
-  --color-error-content: #fef2f2;
-}