Merge pull request #287 from devforth/AdminForth/735

Admin forth/735

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/01-branding.md

@@ -183,4 +183,37 @@ auth: {
 //diff-add
   removeBackgroundBlendMode: true,
 }
+```
+
+## Custom items in html head
+
+If you want to add custom elements to the HTML head, you can define them in the configuration:
+
+```ts title='./index.ts'
+customization: {
+  customHeadItems: [
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'stylesheet',
+        href: 'https://example.com/custom.css'
+      }
+    },
+    {
+      tagName: 'script',
+      attributes: {
+        src: 'https://example.com/custom.js',
+        defer: true
+      }
+    },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'theme-color',
+        content: ' #000000'
+      }
+    }
+  ]
+}
+
 ```

adminforth/modules/codeInjector.ts

@@ -545,8 +545,23 @@ class CodeInjector implements ICodeInjector {
           ||
        `/assets/favicon.png`
     );
-    await fs.promises.writeFile(indexHtmlPath, indexHtmlContent);
 
+    // inject heads to index.html
+    const headItems = this.adminforth.config.customization?.customHeadItems;
+    if(headItems){
+      const renderedHead = headItems.map(({ tagName, attributes }) => {
+      const attrs = Object.entries(attributes)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ');
+      const isVoid = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr'].includes(tagName);
+      return isVoid
+        ? `<${tagName} ${attrs}>`
+        : `<${tagName} ${attrs}></${tagName}>`;
+      }).join('\n    ');
+
+      indexHtmlContent = indexHtmlContent.replace("    <!-- /* IMPORTANT:ADMINFORTH HEAD */ -->", `${renderedHead}` );
+    }
+    await fs.promises.writeFile(indexHtmlPath, indexHtmlContent);
 
     /* generate custom routes */
     let homepageMenuItem: AdminForthConfigMenuItem = findHomePage(this.adminforth.config.menu);

adminforth/modules/restApi.ts

@@ -225,6 +225,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           },
           rememberMeDays: this.adminforth.config.auth.rememberMeDays,
           singleTheme: this.adminforth.config.customization.singleTheme,
+          customHeadItems: this.adminforth.config.customization.customHeadItems,
         };
       },
     });
@@ -305,6 +306,7 @@ export default class AdminForthRestAPI implements IAdminForthRestAPI {
           loginPageInjections: this.adminforth.config.customization.loginPageInjections,
           rememberMeDays: this.adminforth.config.auth.rememberMeDays,
           singleTheme: this.adminforth.config.customization.singleTheme,
+          customHeadItems: this.adminforth.config.customization.customHeadItems,
         }
 
         const loggedInPart = {

adminforth/modules/styles.ts

@@ -60,7 +60,14 @@ export const styles = () => ({
     lightButtonsDisabledText: "#f3f4f6", // button disabled text
     lightButtonsIcon: "#333333", // button icon
 
+    lightDropdownButtonsBackground: "#f9fafb", // dropdown button/input background color
+    lightDropownButtonsBorder: "#d1d5db", //border color
+    lightDropdownButtonsText: "#6b7280", //text color
+    lightDropdownButtonsPlaceholderText: "#6b7280", //placeholder text color
 
+    lightDropdownOptionsBackground: "#FFFFFF", //dropdown menu background color
+    lightDropdownOptionsHoverBackground: "#f3f4f6", //dropdown menu hover background color 
+    lightDropdownOptionsText: "#000000", //dropdown menu hover background color
 
     // colors for dark theme
     darkHtml: "#111827",
@@ -102,7 +109,16 @@ export const styles = () => ({
 
     darkForm: "#111111", 
     darkFormBorder: "#222222", 
-    darkFormHeading: "alias:darkListTableHeading" 
+    darkFormHeading: "alias:darkListTableHeading",
+
+    darkDropdownButtonsBackground: "#374151",
+    darkDropownButtonsBorder: "#4b5563",
+    darkDropdownButtonsText: "#ffffff",
+    darkDropdownButtonsPlaceholderText: "#9ca3af",
+
+    darkDropdownOptionsBackground: "#374151",
+    darkDropdownOptionsHoverBackground: "#4b5563",
+    darkDropdownOptionsText: "#9ca3af",
 
   },
   boxShadow: {

adminforth/spa/index.html

@@ -14,7 +14,7 @@
           document.documentElement.classList.remove('dark')
       }
   </script> -->
-
+    <!-- /* IMPORTANT:ADMINFORTH HEAD */ -->
   </head>
   <body class="min-h-screen flex flex-col">
     <div id="app" class="grow bg-lightHtml dark:bg-darkHtml w-full"></div>

adminforth/spa/src/afcl/Select.vue

@@ -10,7 +10,9 @@
         v-model="search"
         @click="inputClick"
         @input="inputInput"
-        class="block w-full pl-3 pr-10 py-2.5 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+        class="block w-full pl-3 pr-10 py-2.5 border border-lightDropownButtonsBorder rounded-md leading-5 bg-lightDropdownButtonsBackground 
+        placeholder-lightDropdownButtonsPlaceholderText text-lightDropdownButtonsText sm:text-sm transition duration-150 ease-in-out dark:bg-darkDropdownButtonsBackground dark:border-darkDropownButtonsBorder dark:placeholder-darkDropdownButtonsPlaceholderText
+      dark:text-darkDropdownButtonsText focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
         autocomplete="off" data-custom="no-autofill"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
@@ -36,19 +38,19 @@
     </div>
     <teleport to="body" v-if="teleportToBody && showDropdown">
       <div ref="dropdownEl" :style="getDropdownPosition" :class="{'shadow-none': isTop}"
-        class="fixed z-[5] w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
+        class="fixed z-[5] w-full bg-lightDropdownOptionsBackground shadow-lg dark:shadow-black dark:bg-darkDropdownOptionsBackground
           dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
         <div
           v-for="item in filteredItems"
           :key="item.value"
-          class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400"
+          class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground text-lightDropdownOptionsText dark:text-darkDropdownOptionsText"
           :class="{ 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity': selectedItems.includes(item) }"
           @click="toogleItem(item)"
         >
           <slot name="item" :option="item"></slot>
           <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
         </div>
-        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
+        <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
           {{ options.length ? $t('No results found') : $t('No items here') }}
         </div>
 
@@ -59,22 +61,22 @@
     </teleport>
 
     <div v-if="!teleportToBody && showDropdown" ref="dropdownEl" :style="dropdownStyle" :class="{'shadow-none': isTop}"
-      class="absolute z-10 mt-1 w-full bg-white shadow-lg dark:shadow-black dark:bg-gray-700 
+      class="absolute z-10 mt-1 w-full bg-lightDropdownOptionsBackground shadow-lg text-lightDropdownOptionsText dark:shadow-black dark:bg-darkDropdownOptionsBackground
         dark:border-gray-600 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm max-h-48">
       <div
         v-for="item in filteredItems"
         :key="item.value"
-        class="px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-400"
+        class="px-4 py-2 cursor-pointer hover:bg-lightDropdownOptionsHoverBackground dark:hover:bg-darkDropdownOptionsHoverBackground dark:text-darkDropdownOptionsText"
         :class="{ 'bg-lightPrimaryOpacity dark:bg-darkPrimaryOpacity': selectedItems.includes(item) }"
         @click="toogleItem(item)"
       >
         <slot name="item" :option="item"></slot>
         <label v-if="!$slots.item" :for="item.value">{{ item.label }}</label>
       </div>
-      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-gray-400 dark:text-gray-300">
+      <div v-if="!filteredItems.length" class="px-4 py-2 cursor-pointer text-lightDropdownOptionsText dark:text-darkDropdownOptionsText">
         {{ options.length ? $t('No results found') : $t('No items here') }}
       </div>
-      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-gray-400">
+      <div v-if="$slots['extra-item']"  class="px-4 py-2 dark:text-darkDropdownOptionsText">
         <slot name="extra-item"></slot>
       </div>
 

adminforth/spa/src/spa_types/core.ts

@@ -41,6 +41,11 @@ export type CoreConfig = {
         show?: string,
         list?: string,
     } | string,
+
+    customHeadItems?: {
+        tagName: string;
+        attributes: { [key: string]: string | boolean };
+    }[],
 }
 
 

adminforth/types/Back.ts

@@ -764,6 +764,16 @@ interface AdminForthInputConfigCustomization {
     sidebar?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
     everyPageBottom?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
+
+  /**
+  * Allows adding custom elements (e.g., <link>, <script>, <meta>) to the <head> of the HTML document.
+  * Each item must include a tag name and a set of attributes.
+  */
+  customHeadItems?: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+  }[];
+
 }
 
 export interface AdminForthActionInput {
@@ -1076,6 +1086,12 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
     sidebar: Array<AdminForthComponentDeclarationFull>,
     everyPageBottom: Array<AdminForthComponentDeclarationFull>,
   },
+
+  customHeadItems?: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+  }[];
+  
 }
 
 export interface AdminForthConfig extends Omit<AdminForthInputConfig, 'customization' | 'resources'> {

adminforth/types/Common.ts

@@ -1082,7 +1082,11 @@ export interface AdminForthConfigForFrontend {
     header: Array<AdminForthComponentDeclarationFull>,
     sidebar: Array<AdminForthComponentDeclarationFull>,
     everyPageBottom: Array<AdminForthComponentDeclarationFull>,
-  }
+  },
+  customHeadItems?: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+  }[],  
 }
 
 export interface GetBaseConfigResponse {