Custom JS and CSS (#1950)

* First commit for custom styles and JS

* Adjusted classes

* Added ids and classes for services and bookmarks

* Apply suggestions from code review

* Remove mime dependency

* Update settings.json

* Detect custom css / js changes, no refresh

* Added preload to custom scripts and styles so they can load earlier

* Added data attribute name for bookmarks too

* Update [path].js

* code style, revert some pointer changes

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

src/components/services/group.jsx

@@ -14,6 +14,7 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
     <div
       key={services.name}
       className={classNames(
+        "services-group",
         layout?.style === "row" ? "basis-full" : "basis-full md:basis-1/2 lg:basis-1/3 xl:basis-1/4",
         layout?.style !== "row" && fiveColumns ? "3xl:basis-1/5" : "",
         layout?.header === false ? "flex-1 px-1 -my-1" : "flex-1 p-1",
@@ -25,11 +26,11 @@ export default function ServicesGroup({ group, services, layout, fiveColumns, di
           { layout?.header !== false &&
             <Disclosure.Button disabled={disableCollapse} className="flex w-full select-none items-center group">
               {layout?.icon &&
-                <div className="flex-shrink-0 mr-2 w-7 h-7">
+                <div className="flex-shrink-0 mr-2 w-7 h-7 service-group-icon">
                   <ResolvedIcon icon={layout.icon} />
                 </div>
               }
-              <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium">{services.name}</h2>
+              <h2 className="flex text-theme-800 dark:text-theme-300 text-xl font-medium service-group-name">{services.name}</h2>
               <MdKeyboardArrowDown className={classNames(
                 disableCollapse ? 'hidden' : '',
                 'transition-all opacity-0 group-hover:opacity-100 ml-auto text-theme-800 dark:text-theme-300 text-xl',