Include Client Lib Categories - Cumstom code

Create class which extends WCMUsePojo

final SlingBindings bindings =

        (SlingBindings) slingRequest.getAttribute(SlingBindings.class.getName());

    if (null == bindings) {

      LOGGER.debug("Bindings is null {{}}", "");

      return;

    }

    final SlingScriptHelper slingScriptHelper =

        (SlingScriptHelper) bindings.get(SlingBindings.SLING);

    if (null == slingScriptHelper) {

      LOGGER.debug("SlingScriptHelper is null {{}}", "");

      return;

    }

    htmlLibraryManager = slingScriptHelper.getService(HtmlLibraryManager.class);

    clientlibspreload = new ArrayList<>();

    fontsPath = new ArrayList<>();

    resource = resourceResolver.resolve(currentStyle.getPath());

    currentPolicyProperties = resource.getValueMap();

    final Object clientlibspreloadObj = currentPolicyProperties.get("clientlibspreload");

if (null != clientlibspreloadObj) {

      addToClientLibList(clientlibspreloadObj);

    }

  private void addToClientLibList(final Object clientlibspreloadObj) {

    if (clientlibspreloadObj instanceof String) {

      final String[] authoredClientibs = new String[1];

      authoredClientibs[0] = clientlibspreloadObj.toString();

      getDetails(authoredClientibs);

    } else if (clientlibspreloadObj instanceof String[]) {

      final String[] authoredClientibs = (String[]) clientlibspreloadObj;

      getDetails(authoredClientibs);

    }

  }

public void getDetails(final String[] categories) {

    if (null == htmlLibraryManager) {

      LOGGER.debug("htmlLibraryManager is null {{}}", "");

      return;

    }

    final Collection<ClientLibrary> libs1 =

        htmlLibraryManager.getLibraries(categories, LibraryType.CSS, false, false);

    // Iterate all CSS inside clientlibs

    for (final ClientLibrary lib : libs1) {

      String cssPath =

          lib.getIncludePath(LibraryType.CSS, htmlLibraryManager.isMinifyEnabled());

      cssPath = updateSourceFormat(cssPath);

      final LinkAttributesBean linkObj = setAttributes("style", cssPath, relValue, "text/css");

      clientlibspreload.add(linkObj);

    }

    final Collection<ClientLibrary> libs2 =

        htmlLibraryManager.getLibraries(categories, LibraryType.JS, false, false);

    // Iterate all JS inside clientlibs

    for (final ClientLibrary lib : libs2) {

      String jsPath =

          lib.getIncludePath(LibraryType.JS, htmlLibraryManager.isMinifyEnabled());

      jsPath = updateSourceFormat(jsPath);

      final LinkAttributesBean linkObj =

          setAttributes("script", jsPath, relValue, "text/javascript");

      clientlibspreload.add(linkObj);

    }

  }

  private String calculateMd5(final HtmlLibrary htmlLibrary, final boolean isMinified)

      throws IOException {

    InputStream input = null;

    try {

      input = htmlLibrary.getInputStream(isMinified);

      return DigestUtils.md5Hex(ByteStreams.toByteArray(input));

    } finally {

      if (null != input) {

        input.close();

      }

    }

  }

private String updateSourceFormat(final String path) {

    String libraryPath = StringUtils.isEmpty(path) ? StringUtils.EMPTY : path;

    if (libraryPath.endsWith(".css")) {

      libraryPath = getMd5ApendedValue(LibraryType.CSS, libraryPath);

    } else if (libraryPath.endsWith(".js")) {

      libraryPath = getMd5ApendedValue(LibraryType.JS, libraryPath);

    }

    if (libraryPath.contains("/apps/")) {

      libraryPath = libraryPath.replace("/apps/", "/etc.clientlibs/");

    } else if (libraryPath.contains("/etc/clientlibs")) {

      libraryPath = libraryPath.replace("/etc/clientlibs", "/etc.clientlibs/");

    }

    return libraryPath;

  }

private String getMd5ApendedValue(final LibraryType type, final String path) {

    String md5 = StringUtils.EMPTY;

    boolean appendMinSelector = false;

    String libraryPath = StringUtils.substringBeforeLast(path, ".");

    final String extn = StringUtils.substringAfterLast(path, ".");

    if (libraryPath.endsWith(".min")) {

      appendMinSelector = true;

      libraryPath = StringUtils.substringBeforeLast(libraryPath, ".");

    }

    final HtmlLibrary htmlLibrary = htmlLibraryManager.getLibrary(type, libraryPath);

    try {

      md5 = calculateMd5(htmlLibrary, appendMinSelector);

    } catch (final IOException e) {

      LOGGER.info("IO Exception while getting getMd5Value {}", "");

    }

    final StringBuilder builder = new StringBuilder();

    if (StringUtils.isNotBlank(md5)) {

      builder.append(libraryPath);

      builder.append(".");

      builder.append(md5);

      builder.append(".");

      builder.append(extn);

    } else {

      builder.append(libraryPath);

      builder.append(".");

      builder.append(extn);

    }

    return builder.toString();

  }

In Page component head.html

<sly data-sly-use.preloadModel="${'pom.core.models.PreloadHelper'}" data-sly-unwrap/>  

      <sly data-sly-list="${preloadModel.clientlibspreload}">

          <link rel="${item.rel}" href="${item.href}" as="${item.as}" type="${item.type}">

      </sly>

      <sly data-sly-list="${preloadModel.fontsPath}">

         <link rel="${item.rel}" href="${item.href}" as="${item.as}" type="${item.type}" crossorigin="anonymous">

      </sly>

Also to add new custom client lib field overlay  /apps/core/wcm/components/page/v2/page/cq:design_dialog